/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LOGIN PAGE - Component-specific styles only */
/* Uses global .auth-* classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Login card specific width */
.login-card[b-tdxhk5owl8] {
width: 420px;
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* REGISTER PAGE – 3-panel layout inside shared .auth-container */
/* Green gradient background provided by .auth-container in app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Parent: flex column so margin:auto works vertically ───────────────── */
.admin-content[b-jgxux5wdke] {
display: flex;
flex-direction: column;
min-height: 100%;
}
/* ── Inner page wrapper ────────────────────────────────────────────────── */
.register-page[b-jgxux5wdke] {
width: 100%;
max-width: 1400px;
margin: auto auto 110px auto;
padding: 24px 32px;
background: #bbf7d0;
}
.register-title[b-jgxux5wdke] {
font-size: 1.5rem;
font-weight: 600;
color: #022c22;
margin: 0 0 20px;
}
.register-errors[b-jgxux5wdke] {
margin-bottom: 16px;
}
/* ── 3-column panel layout ─────────────────────────────────────────────── */
.register-layout[b-jgxux5wdke] {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 24px;
align-items: start;
}
/* ── Section panels (frosted glass – matches Login card) ───────────────── */
.register-panel[b-jgxux5wdke] {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 20px 24px;
}
.register-section-title[b-jgxux5wdke] {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: #0f766e;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid #d1fae5;
}
/* ── 2-column sub-grid inside Personal Information ─────────────────────── */
.register-panel-grid[b-jgxux5wdke] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.register-field-full[b-jgxux5wdke] {
grid-column: 1 / -1;
}
/* ── Compact field overrides ────────────────────────────────────────────── */
.auth-field[b-jgxux5wdke] {
margin-bottom: 10px;
}
.auth-label[b-jgxux5wdke] {
margin-bottom: 4px;
font-size: var(--text-sm);
}
/* ::deep reaches into InputText / InputDate / InputSelect rendered output */
[b-jgxux5wdke] .auth-input {
padding: 10px 12px;
}
/* ── Role checkbox grid ─────────────────────────────────────────────────── */
.register-role-grid[b-jgxux5wdke] {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.register-role-item[b-jgxux5wdke] {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: var(--font-normal);
color: #1e293b;
cursor: pointer;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
transition: all 0.15s ease;
}
.register-role-item:hover[b-jgxux5wdke] {
background: #f0fdf4;
border-color: #0f766e;
}
.register-role-item input[type="checkbox"][b-jgxux5wdke] {
width: 16px;
height: 16px;
accent-color: #0f766e;
cursor: pointer;
}
/* ── Submit / Back button row ───────────────────────────────────────────── */
.register-actions[b-jgxux5wdke] {
margin-top: 24px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.register-back-button[b-jgxux5wdke] {
margin-right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
width: 120px;
font-size: var(--text-md);
font-family: var(--font-primary);
font-weight: var(--font-semibold);
color: #0f766e;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid #0f766e;
border-radius: 8px;
padding: 0 24px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
box-sizing: border-box;
box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.1);
}
.register-back-button:hover[b-jgxux5wdke] {
background: linear-gradient(135deg, #0f766e 0%, #15803d 100%);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 12px -2px rgba(15, 118, 110, 0.4);
}
.register-back-button:active[b-jgxux5wdke] {
transform: translateY(0);
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
/*@media (max-width: 1024px) {
.register-layout {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.register-page {
padding: 16px;
}
.register-layout {
grid-template-columns: 1fr;
}
.register-panel-grid {
grid-template-columns: 1fr;
}
}*/
/* Additional styles from code block */
/* ── Button styles ──────────────────────────────────────────────────────── */
[b-jgxux5wdke] .auth-button {
height: 44px;
}
/* /Components/Interactive/AddCustomerForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER DETAIL TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BASE FONT SIZE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.admin-content[b-7u38sld6g3] {
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* UPPER FORM SECTION - Bigger text */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container .lbl[b-7u38sld6g3],
.form-container .ilbl[b-7u38sld6g3] {
font-size: 16px;
}
.form-container .tbox[b-7u38sld6g3],
.form-container select.tbox[b-7u38sld6g3] {
font-size: 16px;
height: 28px;
padding: 2px 6px;
}
.form-container .btn-green[b-7u38sld6g3],
.form-container .btn-gray[b-7u38sld6g3] {
font-size: 16px;
height: 28px;
padding: 2px 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FORM CONTAINER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container[b-7u38sld6g3] {
display: flex;
gap: 0;
background: #fff;
border: 1px solid #d1d5db;
padding: 6px;
font-size: 16px;
}
.form-left[b-7u38sld6g3] {
flex: 1;
display: grid;
grid-template-columns: 130px 160px 360px 90px 180px 120px 220px 450px;
gap: 4px 5px;
align-items: center;
}
.form-left > .ilbl[b-7u38sld6g3] {
text-align: right;
padding-right: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PROFILE SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-profile[b-7u38sld6g3] {
width: 160px;
display: flex;
flex-direction: column;
gap: 3px;
border-left: 1px solid #d1d5db;
padding-left: 8px;
align-items: center;
}
.profile-img[b-7u38sld6g3] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #0f766e;
object-fit: cover;
margin-top: 4px;
}
.default-avatar.profile-img[b-7u38sld6g3] {
background-size: 60px 60px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MEDICAL SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.medical-section[b-7u38sld6g3] {
padding: 4px 8px;
background: #fefce8;
border: 1px solid #d1d5db;
border-top: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 3px;
font-size: 16px;
white-space: nowrap;
overflow: visible;
}
.medical-section .lbl[b-7u38sld6g3] {
flex-shrink: 0;
white-space: nowrap;
}
.medical-section .chk-item[b-7u38sld6g3] {
flex-shrink: 0;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NOTES SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.notes-section[b-7u38sld6g3] {
padding: 4px 8px;
background: #fff;
border: 1px solid #d1d5db;
border-top: none;
display: grid;
grid-template-columns: 90px 1fr;
gap: 4px 5px;
align-items: center;
font-size: 16px;
}
.notes-section .lbl[b-7u38sld6g3] {
font-size: 16px;
}
.notes-section .tbox[b-7u38sld6g3] {
font-size: 16px;
height: 28px;
}
.last-visit-row[b-7u38sld6g3] {
grid-column: 1 / -1;
padding: 3px 0;
color: #374151;
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-row[b-7u38sld6g3] {
display: flex;
justify-content: space-between;
padding: 4px 0;
margin: 4px 0;
}
.action-row .btn-green[b-7u38sld6g3]{
font-size: 12px;
height: 20px;
}
.action-row .btn-gray[b-7u38sld6g3] {
font-size: 18px;
height: 36px;
padding: 5px 10px;
}
.action-left[b-7u38sld6g3],
.action-right[b-7u38sld6g3] {
display: flex;
gap: 3px;
align-items: center;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SUMMARY ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.summary-row[b-7u38sld6g3] {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 2px solid #0f766e;
margin-bottom: 3px;
color: #374151;
font-size: 12px;
}
.summary-amounts[b-7u38sld6g3] {
text-align: right;
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATA TABLE OVERRIDES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table[b-7u38sld6g3] {
font-size: 12px;
}
.data-table th[b-7u38sld6g3] {
font-size: 12px;
padding: 3px;
}
.data-table td[b-7u38sld6g3] {
font-size: 12px;
padding: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TABLE - Center align columns 5-14 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table td:nth-child(n+5):nth-child(-n+14)[b-7u38sld6g3] {
text-align: center;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* VISIT CELL */
/* ═══════════════════════════════════════════════════════════════════════════ */
.visit-cell[b-7u38sld6g3] {
background: #ecfdf5 !important;
text-align: center;
vertical-align: middle !important;
border-right: 2px solid #0f766e !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT CELL ELEMENTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.by-text[b-7u38sld6g3] {
color: #6b7280;
font-style: italic;
font-size: 11px;
}
.stage-row[b-7u38sld6g3] {
display: flex;
align-items: center;
gap: 3px;
margin: 2px 0;
}
.stage-badge[b-7u38sld6g3] {
display: inline-block;
padding: 2px 6px;
background-color: #10b981;
border-radius: 3px;
font-size: 11px;
text-decoration: none;
color: #000;
cursor: pointer;
transition: background-color 0.15s ease;
}
.stage-badge:hover[b-7u38sld6g3] {
background-color: #f97316;
text-decoration: none;
}
.progress-badge[b-7u38sld6g3] {
background: #6b7280;
color: #fff;
padding: 1px 4px;
font-size: 10px;
border-radius: 2px;
}
.date-badge[b-7u38sld6g3] {
background: #e5e7eb;
padding: 1px 4px;
font-size: 11px;
border-radius: 2px;
}
.note-text[b-7u38sld6g3] {
color: #dc2626;
font-style: italic;
margin-top: 2px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-7u38sld6g3] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
}
.action-icon-lg:hover[b-7u38sld6g3] {
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INSURANCE CARD ICON (Thẻ BH column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.insurance-card[b-7u38sld6g3] {
font-size: 14px;
display: inline-block;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SAVE BUTTON ROW STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.save-btn-row[b-7u38sld6g3] {
display: flex;
justify-content: center;
margin-top: 8px; /* Optional: add spacing above */
padding: 0px 24px;
}
.save-btn-row .btn-green[b-7u38sld6g3] {
font-size: 20px;
padding: 24px 0px;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* /Components/Interactive/AppointmentListTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* APPOINTMENT LIST TABLE - Component-specific styles */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* APPOINTMENT LIST TABLE - Week View Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* WEEK HEADER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.week-header[b-pr5tcqej85] {
background: #e8e8e8;
padding: 8px 10px;
margin-bottom: 10px;
border-radius: 3px;
font-weight: bold;
}
.week-range[b-pr5tcqej85] {
font-size: 14px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DAY SECTIONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.day-section[b-pr5tcqej85] {
margin-bottom: 15px;
}
.day-header[b-pr5tcqej85] {
background: #d0d0d0;
padding: 6px 10px;
border: 1px solid #999;
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.day-header.today[b-pr5tcqej85] {
background: #4CAF50;
color: white;
}
.day-header.today .appointment-count[b-pr5tcqej85] {
color: #e8ffe8;
}
.appointment-count[b-pr5tcqej85] {
font-size: 11px;
color: #666;
font-weight: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-pr5tcqej85] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
.records-table thead tr.header td[b-pr5tcqej85] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-pr5tcqej85] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-pr5tcqej85] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-pr5tcqej85] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-pr5tcqej85] {
background-color: #fff;
}
.records-table tbody tr:hover[b-pr5tcqej85] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-pr5tcqej85] { width: 25px; }
.col-time[b-pr5tcqej85] { width: 60px; }
.col-customer[b-pr5tcqej85] { width: 250px; }
.col-phone[b-pr5tcqej85] { width: 90px; }
.col-source[b-pr5tcqej85] { width: 150px; }
.col-content[b-pr5tcqej85] { width: auto; }
.col-staff[b-pr5tcqej85] { width: 120px; }
.col-pk[b-pr5tcqej85] { width: 40px; }
.col-status[b-pr5tcqej85] { width: 90px; }
.col-actions[b-pr5tcqej85] { width: 60px;}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STATUS CELL COLORS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.status-in-progress[b-pr5tcqej85] {
background-color: #4CAF50 !important;
}
.status-arrived[b-pr5tcqej85] {
background-color: #00BCD4 !important;
}
.status-cancelled[b-pr5tcqej85] {
background-color: #f44336 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER CELL */
/* ═══════════════════════════════════════════════════════════════════════════ */
.customer-cell[b-pr5tcqej85] {
width: 100%;
}
.customer-cell a[b-pr5tcqej85] {
color: #0066cc;
text-decoration: none;
}
.customer-cell a:hover[b-pr5tcqej85] {
text-decoration: underline;
}
.address-text[b-pr5tcqej85] {
font-size: 11px;
color: #666;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NOTE TEXT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.note-text[b-pr5tcqej85] {
font-size: 11px;
color: #ff6600;
font-style: italic;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NO APPOINTMENTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.no-appointments[b-pr5tcqej85] {
color: #999;
font-style: italic;
padding: 10px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAGINATION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pagination-row[b-pr5tcqej85] {
text-align: right;
padding: 5px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* APPOINTMENT LIST TABLE - Date Range View Styles */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATE RANGE HEADER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.range-header[b-pr5tcqej85] {
background: #e8e8e8;
padding: 8px 10px;
margin-bottom: 10px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 10px;
}
.range-chip[b-pr5tcqej85] {
background: #fff;
padding: 4px 10px;
border: 1px solid #999;
border-radius: 3px;
font-weight: bold;
font-size: 13px;
}
.range-info[b-pr5tcqej85] {
font-size: 12px;
color: #666;
}
.date-label[b-pr5tcqej85] {
font-size: 12px;
color: #fff;
margin-left: 5px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DAY SECTIONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.day-section[b-pr5tcqej85] {
margin-bottom: 15px;
}
.day-header[b-pr5tcqej85] {
background: #d0d0d0;
padding: 6px 10px;
border: 1px solid #999;
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.day-header.today[b-pr5tcqej85] {
background: #4CAF50;
color: white;
}
.day-header.today .appointment-count[b-pr5tcqej85] {
color: #e8ffe8;
}
.appointment-count[b-pr5tcqej85] {
font-size: 11px;
color: #666;
font-weight: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-pr5tcqej85] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
table-layout: fixed;
}
.records-table thead tr.header td[b-pr5tcqej85] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
height: 28px;
}
.records-table tbody tr[b-pr5tcqej85] {
border-bottom: 1px solid #d0d0d0;
min-height: 36px;
height: 36px;
}
.records-table tbody td[b-pr5tcqej85] {
padding: 6px 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
min-height: 36px;
}
.records-table tbody tr:nth-child(even)[b-pr5tcqej85] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-pr5tcqej85] {
background-color: #fff;
}
.records-table tbody tr:hover[b-pr5tcqej85] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS BY INDEX */
/* 1:TT | 2:Khách hàng | 3:Điện thoại | 4:Nguồn/Nhóm */
/* 5:Nội dung hẹn | 6:Nhân viên | 7:Trạng thái | 8:Thao tác */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table th:nth-child(1)[b-pr5tcqej85],
.records-table td:nth-child(1)[b-pr5tcqej85] { width: 30px; } /* TT */
.records-table th:nth-child(2)[b-pr5tcqej85],
.records-table td:nth-child(2)[b-pr5tcqej85] { width: 400px; } /* Khách hàng */
.records-table th:nth-child(3)[b-pr5tcqej85],
.records-table td:nth-child(3)[b-pr5tcqej85] { width: 100px; } /* Điện thoại */
.records-table th:nth-child(4)[b-pr5tcqej85],
.records-table td:nth-child(4)[b-pr5tcqej85] { width: 180px; } /* Nguồn/Nhóm */
.records-table th:nth-child(5)[b-pr5tcqej85],
.records-table td:nth-child(5)[b-pr5tcqej85] { width: auto; } /* Nội dung hẹn */
.records-table th:nth-child(6)[b-pr5tcqej85],
.records-table td:nth-child(6)[b-pr5tcqej85] { width: 180px; } /* Nhân viên */
.records-table th:nth-child(7)[b-pr5tcqej85],
.records-table td:nth-child(7)[b-pr5tcqej85] { width: 80px; } /* Thời lượng */
.records-table th:nth-child(8)[b-pr5tcqej85],
.records-table td:nth-child(8)[b-pr5tcqej85] { width: 80px; } /* Giờ hẹn */
.records-table th:nth-child(9)[b-pr5tcqej85],
.records-table td:nth-child(9)[b-pr5tcqej85] { width: 80px; } /* Trạng thái */
.records-table th:nth-child(10)[b-pr5tcqej85],
.records-table td:nth-child(10)[b-pr5tcqej85] { width: 100px; } /* Thao tác */
.records-table thead tr.header th[b-pr5tcqej85] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
height: 28px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STATUS CELL COLORS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.status-in-progress[b-pr5tcqej85] {
background-color: #4CAF50 !important;
}
.status-arrived[b-pr5tcqej85] {
background-color: #00BCD4 !important;
}
.status-cancelled[b-pr5tcqej85] {
background-color: #f44336 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER CELL */
/* ═══════════════════════════════════════════════════════════════════════════ */
.customer-cell[b-pr5tcqej85] {
width: 100%;
word-wrap: break-word;
}
.customer-cell a[b-pr5tcqej85] {
color: #0066cc;
text-decoration: none;
}
.customer-cell a:hover[b-pr5tcqej85] {
text-decoration: underline;
}
.address-text[b-pr5tcqej85] {
font-size: 11px;
color: #666;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NOTE TEXT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.note-text[b-pr5tcqej85] {
font-size: 11px;
color: #ff6600;
font-style: italic;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NO APPOINTMENTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.no-appointments[b-pr5tcqej85] {
color: #999;
font-style: italic;
padding: 10px !important;
height: 36px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAGINATION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pagination-row[b-pr5tcqej85] {
text-align: right;
padding: 5px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-pr5tcqej85] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-pr5tcqej85] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-pr5tcqej85] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* /Components/Interactive/AppointmentScheduleTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* APPOINTMENT SCHEDULE TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-0qhje11dyy] {
margin-bottom: 15px;
}
.form-row[b-0qhje11dyy] {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
min-height: 28px;
}
.form-label[b-0qhje11dyy] {
width: 150px;
min-width: 150px;
padding-right: 10px;
text-align: right;
color: #333;
/*align-self: center;*/
}
.form-value[b-0qhje11dyy] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
/* Input Sizes */
.input-tiny[b-0qhje11dyy] {
width: 50px !important;
height: auto;
}
.input-small[b-0qhje11dyy] {
width: 80px !important;
}
.input-date[b-0qhje11dyy] {
width: 120px !important;
padding: 2px 5px;
height:auto;
}
.input-time[b-0qhje11dyy] {
width: 55px !important;
}
.input-select[b-0qhje11dyy] {
width: 200px;
}
.input-select-wide[b-0qhje11dyy] {
width: 200px;
padding: 2px 5px;
height: auto;
}
.input-textarea[b-0qhje11dyy] {
width: 100%;
max-width: 700px;
min-height: 60px;
resize: vertical;
padding: 2px 5px;
height: auto;
}
.input-full[b-0qhje11dyy] {
flex: 1;
min-width: 300px;
max-width: 700px;
padding: 2px 5px;
height: auto;
}
/* Checkbox Group */
.checkbox-group-vertical[b-0qhje11dyy] {
display: flex;
flex-direction: column;
/*justify-content: flex-start;*/
align-items: flex-start;
gap: 8px;
}
.checkbox-label[b-0qhje11dyy] {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
/* Action Buttons */
.action-buttons[b-0qhje11dyy] {
display: flex;
gap: 5px;
}
/* History Section */
.history-section[b-0qhje11dyy] {
margin-top: 20px;
}
.table-wrapper[b-0qhje11dyy] {
flex-direction: column;
align-items: stretch;
}
.table-container[b-0qhje11dyy] {
width: 100%;
overflow-x: auto;
}
/* Appointment Table */
.appointment-table[b-0qhje11dyy] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
border: 1px solid #ddd;
}
.appointment-table th[b-0qhje11dyy] {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 8px 5px;
text-align: left;
font-weight: normal;
white-space: nowrap;
}
.appointment-table td[b-0qhje11dyy] {
border: 1px solid #ddd;
padding: 6px 5px;
vertical-align: middle;
}
.appointment-table tbody tr:hover[b-0qhje11dyy] {
background-color: #f9f9f9;
}
.cell-center[b-0qhje11dyy] {
text-align: center;
}
.cell-content[b-0qhje11dyy] {
max-width: 250px;
}
.content-note[b-0qhje11dyy] {
color: #5cb85c;
font-style: italic;
font-size: 11px;
}
.cell-actions[b-0qhje11dyy] {
white-space: nowrap;
text-align: center;
}
/* Status Colors */
.status-progressing[b-0qhje11dyy] {
background-color: #5cb85c;
color: #fff;
padding: 2px 8px;
border-radius: 2px;
}
.status-arrived[b-0qhje11dyy] {
/*background-color: #555;
color: #fff;*/
padding: 2px 8px;
border-radius: 2px;
}
.status-cancelled[b-0qhje11dyy] {
background-color: #555;
color: #fff;
padding: 2px 8px;
border-radius: 2px;
}
/* Icon Buttons */
.btn-icon[b-0qhje11dyy] {
background: none;
border: none;
cursor: pointer;
padding: 2px 5px;
font-size: 14px;
}
.btn-icon:hover[b-0qhje11dyy] {
opacity: 0.7;
}
/* Updated Info */
.updated-info[b-0qhje11dyy] {
color: #666;
font-size: 13px;
}
/* Treatment */
.input-select-lg[b-0qhje11dyy] {
height: 28px;
width: 400px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-0qhje11dyy] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-0qhje11dyy] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-0qhje11dyy] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* TT */
.appointment-table th:nth-child(1)[b-0qhje11dyy],
.appointment-table td:nth-child(1)[b-0qhje11dyy] {
width: 40px;
text-align: center;
}
/* Ngày hẹn */
.appointment-table th:nth-child(2)[b-0qhje11dyy],
.appointment-table td:nth-child(2)[b-0qhje11dyy] {
width: 100px;
text-align: center;
}
/* Nội dung hẹn */
.appointment-table th:nth-child(3)[b-0qhje11dyy],
.appointment-table td:nth-child(3)[b-0qhje11dyy] {
width: auto;
text-align: left;
}
/* Bác sỹ */
.appointment-table th:nth-child(4)[b-0qhje11dyy],
.appointment-table td:nth-child(4)[b-0qhje11dyy] {
width: 180px;
text-align: left;
}
/* Thời Lượng */
.appointment-table th:nth-child(5)[b-0qhje11dyy],
.appointment-table td:nth-child(5)[b-0qhje11dyy] {
width: 80px;
text-align: center;
}
/* Giờ hẹn */
.appointment-table th:nth-child(6)[b-0qhje11dyy],
.appointment-table td:nth-child(6)[b-0qhje11dyy] {
width: 80px;
text-align: center;
}
/* Trạng thái */
.appointment-table th:nth-child(7)[b-0qhje11dyy],
.appointment-table td:nth-child(7)[b-0qhje11dyy] {
width: 100px;
text-align: center;
}
/* Cập nhật */
.appointment-table th:nth-child(8)[b-0qhje11dyy],
.appointment-table td:nth-child(8)[b-0qhje11dyy] {
width: 120px;
text-align: center;
}
/* Thao tác */
.appointment-table th:nth-child(9)[b-0qhje11dyy],
.appointment-table td:nth-child(9)[b-0qhje11dyy] {
width: 100px;
text-align: center;
}
/* ── Radzen DatePicker size (scoped) ─────────────────────────────────────── */
.form-value[b-0qhje11dyy] .rz-date-scope {
width: 130px;
}
.form-value[b-0qhje11dyy] .rz-date-scope .rz-inputtext {
height: 26px;
}
/* /Components/Interactive/BonusTypeForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BONUS TYPE FORM - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-d0ucqf34lg] {
margin-bottom: 15px;
max-width: 600px;
}
.form-row[b-d0ucqf34lg] {
display: flex;
align-items: center;
margin-bottom: 10px;
min-height: 32px;
}
.form-label-wrapper[b-d0ucqf34lg] {
width: 130px;
height: fit-content;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center !important; /* Center within parent flex row */
padding-right: 10px;
}
.form-value[b-d0ucqf34lg] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Input Styles */
.input-full[b-d0ucqf34lg] {
width: 400px;
height: 26px;
}
.input-medium[b-d0ucqf34lg] {
width: 200px;
height: 26px;
}
.input-select[b-d0ucqf34lg] {
width: 200px;
}
/* Selected Tag (for clinic) */
.selected-tag[b-d0ucqf34lg] {
background: #e0e0e0;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: #333;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-remove[b-d0ucqf34lg] {
cursor: pointer;
font-weight: bold;
color: #666;
}
.tag-remove:hover[b-d0ucqf34lg] {
color: #c00;
}
/* Radio Group */
.checkbox-group[b-d0ucqf34lg] {
display: flex;
gap: 20px;
align-items: center;
}
.radio-label[b-d0ucqf34lg] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.radio-label input[type="radio"][b-d0ucqf34lg] {
margin: 0;
}
/* Updated Info */
.updated-info[b-d0ucqf34lg] {
color: #666;
font-size: 13px;
}
/* Action Buttons */
.action-buttons[b-d0ucqf34lg] {
display: flex;
gap: 8px;
margin-top: 10px;
}
.btn-green-scope[b-d0ucqf34lg] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-d0ucqf34lg] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-d0ucqf34lg] {
background: #9dc99d;
cursor: default;
}
.btn-blue[b-d0ucqf34lg] {
background: #5bc0de;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-blue:hover[b-d0ucqf34lg] {
background: #46b8da;
}
/* Required Field Indicator */
.req[b-d0ucqf34lg] {
color: #d9534f;
margin-left: 2px;
}
/* Shared Input Styles */
.tbox[b-d0ucqf34lg] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 8px;
font-size: 13px;
}
.tbox:focus[b-d0ucqf34lg] {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 3px rgba(102, 175, 233, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-d0ucqf34lg] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/BonusTypeTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BONUS TYPE TABLE - Matching CustomerRecordsTable styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-v7uv7a0uja] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-v7uv7a0uja] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-v7uv7a0uja] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-v7uv7a0uja] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-v7uv7a0uja] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-v7uv7a0uja] {
background-color: #fff;
}
.records-table tbody tr:hover[b-v7uv7a0uja] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-v7uv7a0uja] { width: 40px; }
.col-name[b-v7uv7a0uja] { width: auto; }
.col-note[b-v7uv7a0uja] { width: 300px; }
.col-value[b-v7uv7a0uja] { width: 180px; }
.col-actions[b-v7uv7a0uja] { width: 80px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CELL STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.item_c[b-v7uv7a0uja] { text-align: center; }
.item_l[b-v7uv7a0uja] { text-align: left; }
/* Name Link */
.records-table a.b12[b-v7uv7a0uja] {
color: #0066cc;
text-decoration: none;
}
.records-table a.b12:hover[b-v7uv7a0uja] {
text-decoration: underline;
}
/* Action Icons */
/*.action-icon {
cursor: pointer;
padding: 2px 4px;
font-size: 14px;
transition: opacity 0.15s ease;
}
.action-icon:hover {
opacity: 0.7;
}*/
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-v7uv7a0uja] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/CustomerDetailTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER DETAIL TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BASE FONT SIZE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.admin-content[b-g6f6qucaij] {
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* UPPER FORM SECTION - Bigger text */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container .lbl[b-g6f6qucaij],
.form-container .ilbl[b-g6f6qucaij] {
font-size: 16px;
}
.form-container .tbox[b-g6f6qucaij],
.form-container select.tbox[b-g6f6qucaij] {
font-size: 16px;
height: 28px;
padding: 2px 6px;
}
.form-container .btn-green[b-g6f6qucaij],
.form-container .btn-gray[b-g6f6qucaij] {
font-size: 16px;
height: 28px;
padding: 2px 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FORM CONTAINER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container[b-g6f6qucaij] {
display: flex;
gap: 0;
background: #fff;
border: 1px solid #d1d5db;
padding: 6px;
font-size: 16px;
}
.form-left[b-g6f6qucaij] {
flex: 1;
display: grid;
grid-template-columns: 130px 160px 360px 90px 180px 120px 220px 450px;
gap: 4px 5px;
align-items: center;
}
.form-left > .ilbl[b-g6f6qucaij] {
text-align: right;
padding-right: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PROFILE SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-profile[b-g6f6qucaij] {
width: 160px;
display: flex;
flex-direction: column;
gap: 3px;
border-left: 1px solid #d1d5db;
padding-left: 8px;
align-items: center;
}
.profile-img[b-g6f6qucaij] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #0f766e;
object-fit: cover;
margin-top: 4px;
}
.default-avatar.profile-img[b-g6f6qucaij] {
background-size: 60px 60px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MEDICAL SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.medical-section[b-g6f6qucaij] {
padding: 4px 8px;
background: #fefce8;
border: 1px solid #d1d5db;
border-top: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 3px;
font-size: 16px;
white-space: nowrap;
overflow: visible;
}
.medical-section .lbl[b-g6f6qucaij] {
flex-shrink: 0;
white-space: nowrap;
}
.medical-section .chk-item[b-g6f6qucaij] {
flex-shrink: 0;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NOTES SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.notes-section[b-g6f6qucaij] {
padding: 4px 8px;
background: #fff;
border: 1px solid #d1d5db;
border-top: none;
display: grid;
grid-template-columns: 90px 1fr;
gap: 4px 5px;
align-items: center;
font-size: 16px;
}
.notes-section .lbl[b-g6f6qucaij] {
font-size: 16px;
}
.notes-section .tbox[b-g6f6qucaij] {
font-size: 16px;
height: 28px;
}
.last-visit-row[b-g6f6qucaij] {
grid-column: 1 / -1;
padding: 3px 0;
color: #374151;
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-row[b-g6f6qucaij] {
display: flex;
justify-content: space-between;
padding: 4px 0;
margin: 4px 0;
}
.action-row .btn-green[b-g6f6qucaij],
.action-row .btn-gray[b-g6f6qucaij] {
font-size: 12px;
height: 20px;
}
.action-row .btn-green:disabled[b-g6f6qucaij],
.action-row .btn-gray:disabled[b-g6f6qucaij] {
background: #d1d5db !important; /* light gray */
color: #6b7280 !important; /* gray text */
border-color: #d1d5db !important;
cursor: default !important;
opacity: 1 !important; /* Remove default opacity if you want solid color */
}
.action-left[b-g6f6qucaij],
.action-right[b-g6f6qucaij] {
display: flex;
gap: 3px;
align-items: center;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SUMMARY ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.summary-row[b-g6f6qucaij] {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 2px solid #0f766e;
margin-bottom: 3px;
color: #374151;
font-size: 12px;
}
.summary-amounts[b-g6f6qucaij] {
text-align: right;
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATA TABLE OVERRIDES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table[b-g6f6qucaij] {
font-size: 12px;
}
.data-table th[b-g6f6qucaij] {
font-size: 12px;
padding: 3px;
}
.data-table td[b-g6f6qucaij] {
font-size: 12px;
padding: 3px;
}
.cell-centered[b-g6f6qucaij] {
text-align: center;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* VISIT CELL */
/* ═══════════════════════════════════════════════════════════════════════════ */
.visit-cell[b-g6f6qucaij] {
background: #ecfdf5 !important;
text-align: center;
vertical-align: middle !important;
border-right: 2px solid #0f766e !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT CELL ELEMENTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.by-text[b-g6f6qucaij] {
color: #6b7280;
font-style: italic;
font-size: 11px;
}
.stage-row[b-g6f6qucaij] {
display: flex;
align-items: center;
gap: 3px;
margin: 2px 0;
}
.stage-badge[b-g6f6qucaij] {
display: inline-block;
padding: 2px 6px;
background-color: #10b981;
border-radius: 3px;
font-size: 11px;
text-decoration: none;
color: #000;
cursor: pointer;
transition: background-color 0.15s ease;
}
.stage-badge:hover[b-g6f6qucaij] {
background-color: #f97316;
text-decoration: none;
}
.progress-badge[b-g6f6qucaij] {
background: #6b7280;
color: #fff;
padding: 1px 4px;
font-size: 10px;
border-radius: 2px;
}
.date-badge[b-g6f6qucaij] {
background: #e5e7eb;
padding: 1px 4px;
font-size: 11px;
border-radius: 2px;
}
.note-text[b-g6f6qucaij] {
color: #dc2626;
font-style: italic;
margin-top: 2px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-g6f6qucaij] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-g6f6qucaij] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-g6f6qucaij] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* Progress bar container */
.progress-bar-container[b-g6f6qucaij] {
display: inline-flex;
align-items: center;
position: relative;
width: 80px;
height: 18px;
background-color: #e0e0e0;
border-radius: 2px;
overflow: hidden;
margin: 0 4px;
}
.progress-bar-fill[b-g6f6qucaij] {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, #4caf50, #81c784);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-bar-text[b-g6f6qucaij] {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #333;
}
/* Small print icon button */
.btn-print-sm[b-g6f6qucaij] {
cursor: pointer;
padding: 3px 5px;
border-radius: 4px;
display: inline-flex;
align-items: center;
transition: background-color 0.2s;
}
.btn-print-sm:hover[b-g6f6qucaij] {
background-color: #e0f2fe;
}
.btn-print-sm:hover svg path[b-g6f6qucaij],
.btn-print-sm:hover svg polyline[b-g6f6qucaij],
.btn-print-sm:hover svg rect[b-g6f6qucaij] {
/*fill: #0284c7;*/
stroke: #0284c7;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INSURANCE CARD ICON (Thẻ BH column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.insurance-card[b-g6f6qucaij] {
font-size: 14px;
display: inline-block;
}
/* /Components/Interactive/CustomerFilmGallery.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER FILM GALLERY - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.admin-content[b-9xqpgtvf8q] {
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
.text-red[b-9xqpgtvf8q] {
color: #dc2626;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATE FILTER TABS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.date-tabs[b-9xqpgtvf8q] {
display: flex;
gap: 8px;
padding: 8px 12px;
background: #f0fdf4;
border-bottom: 1px solid #d1d5db;
flex-wrap: wrap;
}
.date-tab[b-9xqpgtvf8q] {
padding: 4px 12px;
border: none;
background: transparent;
color: #dc2626;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
}
.date-tab:hover[b-9xqpgtvf8q] {
background: #dcfce7;
}
.date-tab.active[b-9xqpgtvf8q] {
background: #16a34a;
color: white;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* GALLERY CONTAINER - Fixed column grid, no stretch */
/* ═══════════════════════════════════════════════════════════════════════════ */
.gallery-container[b-9xqpgtvf8q] {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
background: #f9fafb;
min-height: calc(100vh - 150px);
align-items: flex-start;
align-content: flex-start;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* GALLERY ITEM - Fixed width and height */
/* ══════════════════════════════════════════════════════════════════════════ */
.gallery-item[b-9xqpgtvf8q] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
width: 160px;
flex-shrink: 0;
}
.gallery-item:hover[b-9xqpgtvf8q] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ADD ITEM PLACEHOLDER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.add-item[b-9xqpgtvf8q] {
cursor: pointer;
align-self: stretch;
min-height: 180px;
user-select: none;
}
.add-placeholder[b-9xqpgtvf8q] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #16a34a;
gap: 8px;
user-select: none;
}
.add-icon[b-9xqpgtvf8q] {
font-size: 32px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #dcfce7;
border-radius: 50%;
user-select: none;
}
.add-text[b-9xqpgtvf8q] {
font-size: 14px;
font-weight: 500;
user-select: none; /* Prevent text selection */
}
.add-item:hover .add-placeholder[b-9xqpgtvf8q] {
background: #f0fdf4;
}
.add-item.disabled[b-9xqpgtvf8q] {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.add-item.disabled .add-placeholder[b-9xqpgtvf8q] {
color: #9ca3af;
}
.add-item.disabled .add-icon[b-9xqpgtvf8q] {
background: #e5e7eb;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* IMAGE WRAPPER - Fixed height, no aspect-ratio */
/* ═══════════════════════════════════════════════════════════════════════════ */
.image-wrapper[b-9xqpgtvf8q] {
position: relative;
cursor: pointer;
width: 100%;
height: 120px;
overflow: hidden;
}
.gallery-image[b-9xqpgtvf8q] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s;
user-select: none;
}
.gallery-item:hover .gallery-image[b-9xqpgtvf8q] {
transform: scale(1.05);
}
.image-label[b-9xqpgtvf8q] {
position: absolute;
top: 4px;
left: 4px;
background: rgba(220, 38, 38, 0.9);
color: white;
padding: 2px 6px;
font-size: 10px;
border-radius: 2px;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* IMAGE INFO */
/* ═══════════════════════════════════════════════════════════════════════════ */
.image-info[b-9xqpgtvf8q] {
padding: 6px 8px 2px;
font-size: 12px;
color: #2563eb;
}
.image-date[b-9xqpgtvf8q] {
font-weight: 500;
}
.image-description[b-9xqpgtvf8q] {
color: #6b7280;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* IMAGE ACTIONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.image-actions[b-9xqpgtvf8q] {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px 8px;
}
.action-icon-lg[b-9xqpgtvf8q] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-9xqpgtvf8q] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-9xqpgtvf8q] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MODAL OVERLAY - Fixed footer issue */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-9xqpgtvf8q] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 5px; /* Add padding to prevent edge clipping */
}
.modal-content[b-9xqpgtvf8q] {
background: white;
border-radius: 8px;
width: 90%;
max-width: 500px;
min-height: 380px; /* Ensure adequate height for form */
max-height: calc(100vh - 40px); /* Account for overlay padding */
display: flex;
flex-direction: column; /* Key fix: use flexbox */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-header[b-9xqpgtvf8q] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
background: #f0fdf4;
border-radius: 8px 8px 0 0;
flex-shrink: 0; /* Don't shrink header */
}
.modal-header h3[b-9xqpgtvf8q] {
margin: 0;
font-size: 16px;
color: #166534;
}
.close-btn[b-9xqpgtvf8q] {
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
color: #6b7280;
}
.close-btn:hover[b-9xqpgtvf8q] {
color: #dc2626;
}
.close-btn:disabled[b-9xqpgtvf8q] {
color: #d1d5db;
cursor: default;
opacity: 0.5;
}
.modal-body[b-9xqpgtvf8q] {
padding: 16px;
overflow-y: auto; /* Scroll only the body */
flex: 1; /* Take remaining space */
min-height: 0; /* Allow shrinking for flexbox */
}
.form-group[b-9xqpgtvf8q] {
margin-bottom: 12px;
}
.form-group label[b-9xqpgtvf8q] {
display: block;
margin-bottom: 4px;
font-weight: 500;
color: #374151;
}
.form-group .tbox[b-9xqpgtvf8q],
.form-group .file-input[b-9xqpgtvf8q] {
width: 100%;
padding: 6px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
height: auto;
}
.form-group .tbox:focus[b-9xqpgtvf8q] {
outline: none;
border-color: #16a34a;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.selected-files[b-9xqpgtvf8q] {
background: #f0fdf4;
padding: 8px 12px;
border-radius: 4px;
margin-top: 8px;
color: #166534;
}
.modal-footer[b-9xqpgtvf8q] {
display: flex;
justify-content: flex-end;
gap: 8px; /* Increased gap between buttons */
padding: 12px 16px;
border-top: 1px solid #e5e7eb;
background: white;
border-radius: 0 0 8px 8px;
flex-shrink: 0;
}
.btn-green-scope[b-9xqpgtvf8q] {
background: #16a34a;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
min-width: 70px; /* Prevent shrinking */
white-space: nowrap; /* Prevent text wrapping */
}
.btn-green-scope:hover:not(:disabled)[b-9xqpgtvf8q] {
background: #15803d;
}
.btn-green-scope:disabled[b-9xqpgtvf8q] {
background: #9ca3af;
cursor: default;
}
.btn-gray-scope[b-9xqpgtvf8q] {
background: #6b7280;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
min-width: 70px; /* Prevent shrinking */
white-space: nowrap; /* Prevent text wrapping */
}
.btn-gray-scope:hover[b-9xqpgtvf8q] {
background: #4b5563;
}
.btn-gray-scope:disabled[b-9xqpgtvf8q] {
background: #d1d5db;
color: #9ca3af;
cursor: default;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PREVIEW OVERLAY */
/* ═══════════════════════════════════════════════════════════════════════════ */
.preview-overlay[b-9xqpgtvf8q] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
}
.preview-container[b-9xqpgtvf8q] {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
}
.preview-image[b-9xqpgtvf8q] {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}
.preview-close[b-9xqpgtvf8q] {
position: absolute;
top: -40px;
right: 0;
background: transparent;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.preview-nav[b-9xqpgtvf8q] {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 24px;
padding: 20px 12px;
cursor: pointer;
transition: background-color 0.2s;
}
.preview-nav:hover[b-9xqpgtvf8q] {
background: rgba(255, 255, 255, 0.4);
}
.preview-nav.prev[b-9xqpgtvf8q] {
left: -60px;
}
.preview-nav.next[b-9xqpgtvf8q] {
right: -60px;
}
.preview-info[b-9xqpgtvf8q] {
margin-top: 12px;
color: white;
font-size: 14px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LOADING STATE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.loading-message[b-9xqpgtvf8q] {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #6b7280;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.gallery-container[b-9xqpgtvf8q] {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
padding: 8px;
}
.date-tabs[b-9xqpgtvf8q] {
padding: 6px 8px;
}
.preview-nav.prev[b-9xqpgtvf8q] {
left: 0;
}
.preview-nav.next[b-9xqpgtvf8q] {
right: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRINT CHECKBOX */
/* ═══════════════════════════════════════════════════════════════════════════ */
.print-checkbox[b-9xqpgtvf8q] {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
user-select: none;
}
.print-checkbox span[b-9xqpgtvf8q] {
user-select: none;
}
/* ── Radzen DatePicker size (scoped) ─────────────────────────────────────── */
.form-group[b-9xqpgtvf8q] .rz-date-scope {
width: 130px;
}
.form-group[b-9xqpgtvf8q] .rz-date-scope .rz-inputtext {
height: 26px;
border-radius: 4px !important;
}
/* /Components/Interactive/CustomerInfoForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER DETAIL TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BASE FONT SIZE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.admin-content[b-uws4hhtjxp] {
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* UPPER FORM SECTION - Bigger text */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container .lbl[b-uws4hhtjxp],
.form-container .ilbl[b-uws4hhtjxp] {
font-size: 16px;
}
.form-container .tbox[b-uws4hhtjxp],
.form-container select.tbox[b-uws4hhtjxp] {
font-size: 16px;
height: 28px;
padding: 2px 6px;
}
.form-container .btn-green[b-uws4hhtjxp],
.form-container .btn-gray[b-uws4hhtjxp] {
font-size: 16px;
height: 28px;
padding: 2px 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FORM CONTAINER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-container[b-uws4hhtjxp] {
display: flex;
gap: 0;
background: #fff;
border: 1px solid #d1d5db;
padding: 6px;
font-size: 16px;
}
.form-left[b-uws4hhtjxp] {
flex: 1;
display: grid;
grid-template-columns: 130px 160px 360px 90px 180px 120px 220px 450px;
gap: 4px 5px;
align-items: center;
}
.form-left > .ilbl[b-uws4hhtjxp] {
text-align: right;
padding-right: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PROFILE SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-profile[b-uws4hhtjxp] {
width: 160px;
display: flex;
flex-direction: column;
gap: 3px;
border-left: 1px solid #d1d5db;
padding-left: 8px;
align-items: center;
}
.profile-img[b-uws4hhtjxp] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #0f766e;
object-fit: cover;
margin-top: 4px;
}
.default-avatar.profile-img[b-uws4hhtjxp] {
background-size: 60px 60px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MEDICAL SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.medical-section[b-uws4hhtjxp] {
padding: 4px 8px;
background: #fefce8;
border: 1px solid #d1d5db;
border-top: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 3px;
font-size: 16px;
white-space: nowrap;
overflow: visible;
}
.medical-section .lbl[b-uws4hhtjxp] {
flex-shrink: 0;
white-space: nowrap;
}
.medical-section .chk-item[b-uws4hhtjxp] {
flex-shrink: 0;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NOTES SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.notes-section[b-uws4hhtjxp] {
padding: 4px 8px;
background: #fff;
border: 1px solid #d1d5db;
border-top: none;
display: grid;
grid-template-columns: 90px 1fr;
gap: 4px 5px;
align-items: center;
font-size: 16px;
}
.notes-section .lbl[b-uws4hhtjxp] {
font-size: 16px;
}
.notes-section .tbox[b-uws4hhtjxp] {
font-size: 16px;
height: 28px;
}
.last-visit-row[b-uws4hhtjxp] {
grid-column: 1 / -1;
padding: 3px 0;
color: #374151;
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-row[b-uws4hhtjxp] {
display: flex;
justify-content: space-between;
padding: 4px 0;
margin: 4px 0;
}
.action-row .btn-green[b-uws4hhtjxp],
.action-row .btn-gray[b-uws4hhtjxp] {
font-size: 12px;
height: 20px;
}
.action-left[b-uws4hhtjxp],
.action-right[b-uws4hhtjxp] {
display: flex;
gap: 3px;
align-items: center;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SUMMARY ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.summary-row[b-uws4hhtjxp] {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 2px solid #0f766e;
margin-bottom: 3px;
color: #374151;
font-size: 12px;
}
.summary-amounts[b-uws4hhtjxp] {
text-align: right;
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATA TABLE OVERRIDES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table[b-uws4hhtjxp] {
font-size: 12px;
}
.data-table th[b-uws4hhtjxp] {
font-size: 12px;
padding: 3px;
}
.data-table td[b-uws4hhtjxp] {
font-size: 12px;
padding: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TABLE - Center align columns 5-14 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table td:nth-child(n+5):nth-child(-n+14)[b-uws4hhtjxp] {
text-align: center;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* VISIT CELL */
/* ═══════════════════════════════════════════════════════════════════════════ */
.visit-cell[b-uws4hhtjxp] {
background: #ecfdf5 !important;
text-align: center;
vertical-align: middle !important;
border-right: 2px solid #0f766e !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT CELL ELEMENTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.by-text[b-uws4hhtjxp] {
color: #6b7280;
font-style: italic;
font-size: 11px;
}
.stage-row[b-uws4hhtjxp] {
display: flex;
align-items: center;
gap: 3px;
margin: 2px 0;
}
.stage-badge[b-uws4hhtjxp] {
display: inline-block;
padding: 2px 6px;
background-color: #10b981;
border-radius: 3px;
font-size: 11px;
text-decoration: none;
color: #000;
cursor: pointer;
transition: background-color 0.15s ease;
}
.stage-badge:hover[b-uws4hhtjxp] {
background-color: #f97316;
text-decoration: none;
}
.progress-badge[b-uws4hhtjxp] {
background: #6b7280;
color: #fff;
padding: 1px 4px;
font-size: 10px;
border-radius: 2px;
}
.date-badge[b-uws4hhtjxp] {
background: #e5e7eb;
padding: 1px 4px;
font-size: 11px;
border-radius: 2px;
}
.note-text[b-uws4hhtjxp] {
color: #dc2626;
font-style: italic;
margin-top: 2px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-uws4hhtjxp] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
}
.action-icon-lg:hover[b-uws4hhtjxp] {
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INSURANCE CARD ICON (Thẻ BH column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.insurance-card[b-uws4hhtjxp] {
font-size: 14px;
display: inline-block;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Contract progress state */
/* ═══════════════════════════════════════════════════════════════════════════ */
.progress-bar-steps[b-uws4hhtjxp] {
display: flex;
align-items: center;
margin: 8px 0;
}
.progress-step[b-uws4hhtjxp] {
min-width: 80px;
height: 32px;
border-radius: 6px;
background: #e5e7eb;
color: #374151;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
transition: background 0.2s, color 0.2s;
border: 2px solid #e5e7eb;
margin: 0 2px;
padding: 0 12px;
box-sizing: border-box;
cursor: pointer;
}
.progress-step.active[b-uws4hhtjxp] {
background: #10b981;
color: #fff;
border-color: #10b981;
}
.progress-step.readonly[b-uws4hhtjxp] {
cursor: default;
}
.progress-bar-line[b-uws4hhtjxp] {
width: 40px;
height: 4px;
background: #e5e7eb;
margin: 0 4px;
border-radius: 2px;
transition: background 0.2s;
}
.progress-bar-line.active[b-uws4hhtjxp] {
background: #10b981;
}
/* /Components/Interactive/CustomerRecordsTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER RECORDS TABLE - Component-specific styles only */
/* Uses global classes from app.css: */
/* - .action-icon, .action-icons, .no-data-message, .default-avatar */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-5zauxhghsv] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-5zauxhghsv] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-5zauxhghsv] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-5zauxhghsv] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-5zauxhghsv] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-5zauxhghsv] {
background-color: #fff;
}
.records-table tbody tr:hover[b-5zauxhghsv] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-5zauxhghsv] { width: 25px; }
.col-time[b-5zauxhghsv] { width: 55px; }
.col-avatar[b-5zauxhghsv] { width: 28px; }
.col-name[b-5zauxhghsv] { width: 180px; }
.col-code[b-5zauxhghsv] { width: 45px; }
.col-gender[b-5zauxhghsv] { width: 28px; }
.col-phone[b-5zauxhghsv] { width: 80px; }
.col-source[b-5zauxhghsv] { width: 200px; }
.col-visit[b-5zauxhghsv] { width: auto; }
.col-room[b-5zauxhghsv] { width: 100px; }
.col-status[b-5zauxhghsv] { width: 65px; }
.col-actions[b-5zauxhghsv] { width: 60px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ROW COLORS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table tbody tr.row-red[b-5zauxhghsv],
.records-table tbody tr.row-red:nth-child(even)[b-5zauxhghsv],
.records-table tbody tr.row-red:nth-child(odd)[b-5zauxhghsv] {
background-color: #ff9999 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STATUS CELL COLORS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.status-violet[b-5zauxhghsv] {
background-color: #cc99ff !important;
}
.status-yellow[b-5zauxhghsv] {
background-color: #ffff00 !important;
}
.status-gray[b-5zauxhghsv] {
background-color: #c0c0c0 !important;
}
.wait-time[b-5zauxhghsv] {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NAME CELL LAYOUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.name-cell[b-5zauxhghsv] {
position: relative;
padding-right: 20px;
}
.name-content[b-5zauxhghsv] {
width: 100%;
}
.name-link[b-5zauxhghsv] {
font-size: 10px;
color: #0066cc;
text-decoration: none;
}
.name-link:hover[b-5zauxhghsv] {
text-decoration: underline;
}
.name-link b[b-5zauxhghsv] {
font-weight: bold;
}
.checkin-icon[b-5zauxhghsv] {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
line-height: 1;
}
.checkin-icon a[b-5zauxhghsv] {
text-decoration: none;
}
.address-text[b-5zauxhghsv] {
font-size: 11px;
color: #cc0000;
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PROFILE IMAGE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.profile-thumb[b-5zauxhghsv] {
width: 22px;
height: 22px;
border: 0;
object-fit: cover;
border-radius: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH TIP ICON */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-tip[b-5zauxhghsv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 10px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.search-tip:hover[b-5zauxhghsv] {
background: rgba(255, 255, 255, 0.4);
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAGINATION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pagination-row[b-5zauxhghsv] {
text-align: right;
padding: 5px;
font-size: 11px;
}
/* /Components/Interactive/DynamicReportBuilder.razor.rz.scp.css */
/* ── Layout ── */
.report-builder-body[b-tovqghsaq8] {
display: flex;
gap: 16px;
padding: 16px;
min-height: 400px;
}
/* ── Sidebar ── */
.report-sidebar[b-tovqghsaq8] {
min-width: 300px;
max-width: 340px;
max-height: calc(100vh - 180px);
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px;
background: #fff;
flex-shrink: 0;
user-select: none;
}
.sidebar-header[b-tovqghsaq8] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.column-group[b-tovqghsaq8] {
margin-top: 6px;
}
.group-header[b-tovqghsaq8] {
cursor: pointer;
padding: 4px 0;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
border-radius: 3px;
}
.group-header:hover[b-tovqghsaq8] {
background: #f5f5f5;
}
.group-columns[b-tovqghsaq8] {
padding-left: 12px;
}
/* ── Column entry (checkbox + filter) ── */
.column-entry[b-tovqghsaq8] {
margin-bottom: 2px;
}
.column-item[b-tovqghsaq8] {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 4px;
cursor: pointer;
border-radius: 3px;
}
.column-item:hover[b-tovqghsaq8] {
background: #f5f5f5;
}
.column-item .has-filter[b-tovqghsaq8] {
color: #0078d4;
font-weight: 600;
}
/* ── Per-column filter row ── */
.column-filter[b-tovqghsaq8] {
display: flex;
align-items: center;
gap: 4px;
padding-left: 26px;
margin-bottom: 4px;
}
/* ── Normal filter: text input ── */
.column-filter-input[b-tovqghsaq8] {
flex: 1;
height: 24px;
line-height: 22px;
padding: 0 6px;
font-size: 11px;
border: 1px solid #9ca3af;
border-radius: 2px;
background: #fff;
color: #374151;
box-sizing: border-box;
min-width: 0;
}
.column-filter-input:focus[b-tovqghsaq8] {
border-color: #0f766e;
outline: none;
}
.column-filter-input[b-tovqghsaq8]::placeholder {
color: #9ca3af;
}
/* ── Normal filter: dropdown select ── */
.column-filter-select[b-tovqghsaq8] {
flex: 1;
height: 24px;
line-height: 22px;
padding: 0 6px;
font-size: 11px;
border: 1px solid #9ca3af;
border-radius: 2px;
background: #fff;
color: #374151;
box-sizing: border-box;
cursor: pointer;
min-width: 0;
}
.column-filter-select:focus[b-tovqghsaq8] {
border-color: #0f766e;
outline: none;
}
/* ── Clear / remove filter button ── */
.filter-clear-btn[b-tovqghsaq8] {
background: none;
border: none;
cursor: pointer;
color: #999;
font-size: 12px;
padding: 2px 4px;
line-height: 1;
border-radius: 2px;
flex-shrink: 0;
}
.filter-clear-btn:hover[b-tovqghsaq8] {
color: #d13438;
background: #fde7e9;
}
.clear-all-filters-btn[b-tovqghsaq8] {
width: 100%;
margin-top: 12px;
height: 24px;
line-height: 22px;
font-size: 11px;
padding: 0 10px;
border: 1px solid #9ca3af;
border-radius: 3px;
background: #fff;
color: #374151;
cursor: pointer;
}
.clear-all-filters-btn:hover[b-tovqghsaq8] {
background: #f3f4f6;
border-color: #6b7280;
}
/* ── Per-column date range filter ── */
.date-range-filter[b-tovqghsaq8] {
flex-wrap: wrap;
gap: 3px;
}
.date-range-filter .date-range-icon[b-tovqghsaq8] {
font-size: 11px;
line-height: 1;
flex-shrink: 0;
}
.date-range-filter[b-tovqghsaq8] .rz-date-scope {
flex: 1;
min-width: 80px;
max-width: 110px;
}
.date-range-filter[b-tovqghsaq8] .rz-date-scope .rz-inputtext {
height: 24px !important;
font-size: 11px !important;
padding: 0 4px !important;
}
/* ── Grid area ── */
.report-grid[b-tovqghsaq8] {
flex: 1;
min-width: 0;
overflow: auto;
}
/* ── Column borders & no height limit ── */
.report-grid[b-tovqghsaq8] .rz-data-grid {
max-height: none;
}
.report-grid[b-tovqghsaq8] .rz-grid-table td,
.report-grid[b-tovqghsaq8] .rz-grid-table th {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.report-grid[b-tovqghsaq8] .rz-grid-table th {
border-bottom: 2px solid #ccc;
}
/* ── Available Columns ── */
.available-column[b-tovqghsaq8] {
cursor: pointer;
border-radius: 3px;
padding: 2px 4px;
}
.available-column:hover[b-tovqghsaq8] {
background: #e6f2ff;
}
/* ── Filter Checkbox List ── */
.filter-checkbox-list[b-tovqghsaq8] {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 120px;
overflow-y: auto;
padding: 2px 0;
}
.filter-checkbox[b-tovqghsaq8] {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
cursor: pointer;
padding: 1px 2px;
border-radius: 3px;
}
.filter-checkbox:hover[b-tovqghsaq8] {
background: #f0f0f0;
}
.filter-checkbox input[type="checkbox"][b-tovqghsaq8] {
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
}
/* /Components/Interactive/FundSourceForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FUND SOURCE FORM - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-fpe8ph7arb] {
margin-bottom: 15px;
max-width: 600px;
}
.form-row[b-fpe8ph7arb] {
display: flex;
align-items: center;
margin-bottom: 10px;
min-height: 32px;
}
.form-label-wrapper[b-fpe8ph7arb] {
width: 150px;
height: fit-content;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center !important;
padding-right: 10px;
}
.form-value[b-fpe8ph7arb] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Input Styles */
.input-full[b-fpe8ph7arb] {
flex: 1;
width: 400px;
height: 26px;
}
.input-medium[b-fpe8ph7arb] {
width: 220px;
height: 26px;
}
.input-textarea[b-fpe8ph7arb] {
flex: 1;
width: 400px;
height: 80px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CHECKBOX & RADIO GROUPS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.checkbox-group[b-fpe8ph7arb] {
display: flex;
gap: 20px;
align-items: center;
}
.checkbox-label[b-fpe8ph7arb] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.checkbox-label input[type="checkbox"][b-fpe8ph7arb] {
margin: 0;
}
.radio-label[b-fpe8ph7arb] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.radio-label input[type="radio"][b-fpe8ph7arb] {
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* UPDATED INFO & BREADCRUMB */
/* ═══════════════════════════════════════════════════════════════════════════ */
.updated-info[b-fpe8ph7arb] {
color: #666;
font-size: 13px;
}
.text-highlight[b-fpe8ph7arb] {
color: #cc0000;
font-weight: bold;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION BUTTONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-buttons[b-fpe8ph7arb] {
display: flex;
gap: 8px;
margin-top: 10px;
margin-left: 40px;
}
.btn-green-scope[b-fpe8ph7arb] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-fpe8ph7arb] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-fpe8ph7arb] {
background: #9dc99d;
cursor: default;
}
.btn-blue[b-fpe8ph7arb] {
background: #5bc0de;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-blue:hover[b-fpe8ph7arb] {
background: #46b8da;
}
/* Required Field Indicator */
.req[b-fpe8ph7arb] {
color: #d9534f;
margin-left: 2px;
}
/* /Components/Interactive/FundSourceManagerTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FUND SOURCE MANAGER TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Info Header ──────────────────────────────────────────────────────────── */
.info-header[b-go2y17mdbq] {
margin-bottom: 10px;
font-size: 12px;
}
.info-label[b-go2y17mdbq] {
font-weight: bold;
margin-right: 8px;
}
.info-value[b-go2y17mdbq] {
font-weight: bold;
color: #333;
}
/* ── Add Form ─────────────────────────────────────────────────────────────── */
.add-form[b-go2y17mdbq] {
display: flex;
align-items: flex-end;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
font-size: 12px;
}
.add-form-label[b-go2y17mdbq] {
font-weight: bold;
align-self: center;
white-space: nowrap;
}
.add-form-field[b-go2y17mdbq] {
display: flex;
flex-direction: column;
gap: 2px;
}
.field-label[b-go2y17mdbq] {
font-size: 11px;
white-space: nowrap;
}
.req[b-go2y17mdbq] {
color: #cc0000;
margin-left: 2px;
}
.select-user[b-go2y17mdbq] {
width: 180px;
height: 26px;
font-size: 12px;
}
.select-permission[b-go2y17mdbq] {
width: 120px;
height: 26px;
font-size: 12px;
}
.input-note[b-go2y17mdbq] {
width: 300px;
height: 26px;
font-size: 12px;
}
/* ── Table ─────────────────────────────────────────────────────────────────── */
.records-table[b-go2y17mdbq] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Arial, sans-serif;
border: 1px solid #999;
}
.records-table thead tr.header td[b-go2y17mdbq] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-go2y17mdbq] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-go2y17mdbq] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-go2y17mdbq] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-go2y17mdbq] {
background-color: #fff;
}
.records-table tbody tr:hover[b-go2y17mdbq] {
background-color: #fdfdcd !important;
}
/* ── Column Widths ────────────────────────────────────────────────────────── */
.col-tt[b-go2y17mdbq] { width: 30px; }
.col-username[b-go2y17mdbq] { width: auto; }
.col-permission[b-go2y17mdbq] { width: 100px; }
.col-note[b-go2y17mdbq] { width: auto; }
.col-actions[b-go2y17mdbq] { width: 70px; }
/* ── Inline Editing ───────────────────────────────────────────────────────── */
.select-inline[b-go2y17mdbq] {
width: 100%;
height: 24px;
font-size: 12px;
border: 1px solid #999;
border-radius: 2px;
}
.input-inline[b-go2y17mdbq] {
width: 100%;
height: 24px;
font-size: 12px;
border: 1px solid #999;
border-radius: 2px;
padding: 1px 4px;
}
/* ── Action Icons ─────────────────────────────────────────────────────────── */
.action-icon-lg[b-go2y17mdbq] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-go2y17mdbq] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-go2y17mdbq] {
opacity: 0.4;
pointer-events: none;
cursor: default;
}
/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
/*.current-page {
color: #cc0000;
font-weight: bold;
}*/
/* ── Misc ─────────────────────────────────────────────────────────────────── */
.no-data-message[b-go2y17mdbq] {
padding: 20px;
text-align: center;
color: #888;
font-size: 13px;
}
.pagination-row[b-go2y17mdbq] {
padding: 8px 4px;
font-size: 12px;
color: #666;
}
.btn-green-scope[b-go2y17mdbq] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-go2y17mdbq] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-go2y17mdbq] {
background: #9dc99d;
cursor: default;
}
/* /Components/Interactive/FundSourceTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FUND SOURCE TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-yudbfau7pg] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Arial, sans-serif;
border: 1px solid #999;
}
.records-table thead tr.header td[b-yudbfau7pg] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-yudbfau7pg] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-yudbfau7pg] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-yudbfau7pg] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-yudbfau7pg] {
background-color: #fff;
}
.records-table tbody tr:hover[b-yudbfau7pg] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-yudbfau7pg] { width: 30px; }
.col-name[b-yudbfau7pg] { width: auto; }
.col-managers[b-yudbfau7pg] { width: auto; }
.col-note[b-yudbfau7pg] { width: 180px; }
.col-clinic[b-yudbfau7pg] { width: 40px; }
.col-status[b-yudbfau7pg] { width: 65px; }
.col-actions[b-yudbfau7pg] { width: 90px; position: relative; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* BREADCRUMB HIGHLIGHT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.text-highlight[b-yudbfau7pg] {
color: #cc0000;
font-weight: bold;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STATUS CELLS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.status-active[b-yudbfau7pg] {
color: #008000;
font-weight: bold;
}
.status-inactive[b-yudbfau7pg] {
color: #cc0000;
font-weight: bold;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INLINE NOTE EDITING */
/* ═══════════════════════════════════════════════════════════════════════════ */
.note-cell[b-yudbfau7pg] {
display: flex;
align-items: center;
gap: 4px;
}
.note-text[b-yudbfau7pg] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-edit-input[b-yudbfau7pg] {
flex: 1;
padding: 1px 4px;
font-size: 12px;
border: 1px solid #999;
border-radius: 2px;
min-width: 60px;
}
.note-btn[b-yudbfau7pg] {
border: none;
cursor: pointer;
padding: 1px 5px;
font-size: 11px;
border-radius: 2px;
line-height: 1.2;
flex-shrink: 0;
}
.note-btn-edit[b-yudbfau7pg] {
background-color: #4caf50;
color: #fff;
font-size: 10px;
padding: 2px 4px;
user-select: none;
}
.note-btn-edit:hover[b-yudbfau7pg] {
background-color: #388e3c;
}
.note-btn-edit:disabled[b-yudbfau7pg] {
background-color: #c0c0c0;
color: #888;
cursor: default;
opacity: 0.6;
}
.note-btn-edit:disabled:hover[b-yudbfau7pg] {
background-color: #c0c0c0;
}
.note-btn-save[b-yudbfau7pg] {
background-color: #4caf50;
color: #fff;
}
.note-btn-save:hover[b-yudbfau7pg] {
background-color: #388e3c;
}
.note-btn-cancel[b-yudbfau7pg] {
background-color: #999;
color: #fff;
}
.note-btn-cancel:hover[b-yudbfau7pg] {
background-color: #666;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION MENU ("⋯" DROPDOWN) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-menu-btn[b-yudbfau7pg] {
background: #e0e0e0;
border: 1px solid #aaa;
border-radius: 3px;
cursor: pointer;
padding: 0 6px;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
color: #333;
}
.action-menu-btn:hover[b-yudbfau7pg] {
background: #d0d0d0;
}
.action-menu-dropdown[b-yudbfau7pg] {
position: absolute;
right: 4px;
top: 100%;
background: #fff;
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
z-index: 100;
min-width: 100px;
}
.action-menu-item[b-yudbfau7pg] {
padding: 5px 10px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
}
.action-menu-item:hover[b-yudbfau7pg] {
background-color: #f0f0f0;
}
.action-menu-danger:hover[b-yudbfau7pg] {
background-color: #ffe0e0;
color: #cc0000;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-yudbfau7pg] {
width: 200px;
margin-right: 5px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-yudbfau7pg] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-yudbfau7pg] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-yudbfau7pg] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* /Components/Interactive/MultiSelectTaggedInput.razor.rz.scp.css */
.multi-select-input[b-6ztki052f3] {
position: relative;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
padding: 4px 6px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
max-width: 100%;
background: #fff;
}
/* ── pill tags (StaffInfoPicker style) ── */
.tag[b-6ztki052f3] {
display: inline-flex;
align-items: center;
gap: 4px;
background: #e0f0f6;
color: #2a6f8a;
border: 1px solid #b3d9e8;
border-radius: 12px;
padding: 2px 8px 2px 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
}
.tag-x[b-6ztki052f3] {
background: none;
border: none;
color: #2a6f8a;
cursor: pointer;
font-size: 13px;
padding: 0 2px;
margin-right: 0;
font-weight: normal;
line-height: 1;
border-radius: 50%;
user-select: none;
}
.tag-x:hover[b-6ztki052f3] {
color: #dc3545;
background: rgba(220, 53, 69, 0.1);
}
/* ── search input ── */
.tag-input[b-6ztki052f3] {
flex: 1;
min-width: 80px;
border: none;
outline: none;
font-size: 13px;
padding: 4px;
}
/* ── dropdown ── */
.dropdown-list[b-6ztki052f3] {
position: absolute;
top: calc(100% + 1px);
left: -1px;
right: -1px;
max-height: 180px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 0 0 4px 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.dropdown-item[b-6ztki052f3] {
padding: 6px 10px;
font-size: 13px;
cursor: pointer;
}
.dropdown-item:hover[b-6ztki052f3] {
background: #e0f0f6;
color: #2a6f8a;
}
/* /Components/Interactive/PaymentTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAYMENT TABLE - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Form Layout ──────────────────────────────────────────────────────────── */
.form-section[b-u4fw5ow95k] {
margin-bottom: 15px;
}
.form-row[b-u4fw5ow95k] {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
min-height: 28px;
}
.form-label[b-u4fw5ow95k] {
width: 170px;
min-width: 170px;
padding-right: 10px;
text-align: right;
color: #333;
}
.form-value[b-u4fw5ow95k] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.ilbl[b-u4fw5ow95k] {
font-size: 12px;
white-space: nowrap;
}
.req[b-u4fw5ow95k] {
color: #d9534f;
margin-left: 2px;
}
/* ── Input Sizes ──────────────────────────────────────────────────────────── */
.input-date[b-u4fw5ow95k] { width: 130px !important; }
.input-time[b-u4fw5ow95k] { width: 60px !important; height: 28px; }
.input-medium[b-u4fw5ow95k] { width: 180px !important; height: 28px; }
.input-full[b-u4fw5ow95k] { flex: 1; height: 28px; min-width: 300px; max-width: 900px; }
.input-select[b-u4fw5ow95k] { height: 28px; width: 200px; }
.input-select-lg[b-u4fw5ow95k] { height: 28px; width: 400px; }
.input-textarea[b-u4fw5ow95k] { flex: 1; min-width: 300px; max-width: 900px; min-height: 80px; resize: vertical; }
/* ── Receipt Code ─────────────────────────────────────────────────────────── */
.receipt-code[b-u4fw5ow95k] {
font-weight: bold;
color: #333;
}
/* ── Debt Button ──────────────────────────────────────────────────────────── */
.btn-debt[b-u4fw5ow95k],
.btn-debt-active[b-u4fw5ow95k] {
border: none;
padding: 4px 14px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #fff;
}
.btn-debt[b-u4fw5ow95k] { background: #5cb85c; }
.btn-debt:hover[b-u4fw5ow95k] { background: #4cae4c; }
.btn-debt-active[b-u4fw5ow95k] { background: #d9534f; }
.btn-debt-active:hover[b-u4fw5ow95k] { background: #c9302c; }
/* ── Summary Row ──────────────────────────────────────────────────────────── */
.summary-row[b-u4fw5ow95k] {
margin: 10px 0;
padding: 8px 12px;
background: #f5f5f5;
border: 1px solid #ddd;
font-size: 13px;
}
.summary-text[b-u4fw5ow95k] {
margin-left: 30px;
}
.summary-text strong[b-u4fw5ow95k] {
color: #333;
}
.text-debt[b-u4fw5ow95k] { color: #d9534f; }
/* ── Action Buttons ───────────────────────────────────────────────────────── */
.action-buttons[b-u4fw5ow95k] {
display: flex;
gap: 5px;
}
.bottom-actions[b-u4fw5ow95k] {
display: flex;
justify-content: flex-end;
gap: 5px;
margin-bottom: 10px;
}
.btn-green-scope[b-u4fw5ow95k] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-u4fw5ow95k] { background: #4cae4c; }
.btn-green-scope:disabled[b-u4fw5ow95k] { background: #9dc99d; cursor: default; }
.btn-gray-scope[b-u4fw5ow95k] {
background: linear-gradient(to bottom, #f9fafb 0%, #e5e7eb 100%);
color: #374151;
border: 1px solid #9ca3af;
padding: 4px 14px;
height: 28px;
font-size: 13px;
cursor: pointer;
border-radius: 2px;
white-space: nowrap;
}
.btn-gray-scope:hover[b-u4fw5ow95k] { background: linear-gradient(to bottom, #f3f4f6 0%, #d1d5db 100%); }
.btn-gray-scope:disabled[b-u4fw5ow95k] { background: #e5e7eb; color: #9ca3af; border-color: #d1d5db; cursor: default; }
/* ── Updated Info ─────────────────────────────────────────────────────────── */
.updated-info[b-u4fw5ow95k] {
color: #666;
font-size: 13px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.history-section[b-u4fw5ow95k] {
margin-top: 20px;
}
.table-wrapper[b-u4fw5ow95k] {
flex-direction: column;
align-items: stretch;
}
.table-container[b-u4fw5ow95k] {
width: 100%;
overflow-x: auto;
}
.history-table[b-u4fw5ow95k] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
border: 1px solid #999;
table-layout: fixed;
}
.history-table th[b-u4fw5ow95k] {
background-color: #c0c0c0;
border: 1px solid #999;
padding: 6px 4px;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
.history-table td[b-u4fw5ow95k] {
border: 1px solid #d0d0d0;
padding: 5px 4px;
vertical-align: middle;
overflow-wrap: anywhere;
word-break: keep-all;
}
.history-table tbody tr:nth-child(even)[b-u4fw5ow95k] { background-color: #eaeaea; }
.history-table tbody tr:nth-child(odd)[b-u4fw5ow95k] { background-color: #fff; }
.history-table tbody tr:hover[b-u4fw5ow95k] { background-color: #fdfdcd !important; }
.history-table tbody tr.row-active[b-u4fw5ow95k] { background-color: #d4edda !important; }
/* ── Column Widths ────────────────────────────────────────────────────────── */
.col-row[b-u4fw5ow95k] { width: 35px; }
.col-date[b-u4fw5ow95k] { width: 90px; }
.col-time[b-u4fw5ow95k] { width: 70px; }
.col-fund[b-u4fw5ow95k] { width: 280px; }
.col-amount[b-u4fw5ow95k] { width: 85px; }
.col-total[b-u4fw5ow95k] { width: 85px; }
.col-receipt[b-u4fw5ow95k] { width: 75px; }
.col-treatment[b-u4fw5ow95k] { width: 150px; }
.col-content[b-u4fw5ow95k] { width: 300px; }
.col-note[b-u4fw5ow95k] { width: auto; }
.col-updated[b-u4fw5ow95k] { width: 85px; }
.col-actions[b-u4fw5ow95k] { width: 65px; }
.col-check[b-u4fw5ow95k] { width: 30px; }
/* ── Cell Alignment ───────────────────────────────────────────────────────── */
.cell-center[b-u4fw5ow95k] { text-align: center; }
.cell-right[b-u4fw5ow95k] { text-align: right; }
.cell-left[b-u4fw5ow95k] { text-align: left; }
.cell-actions[b-u4fw5ow95k] { text-align: center; white-space: nowrap; }
/* ── Action Icons ─────────────────────────────────────────────────────────── */
.action-icon-lg[b-u4fw5ow95k] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-u4fw5ow95k] { opacity: 0.7; }
.action-icon-lg.disabled[b-u4fw5ow95k] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DELETE POPUP */
/* ═══════════════════════════════════════════════════════════════════════════ */
.popup-overlay[b-u4fw5ow95k] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.popup-box[b-u4fw5ow95k] {
background: #fff;
padding: 20px 28px;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
min-width: 300px;
max-width: 450px;
font-size: 13px;
}
.popup-actions[b-u4fw5ow95k] {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
/* ── Radzen DatePicker size (scoped) ─────────────────────────────────────── */
.form-value[b-u4fw5ow95k] .rz-date-scope {
width: 130px;
}
.form-value[b-u4fw5ow95k] .rz-date-scope .rz-inputtext {
height: 26px;
}
/* /Components/Interactive/PenaltyTypeForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PENALTY TYPE FORM - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-w719glu3hl] {
margin-bottom: 15px;
max-width: 600px;
}
.form-row[b-w719glu3hl] {
display: flex;
align-items: center;
margin-bottom: 10px;
min-height: 32px;
}
.form-label-wrapper[b-w719glu3hl] {
width: 130px;
height: fit-content;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center !important; /* Center within parent flex row */
padding-right: 10px;
}
.form-value[b-w719glu3hl] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Input Styles */
.input-full[b-w719glu3hl] {
width: 400px;
height: 26px;
}
.input-medium[b-w719glu3hl] {
width: 200px;
height: 26px;
}
.input-select[b-w719glu3hl] {
width: 200px;
}
/* Selected Tag (for clinic) */
.selected-tag[b-w719glu3hl] {
background: #e0e0e0;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: #333;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-remove[b-w719glu3hl] {
cursor: pointer;
font-weight: bold;
color: #666;
}
.tag-remove:hover[b-w719glu3hl] {
color: #c00;
}
/* Radio Group */
.checkbox-group[b-w719glu3hl] {
display: flex;
gap: 20px;
align-items: center;
}
.radio-label[b-w719glu3hl] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.radio-label input[type="radio"][b-w719glu3hl] {
margin: 0;
}
/* Updated Info */
.updated-info[b-w719glu3hl] {
color: #666;
font-size: 13px;
}
/* Action Buttons */
.action-buttons[b-w719glu3hl] {
display: flex;
gap: 8px;
margin-top: 10px;
}
.btn-green-scope[b-w719glu3hl] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-w719glu3hl] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-w719glu3hl] {
background: #9dc99d;
cursor: default;
}
.btn-blue[b-w719glu3hl] {
background: #5bc0de;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-blue:hover[b-w719glu3hl] {
background: #46b8da;
}
/* Required Field Indicator */
.req[b-w719glu3hl] {
color: #d9534f;
margin-left: 2px;
}
/* Shared Input Styles */
.tbox[b-w719glu3hl] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 8px;
font-size: 13px;
}
.tbox:focus[b-w719glu3hl] {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 3px rgba(102, 175, 233, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-w719glu3hl] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/PenaltyTypeTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PENALTY TYPE TABLE - Matching CustomerRecordsTable styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-h208bd4zly] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-h208bd4zly] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-h208bd4zly] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-h208bd4zly] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-h208bd4zly] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-h208bd4zly] {
background-color: #fff;
}
.records-table tbody tr:hover[b-h208bd4zly] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-h208bd4zly] {
width: 40px;
}
.col-name[b-h208bd4zly] {
width: auto;
}
.col-note[b-h208bd4zly] {
width: 300px;
}
.col-value[b-h208bd4zly] {
width: 180px;
}
.col-actions[b-h208bd4zly] {
width: 80px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CELL STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.item_c[b-h208bd4zly] {
text-align: center;
}
.item_l[b-h208bd4zly] {
text-align: left;
}
/* Name Link */
.records-table a.b12[b-h208bd4zly] {
color: #0066cc;
text-decoration: none;
}
.records-table a.b12:hover[b-h208bd4zly] {
text-decoration: underline;
}
/* Action Icons */
/*.action-icon {
cursor: pointer;
padding: 2px 4px;
font-size: 14px;
transition: opacity 0.15s ease;
}
.action-icon:hover {
opacity: 0.7;
}*/
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-h208bd4zly] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/PermissionTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PERMISSION TABLE - Component-specific styles only */
/* Uses global classes from app.css: */
/* - .admin_title, .admin_left, .admin_right */
/* - .cmd_01, .cmd_00, .drop_22 */
/* - .permission-table (in MainLayout.razor.css) */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Permission Tables Stack */
.permission-table-stack[b-18k1hj642m] {
background: #f0fdf4;
min-height: calc(100vh - 36px);
display: flex;
flex-direction: column;
gap: 8px;
}
/* Bigger headers and rows - override MainLayout.razor.css */
.permission-table-stack[b-18k1hj642m] .permission-table {
font-size: 12px;
}
.permission-table-stack[b-18k1hj642m] .permission-table th {
padding: 6px 8px;
font-size: 11px;
}
.permission-table-stack[b-18k1hj642m] .permission-table td {
padding: 4px 6px;
font-size: 12px;
}
/* Widen columns from 3rd to the end */
.permission-table-stack[b-18k1hj642m] .permission-table th:nth-child(n+3),
.permission-table-stack[b-18k1hj642m] .permission-table td:nth-child(n+3) {
width: 100px;
min-width: 100px;
}
.permission-table-stack[b-18k1hj642m] .permission-table input[type="checkbox"] {
width: 16px;
height: 16px;
}
/* Gear Icon - override TableTemplate.razor.css with !important */
.permission-table-stack[b-18k1hj642m] .gear-icon {
width: 16px !important;
height: 16px !important;
}
/* Loading/No data messages */
.loading-message[b-18k1hj642m],
.no-users-message[b-18k1hj642m] {
padding: 20px;
text-align: center;
color: #6b7280;
background: #f9fafb;
border: 1px solid #d1d5db;
}
/* /Components/Interactive/SalaryHistoryTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SALARY HISTORY TABLE - Component-specific styles only */
/* Uses global classes from app.css: */
/* - .admin-content, .admin_title, .admin_left, .admin_right */
/* - .content-padded, .action-icon, .no-data-message, .loading-message */
/* - .tbox_22, .cmd_00, .cmd_01, .rz-date-scope */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TAB BAR */
/* ═══════════════════════════════════════════════════════════════════════════ */
.salary-tabs[b-4qpxwanzyk] {
display: flex;
gap: 0;
border-bottom: 2px solid #c0c0c0;
padding: 0 5px;
background: #f5f5f5;
}
.tab-btn[b-4qpxwanzyk] {
padding: 6px 18px;
font-size: 12px;
font-family: inherit;
border: 1px solid #c0c0c0;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: linear-gradient(to bottom, #f9fafb 0%, #e5e7eb 100%);
color: #374151;
cursor: pointer;
position: relative;
top: 2px;
transition: background 0.15s ease;
}
.tab-btn:hover:not(:disabled):not(.active)[b-4qpxwanzyk] {
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
}
.tab-btn.active[b-4qpxwanzyk] {
background: #fff;
border-color: #999;
font-weight: bold;
color: #111;
z-index: 1;
}
.tab-btn:disabled[b-4qpxwanzyk] {
opacity: 0.5;
cursor: default;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-4qpxwanzyk] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-4qpxwanzyk] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}
.records-table tbody td[b-4qpxwanzyk] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
overflow-wrap: break-word;
word-wrap: break-word;
}
.records-table tbody tr[b-4qpxwanzyk] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-4qpxwanzyk] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-4qpxwanzyk] {
background-color: #fff;
}
.records-table tbody tr:hover[b-4qpxwanzyk] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ROW STATES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table tbody tr.row-adding[b-4qpxwanzyk],
.records-table tbody tr.row-adding:nth-child(even)[b-4qpxwanzyk],
.records-table tbody tr.row-adding:nth-child(odd)[b-4qpxwanzyk] {
background-color: #d4edda !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS (used via elements) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-4qpxwanzyk] { width: 30px; }
.col-employee[b-4qpxwanzyk] { width: 200px; }
.col-type[b-4qpxwanzyk] { width: 180px; }
.col-note[b-4qpxwanzyk] { /* auto — takes remaining space */ }
.col-amount[b-4qpxwanzyk] { width: 100px; }
.col-total-amount[b-4qpxwanzyk] { width: 160px; }
.col-date[b-4qpxwanzyk] { width: 95px; }
.col-datetime[b-4qpxwanzyk] { width: 120px; }
.col-updated[b-4qpxwanzyk] { width: 100px; }
.col-actions[b-4qpxwanzyk] { width: 90px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INLINE EDIT INPUT WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.w80[b-4qpxwanzyk] { width: 80px !important; }
.w100p[b-4qpxwanzyk] { width: 100% !important; }
.w120[b-4qpxwanzyk] { width: 120px !important; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAGINATION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pagination-row[b-4qpxwanzyk] {
text-align: right;
padding: 5px;
font-size: 11px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-4qpxwanzyk] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-4qpxwanzyk] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-4qpxwanzyk] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* /Components/Interactive/SalaryInfoTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SALARY INFO TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-vkay1wnexo] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
.records-table thead tr.header td[b-vkay1wnexo] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
white-space: nowrap;
}
.records-table tbody td[b-vkay1wnexo] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
}
.records-table tbody tr[b-vkay1wnexo] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even):not(.detail-row)[b-vkay1wnexo] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd):not(.detail-row)[b-vkay1wnexo] {
background-color: #fff;
}
.records-table tbody tr:hover:not(.detail-row)[b-vkay1wnexo] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-vkay1wnexo] { width: 30px; }
.col-staff[b-vkay1wnexo] { width: auto; }
.col-money[b-vkay1wnexo] { width: 140px; }
.col-date[b-vkay1wnexo] { width: 130px; }
.col-pct[b-vkay1wnexo] { width: 100px; }
.col-crud[b-vkay1wnexo] { width: 55px; }
.col-actions[b-vkay1wnexo] { width: 40px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SUMMARY ROW (one per staff member — shows current values) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.summary-row[b-vkay1wnexo] {
cursor: default;
}
.history-count[b-vkay1wnexo] {
font-size: 10px;
color: #888;
margin-left: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CURRENT ROW HIGHLIGHT inside history sub-table */
/* ═══════════════════════════════════════════════════════════════════════════ */
.current-row[b-vkay1wnexo] {
background-color: #e8f5e9 !important;
}
.current-tag[b-vkay1wnexo] {
display: inline-block;
background: #28a745;
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 8px;
margin-left: 6px;
vertical-align: middle;
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TAB BAR */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tab-bar[b-vkay1wnexo] {
display: flex;
gap: 0;
margin-bottom: 0;
border-bottom: 2px solid #4a90a4;
}
.tab-btn[b-vkay1wnexo] {
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 6px 6px 0 0;
background: #f0f0f0;
color: #555;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
margin-right: 2px;
}
.tab-btn:hover:not(.active)[b-vkay1wnexo] {
background: #e0e0e0;
}
.tab-btn.active[b-vkay1wnexo] {
background: #4a90a4;
color: #fff;
border-color: #4a90a4;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* EXPAND / COLLAPSE BUTTON */
/* ═══════════════════════════════════════════════════════════════════════════ */
.expand-btn[b-vkay1wnexo] {
display: inline-block;
cursor: pointer;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
user-select: none;
color: #4a90a4;
transition: background-color 0.15s ease;
}
.expand-btn:hover[b-vkay1wnexo] {
background-color: #e0f0f6;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CRUD BUTTONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.crud-btn[b-vkay1wnexo] {
display: inline-block;
cursor: pointer;
user-select: none;
padding: 1px 4px;
border-radius: 3px;
font-size: 12px;
transition: background-color 0.15s ease;
}
.crud-btn:hover[b-vkay1wnexo] {
background-color: #e0f0f6;
}
.crud-btn.disabled[b-vkay1wnexo] {
cursor: default;
opacity: 0.35;
pointer-events: none;
}
.confirm-group[b-vkay1wnexo] {
display: inline-flex;
gap: 2px;
}
.confirm-group .crud-btn[b-vkay1wnexo] {
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DETAIL ROW (expanded content) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.detail-row[b-vkay1wnexo] {
background-color: #f8fbfd !important;
}
.detail-row td[b-vkay1wnexo] {
border-top: none !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY PANEL (nested sub-table inside expanded row) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.history-panel[b-vkay1wnexo] {
margin: 6px 12px 6px 30px;
border-left: 3px solid #4a90a4;
background: #f0f7fa;
border-radius: 0 6px 6px 0;
padding: 8px 12px;
}
.history-heading[b-vkay1wnexo] {
font-size: 12px;
font-weight: 700;
color: #2a6f8a;
margin-bottom: 6px;
}
.history-table[b-vkay1wnexo] {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 11px;
background: #fff;
border: 1px solid #ccc;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY TABLE COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.hcol-tt[b-vkay1wnexo] { width: 35px; }
.hcol-date[b-vkay1wnexo] { width: 260px; }
.hcol-money[b-vkay1wnexo] { width: auto; }
.hcol-pct[b-vkay1wnexo] { width: auto; }
.hcol-updated[b-vkay1wnexo] { width: 230px; }
.hcol-updater[b-vkay1wnexo] { width: 130px; }
.hcol-actions[b-vkay1wnexo] { width: 80px; }
.history-table thead tr[b-vkay1wnexo] {
background-color: #e0eef4;
}
.history-table th[b-vkay1wnexo] {
padding: 4px 6px;
font-weight: 600;
font-size: 11px;
border: 1px solid #ccc;
white-space: nowrap;
color: #333;
}
.history-table td[b-vkay1wnexo] {
padding: 3px 6px;
border: 1px solid #ddd;
font-size: 11px;
line-height: 1.4;
}
.history-table tbody tr:nth-child(even)[b-vkay1wnexo] {
background-color: #f7f7f7;
}
.history-table tbody tr:hover[b-vkay1wnexo] {
background-color: #fdfdcd;
}
.history-table tbody tr.current-row[b-vkay1wnexo] {
background-color: #e8f5e9 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INLINE EDITING */
/* ═══════════════════════════════════════════════════════════════════════════ */
.editing-row[b-vkay1wnexo] {
background-color: #fff8e1 !important;
}
.edit-input[b-vkay1wnexo] {
width: 100%;
box-sizing: border-box;
padding: 2px 4px;
font-size: 11px;
font-family: inherit;
border: 1px solid #4a90a4;
border-radius: 3px;
outline: none;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edit-input:focus[b-vkay1wnexo] {
border-color: #2a6f8a;
box-shadow: 0 0 0 2px rgba(74, 144, 164, 0.2);
}
.edit-input.money[b-vkay1wnexo] {
text-align: left;
}
.edit-input.pct[b-vkay1wnexo] {
text-align: center;
}
/* Compact RadzenDatePicker for inline editing inside history-table cells */
[b-vkay1wnexo] .edit-date {
width: 100% !important;
}
[b-vkay1wnexo] .edit-date .rz-inputtext {
height: 22px !important;
font-size: 11px !important;
padding: 1px 4px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* UTILITY */
/* ═══════════════════════════════════════════════════════════════════════════ */
.sub-text[b-vkay1wnexo] {
font-size: 11px;
color: #666;
}
.no-data-message[b-vkay1wnexo] {
padding: 16px;
text-align: center;
color: #888;
}
/* /Components/Interactive/SideBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SIDEBAR - Compact elegant top bar */
/* ═══════════════════════════════════════════════════════════════════════════ */
.sidebar[b-x2c74mqxtg] {
width: 100%;
min-height: var(--sidebar-height);
position: sticky;
top: 0;
z-index: 100;
background: var(--sidebar-bg);
display: flex;
align-items: center;
padding: 0 var(--sidebar-padding-x);
}
/* Brand section */
.sidebar-brand[b-x2c74mqxtg] {
display: flex;
align-items: center;
gap: var(--sidebar-brand-gap);
padding-right: 12px;
margin-right: 6px;
border-right: 1px solid var(--sidebar-divider-color);
height: var(--sidebar-brand-divider-height);
text-decoration: none;
color: inherit;
}
.brand-icon[b-x2c74mqxtg] {
font-size: 11px;
line-height: 1;
}
.brand-text[b-x2c74mqxtg] {
color: var(--sidebar-text-color);
font-size: var(--text-xs);
font-weight: var(--font-medium);
font-family: var(--font-primary);
white-space: nowrap;
letter-spacing: 0.02em;
}
/* Navigation section */
.sidebar-nav[b-x2c74mqxtg] {
flex: 1;
height: 100%;
display: flex;
align-items: center;
overflow: visible;
}
/* /Components/Interactive/StaffRecordsTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STAFF RECORDS TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-t57j3ozhnj] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
.records-table thead tr.header td[b-t57j3ozhnj] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
white-space: nowrap;
}
.records-table tbody td[b-t57j3ozhnj] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
}
.records-table tbody tr[b-t57j3ozhnj] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-t57j3ozhnj] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-t57j3ozhnj] {
background-color: #fff;
}
.records-table tbody tr:hover[b-t57j3ozhnj] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS – defined via / for consistent sizing */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-t57j3ozhnj] { width: 25px; }
.col-name[b-t57j3ozhnj] { width: 180px; }
.col-roles[b-t57j3ozhnj] { width: 160px; }
.col-contact[b-t57j3ozhnj] { width: 180px; }
.col-birthday[b-t57j3ozhnj] { width: 75px; }
.col-gender[b-t57j3ozhnj] { width: 70px; }
.col-personal[b-t57j3ozhnj] { width: 260px; }
.col-address[b-t57j3ozhnj] { width: auto; }
.col-actions[b-t57j3ozhnj] { width: 90px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SUB TEXT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.sub-text[b-t57j3ozhnj] {
font-size: 11px;
color: #666;
margin-top: 1px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ROLE BADGES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.role-tag-list[b-t57j3ozhnj] {
display: flex;
flex-direction: column;
gap: 3px;
}
.role-badge[b-t57j3ozhnj] {
display: inline-block;
background: #e0f0f6;
color: #2a6f8a;
border: 1px solid #b3d9e8;
border-radius: 10px;
padding: 1px 8px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
width: fit-content;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-t57j3ozhnj] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-t57j3ozhnj] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-t57j3ozhnj] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* /Components/Interactive/TableTemplate.razor.rz.scp.css */
/* ===== Permission Table ===== */
.permission-table[b-pllw22dubd] {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-family: 'Segoe UI', -apple-system, sans-serif;
font-size: 11px;
background: #fff;
border: 1px solid #d1fae5;
}
/* Header - Matches sidebar gradient */
.permission-table thead tr.header[b-pllw22dubd] {
background: linear-gradient(135deg, #0f766e 0%, #15803d 50%, #166534 100%);
color: #fff;
}
/* Use ::deep to style elements rendered by child content */
.permission-table[b-pllw22dubd] th,
.permission-table[b-pllw22dubd] td {
padding: 4px 6px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.permission-table[b-pllw22dubd] th {
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
white-space: nowrap;
}
.permission-table[b-pllw22dubd] td {
border-bottom: 1px solid #d1fae5;
color: #475569;
}
/* Alignment - left align for name column */
.permission-table[b-pllw22dubd] th.item_l,
.permission-table[b-pllw22dubd] td.item_l {
text-align: left;
}
.permission-table[b-pllw22dubd] td.item_l {
color: #1e293b;
}
/* Rows */
.permission-table[b-pllw22dubd] tbody tr.alt-row { background: #f0fdf4; }
.permission-table[b-pllw22dubd] tbody tr:hover { background: #dcfce7; }
.permission-table[b-pllw22dubd] tbody tr:last-child td { border-bottom: none; }
/* Checkbox - centered in cell, teal accent */
.permission-table[b-pllw22dubd] input[type="checkbox"] {
width: 13px;
height: 13px;
margin: 0 auto;
cursor: pointer;
accent-color: #0f766e;
display: block;
}
.permission-table[b-pllw22dubd] input[type="checkbox"]:disabled {
cursor: default;
opacity: 0.4;
}
/* Dash placeholder - centered */
.permission-table[b-pllw22dubd] td span {
color: #94a3b8;
display: block;
text-align: center;
}
/* Gear icon - teal theme */
.permission-table[b-pllw22dubd] .gear-icon {
display: block;
width: 12px;
height: 12px;
margin: 0 auto;
background: #0f766e;
transition: transform 0.3s ease, background 0.15s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7.5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6.3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7.5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6.3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.permission-table[b-pllw22dubd] .gear-icon:hover {
background: #15803d;
transform: rotate(90deg);
}
/* /Components/Interactive/TreatmentProgressTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT PROGRESS TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout - CSS Grid */
.form-section[b-lov7uvmhiv] {
display: grid;
grid-template-columns: 160px 1fr;
grid-auto-rows: min-content; /* Each row fits its content */
gap: 0px 4px;
align-items: center; /* Vertically center both columns */
margin-bottom: 15px;
}
.form-row[b-lov7uvmhiv] {
display: contents; /* Children participate in parent grid */
}
.form-label-scope[b-lov7uvmhiv] {
text-align: right;
padding: 6px 0;
color: #333;
white-space: nowrap;
/* align-self: center no longer needed - inherited from parent */
}
.form-value[b-lov7uvmhiv] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
padding: 4px 0;
}
.info-icon[b-lov7uvmhiv] {
color: #0066cc;
cursor: help;
margin-left: 2px;
}
/* Input Sizes */
.input-tiny[b-lov7uvmhiv] {
width: 50px !important;
}
.input-small[b-lov7uvmhiv] {
width: 80px !important;
}
.input-medium[b-lov7uvmhiv] {
width: 180px !important;
}
.input-date[b-lov7uvmhiv] {
width: 120px !important;
}
.input-time[b-lov7uvmhiv] {
width: 55px !important;
}
.input-select[b-lov7uvmhiv] {
width: 300px;
font-size: 13px;
padding: 4px;
height: auto;
box-sizing: border-box;
}
.input-select-wide[b-lov7uvmhiv] {
width: 300px;
}
.input-textarea[b-lov7uvmhiv] {
width: 100%;
max-width: 700px;
min-height: 60px;
max-height: 100px;
resize: vertical;
}
.input-full[b-lov7uvmhiv] {
flex: 1;
min-width: 300px;
max-width: 700px;
font-size: 13px;
padding: 4px;
height: auto;
box-sizing: border-box;
}
/* Groups */
.checkbox-group[b-lov7uvmhiv],
.practitioner-group[b-lov7uvmhiv],
.time-group[b-lov7uvmhiv] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.radio-label[b-lov7uvmhiv],
.checkbox-label[b-lov7uvmhiv] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
/* Action Buttons */
.action-buttons[b-lov7uvmhiv] {
display: flex;
gap: 5px;
}
/* History Section - Full Width in Grid */
.history-section[b-lov7uvmhiv] {
grid-column: 1 / -1;
margin-top: 20px;
}
.history-section > .form-row[b-lov7uvmhiv] {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
}
.table-wrapper[b-lov7uvmhiv] {
flex-direction: column;
align-items: stretch;
}
.table-header-actions[b-lov7uvmhiv] {
display: flex;
justify-content: flex-end;
gap: 5px;
margin-bottom: 8px;
width: 100%;
}
.table-container[b-lov7uvmhiv] {
width: 100%;
overflow-x: auto;
}
/* Progress Table - KEPT AS IS */
.progress-table[b-lov7uvmhiv] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.progress-table th[b-lov7uvmhiv],
.progress-table td[b-lov7uvmhiv] {
overflow: hidden;
text-overflow: ellipsis;
resize: horizontal;
}
.progress-table th[b-lov7uvmhiv] {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 8px 5px;
text-align: left;
font-weight: normal;
white-space: nowrap;
}
.progress-table td[b-lov7uvmhiv] {
border: 1px solid #ddd;
padding: 6px 5px;
vertical-align: middle;
}
/* TT */
.progress-table th:nth-child(1)[b-lov7uvmhiv] {
width: 40px;
}
/* Ngày */
.progress-table th:nth-child(2)[b-lov7uvmhiv] {
width: 90px;
}
/* Trạng Thái */
.progress-table th:nth-child(3)[b-lov7uvmhiv] {
width: 100px;
}
/* Nội dung điều trị */
.progress-table th:nth-child(4)[b-lov7uvmhiv] {
width: auto;
}
/* Bác sỹ */
.progress-table th:nth-child(5)[b-lov7uvmhiv] {
width: 160px;
}
/* Trợ thủ */
.progress-table th:nth-child(6)[b-lov7uvmhiv] {
width: 160px;
}
/* Đến Đúng Hẹn */
.progress-table th:nth-child(7)[b-lov7uvmhiv] {
width: 100px;
}
/* Ghi chú */
.progress-table th:nth-child(8)[b-lov7uvmhiv] {
width: 200px;
}
/* Cập nhật */
.progress-table th:nth-child(9)[b-lov7uvmhiv] {
width: 100px;
}
/* Thao tác */
.progress-table th:nth-child(10)[b-lov7uvmhiv] {
width: 80px;
}
/* Checkbox */
.progress-table th:nth-child(11)[b-lov7uvmhiv] {
width: 30px;
}
.progress-table tbody tr:hover[b-lov7uvmhiv] {
background-color: #f9f9f9;
}
.progress-table th.cell-center[b-lov7uvmhiv],
.progress-table td.cell-center[b-lov7uvmhiv],
.cell-center[b-lov7uvmhiv] {
text-align: center;
}
.cell-step[b-lov7uvmhiv] {
color: #d9534f;
font-weight: bold;
}
.cell-actions[b-lov7uvmhiv] {
white-space: nowrap;
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-lov7uvmhiv] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-lov7uvmhiv] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-lov7uvmhiv] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* ── Radzen DatePicker size (scoped) ─────────────────────────────────────── */
.form-value[b-lov7uvmhiv] .rz-date-scope {
width: 130px;
}
.form-value[b-lov7uvmhiv] .rz-date-scope .rz-inputtext {
height: 26px;
}
/* /Components/Interactive/TreatmentRecordTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT RECORD TABLE - Component-specific styles only */
/* Uses global classes from app.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-41r5gw0vu0] {
margin-bottom: 15px;
}
.form-row[b-41r5gw0vu0] {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
min-height: 28px;
}
.form-label[b-41r5gw0vu0] {
width: 160px;
min-width: 160px;
padding-right: 10px;
text-align: right;
color: #333;
}
.form-value[b-41r5gw0vu0] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.info-icon[b-41r5gw0vu0] {
color: #0066cc;
cursor: help;
}
/* Input Sizes */
.input-tiny[b-41r5gw0vu0] {
width: 50px !important;
}
.input-small[b-41r5gw0vu0] {
width: 120px !important;
}
.input-medium[b-41r5gw0vu0] {
height: 28px;
width: 150px !important;
}
.input-date[b-41r5gw0vu0] { width: 120px !important; }
.input-time[b-41r5gw0vu0] { width: 55px !important; }
.input-select[b-41r5gw0vu0] { height: 28px; width: 200px; }
.input-full[b-41r5gw0vu0] {
flex: 1;
height: 28px;
min-width: 300px;
max-width: 900px;
}
/* Groups */
.cost-group[b-41r5gw0vu0],
.checkbox-group[b-41r5gw0vu0] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.practitioner-group[b-41r5gw0vu0] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
position: relative; /* Required for dropdown positioning */
}
.radio-label[b-41r5gw0vu0],
.checkbox-label[b-41r5gw0vu0] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
.with-button[b-41r5gw0vu0] {
display: flex;
gap: 5px;
width: 100%;
}
.with-button .input-full[b-41r5gw0vu0] {
flex: 1;
}
/* Action Buttons */
.action-buttons[b-41r5gw0vu0] {
display: flex;
gap: 5px;
}
/* History Section */
.history-section[b-41r5gw0vu0] {
margin-top: 20px;
}
.table-wrapper[b-41r5gw0vu0] {
flex-direction: column;
align-items: stretch;
}
.table-container[b-41r5gw0vu0] {
width: 100%;
overflow-x: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.history-table[b-41r5gw0vu0] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
border: 1px solid #999;
table-layout: fixed;
}
.history-table th[b-41r5gw0vu0] {
background-color: #c0c0c0;
border: 1px solid #999;
padding: 6px 4px;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
.history-table td[b-41r5gw0vu0] {
border: 1px solid #d0d0d0;
padding: 5px 4px;
vertical-align: middle;
}
.history-table tbody tr:nth-child(even)[b-41r5gw0vu0] {
background-color: #eaeaea;
}
.history-table tbody tr:nth-child(odd)[b-41r5gw0vu0] {
background-color: #fff;
}
.history-table tbody tr:hover[b-41r5gw0vu0] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-session[b-41r5gw0vu0] { width: 75px; }
.col-treatment[b-41r5gw0vu0] { width: 380px; }
.col-progress[b-41r5gw0vu0] { width: 70px; }
.col-practitioner[b-41r5gw0vu0] { width: 180px; }
.col-price[b-41r5gw0vu0] { width: 100px; }
.col-qty[b-41r5gw0vu0] { width: 35px; }
.col-discount-pct[b-41r5gw0vu0] { width: 50px; }
.col-discount-amt[b-41r5gw0vu0] { width: 100px; }
.col-total[b-41r5gw0vu0] { width: 100px; }
.col-notes[b-41r5gw0vu0] { width: auto; }
.col-actions[b-41r5gw0vu0] { width: 90px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CELL STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.cell-session[b-41r5gw0vu0] {
text-align: center;
background-color: #ffffcc !important;
}
.session-number[b-41r5gw0vu0] { font-weight: bold; }
.session-date[b-41r5gw0vu0] { font-size: 11px; color: #666; }
.cell-treatment[b-41r5gw0vu0] {
text-align: left;
}
.treatment-author[b-41r5gw0vu0] { color: #999; }
.cell-practitioner[b-41r5gw0vu0] {
text-align: left;
}
.cell-center[b-41r5gw0vu0] {
text-align: center;
}
.cell-progress[b-41r5gw0vu0] { text-align: center; }
.cell-actions[b-41r5gw0vu0] { text-align: center; }
.progress-link[b-41r5gw0vu0] {
color: #0066cc;
text-decoration: none;
}
.progress-link:hover[b-41r5gw0vu0] { text-decoration: underline; }
.cell-notes[b-41r5gw0vu0] {
text-align: left;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* LARGE ACTION ICONS (Thao tác column) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-icon-lg[b-41r5gw0vu0] {
font-size: 14px;
cursor: pointer;
padding: 2px 3px;
transition: opacity 0.15s ease;
display: inline-block;
user-select: none;
}
.action-icon-lg:hover[b-41r5gw0vu0] {
opacity: 0.7;
}
.action-icon-lg.disabled[b-41r5gw0vu0] {
opacity: 0.4;
pointer-events: none;
cursor: default;
color: #6b7280 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Customized button */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ===== Content Buttons ===== */
/*.btn-green-scope {
background: linear-gradient(to bottom, #15803d 0%, #166534 100%);
color: #fff;
border: 1px solid #14532d;
padding: 1px 8px;
height: 28px;
font-size: 13px;
font-family: inherit;
cursor: pointer;
border-radius: 2px;
white-space: nowrap;
}
.btn-green-scope:hover {
background: linear-gradient(to bottom, #16a34a 0%, #15803d 100%);
}*/
.btn-green-scope[b-41r5gw0vu0] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-41r5gw0vu0] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-41r5gw0vu0] {
background: #9dc99d;
cursor: default;
}
.btn-gray-scope[b-41r5gw0vu0] {
background: linear-gradient(to bottom, #f9fafb 0%, #e5e7eb 100%);
color: #374151;
border: 1px solid #9ca3af;
padding: 1px 8px;
height: 28px;
font-size: 13px;
font-family: inherit;
cursor: pointer;
border-radius: 2px;
white-space: nowrap;
}
.btn-gray-scope:hover[b-41r5gw0vu0] {
background: linear-gradient(to bottom, #f3f4f6 0%, #d1d5db 100%);
}
.btn-gray-scope:disabled[b-41r5gw0vu0] {
background: #e5e7eb;
color: #9ca3af;
border-color: #d1d5db;
cursor: default;
}
/* Updated Info */
.updated-info[b-41r5gw0vu0] {
color: #666;
font-size: 13px;
}
/* Dropdown wrapper for positioning */
.dropdown-wrapper[b-41r5gw0vu0] {
position: relative;
display: inline-block;
}
/* Override dropdown-list width */
.dropdown-wrapper .dropdown-list[b-41r5gw0vu0] {
min-width: 150px; /* Match input-medium width */
width: auto;
}
/* ── Radzen DatePicker size (scoped) ─────────────────────────────────────── */
.form-value[b-41r5gw0vu0] .rz-date-scope {
width: 130px;
}
.form-value[b-41r5gw0vu0] .rz-date-scope .rz-inputtext {
height: 26px;
}
/* Ensure Radzen date/calendar popup displays above page content */
.rz-overlay-pane[b-41r5gw0vu0],
.rz-calendar[b-41r5gw0vu0],
.rz-datepicker-panel[b-41r5gw0vu0],
.rz-dropdown-panel[b-41r5gw0vu0] {
position: fixed !important;
z-index: 99999 !important;
pointer-events: auto !important;
}
.link-like[b-41r5gw0vu0] {
color: #0066cc; /* same link color used elsewhere */
text-decoration: underline;
cursor: pointer;
background: none;
border: none;
padding: 0;
font: inherit;
}
.link-like:hover[b-41r5gw0vu0],
.link-like:focus[b-41r5gw0vu0] {
color: #004a99; /* darker on hover/focus */
}
/* /Components/Interactive/TreatmentTypeForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TYPE FORM - Detailed Form Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Header Controls */
.search-input[b-9ovfqvg7w0] {
width: 180px;
height: 26px;
padding: 4px 8px;
font-size: 12px !important;
}
.group-filter[b-9ovfqvg7w0] {
width: 180px;
height: 26px;
padding: 4px 8px;
font-size: 12px !important;
}
/* Form Layout */
.form-section[b-9ovfqvg7w0] {
margin-bottom: 15px;
max-width: 900px;
}
.form-row[b-9ovfqvg7w0] {
display: flex;
align-items: center;
margin-bottom: 8px;
min-height: 36px;
}
.form-label-wrapper[b-9ovfqvg7w0] {
width: 140px;
height: fit-content;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center; /* Center label wrapper within row */
padding-right: 10px;
}
.form-value[b-9ovfqvg7w0] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.req[b-9ovfqvg7w0] {
color: #d9534f;
margin-left: 2px;
}
/* Input Styles */
.input-full[b-9ovfqvg7w0] {
flex: 1;
height: 26px;
min-width: 400px;
max-width: 600px;
}
.input-select[b-9ovfqvg7w0] {
width: 350px;
height: 28px;
}
.input-price[b-9ovfqvg7w0] {
width: 100px;
text-align: right;
height: 26px;
}
.input-currency[b-9ovfqvg7w0] {
width: 50px;
height: 26px;
}
.input-consumption[b-9ovfqvg7w0] {
width: 80px;
text-align: right;
}
.input-percent[b-9ovfqvg7w0] {
width: 60px;
text-align: right;
}
.input-textarea[b-9ovfqvg7w0] {
flex: 1;
width: 600px;
height: 80px;
}
/* Price Group */
.price-group[b-9ovfqvg7w0] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.field-label[b-9ovfqvg7w0] {
font-size: 12px;
color: #666;
}
.currency-suffix[b-9ovfqvg7w0] {
font-size: 12px;
color: #333;
}
/* Selected Tag */
.selected-tag[b-9ovfqvg7w0] {
background: #e0e0e0;
padding: 3px 10px;
border-radius: 3px;
font-size: 12px;
color: #333;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-remove[b-9ovfqvg7w0] {
cursor: pointer;
font-weight: bold;
color: #666;
font-size: 14px;
}
.tag-remove:hover[b-9ovfqvg7w0] {
color: #c00;
}
/* Checkbox Column Layout */
.checkbox-column[b-9ovfqvg7w0] {
display: flex;
flex-direction: column;
gap: 6px;
}
.checkbox-label[b-9ovfqvg7w0] {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
}
.checkbox-label input[type="checkbox"][b-9ovfqvg7w0] {
margin: 0;
}
/* Radio Column Layout */
.radio-column[b-9ovfqvg7w0] {
display: flex;
flex-direction: column;
gap: 6px;
}
.radio-row[b-9ovfqvg7w0] {
display: flex;
gap: 20px;
align-items: center;
}
.radio-label[b-9ovfqvg7w0] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.radio-label input[type="radio"][b-9ovfqvg7w0] {
margin: 0;
}
/* Updated Info */
.updated-info[b-9ovfqvg7w0] {
color: #666;
font-size: 13px;
}
/* Action Buttons */
.action-buttons[b-9ovfqvg7w0] {
display: flex;
gap: 8px;
margin-top: 15px;
}
.btn-green-scope[b-9ovfqvg7w0] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-9ovfqvg7w0] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-9ovfqvg7w0] {
background: #9dc99d;
cursor: default;
}
.btn-blue[b-9ovfqvg7w0] {
background: linear-gradient(to bottom, #5bc0de, #46b8da);
color: #fff;
border: 1px solid #46b8da;
padding: 6px 16px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-blue:hover[b-9ovfqvg7w0] {
background: linear-gradient(to bottom, #46b8da, #31b0d5);
}
/* Shared Input Styles */
.tbox[b-9ovfqvg7w0] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
}
.tbox:focus[b-9ovfqvg7w0] {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 3px rgba(102, 175, 233, 0.4);
}
/* /Components/Interactive/TreatmentTypeGroupForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TYPE GROUP FORM - Component-specific styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Form Layout */
.form-section[b-61vs1aenaw] {
margin-bottom: 15px;
max-width: 600px;
}
.form-row[b-61vs1aenaw] {
display: flex;
align-items: center;
margin-bottom: 10px;
min-height: 32px;
}
.form-label-wrapper[b-61vs1aenaw] {
width: 110px;
height: fit-content;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center !important; /* Center within parent flex row */
padding-right: 10px;
}
.form-value[b-61vs1aenaw] {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Input Styles */
.input-full[b-61vs1aenaw] {
flex: 1;
width: 400px;
height: 26px;
}
.input-select[b-61vs1aenaw] {
width: 200px;
}
.input-textarea[b-61vs1aenaw] {
flex: 1;
width: 400px;
height: 80px;
}
/* Selected Tag (for clinic) */
.selected-tag[b-61vs1aenaw] {
background: #e0e0e0;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: #333;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-remove[b-61vs1aenaw] {
cursor: pointer;
font-weight: bold;
color: #666;
}
.tag-remove:hover[b-61vs1aenaw] {
color: #c00;
}
/* Radio Group */
.checkbox-group[b-61vs1aenaw] {
display: flex;
gap: 20px;
align-items: center;
}
.radio-label[b-61vs1aenaw] {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 13px;
}
.radio-label input[type="radio"][b-61vs1aenaw] {
margin: 0;
}
/* Updated Info */
.updated-info[b-61vs1aenaw] {
color: #666;
font-size: 13px;
}
/* Action Buttons */
.action-buttons[b-61vs1aenaw] {
display: flex;
gap: 8px;
margin-top: 10px;
}
.btn-green-scope[b-61vs1aenaw] {
background: #5cb85c;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-green-scope:hover[b-61vs1aenaw] {
background: #4cae4c;
}
.btn-green-scope:disabled[b-61vs1aenaw] {
background: #9dc99d;
cursor: default;
}
.btn-blue[b-61vs1aenaw] {
background: #5bc0de;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}
.btn-blue:hover[b-61vs1aenaw] {
background: #46b8da;
}
/* Required Field Indicator */
.req[b-61vs1aenaw] {
color: #d9534f;
margin-left: 2px;
}
/* Shared Input Styles */
.tbox[b-61vs1aenaw] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 8px;
font-size: 13px;
}
.tbox:focus[b-61vs1aenaw] {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 3px rgba(102, 175, 233, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-61vs1aenaw] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/TreatmentTypeGroupTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TYPE GROUP TABLE - Matching CustomerRecordsTable styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-qb33b1vnt7] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-qb33b1vnt7] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-qb33b1vnt7] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-qb33b1vnt7] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-qb33b1vnt7] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-qb33b1vnt7] {
background-color: #fff;
}
.records-table tbody tr:hover[b-qb33b1vnt7] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-qb33b1vnt7] { width: 40px; }
.col-name[b-qb33b1vnt7] { width: auto; }
.col-note[b-qb33b1vnt7] { width: 300px; }
.col-status[b-qb33b1vnt7] { width: 80px; }
.col-actions[b-qb33b1vnt7] { width: 80px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CELL STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.item_c[b-qb33b1vnt7] { text-align: center; }
.item_l[b-qb33b1vnt7] { text-align: left; }
/* Name Link */
.records-table a.b12[b-qb33b1vnt7] {
color: #0066cc;
text-decoration: none;
}
.records-table a.b12:hover[b-qb33b1vnt7] {
text-decoration: underline;
}
/* Action Icons */
/*.action-icon {
cursor: pointer;
padding: 2px 4px;
font-size: 14px;
transition: opacity 0.15s ease;
}
.action-icon:hover {
opacity: 0.7;
}*/
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.search-input[b-qb33b1vnt7] {
width: 200px;
margin-right: 5px;
}
/* /Components/Interactive/TreatmentTypeTable.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT TYPE TABLE - Service Price List Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Header Controls */
.search-input[b-zd2yc3up2l] {
width: 180px;
height: 26px;
padding: 4px 8px;
}
.group-filter[b-zd2yc3up2l] {
width: 180px;
height: 26px;
padding: 4px 8px;
}
/*.cmd_btn {
background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
color: #333;
border: 1px solid #bbb;
padding: 4px 12px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.cmd_btn:hover {
background: linear-gradient(to bottom, #e8e8e8, #d0d0d0);
border-color: #999;
}
.cmd_btn:disabled {
background: #f0f0f0;
color: #999;
cursor: default;
}*/
/* Table Container */
.table-container[b-zd2yc3up2l] {
width: 100%;
overflow-x: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.records-table[b-zd2yc3up2l] {
background-color: #fff;
border-collapse: collapse;
width: 100%;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
border: 1px solid #999;
}
/* Header row - gray background */
.records-table thead tr.header td[b-zd2yc3up2l] {
background-color: #c0c0c0;
font-weight: bold;
border: 1px solid #999;
padding: 4px;
font-size: 12px;
}
.records-table tbody td[b-zd2yc3up2l] {
padding: 4px;
font-size: 12px;
border: 1px solid #d0d0d0;
line-height: 1.4;
}
.records-table tbody tr[b-zd2yc3up2l] {
border-bottom: 1px solid #d0d0d0;
}
.records-table tbody tr:nth-child(even)[b-zd2yc3up2l] {
background-color: #eaeaea;
}
.records-table tbody tr:nth-child(odd)[b-zd2yc3up2l] {
background-color: #fff;
}
.records-table tbody tr:hover[b-zd2yc3up2l] {
background-color: #fdfdcd !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATA TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.data-table[b-zd2yc3up2l] {
width: 100%;
border-collapse: collapse;
font-size: 12px;
border: 1px solid #999;
table-layout: fixed;
min-width: 1400px;
}
.data-table th[b-zd2yc3up2l] {
background: linear-gradient(to bottom, #6b8e23 0%, #556b2f 100%);
color: #fff;
border: 1px solid #4a6118;
padding: 6px 4px;
text-align: center;
font-weight: bold;
white-space: nowrap;
font-size: 11px;
}
.data-table td[b-zd2yc3up2l] {
border: 1px solid #d0d0d0;
padding: 4px 6px;
vertical-align: middle;
font-size: 11px;
}
.data-table tbody tr:nth-child(even)[b-zd2yc3up2l] {
background-color: #f5f5f5;
}
.data-table tbody tr:nth-child(odd)[b-zd2yc3up2l] {
background-color: #fff;
}
.data-table tbody tr:hover[b-zd2yc3up2l] {
background-color: #ffffcc !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMN WIDTHS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.col-tt[b-zd2yc3up2l] {
width: 30px;
}
.col-name[b-zd2yc3up2l] {
width: auto;
min-width: 300px;
}
.col-unit[b-zd2yc3up2l] {
width: 100px;
}
.col-price[b-zd2yc3up2l] {
width: 160px;
}
.col-currency[b-zd2yc3up2l] {
width: 50px;
}
.col-group[b-zd2yc3up2l] {
width: 280px;
}
.col-status[b-zd2yc3up2l] {
width: 80px;
}
.col-actions[b-zd2yc3up2l] {
width: 100px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CELL STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.cell-center[b-zd2yc3up2l] {
text-align: center;
}
.cell-right[b-zd2yc3up2l] {
text-align: right;
}
.cell-left[b-zd2yc3up2l] {
text-align: left;
}
.cell-actions[b-zd2yc3up2l] {
text-align: center;
white-space: nowrap;
}
/* Item Link */
.item-link[b-zd2yc3up2l] {
color: #333;
text-decoration: none;
}
.item-link:hover[b-zd2yc3up2l] {
color: #0066cc;
text-decoration: underline;
}
/* Green Badge for numeric values */
.green-badge[b-zd2yc3up2l] {
display: inline-block;
background: #5cb85c;
color: #fff;
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
min-width: 18px;
text-align: center;
}
/* Status Text */
.status-text[b-zd2yc3up2l] {
color: #333;
}
/* Action Icons */
/*.action-icon {
cursor: pointer;
padding: 1px 3px;
font-size: 12px;
transition: opacity 0.15s ease;
}
.action-icon:hover {
opacity: 0.7;
}*/
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SHARED INPUT STYLES */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tbox[b-zd2yc3up2l] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 12px;
}
.tbox:focus[b-zd2yc3up2l] {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 3px rgba(102, 175, 233, 0.4);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xj6gbb6un8] {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100%;
}
main[b-xj6gbb6un8] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
article[b-xj6gbb6un8] {
padding: 0 !important;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#blazor-error-ui[b-xj6gbb6un8] {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-xj6gbb6un8] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.permission-table[b-xj6gbb6un8] {
width: 100%;
border-collapse: collapse;
font-family: 'Segoe UI', -apple-system, sans-serif;
font-size: 11px;
background: #fff;
border: 1px solid #e2e8f0;
table-layout: fixed;
}
/* Header */
.permission-table thead tr.header[b-xj6gbb6un8] {
background: #1e293b;
color: #fff;
}
.permission-table th[b-xj6gbb6un8],
.permission-table td[b-xj6gbb6un8] {
padding: 4px 6px;
vertical-align: middle;
}
.permission-table th[b-xj6gbb6un8] {
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
white-space: nowrap;
}
.permission-table td[b-xj6gbb6un8] {
border-bottom: 1px solid #e2e8f0;
color: #475569;
}
/* Alignment classes */
.permission-table .item_l[b-xj6gbb6un8] { text-align: left; }
.permission-table .item_c[b-xj6gbb6un8] { text-align: center; }
.permission-table td.item_l[b-xj6gbb6un8] { color: #1e293b; }
/* Column widths */
.permission-table th:nth-child(1)[b-xj6gbb6un8],
.permission-table td:nth-child(1)[b-xj6gbb6un8] { width: 30px; }
.permission-table th:nth-child(2)[b-xj6gbb6un8],
.permission-table td:nth-child(2)[b-xj6gbb6un8] { width: 36px; }
.permission-table th:nth-child(n+4)[b-xj6gbb6un8],
.permission-table td:nth-child(n+4)[b-xj6gbb6un8] { width: 60px; }
/* Rows */
.permission-table tbody tr.alt-row[b-xj6gbb6un8] { background: #f8fafc; }
.permission-table tbody tr:hover[b-xj6gbb6un8] { background: #f1f5f9; }
.permission-table tbody tr:last-child td[b-xj6gbb6un8] { border-bottom: none; }
/* Checkbox */
.permission-table input[type="checkbox"][b-xj6gbb6un8] {
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
accent-color: #0d9488;
}
.permission-table input[type="checkbox"]:disabled[b-xj6gbb6un8] {
cursor: default;
opacity: 0.4;
}
/* Dash placeholder */
.permission-table td span[b-xj6gbb6un8] { color: #94a3b8; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* NAV MENU - Compact elegant style */
/* ═══════════════════════════════════════════════════════════════════════════ */
.navbar-toggler[b-wvjpgclgl4],
.top-row[b-wvjpgclgl4] {
display: none;
pointer-events: none;
}
.nav-scrollable[b-wvjpgclgl4] {
height: 100%;
display: flex;
align-items: center;
}
.nav[b-wvjpgclgl4] {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
gap: 0;
user-select: none;
-webkit-user-select: none;
}
.nav-item[b-wvjpgclgl4] {
font-size: var(--text-xs);
padding: 0;
height: 100%;
display: flex;
align-items: center;
}
.nav-item:first-of-type[b-wvjpgclgl4],
.nav-item:last-of-type[b-wvjpgclgl4] {
padding: 0;
}
.nav-item.px-3[b-wvjpgclgl4] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Links and buttons in nav */
.nav-item[b-wvjpgclgl4] .nav-link,
.nav-item[b-wvjpgclgl4] button.nav-link,
.nav-item label.nav-link[b-wvjpgclgl4] {
color: rgba(255, 255, 255, 0.8);
background: none;
border: none;
border-radius: 0;
height: 24px;
padding: 0 8px;
display: flex;
align-items: center;
white-space: nowrap;
cursor: pointer;
font-weight: var(--font-normal);
font-size: var(--text-xs);
font-family: var(--font-primary);
line-height: 24px;
margin: 0;
letter-spacing: 0.01em;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.nav-item[b-wvjpgclgl4] .nav-link:hover,
.nav-item[b-wvjpgclgl4] button.nav-link:hover,
.nav-item label.nav-link:hover[b-wvjpgclgl4] {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.nav-item[b-wvjpgclgl4] a.active {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.nav-item[b-wvjpgclgl4] form {
margin: 0;
padding: 0;
display: flex;
align-items: center;
height: 100%;
}
.bi[b-wvjpgclgl4] {
display: none;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FLYOUT - Compact elegant dropdown */
/* ═══════════════════════════════════════════════════════════════════════════ */
.nav-flyout[b-wvjpgclgl4] {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.flyout-toggle[b-wvjpgclgl4] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.flyout-backdrop[b-wvjpgclgl4] {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2999;
cursor: default;
}
.flyout-toggle:checked ~ .flyout-backdrop[b-wvjpgclgl4] {
display: block;
}
.nav-flyout-panel[b-wvjpgclgl4] {
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
gap: 0;
min-width: 140px;
padding: 3px 0;
background: linear-gradient(135deg, #0d6b63 0%, #127a35 50%, #14582d 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
z-index: 3000;
display: none;
}
.flyout-toggle:checked ~ .nav-flyout-panel[b-wvjpgclgl4] {
display: flex;
}
.flyout-toggle:checked ~ label.flyout-trigger[b-wvjpgclgl4] {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.nav-flyout-link[b-wvjpgclgl4] {
color: rgba(255, 255, 255, 0.85);
background: none;
border: none;
height: 24px;
display: flex;
align-items: center;
padding: 0 10px;
text-decoration: none;
white-space: nowrap;
font-size: var(--text-xs);
font-family: var(--font-primary);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.nav-flyout-link:hover[b-wvjpgclgl4] {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.nav-flyout-link.active[b-wvjpgclgl4] {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-w8jl7dz0nq],
.components-reconnect-repeated-attempt-visible[b-w8jl7dz0nq],
.components-reconnect-failed-visible[b-w8jl7dz0nq],
.components-pause-visible[b-w8jl7dz0nq],
.components-resume-failed-visible[b-w8jl7dz0nq],
.components-rejoining-animation[b-w8jl7dz0nq] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-retrying[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-failed[b-w8jl7dz0nq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-w8jl7dz0nq] {
display: block;
}
#components-reconnect-modal[b-w8jl7dz0nq] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-w8jl7dz0nq 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-w8jl7dz0nq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-w8jl7dz0nq 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-w8jl7dz0nq]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-w8jl7dz0nq 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-w8jl7dz0nq {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-w8jl7dz0nq {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-w8jl7dz0nq {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-w8jl7dz0nq] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-w8jl7dz0nq] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-w8jl7dz0nq] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-w8jl7dz0nq] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-w8jl7dz0nq] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-w8jl7dz0nq] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-w8jl7dz0nq] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-w8jl7dz0nq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-w8jl7dz0nq] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-w8jl7dz0nq {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DASHBOARD HOME PAGE (static SSR – no interactivity needed) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.home-container[b-jd8tw8pr61] {
max-width: 1100px;
margin: 0 auto;
padding: 32px 20px;
}
.home-welcome[b-jd8tw8pr61] {
text-align: center;
margin-bottom: 32px;
}
.home-welcome h2[b-jd8tw8pr61] {
font-size: 24px;
font-weight: 600;
color: #1a3c5e;
margin: 0 0 10px;
}
.home-welcome p[b-jd8tw8pr61] {
font-size: 14px;
color: #555;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CARD GRID */
/* ═══════════════════════════════════════════════════════════════════════════ */
.home-grid[b-jd8tw8pr61] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.home-card[b-jd8tw8pr61] {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.2s ease;
}
.home-card:hover[b-jd8tw8pr61] {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CARD HEADER (color-coded per category) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.card-heading[b-jd8tw8pr61] {
font-size: 16px;
font-weight: 600;
padding: 14px 18px;
border-radius: 8px 8px 0 0;
color: #fff;
}
.card-heading.system[b-jd8tw8pr61] { background: #37474f; }
.card-heading.data[b-jd8tw8pr61] { background: #1565c0; }
.card-heading.finance[b-jd8tw8pr61] { background: #2e7d32; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CARD BODY */
/* ═══════════════════════════════════════════════════════════════════════════ */
.card-desc[b-jd8tw8pr61] {
font-size: 13px;
color: #666;
padding: 14px 18px 6px;
margin: 0;
line-height: 1.5;
}
.card-links[b-jd8tw8pr61] {
list-style: none;
margin: 0;
padding: 8px 18px 18px;
}
.card-links li[b-jd8tw8pr61] {
padding: 0;
margin: 0;
}
.card-links a[b-jd8tw8pr61] {
display: block;
padding: 10px 12px;
font-size: 14px;
color: #1a3c5e;
text-decoration: none;
border-radius: 5px;
transition: background 0.15s ease, color 0.15s ease;
}
.card-links a:hover[b-jd8tw8pr61] {
background: #e8f0fe;
color: #0d47a1;
}
.card-links a[b-jd8tw8pr61]::before {
content: "→ ";
color: #999;
margin-right: 6px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.home-grid[b-jd8tw8pr61] {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.home-grid[b-jd8tw8pr61] {
grid-template-columns: repeat(2, 1fr);
}
}
/* /Components/Popup/AdvanceHistoryPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-t9m5ko8xvg] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-dialog[b-t9m5ko8xvg] { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); width: 600px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; }
.modal-header[b-t9m5ko8xvg] { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #4a90a4; color: #fff; border-radius: 8px 8px 0 0; }
.modal-header h3[b-t9m5ko8xvg] { margin: 0; font-size: 16px; font-weight: bold; }
.close-btn[b-t9m5ko8xvg] { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.close-btn:hover[b-t9m5ko8xvg] { opacity: 0.8; }
.modal-body[b-t9m5ko8xvg] { padding: 16px; overflow-y: auto; flex: 1; }
.form-section[b-t9m5ko8xvg] { display: flex; flex-direction: column; gap: 12px; }
.form-row[b-t9m5ko8xvg] { display: flex; align-items: center; gap: 10px; }
.form-label[b-t9m5ko8xvg] { width: 140px; min-width: 140px; font-size: 13px; font-weight: 600; text-align: right; }
.form-value[b-t9m5ko8xvg] { flex: 1; display: flex; align-items: center; gap: 6px; }
.req[b-t9m5ko8xvg] { color: red; margin-left: 2px; }
.tbox[b-t9m5ko8xvg] { border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px; font-size: 13px; height: 30px !important; }
.tbox:focus[b-t9m5ko8xvg] { outline: none; border-color: #4a90a4; }
.input-full[b-t9m5ko8xvg] { width: 100%; }
.input-medium[b-t9m5ko8xvg] { width: 200px; }
.input-select[b-t9m5ko8xvg] { width: 100%; height: 30px; font-size: 13px; }
.action-buttons[b-t9m5ko8xvg] { display: flex; gap: 8px; }
.btn-green[b-t9m5ko8xvg] { background: #28a745; color: #fff; border: none; padding: 6px 20px; border-radius: 3px; cursor: pointer; font-size: 13px; height: 32px; }
.btn-green:hover[b-t9m5ko8xvg] { background: #218838; }
.btn-gray[b-t9m5ko8xvg] { background: #6c757d; color: #fff; border: none; padding: 6px 20px; border-radius: 3px; cursor: pointer; font-size: 13px; height: 32px; }
.btn-gray:hover[b-t9m5ko8xvg] { background: #5a6268; }
[b-t9m5ko8xvg] .rz-dropdown-scope {
height: 30px !important;
padding: 2px 15px !important;
}
[b-t9m5ko8xvg] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/* /Components/Popup/BonusHistoryPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-2aeuohvhp1] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog[b-2aeuohvhp1] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 600px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.modal-header[b-2aeuohvhp1] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-2aeuohvhp1] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-2aeuohvhp1] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.close-btn:hover[b-2aeuohvhp1] {
opacity: 0.8;
}
.modal-body[b-2aeuohvhp1] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* Form layout */
.form-section[b-2aeuohvhp1] {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-row[b-2aeuohvhp1] {
display: flex;
align-items: center;
gap: 10px;
}
.form-label[b-2aeuohvhp1] {
width: 140px;
min-width: 140px;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.form-value[b-2aeuohvhp1] {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.req[b-2aeuohvhp1] {
color: red;
margin-left: 2px;
}
/* Inputs */
.tbox[b-2aeuohvhp1] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-2aeuohvhp1] {
outline: none;
border-color: #4a90a4;
}
.input-full[b-2aeuohvhp1] {
width: 100%;
}
.input-medium[b-2aeuohvhp1] {
width: 200px;
}
.input-select[b-2aeuohvhp1] {
width: 100%;
height: 30px;
font-size: 13px;
}
/* Buttons */
.action-buttons[b-2aeuohvhp1] {
display: flex;
gap: 8px;
}
.btn-green[b-2aeuohvhp1] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-green:hover[b-2aeuohvhp1] {
background: #218838;
}
.btn-gray[b-2aeuohvhp1] {
background: #6c757d;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-gray:hover[b-2aeuohvhp1] {
background: #5a6268;
}
[b-2aeuohvhp1] .rz-dropdown-scope {
height: 30px !important;
padding: 2px 15px !important;
}
[b-2aeuohvhp1] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/*For the dropdown list font and font size */
/*:root {
--rz-panel-font-size: 12px;
--rz-panel-font-family: 'Segoe UI', sans-serif;
}*/
/* /Components/Popup/CommissionRatePicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COMMISSION RATE PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-f6v2bqkec0] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog[b-f6v2bqkec0] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 600px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.modal-header[b-f6v2bqkec0] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-f6v2bqkec0] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-f6v2bqkec0] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.close-btn:hover[b-f6v2bqkec0] {
opacity: 0.8;
}
.modal-body[b-f6v2bqkec0] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* Form layout */
.form-section[b-f6v2bqkec0] {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-row[b-f6v2bqkec0] {
display: flex;
align-items: center;
gap: 10px;
}
.form-label[b-f6v2bqkec0] {
width: 140px;
min-width: 140px;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.form-value[b-f6v2bqkec0] {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.req[b-f6v2bqkec0] {
color: red;
margin-left: 2px;
}
/* Inputs */
.tbox[b-f6v2bqkec0] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-f6v2bqkec0] {
outline: none;
border-color: #4a90a4;
}
.input-medium[b-f6v2bqkec0] {
width: 200px;
}
.input-error[b-f6v2bqkec0] {
border-color: #dc3545 !important;
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}
/* Buttons */
.action-buttons[b-f6v2bqkec0] {
display: flex;
gap: 8px;
}
.btn-green[b-f6v2bqkec0] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-green:hover[b-f6v2bqkec0] {
background: #218838;
}
.btn-gray[b-f6v2bqkec0] {
background: #6c757d;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-gray:hover[b-f6v2bqkec0] {
background: #5a6268;
}
[b-f6v2bqkec0] .rz-dropdown-scope {
height: 30px !important;
padding: 2px 15px !important;
}
[b-f6v2bqkec0] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/* /Components/Popup/DeleteConfirmation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Delete Confirmation Modal */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-delete-overlay[b-01vwoqm931] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-delete-dialog[b-01vwoqm931] {
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
min-width: 350px;
max-width: 450px;
}
.modal-delete-header[b-01vwoqm931] {
padding: 16px 20px;
border-bottom: 1px solid #eee;
}
.modal-delete-header h4[b-01vwoqm931] {
margin: 0;
font-size: 18px;
}
.modal-delete-body[b-01vwoqm931] {
padding: 20px;
text-align: center;
}
.modal-delete-body .text-muted[b-01vwoqm931] {
color: #888;
font-size: 13px;
margin-top: 8px;
}
.modal-delete-footer[b-01vwoqm931] {
padding: 12px 20px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal-delete-btn-cancel[b-01vwoqm931] {
padding: 8px 16px;
border: 1px solid #ccc;
background: white;
border-radius: 4px;
cursor: pointer;
}
.modal-delete-btn-cancel:hover[b-01vwoqm931] {
background: #f5f5f5;
}
.modal-delete-btn-delete[b-01vwoqm931] {
padding: 8px 16px;
border: none;
background: #dc3545;
color: white;
border-radius: 4px;
cursor: pointer;
}
.modal-delete-btn-delete:hover[b-01vwoqm931] {
background: #c82333;
}
.modal-delete-btn-delete:disabled[b-01vwoqm931] {
background: #ccc;
cursor: default;
}
/* /Components/Popup/FixSalaryPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX SALARY PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-yy0gmyjf0z] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog[b-yy0gmyjf0z] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 600px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.modal-header[b-yy0gmyjf0z] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-yy0gmyjf0z] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-yy0gmyjf0z] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.close-btn:hover[b-yy0gmyjf0z] {
opacity: 0.8;
}
.modal-body[b-yy0gmyjf0z] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* Form layout */
.form-section[b-yy0gmyjf0z] {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-row[b-yy0gmyjf0z] {
display: flex;
align-items: center;
gap: 10px;
}
.form-label[b-yy0gmyjf0z] {
width: 140px;
min-width: 140px;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.form-value[b-yy0gmyjf0z] {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.req[b-yy0gmyjf0z] {
color: red;
margin-left: 2px;
}
/* Inputs */
.tbox[b-yy0gmyjf0z] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-yy0gmyjf0z] {
outline: none;
border-color: #4a90a4;
}
.input-medium[b-yy0gmyjf0z] {
width: 200px;
}
/* Buttons */
.action-buttons[b-yy0gmyjf0z] {
display: flex;
gap: 8px;
}
.btn-green[b-yy0gmyjf0z] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-green:hover[b-yy0gmyjf0z] {
background: #218838;
}
.btn-gray[b-yy0gmyjf0z] {
background: #6c757d;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-gray:hover[b-yy0gmyjf0z] {
background: #5a6268;
}
[b-yy0gmyjf0z] .rz-dropdown-scope {
height: 30px !important;
padding: 2px 15px !important;
}
[b-yy0gmyjf0z] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/* /Components/Popup/PenaltyHistoryPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HISTORY PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-e0nl7k7lvo] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog[b-e0nl7k7lvo] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 600px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.modal-header[b-e0nl7k7lvo] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-e0nl7k7lvo] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-e0nl7k7lvo] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
}
.close-btn:hover[b-e0nl7k7lvo] {
opacity: 0.8;
}
.modal-body[b-e0nl7k7lvo] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
.form-section[b-e0nl7k7lvo] {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-row[b-e0nl7k7lvo] {
display: flex;
align-items: center;
gap: 10px;
}
.form-label[b-e0nl7k7lvo] {
width: 140px;
min-width: 140px;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.form-value[b-e0nl7k7lvo] {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.req[b-e0nl7k7lvo] {
color: red;
margin-left: 2px;
}
.tbox[b-e0nl7k7lvo] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-e0nl7k7lvo] {
outline: none;
border-color: #4a90a4;
}
.input-full[b-e0nl7k7lvo] {
width: 100%;
}
.input-medium[b-e0nl7k7lvo] {
width: 200px;
}
.input-select[b-e0nl7k7lvo] {
width: 100%;
height: 30px;
font-size: 13px;
}
.action-buttons[b-e0nl7k7lvo] {
display: flex;
gap: 8px;
}
.btn-green[b-e0nl7k7lvo] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-green:hover[b-e0nl7k7lvo] {
background: #218838;
}
.btn-gray[b-e0nl7k7lvo] {
background: #6c757d;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-gray:hover[b-e0nl7k7lvo] {
background: #5a6268;
}
[b-e0nl7k7lvo] .rz-dropdown-scope {
height: 30px !important;
padding: 2px 15px !important;
}
[b-e0nl7k7lvo] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/* /Components/Popup/StaffInfoPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* STAFF INFO PICKER - Form Modal Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-achmlw32ue] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog[b-achmlw32ue] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 960px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.modal-header[b-achmlw32ue] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-achmlw32ue] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-achmlw32ue] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
}
.close-btn:hover[b-achmlw32ue] {
opacity: 0.8;
}
.modal-body[b-achmlw32ue] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2-COLUMN GRID LAYOUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.form-grid[b-achmlw32ue] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.span-full[b-achmlw32ue] {
grid-column: 1 / -1;
}
.form-row[b-achmlw32ue] {
display: flex;
align-items: center;
gap: 10px;
}
.form-row-top[b-achmlw32ue] {
align-items: flex-start;
}
.form-row-top .form-label[b-achmlw32ue] {
padding-top: 6px;
}
.form-label[b-achmlw32ue] {
width: 120px;
min-width: 120px;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.form-value[b-achmlw32ue] {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.req[b-achmlw32ue] {
color: red;
margin-left: 2px;
}
.tbox[b-achmlw32ue] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-achmlw32ue] {
outline: none;
border-color: #4a90a4;
}
.tbox[readonly][b-achmlw32ue] {
background: #f0f0f0;
color: #666;
cursor: not-allowed;
}
.input-full[b-achmlw32ue] {
width: 100%;
}
.input-medium[b-achmlw32ue] {
width: 200px;
}
.input-select[b-achmlw32ue] {
width: 100%;
height: 30px;
font-size: 13px;
}
.input-error[b-achmlw32ue] {
border-color: #dc3545 !important;
}
.error-text[b-achmlw32ue] {
color: #dc3545;
font-size: 13px;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* MULTI-SELECT TAGGED INPUT */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tag-select-container[b-achmlw32ue] {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.tag-list[b-achmlw32ue] {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.role-tag[b-achmlw32ue] {
display: inline-flex;
align-items: center;
gap: 4px;
background: #e0f0f6;
color: #2a6f8a;
border: 1px solid #b3d9e8;
border-radius: 12px;
padding: 2px 8px 2px 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
}
.tag-remove[b-achmlw32ue] {
background: none;
border: none;
color: #2a6f8a;
cursor: pointer;
font-size: 13px;
padding: 0 2px;
line-height: 1;
border-radius: 50%;
}
.tag-remove:hover[b-achmlw32ue] {
color: #dc3545;
background: rgba(220, 53, 69, 0.1);
}
.sub-text[b-achmlw32ue] {
font-size: 11px;
color: #888;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ACTION BUTTONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.action-buttons[b-achmlw32ue] {
display: flex;
gap: 8px;
}
.btn-green[b-achmlw32ue] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-green:hover[b-achmlw32ue] {
background: #218838;
}
.btn-green:disabled[b-achmlw32ue] {
background: #82c991;
cursor: not-allowed;
}
.btn-gray[b-achmlw32ue] {
background: #6c757d;
color: #fff;
border: none;
padding: 6px 20px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 32px;
}
.btn-gray:hover[b-achmlw32ue] {
background: #5a6268;
}
.btn-gray:disabled[b-achmlw32ue] {
opacity: 0.6;
cursor: not-allowed;
}
[b-achmlw32ue] .rz-date-scope .rz-inputtext {
height: 30px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE: collapse to 1 column on narrow screens */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*@media (max-width: 720px) {
.form-grid {
grid-template-columns: 1fr;
}
.span-full {
grid-column: 1;
}
}*/
/* /Components/Popup/TreatmentProcedurePicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* TREATMENT PROCEDURE PICKER - Modal Popup Styles */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Modal Overlay */
.modal-overlay[b-95wx2trdqe] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* Modal Dialog */
.modal-dialog[b-95wx2trdqe] {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
width: 900px;
max-width: 95vw;
max-height: 85vh;
display: flex;
flex-direction: column;
}
/* Modal Header */
.modal-header[b-95wx2trdqe] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #4a90a4;
color: #fff;
border-radius: 8px 8px 0 0;
}
.modal-header h3[b-95wx2trdqe] {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.close-btn[b-95wx2trdqe] {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.close-btn:hover[b-95wx2trdqe] {
opacity: 0.8;
}
/* Modal Body */
.modal-body[b-95wx2trdqe] {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PICKER FILTERS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.picker-filters[b-95wx2trdqe] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.search-input[b-95wx2trdqe] {
flex: 1;
min-width: 200px;
padding: 6px 10px;
}
.group-select[b-95wx2trdqe] {
width: 200px;
padding: 6px 10px;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PICKER TABLE */
/* ═══════════════════════════════════════════════════════════════════════════ */
.picker-table-container[b-95wx2trdqe] {
max-height: 400px;
overflow-y: auto;
border: 1px solid #ccc;
border-radius: 4px;
}
.picker-table[b-95wx2trdqe] {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
}
.picker-table thead[b-95wx2trdqe] {
position: sticky;
top: 0;
z-index: 2;
}
.picker-table th[b-95wx2trdqe] {
background-color: #e8e8e8;
border: 1px solid #ccc;
border-bottom: 2px solid #999;
padding: 8px 10px;
text-align: left;
font-weight: bold;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
.picker-table td[b-95wx2trdqe] {
border: 1px solid #ddd;
border-top: none;
padding: 6px 10px;
vertical-align: middle;
}
.picker-table tbody tr:first-child td[b-95wx2trdqe] {
border-top: none;
}
.picker-table tbody tr:nth-child(even)[b-95wx2trdqe] {
background-color: #f9f9f9;
}
.picker-table tbody tr:nth-child(odd)[b-95wx2trdqe] {
background-color: #fff;
}
.procedure-row[b-95wx2trdqe] {
cursor: pointer;
transition: background-color 0.15s ease;
}
.procedure-row:hover[b-95wx2trdqe] {
background-color: #e6f3ff !important;
}
/* Column Widths */
.col-code[b-95wx2trdqe] {
width: 80px;
}
.col-name[b-95wx2trdqe] {
width: auto;
}
.col-unit[b-95wx2trdqe] {
width: 80px;
}
.col-price[b-95wx2trdqe] {
width: 120px;
}
.col-select[b-95wx2trdqe] {
width: 70px;
}
/* Cell Alignment */
.cell-center[b-95wx2trdqe] {
text-align: center;
}
.cell-right[b-95wx2trdqe] {
text-align: right;
}
/* Select Button */
.btn-select[b-95wx2trdqe] {
background: #28a745;
color: #fff;
border: none;
padding: 4px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.btn-select:hover[b-95wx2trdqe] {
background: #218838;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* SHARED INPUT STYLES (for tbox, btn-green) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tbox[b-95wx2trdqe] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 8px;
font-size: 13px;
height: 30px !important;
}
.tbox:focus[b-95wx2trdqe] {
outline: none;
border-color: #4a90a4;
}
.btn-green[b-95wx2trdqe] {
background: #28a745;
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
height: 30px !important;
}
.btn-green:hover[b-95wx2trdqe] {
background: #218838;
}