@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Components/Common/PageLoadingSkeleton.razor.rz.scp.css */
.page-loading-grid[b-1eifxl3ihw] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--page-loading-min-width, 340px), 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.page-loading-card[b-1eifxl3ihw] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.page-loading-skeleton[b-1eifxl3ihw] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: page-loading-shimmer-b-1eifxl3ihw 1.5s infinite;
  border-radius: var(--radius-md);
}

.page-loading-skeleton-title[b-1eifxl3ihw] {
  height: 22px;
  width: 48%;
  margin-bottom: 14px;
}

.page-loading-skeleton-subtitle[b-1eifxl3ihw] {
  height: 16px;
  width: 32%;
  margin-bottom: 10px;
}

.page-loading-skeleton-line[b-1eifxl3ihw] {
  height: 16px;
  width: 68%;
}

.page-loading-skeleton-line-wide[b-1eifxl3ihw] {
  width: 88%;
  margin-bottom: 8px;
}

@keyframes page-loading-shimmer-b-1eifxl3ihw {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 768px) {
  .page-loading-grid[b-1eifxl3ihw] {
    grid-template-columns: 1fr;
  }
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.confirm-modal-backdrop[b-ui1aljaeg8] {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: var(--spacing-md);
}

.confirm-modal[b-ui1aljaeg8] {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-lg);
}

.confirm-modal h3[b-ui1aljaeg8] {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-lg);
  color: var(--gray-900);
}

.confirm-modal p[b-ui1aljaeg8] {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.confirm-modal-actions[b-ui1aljaeg8] {
  margin-top: var(--spacing-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-fi3vi874th] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fi3vi874th] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-piy8lreq4x],
.components-reconnect-repeated-attempt-visible[b-piy8lreq4x],
.components-reconnect-failed-visible[b-piy8lreq4x],
.components-pause-visible[b-piy8lreq4x],
.components-resume-failed-visible[b-piy8lreq4x],
.components-rejoining-animation[b-piy8lreq4x] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-retrying[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-failed[b-piy8lreq4x],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-piy8lreq4x] {
    display: block;
}


#components-reconnect-modal[b-piy8lreq4x] {
    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-piy8lreq4x 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-piy8lreq4x 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-piy8lreq4x 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-piy8lreq4x]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-piy8lreq4x 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-piy8lreq4x {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-piy8lreq4x {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-piy8lreq4x {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-piy8lreq4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-piy8lreq4x] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-piy8lreq4x] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-piy8lreq4x] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-piy8lreq4x] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-piy8lreq4x] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-piy8lreq4x] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-piy8lreq4x 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-piy8lreq4x] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-piy8lreq4x {
    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/AccessDenied.razor.rz.scp.css */
.access-denied-page[b-qlokfwrt95] {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.access-denied-card[b-qlokfwrt95] {
  width: 100%;
  max-width: 680px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.denied-icon[b-qlokfwrt95] {
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  color: #dc2626;
}

.denied-title[b-qlokfwrt95] {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.denied-text[b-qlokfwrt95] {
  margin: 0 auto;
  max-width: 520px;
  color: var(--gray-600);
  line-height: 1.55;
}

.denied-actions[b-qlokfwrt95] {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.denied-meta[b-qlokfwrt95] {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--gray-500);
  word-break: break-word;
}

/* /Components/Pages/Addons/Form.razor.rz.scp.css */
.addon-form-page[b-mv7k1r7vxj] {
  max-width: 900px;
}

.addon-form-header[b-mv7k1r7vxj] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
}

@media (max-width: 768px) {
  .addon-form-header[b-mv7k1r7vxj] {
    flex-wrap: wrap;
    gap: 0;
  }
  .addon-form-header .btn[b-mv7k1r7vxj] {
    width: 100%;
  }
  .form-actions .btn[b-mv7k1r7vxj] {
    width: 100%;
    margin-right: 0px !important;
    margin-top: 10px !important;
  }
}

.addon-form-card[b-mv7k1r7vxj] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.addon-form-card-header[b-mv7k1r7vxj] {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.addon-form-card-body[b-mv7k1r7vxj] {
  padding: var(--spacing-lg);
}

.addon-form-grid[b-mv7k1r7vxj] {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .addon-form-grid[b-mv7k1r7vxj] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.full-width[b-mv7k1r7vxj] {
  grid-column: 1 / -1;
}
/* /Components/Pages/Addons/Index.razor.rz.scp.css */
.addons-page[b-ckt1osl6jt] {
  max-width: 1500px;
}

.addons-header[b-ckt1osl6jt] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.addons-toolbar[b-ckt1osl6jt] {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .addons-toolbar[b-ckt1osl6jt] {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.addons-table-wrap[b-ckt1osl6jt] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.addons-table[b-ckt1osl6jt] {
  width: 100%;
  border-collapse: collapse;
}

.addons-table th[b-ckt1osl6jt],
.addons-table td[b-ckt1osl6jt] {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.addons-table th[b-ckt1osl6jt] {
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.addons-table tr:hover td[b-ckt1osl6jt] {
  background: var(--gray-50);
}

.availability-chip[b-ckt1osl6jt] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.availability-chip.ok[b-ckt1osl6jt] {
  background: #dcfce7;
  color: #15803d;
}

.availability-chip.low[b-ckt1osl6jt] {
  background: #fef3c7;
  color: #b45309;
}

.availability-chip.na[b-ckt1osl6jt] {
  background: var(--gray-100);
  color: var(--gray-600);
}

.row-actions[b-ckt1osl6jt] {
  display: flex;
  gap: 0.35rem;
}

.icon-btn[b-ckt1osl6jt] {
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.icon-btn:hover[b-ckt1osl6jt] {
  background: var(--gray-50);
}

@media (max-width: 768px) {
  .addons-header[b-ckt1osl6jt] {
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
  }
  .addons-header .btn[b-ckt1osl6jt] {
    width: 100%;
  }
}
/* /Components/Pages/AdminNotifications/History.razor.rz.scp.css */
.history-page[b-nid37q4kg2] {
        max-width: 1400px;
    }
    .history-header[b-nid37q4kg2] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
    }
    .stats[b-nid37q4kg2] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }
    .stat[b-nid37q4kg2] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-md);
    }
    .stat-v[b-nid37q4kg2] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
    }
    .stat-k[b-nid37q4kg2] {
        color: var(--gray-500);
        font-size: var(--font-size-sm);
    }
    .filters[b-nid37q4kg2] {
        display: flex;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        margin-bottom: var(--spacing-md);
    }
    .filters input[b-nid37q4kg2],
    .filters select[b-nid37q4kg2] {
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-sm);
        background: white;
    }
    .table-wrap[b-nid37q4kg2] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: auto;
    }
    .table[b-nid37q4kg2] {
        width: 100%;
        border-collapse: collapse;
    }
    .table th[b-nid37q4kg2],
    .table td[b-nid37q4kg2] {
        padding: 0.875rem 0.9rem;
        border-bottom: 1px solid var(--gray-100);
        text-align: left;
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
    .table th[b-nid37q4kg2] {
        color: var(--gray-500);
        font-weight: 600;
        background: var(--gray-50);
    }
    .badge[b-nid37q4kg2] {
        display: inline-flex;
        padding: 0.2rem 0.55rem;
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }
    .b-success[b-nid37q4kg2] { background: #dcfce7; color: #166534; }
    .b-warning[b-nid37q4kg2] { background: #fef3c7; color: #92400e; }
    .b-danger[b-nid37q4kg2] { background: #fee2e2; color: #991b1b; }
    .b-info[b-nid37q4kg2] { background: #dbeafe; color: #1d4ed8; }
@media (max-width: 1024px) {
        .stats[b-nid37q4kg2] { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 640px) {
        .stats[b-nid37q4kg2] { grid-template-columns: 1fr; }
    }

/* /Components/Pages/AdminNotifications/Index.razor.rz.scp.css */
.notify-page[b-17g0tzbmyr] {
        max-width: 1400px;
    }
    .notify-header[b-17g0tzbmyr] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
    }
    .notify-actions[b-17g0tzbmyr] {
        display: flex;
        gap: var(--spacing-sm);
    }
    .notify-grid[b-17g0tzbmyr] {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-md);
    }
    .card[b-17g0tzbmyr] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
    }
    .section-title[b-17g0tzbmyr] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: var(--spacing-md);
    }
    .form-grid[b-17g0tzbmyr] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
    .field[b-17g0tzbmyr] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
    .field.full[b-17g0tzbmyr] {
        grid-column: 1 / -1;
    }
    .field label[b-17g0tzbmyr] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-700);
    }
    .field input[b-17g0tzbmyr],
    .field select[b-17g0tzbmyr],
    .field textarea[b-17g0tzbmyr] {
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-sm);
        background: white;
    }
    .channel-row[b-17g0tzbmyr] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    .chip[b-17g0tzbmyr] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
        background: white;
        cursor: pointer;
        user-select: none;
    }
    .chip.active[b-17g0tzbmyr] {
        background: var(--primary-50);
        border-color: var(--primary-300);
        color: var(--primary-700);
    }
    .hint[b-17g0tzbmyr] {
        margin-top: 0.3rem;
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }
    .split[b-17g0tzbmyr] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    .preview-box[b-17g0tzbmyr] {
        border: 1px dashed var(--gray-300);
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
        background: var(--gray-50);
    }
    .preview-title[b-17g0tzbmyr] {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: var(--spacing-xs);
    }
    .preview-subtitle[b-17g0tzbmyr] {
        color: var(--gray-500);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
    }
    .mini-list[b-17g0tzbmyr] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .mini-item[b-17g0tzbmyr] {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: 0.7rem 0.8rem;
        background: white;
    }
    .mini-item-title[b-17g0tzbmyr] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
    }
    .mini-item-sub[b-17g0tzbmyr] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }
    .submit-row[b-17g0tzbmyr] {
        margin-top: var(--spacing-lg);
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
@media (max-width: 1100px) {
        .notify-grid[b-17g0tzbmyr] { grid-template-columns: 1fr; }
    }
@media (max-width: 768px) {
        .form-grid[b-17g0tzbmyr] { grid-template-columns: 1fr; }
        .split[b-17g0tzbmyr] { grid-template-columns: 1fr; }
    }

/* /Components/Pages/Attendance/MemberAttendance.razor.rz.scp.css */
.attendance-summary[b-aespb6tjuw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-100);
}

.attendance-summary-item[b-aespb6tjuw] {
    padding: var(--spacing-md);
    background-color: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
}

.attendance-summary-label[b-aespb6tjuw] {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.attendance-summary-value[b-aespb6tjuw] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
}

.attendance-table[b-aespb6tjuw] {
    width: 100%;
    border-collapse: collapse;
}

.attendance-table th[b-aespb6tjuw],
.attendance-table td[b-aespb6tjuw] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    font-size: var(--font-size-sm);
}

.attendance-table th[b-aespb6tjuw] {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.attendance-table tbody tr:hover[b-aespb6tjuw] {
    background-color: var(--gray-50);
}

.member-attendance-actions[b-aespb6tjuw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .attendance-summary[b-aespb6tjuw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* ─── Register Page ─────────────────────────────────────────────────── */

.register-page[b-977f55ivs7] {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.register-page .auth-header[b-977f55ivs7] {
  margin-bottom: var(--spacing-lg);
}

.register-page .auth-card[b-977f55ivs7] {
  padding: clamp(1rem, 2.2vw, 1.5rem);
}

/* ─── Step Indicator ─────────────────────────────────────────────────── */

.register-steps[b-977f55ivs7] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  padding: 0.625rem 1rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .register-steps[b-977f55ivs7] {
    width: fit-content;
  }
}

.step[b-977f55ivs7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-400);
  min-width: 0;
  transition: color var(--transition-fast);
}

.step.active[b-977f55ivs7] {
  color: var(--primary-700);
}
.step.completed[b-977f55ivs7] {
  color: var(--success-600, var(--primary-600));
}

.step-number[b-977f55ivs7] {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--gray-400);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.step.active .step-number[b-977f55ivs7] {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: white;
}

.step.completed .step-number[b-977f55ivs7] {
  background: var(--success-500, var(--primary-500));
  border-color: var(--success-500, var(--primary-500));
  color: white;
}

.step-connector[b-977f55ivs7] {
  flex: 0 0 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--gray-200);
  transition: background var(--transition-normal);
}

.step-connector.completed[b-977f55ivs7] {
  background: var(--success-500, var(--primary-500));
}

/* ─── Form Sections ──────────────────────────────────────────────────── */

.form-section[b-977f55ivs7] {
  margin-bottom: var(--spacing-lg);
  /* padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); */
  /* background: var(--primary-50); */
  /* border: 1px solid var(--primary-100); */
  /* border-radius: var(--radius-lg); */
}

.form-section-title[b-977f55ivs7] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  /* margin-bottom: var(--spacing-md); */
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
}

.form-section-title svg[b-977f55ivs7] {
  width: 14px;
  height: 14px;
  color: var(--gray-700);
  flex-shrink: 0;
}

/* ─── Form Layout ────────────────────────────────────────────────────── */

.form-row[b-977f55ivs7] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 560px) {
  .form-row.form-row--2col[b-977f55ivs7] {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Step Navigation ────────────────────────────────────────────────── */

.step-buttons[b-977f55ivs7] {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.step-buttons .btn[b-977f55ivs7] {
  flex: 1;
}

/* ─── Country Dropdown ───────────────────────────────────────────────── */

.country-suggestions[b-977f55ivs7] {
  position: absolute;
  z-index: 20;
  width: 100%;
  margin-top: 0.25rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.country-suggestions button[b-977f55ivs7] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.country-suggestions button:hover[b-977f55ivs7],
.country-suggestions button:focus-visible[b-977f55ivs7] {
  background: var(--primary-50);
  outline: none;
}

.country-flag[b-977f55ivs7] {
  flex: 0 0 22px;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--gray-200);
  object-fit: cover;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .register-steps[b-977f55ivs7] {
    gap: var(--spacing-2xs, 4px);
    padding: 0.5rem 0.75rem;
  }

  .step[b-977f55ivs7] {
    font-size: var(--font-size-xs);
  }

  .step > .step-label[b-977f55ivs7] {
    display: none;
  }

  .step-connector[b-977f55ivs7] {
    flex-basis: 40px;
  }
}
/* /Components/Pages/Branches/BranchDetails.razor.rz.scp.css */
.details-page[b-u1wpas4upv] {
        max-width: 1200px;
        margin: 0 auto;
    }

    .details-header[b-u1wpas4upv] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
    }

    .details-header-left[b-u1wpas4upv] {
        flex: 1;
    }

    .details-header-nav[b-u1wpas4upv] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .back-link[b-u1wpas4upv] {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--gray-500);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: color var(--transition-fast);
    }

    .back-link:hover[b-u1wpas4upv] {
        color: var(--primary-600);
    }

    .details-title[b-u1wpas4upv] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .details-title h1[b-u1wpas4upv] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }

    .default-badge[b-u1wpas4upv] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--font-size-xs);
        background: var(--primary-100);
        color: var(--primary-700);
        padding: 6px 12px;
        border-radius: var(--radius-full);
        font-weight: 500;
    }

    .details-header-actions[b-u1wpas4upv] {
        display: flex;
        gap: var(--spacing-sm);
    }

    .details-grid[b-u1wpas4upv] {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: var(--spacing-lg);
    }

    .details-main[b-u1wpas4upv] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .details-card[b-u1wpas4upv] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .details-card-header[b-u1wpas4upv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .details-card-title[b-u1wpas4upv] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }

    .details-card-title svg[b-u1wpas4upv] {
        color: var(--gray-400);
    }

    .details-card-body[b-u1wpas4upv] {
        padding: var(--spacing-lg);
    }

    .info-grid[b-u1wpas4upv] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .info-item[b-u1wpas4upv] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .info-item.full-width[b-u1wpas4upv] {
        grid-column: 1 / -1;
    }

    .info-label[b-u1wpas4upv] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        font-weight: 500;
    }

    .info-value[b-u1wpas4upv] {
        font-size: var(--font-size-base);
        color: var(--gray-900);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .info-value svg[b-u1wpas4upv] {
        color: var(--gray-400);
    }

    .info-value.empty[b-u1wpas4upv] {
        color: var(--gray-400);
        font-style: italic;
    }

    /* Stats Cards */
    .stats-grid[b-u1wpas4upv] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .stat-card[b-u1wpas4upv] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        text-align: center;
        transition: all var(--transition-fast);
    }

    .stat-card:hover[b-u1wpas4upv] {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-md);
    }

    .stat-icon[b-u1wpas4upv] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--spacing-sm);
    }

    .stat-icon.spaces[b-u1wpas4upv] { background: var(--primary-100); color: var(--primary-600); }
    .stat-icon.members[b-u1wpas4upv] { background: var(--success-100); color: var(--success-600); }
    .stat-icon.leads[b-u1wpas4upv] { background: var(--warning-100); color: var(--warning-600); }

    .stat-value[b-u1wpas4upv] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
    }

    .stat-label[b-u1wpas4upv] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    /* Sidebar */
    .details-sidebar[b-u1wpas4upv] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .quick-actions-list[b-u1wpas4upv] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .quick-action-item[b-u1wpas4upv] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-lg);
        color: var(--gray-700);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: all var(--transition-fast);
        border: none;
        background: none;
        cursor: pointer;
        width: 100%;
        text-align: left;
    }

    .quick-action-item:hover[b-u1wpas4upv] {
        background: var(--gray-50);
        color: var(--primary-600);
    }

    .quick-action-item svg[b-u1wpas4upv] {
        color: var(--gray-400);
    }

    .quick-action-item:hover svg[b-u1wpas4upv] {
        color: var(--primary-600);
    }

    .quick-action-item.danger[b-u1wpas4upv] {
        color: var(--danger-600);
    }

    .quick-action-item.danger:hover[b-u1wpas4upv] {
        background: var(--danger-50);
    }

    .quick-action-item.danger svg[b-u1wpas4upv] {
        color: var(--danger-400);
    }

    .activity-list[b-u1wpas4upv] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .activity-item[b-u1wpas4upv] {
        display: flex;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .activity-item:last-child[b-u1wpas4upv] {
        border-bottom: none;
    }

    .activity-icon[b-u1wpas4upv] {
        width: 32px;
        height: 32px;
        background: var(--gray-100);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
        flex-shrink: 0;
    }

    .activity-content[b-u1wpas4upv] {
        flex: 1;
    }

    .activity-text[b-u1wpas4upv] {
        font-size: var(--font-size-sm);
        color: var(--gray-700);
    }

    .activity-time[b-u1wpas4upv] {
        font-size: var(--font-size-xs);
        color: var(--gray-400);
    }

    .empty-activity[b-u1wpas4upv] {
        text-align: center;
        padding: var(--spacing-lg);
        color: var(--gray-400);
    }

    .loading-skeleton[b-u1wpas4upv] {
        padding: var(--spacing-xl);
    }

    .skeleton[b-u1wpas4upv] {
        background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
        background-size: 200% 100%;
        animation: shimmer-b-u1wpas4upv 1.5s infinite;
        border-radius: var(--radius-md);
    }
@keyframes shimmer-b-u1wpas4upv {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
@media (max-width: 1024px) {
        .details-grid[b-u1wpas4upv] {
            grid-template-columns: 1fr;
        }

        .stats-grid[b-u1wpas4upv] {
            grid-template-columns: repeat(3, 1fr);
        }
    }
@media (max-width: 768px) {
        .details-header[b-u1wpas4upv] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .details-header-actions[b-u1wpas4upv] {
            width: 100%;
        }

        .details-header-actions .btn[b-u1wpas4upv] {
            flex: 1;
        }

        .stats-grid[b-u1wpas4upv] {
            grid-template-columns: 1fr;
        }

        .info-grid[b-u1wpas4upv] {
            grid-template-columns: 1fr;
        }
    }

/* /Components/Pages/Branches/BranchForm.razor.rz.scp.css */
.form-page[b-x5t197ezap] {
  /* max-width: 800px; */
  margin: 0 auto;
}

.form-header[b-x5t197ezap] {
  margin-bottom: var(--spacing-xl);
}

.form-header-nav[b-x5t197ezap] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.back-link[b-x5t197ezap] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.back-link:hover[b-x5t197ezap] {
  color: var(--primary-600);
}

.form-header h1[b-x5t197ezap] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.form-header p[b-x5t197ezap] {
  color: var(--gray-500);
  margin: 0;
}

.form-card[b-x5t197ezap] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.form-section[b-x5t197ezap] {
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

[b-x5t197ezap] .mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--primary-200) !important;
  border-radius: var(--radius-lg) !important;
}

[b-x5t197ezap] .mud-input {
  line-height: 1.7em;
}

@media (min-width: 768px) {
  .form-section[b-x5t197ezap] {
    padding: var(--spacing-xl);
  }
}

.form-section:last-child[b-x5t197ezap] {
  border-bottom: none;
}

.form-section-header[b-x5t197ezap] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.form-section-icon[b-x5t197ezap] {
  width: 40px;
  height: 40px;
  background: var(--primary-100);
  color: var(--primary-600);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-section-title h2[b-x5t197ezap] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.form-section-title p[b-x5t197ezap] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.form-grid[b-x5t197ezap] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.form-grid .form-group.full-width[b-x5t197ezap] {
  grid-column: 1 / -1;
}

.timezone-picker-hint[b-x5t197ezap] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.4;
}

.timezone-picker-actions[b-x5t197ezap] {
  margin-top: var(--spacing-sm);
}

.timezone-mud-autocomplete :deep(.mud-input-control)[b-x5t197ezap] {
  width: 100%;
}

.form-footer[b-x5t197ezap] {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

.alert[b-x5t197ezap] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.alert-danger[b-x5t197ezap] {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-200);
}

.alert-success[b-x5t197ezap] {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-200);
}

.checkbox-group[b-x5t197ezap] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.checkbox-group:hover[b-x5t197ezap] {
  background: var(--gray-100);
}

.checkbox-group input[type='checkbox'][b-x5t197ezap] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-600);
}

.checkbox-label[b-x5t197ezap] {
  flex: 1;
}

.checkbox-label span[b-x5t197ezap] {
  display: block;
  font-weight: 500;
  color: var(--gray-900);
}

.checkbox-label small[b-x5t197ezap] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}
@media (max-width: 768px) {
  .form-grid[b-x5t197ezap] {
    grid-template-columns: 1fr;
  }

  .form-footer[b-x5t197ezap] {
    flex-direction: column-reverse;
  }

  .form-footer .btn[b-x5t197ezap] {
    width: 100%;
  }
}
/* /Components/Pages/Branches/Index.razor.rz.scp.css */
.branches-header[b-a0uibs8vgo] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.branches-title h1[b-a0uibs8vgo] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.branches-title p[b-a0uibs8vgo] {
  color: var(--gray-500);
  margin: 0;
}

.branches-actions[b-a0uibs8vgo] {
  display: flex;
  gap: var(--spacing-sm);
}

.search-box[b-a0uibs8vgo] {
  position: relative;
}

.search-box input[b-a0uibs8vgo] {
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  width: 250px;
  transition: all var(--transition-fast);
}

.search-box input:focus[b-a0uibs8vgo] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.search-box svg[b-a0uibs8vgo] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.branches-grid[b-a0uibs8vgo] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-md);
}

.branch-card[b-a0uibs8vgo] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  transition: all var(--transition-fast);
  position: relative;
}

.branch-card:hover[b-a0uibs8vgo] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.branch-card.default[b-a0uibs8vgo] {
  border-color: var(--primary-300);
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
}

.branch-card-header[b-a0uibs8vgo] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.branch-info h3[b-a0uibs8vgo] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.branch-info .branch-code[b-a0uibs8vgo] {
  font-size: var(--font-size-xs);
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.default-badge[b-a0uibs8vgo] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  background: var(--primary-100);
  color: var(--primary-700);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.branch-actions-menu[b-a0uibs8vgo] {
  position: relative;
}

.branch-menu-btn[b-a0uibs8vgo] {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.branch-menu-btn:hover[b-a0uibs8vgo] {
  background: var(--gray-100);
  color: var(--gray-600);
}

.branch-menu[b-a0uibs8vgo] {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 100;
  display: none;
}

.branch-menu.open[b-a0uibs8vgo] {
  display: block;
}

.branch-menu-item[b-a0uibs8vgo] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.branch-menu-item:hover[b-a0uibs8vgo] {
  background: var(--gray-50);
}

.branch-menu-item.danger[b-a0uibs8vgo] {
  color: var(--danger-600);
}

.branch-menu-item.danger:hover[b-a0uibs8vgo] {
  background: var(--danger-50);
}

.branch-details[b-a0uibs8vgo] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.branch-detail[b-a0uibs8vgo] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.branch-detail svg[b-a0uibs8vgo] {
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.branch-stats[b-a0uibs8vgo] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.branch-stat[b-a0uibs8vgo] {
  text-align: center;
}

.branch-stat-value[b-a0uibs8vgo] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.branch-stat-label[b-a0uibs8vgo] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.empty-state[b-a0uibs8vgo] {
  text-align: center;
  padding: var(--spacing-xl);
  background: white;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
}

.empty-state-icon[b-a0uibs8vgo] {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: var(--gray-400);
}

.empty-state h3[b-a0uibs8vgo] {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.empty-state p[b-a0uibs8vgo] {
  color: var(--gray-500);
  margin: 0 0 var(--spacing-lg) 0;
}

.loading-grid[b-a0uibs8vgo] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-lg);
}

.loading-card[b-a0uibs8vgo] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.skeleton[b-a0uibs8vgo] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-a0uibs8vgo 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer-b-a0uibs8vgo {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 768px) {
  .branches-header[b-a0uibs8vgo] {
    flex-direction: column;
  }

  .branches-actions[b-a0uibs8vgo] {
    width: 100%;
    flex-direction: column;
  }

  .search-box input[b-a0uibs8vgo] {
    width: 100%;
  }

  .branches-grid[b-a0uibs8vgo] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/Cafeteria/Admin/Index.razor.rz.scp.css */
.products-admin-page[b-g426voivh1] {
  max-width: 1400px;
}

/* Header */
.products-header[b-g426voivh1] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.products-header-top[b-g426voivh1] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-g426voivh1] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.product-stats[b-g426voivh1] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card[b-g426voivh1] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.stat-icon[b-g426voivh1] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-g426voivh1] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-g426voivh1] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-g426voivh1] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.red[b-g426voivh1] {
  background-color: #fee2e2;
  color: #dc2626;
}

.stat-content[b-g426voivh1] {
  flex: 1;
}

.stat-value[b-g426voivh1] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-g426voivh1] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Filters */
.products-filters[b-g426voivh1] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-g426voivh1] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-g426voivh1] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-g426voivh1] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-g426voivh1] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-g426voivh1] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-g426voivh1] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-actions[b-g426voivh1] {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

/* Products Table */
.products-table-container[b-g426voivh1] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.products-table[b-g426voivh1] {
  width: 100%;
  border-collapse: collapse;
}

.products-table th[b-g426voivh1] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.products-table td[b-g426voivh1] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.products-table tbody tr[b-g426voivh1] {
  transition: background-color var(--transition-fast);
}

.products-table tbody tr:hover[b-g426voivh1] {
  background-color: var(--gray-50);
}

.products-table tbody tr:last-child td[b-g426voivh1] {
  border-bottom: none;
}

/* Product Info */
.product-info[b-g426voivh1] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.product-image[b-g426voivh1] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--gray-100);
}

.product-image img[b-g426voivh1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder[b-g426voivh1] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.product-details[b-g426voivh1] {
  min-width: 0;
}

.product-name[b-g426voivh1] {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.product-description[b-g426voivh1] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* Category Badge */
.category-badge[b-g426voivh1] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.category-badge.coffee[b-g426voivh1] {
  background-color: #fef3c7;
  color: #92400e;
}
.category-badge.beverages[b-g426voivh1] {
  background-color: #cffafe;
  color: #0e7490;
}
.category-badge.breakfast[b-g426voivh1] {
  background-color: #fce7f3;
  color: #9d174d;
}
.category-badge.lunch[b-g426voivh1] {
  background-color: #dcfce7;
  color: #166534;
}
.category-badge.snacks[b-g426voivh1] {
  background-color: #fef3c7;
  color: #b45309;
}
.category-badge.desserts[b-g426voivh1] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

/* Product Badges */
.product-badges[b-g426voivh1] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.product-tag[b-g426voivh1] {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.product-tag.popular[b-g426voivh1] {
  background-color: #fef3c7;
  color: #b45309;
}
.product-tag.new[b-g426voivh1] {
  background-color: #dcfce7;
  color: #15803d;
}
.product-tag.vegan[b-g426voivh1] {
  background-color: #d1fae5;
  color: #047857;
}
.product-tag.spicy[b-g426voivh1] {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Status Toggle */
.status-toggle[b-g426voivh1] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.toggle-switch[b-g426voivh1] {
  width: 44px;
  height: 24px;
  background-color: var(--gray-300);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-switch.active[b-g426voivh1] {
  background-color: var(--success-500);
}

.toggle-switch[b-g426voivh1]::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: var(--radius-full);
  top: 3px;
  left: 3px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-switch.active[b-g426voivh1]::after {
  left: 23px;
}

.status-label[b-g426voivh1] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Price */
.product-price[b-g426voivh1] {
  font-weight: 600;
  color: var(--gray-900);
}

/* Stock */
.stock-info[b-g426voivh1] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.stock-indicator[b-g426voivh1] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.stock-indicator.high[b-g426voivh1] {
  background-color: #22c55e;
}
.stock-indicator.medium[b-g426voivh1] {
  background-color: #f59e0b;
}
.stock-indicator.low[b-g426voivh1] {
  background-color: #ef4444;
}

/* Actions */
.row-actions[b-g426voivh1] {
  display: flex;
  gap: 0.25rem;
}

.action-btn[b-g426voivh1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-g426voivh1] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.action-btn.danger:hover[b-g426voivh1] {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Pagination */
.products-pagination[b-g426voivh1] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
}

.pagination-info[b-g426voivh1] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination-controls[b-g426voivh1] {
  display: flex;
  gap: var(--spacing-xs);
}

.pagination-btn[b-g426voivh1] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-g426voivh1] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.pagination-btn:disabled[b-g426voivh1] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-g426voivh1] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Responsive */
@media (min-width: 640px) {
  .product-stats[b-g426voivh1] {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .products-table-container[b-g426voivh1] {
    overflow-x: auto;
  }

  .products-table[b-g426voivh1] {
    min-width: 900px;
  }
}
@media (max-width: 640px) {
  .products-header-top[b-g426voivh1] {
    flex-direction: column;
  }

  .header-actions[b-g426voivh1] {
    width: 100%;
  }

  .header-actions .btn[b-g426voivh1] {
    flex: 1;
  }

  .products-filters[b-g426voivh1] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-g426voivh1] {
    max-width: none;
  }

  .filter-actions[b-g426voivh1] {
    margin-left: 0;
    justify-content: flex-end;
  }
}
/* /Components/Pages/Cafeteria/Admin/Orders.razor.rz.scp.css */
.orders-admin-page[b-28r6fthh54] {
  max-width: 1400px;
}

.orders-header[b-28r6fthh54] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.header-actions[b-28r6fthh54] {
  display: flex;
  gap: var(--spacing-sm);
}

.orders-stats[b-28r6fthh54] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card[b-28r6fthh54] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.stat-value[b-28r6fthh54] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
}

.stat-label[b-28r6fthh54] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.filters[b-28r6fthh54] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filters input[b-28r6fthh54],
.filters select[b-28r6fthh54] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  min-width: 180px;
}

.table-wrap[b-28r6fthh54] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: auto;
}

table[b-28r6fthh54] {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

th[b-28r6fthh54],
td[b-28r6fthh54] {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  font-size: var(--font-size-sm);
}

th[b-28r6fthh54] {
  background-color: var(--gray-50);
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
}

.status-badge[b-28r6fthh54] {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.pending[b-28r6fthh54] {
  background: #fef3c7;
  color: #b45309;
}
.preparing[b-28r6fthh54] {
  background: #dbeafe;
  color: #1d4ed8;
}
.ready[b-28r6fthh54] {
  background: #dcfce7;
  color: #15803d;
}
.delivered[b-28r6fthh54] {
  background: var(--gray-100);
  color: var(--gray-700);
}
.cancelled[b-28r6fthh54] {
  background: #fee2e2;
  color: #b91c1c;
}

.muted[b-28r6fthh54] {
  color: var(--gray-500);
}
@media (min-width: 900px) {
  .orders-stats[b-28r6fthh54] {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* /Components/Pages/Cafeteria/Admin/Pos.razor.rz.scp.css */
.pos-page[b-pfw9u57n6l] { max-width: 1400px; }
    .pos-header[b-pfw9u57n6l] { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--spacing-md); margin-bottom:var(--spacing-lg); flex-wrap:wrap; }
    .pos-layout[b-pfw9u57n6l] { display:grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .panel[b-pfw9u57n6l] { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-xl); }
    .panel-header[b-pfw9u57n6l] { padding: var(--spacing-md) var(--spacing-lg); border-bottom:1px solid var(--gray-100); font-weight:600; }
    .panel-body[b-pfw9u57n6l] { padding: var(--spacing-lg); }
    .toolbar[b-pfw9u57n6l] { display:flex; gap:var(--spacing-sm); flex-wrap:wrap; margin-bottom: var(--spacing-md); }
    .toolbar input[b-pfw9u57n6l], .toolbar select[b-pfw9u57n6l], .panel-body select[b-pfw9u57n6l], .panel-body textarea[b-pfw9u57n6l] {
        padding: 0.55rem 0.75rem; border:1px solid var(--gray-300); border-radius:var(--radius-md);
    }
    .products-grid[b-pfw9u57n6l] { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:var(--spacing-md); }
    .product-card[b-pfw9u57n6l] { border:1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--spacing-md); display:flex; flex-direction:column; gap:0.4rem; }
    .product-icon[b-pfw9u57n6l] {
        width: 42px;
        height: 42px;
        border-radius: var(--radius-md);
        background: var(--gray-100);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
    }
    .product-card.unavailable[b-pfw9u57n6l] { opacity:0.6; }
    .product-title[b-pfw9u57n6l] { font-weight:600; color:var(--gray-900); }
    .product-desc[b-pfw9u57n6l] { font-size: var(--font-size-xs); color:var(--gray-500); min-height: 32px; }
    .product-footer[b-pfw9u57n6l] { display:flex; align-items:center; justify-content:space-between; margin-top:0.2rem; }
    .qty[b-pfw9u57n6l] { display:flex; align-items:center; gap:0.4rem; }
    .qty button[b-pfw9u57n6l] { width:28px; height:28px; border:1px solid var(--gray-300); border-radius:var(--radius-md); background:#fff; cursor:pointer; }
    .cart-list[b-pfw9u57n6l] { display:flex; flex-direction:column; gap:var(--spacing-sm); max-height: 340px; overflow:auto; }
    .cart-row[b-pfw9u57n6l] { display:grid; grid-template-columns: 1fr auto auto; gap:var(--spacing-sm); align-items:center; padding:0.5rem 0; border-bottom:1px solid var(--gray-100); }
    .muted[b-pfw9u57n6l] { color:var(--gray-500); font-size: var(--font-size-sm); }
    .totals[b-pfw9u57n6l] { border-top:1px solid var(--gray-200); margin-top:var(--spacing-md); padding-top:var(--spacing-md); display:flex; flex-direction:column; gap:0.4rem; }
    .total-row[b-pfw9u57n6l] { display:flex; justify-content:space-between; }
    .total-row.grand[b-pfw9u57n6l] { font-weight:700; font-size: var(--font-size-lg); }
    .modal-overlay[b-pfw9u57n6l] {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1200;
        padding: 1rem;
    }
    .modal-card[b-pfw9u57n6l] {
        width: min(650px, 100%);
        max-height: 90vh;
        overflow: auto;
        background: #fff;
        border-radius: var(--radius-xl);
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-xl);
    }
    .receipt-table[b-pfw9u57n6l] { width:100%; border-collapse: collapse; margin-top:0.4rem; }
    .receipt-table th[b-pfw9u57n6l], .receipt-table td[b-pfw9u57n6l] { border-bottom:1px solid var(--gray-100); padding:0.45rem; text-align:left; }
    .receipt-table th[b-pfw9u57n6l] { color: var(--gray-500); font-size: var(--font-size-xs); text-transform: uppercase; }
@media (min-width: 1000px) { .pos-layout[b-pfw9u57n6l] { grid-template-columns: 1.5fr 1fr; } }

/* /Components/Pages/Cafeteria/Admin/ProductForm.razor.rz.scp.css */
.product-form-page[b-ptx3rv4r5d] {
        max-width: 900px;
    }

    /* Header */
    .form-header[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .form-header-left[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-ptx3rv4r5d] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .form-title h1[b-ptx3rv4r5d] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-title p[b-ptx3rv4r5d] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-actions[b-ptx3rv4r5d] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Form Card */
    .form-card[b-ptx3rv4r5d] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
    }

    .form-card-header[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-card-icon[b-ptx3rv4r5d] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-card-icon.blue[b-ptx3rv4r5d] { background-color: #dbeafe; color: #2563eb; }
    .form-card-icon.green[b-ptx3rv4r5d] { background-color: #dcfce7; color: #16a34a; }
    .form-card-icon.purple[b-ptx3rv4r5d] { background-color: #f3e8ff; color: #7c3aed; }
    .form-card-icon.orange[b-ptx3rv4r5d] { background-color: #fef3c7; color: #d97706; }

    .form-card-title h2[b-ptx3rv4r5d] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-card-title p[b-ptx3rv4r5d] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .form-card-body[b-ptx3rv4r5d] {
        padding: var(--spacing-lg);
    }

    /* Form Elements */
    .form-grid[b-ptx3rv4r5d] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .form-row[b-ptx3rv4r5d] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-group[b-ptx3rv4r5d] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-label[b-ptx3rv4r5d] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-ptx3rv4r5d] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-ptx3rv4r5d] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-ptx3rv4r5d] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-ptx3rv4r5d]::placeholder {
        color: var(--gray-400);
    }

    select.form-input[b-ptx3rv4r5d] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    textarea.form-input[b-ptx3rv4r5d] {
        resize: vertical;
        min-height: 100px;
    }

    .form-hint[b-ptx3rv4r5d] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    /* Image Upload */
    .image-upload-area[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .image-preview[b-ptx3rv4r5d] {
        width: 120px;
        height: 120px;
        border-radius: var(--radius-xl);
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px dashed var(--gray-300);
    }

    .image-preview.has-image[b-ptx3rv4r5d] {
        border-style: solid;
        border-color: var(--gray-200);
    }

    .image-preview img[b-ptx3rv4r5d] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .image-preview-placeholder[b-ptx3rv4r5d] {
        font-size: 3rem;
    }

    .image-upload-controls[b-ptx3rv4r5d] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .image-upload-controls p[b-ptx3rv4r5d] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .upload-btn[b-ptx3rv4r5d] {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.5rem 1rem;
        border: 1px solid var(--gray-300);
        background-color: white;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .upload-btn:hover[b-ptx3rv4r5d] {
        background-color: var(--gray-50);
        border-color: var(--gray-400);
    }

    /* Emoji Picker */
    .emoji-picker[b-ptx3rv4r5d] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
    }

    .emoji-option[b-ptx3rv4r5d] {
        width: 40px;
        height: 40px;
        border: 2px solid transparent;
        background-color: white;
        border-radius: var(--radius-md);
        font-size: 1.25rem;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .emoji-option:hover[b-ptx3rv4r5d] {
        border-color: var(--gray-300);
    }

    .emoji-option.selected[b-ptx3rv4r5d] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    /* Toggle Group */
    .toggle-group[b-ptx3rv4r5d] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .toggle-item[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
        cursor: pointer;
        flex: 1;
        min-width: 140px;
    }

    .toggle-switch[b-ptx3rv4r5d] {
        width: 44px;
        height: 24px;
        background-color: var(--gray-300);
        border-radius: var(--radius-full);
        position: relative;
        transition: all var(--transition-fast);
        flex-shrink: 0;
    }

    .toggle-switch.active[b-ptx3rv4r5d] {
        background-color: var(--primary-600);
    }

    .toggle-switch[b-ptx3rv4r5d]::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: var(--radius-full);
        top: 3px;
        left: 3px;
        transition: all var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }

    .toggle-switch.active[b-ptx3rv4r5d]::after {
        left: 23px;
    }

    .toggle-label[b-ptx3rv4r5d] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    /* Nutrition Info */
    .nutrition-grid[b-ptx3rv4r5d] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .input-with-unit[b-ptx3rv4r5d] {
        position: relative;
    }

    .input-with-unit input[b-ptx3rv4r5d] {
        padding-right: 3rem;
    }

    .input-unit[b-ptx3rv4r5d] {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--font-size-sm);
        color: var(--gray-400);
        pointer-events: none;
    }

    /* Form Footer */
    .form-footer[b-ptx3rv4r5d] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-footer-left[b-ptx3rv4r5d] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .form-footer-right[b-ptx3rv4r5d] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Responsive */
@media (min-width: 640px) {
        .form-row[b-ptx3rv4r5d] {
            grid-template-columns: repeat(2, 1fr);
        }

        .nutrition-grid[b-ptx3rv4r5d] {
            grid-template-columns: repeat(4, 1fr);
        }
    }
@media (max-width: 640px) {
        .form-header[b-ptx3rv4r5d] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .form-actions[b-ptx3rv4r5d] {
            width: 100%;
        }

        .form-actions .btn[b-ptx3rv4r5d] {
            flex: 1;
        }

        .image-upload-area[b-ptx3rv4r5d] {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-footer[b-ptx3rv4r5d] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-footer-right[b-ptx3rv4r5d] {
            width: 100%;
        }

        .form-footer-right .btn[b-ptx3rv4r5d] {
            flex: 1;
        }
    }

/* /Components/Pages/Cafeteria/Checkout.razor.rz.scp.css */
.checkout-page[b-c4i106hfnl] {
        max-width: 1000px;
    }

    /* Header */
    .checkout-header[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .back-btn[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-c4i106hfnl] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .checkout-title h1[b-c4i106hfnl] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .checkout-title p[b-c4i106hfnl] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    /* Layout */
    .checkout-layout[b-c4i106hfnl] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Cards */
    .checkout-card[b-c4i106hfnl] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .checkout-card-header[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .checkout-card-header h2[b-c4i106hfnl] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .checkout-card-body[b-c4i106hfnl] {
        padding: var(--spacing-lg);
    }

    /* Order Items */
    .order-items[b-c4i106hfnl] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .order-item[b-c4i106hfnl] {
        display: flex;
        gap: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--gray-100);
    }

    .order-item:last-child[b-c4i106hfnl] {
        padding-bottom: 0;
        border-bottom: none;
    }

    .order-item-image[b-c4i106hfnl] {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        flex-shrink: 0;
        background-color: var(--gray-100);
    }

    .order-item-image-placeholder[b-c4i106hfnl] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
    }

    .order-item-details[b-c4i106hfnl] {
        flex: 1;
    }

    .order-item-name[b-c4i106hfnl] {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .order-item-price[b-c4i106hfnl] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .order-item-quantity[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
    }

    .quantity-btn[b-c4i106hfnl] {
        width: 28px;
        height: 28px;
        border: 1px solid var(--gray-200);
        background-color: white;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .quantity-btn:hover[b-c4i106hfnl] {
        background-color: var(--gray-50);
    }

    .quantity-value[b-c4i106hfnl] {
        min-width: 32px;
        text-align: center;
        font-weight: 600;
        color: var(--gray-900);
    }

    .order-item-total[b-c4i106hfnl] {
        text-align: right;
        flex-shrink: 0;
    }

    .order-item-total-value[b-c4i106hfnl] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .order-item-remove[b-c4i106hfnl] {
        font-size: var(--font-size-xs);
        color: var(--danger-500);
        background: none;
        border: none;
        cursor: pointer;
        margin-top: var(--spacing-xs);
    }

    .order-item-remove:hover[b-c4i106hfnl] {
        text-decoration: underline;
    }

    /* Delivery Options */
    .delivery-options[b-c4i106hfnl] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .delivery-option[b-c4i106hfnl] {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .delivery-option:hover[b-c4i106hfnl] {
        border-color: var(--gray-300);
    }

    .delivery-option.selected[b-c4i106hfnl] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .delivery-radio[b-c4i106hfnl] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--gray-300);
        border-radius: var(--radius-full);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.125rem;
    }

    .delivery-option.selected .delivery-radio[b-c4i106hfnl] {
        border-color: var(--primary-500);
    }

    .delivery-radio[b-c4i106hfnl]::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: var(--primary-500);
        border-radius: var(--radius-full);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .delivery-option.selected .delivery-radio[b-c4i106hfnl]::after {
        opacity: 1;
    }

    .delivery-content[b-c4i106hfnl] {
        flex: 1;
    }

    .delivery-title[b-c4i106hfnl] {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .delivery-description[b-c4i106hfnl] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .delivery-time[b-c4i106hfnl] {
        font-size: var(--font-size-xs);
        color: var(--primary-600);
        margin-top: 0.25rem;
    }

    /* Location Input */
    .location-input[b-c4i106hfnl] {
        margin-top: var(--spacing-md);
    }

    .location-input label[b-c4i106hfnl] {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 0.375rem;
    }

    .location-input input[b-c4i106hfnl],
    .location-input select[b-c4i106hfnl] {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }

    .location-input input:focus[b-c4i106hfnl],
    .location-input select:focus[b-c4i106hfnl] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    /* Payment Options */
    .payment-options[b-c4i106hfnl] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .payment-option[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .payment-option:hover[b-c4i106hfnl] {
        border-color: var(--gray-300);
    }

    .payment-option.selected[b-c4i106hfnl] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .payment-icon[b-c4i106hfnl] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .payment-option.selected .payment-icon[b-c4i106hfnl] {
        background-color: var(--primary-100);
        color: var(--primary-600);
    }

    .payment-details[b-c4i106hfnl] {
        flex: 1;
    }

    .payment-title[b-c4i106hfnl] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .payment-subtitle[b-c4i106hfnl] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .payment-check[b-c4i106hfnl] {
        width: 20px;
        height: 20px;
        border-radius: var(--radius-full);
        border: 2px solid var(--gray-300);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .payment-option.selected .payment-check[b-c4i106hfnl] {
        background-color: var(--primary-500);
        border-color: var(--primary-500);
        color: white;
    }

    /* Order Notes */
    .order-notes textarea[b-c4i106hfnl] {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        min-height: 80px;
        resize: vertical;
    }

    .order-notes textarea:focus[b-c4i106hfnl] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    /* Order Summary */
    .order-summary[b-c4i106hfnl] {
        position: sticky;
        top: var(--spacing-lg);
    }

    .summary-rows[b-c4i106hfnl] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .summary-row[b-c4i106hfnl] {
        display: flex;
        justify-content: space-between;
        font-size: var(--font-size-sm);
    }

    .summary-row.total[b-c4i106hfnl] {
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-md);
        border-top: 2px solid var(--gray-200);
        font-size: var(--font-size-lg);
        font-weight: 700;
    }

    .place-order-btn[b-c4i106hfnl] {
        width: 100%;
        padding: 1rem;
        margin-top: var(--spacing-lg);
        background-color: var(--primary-600);
        color: white;
        border: none;
        border-radius: var(--radius-lg);
        font-size: var(--font-size-base);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .place-order-btn:hover[b-c4i106hfnl] {
        background-color: var(--primary-700);
    }

    .order-disclaimer[b-c4i106hfnl] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        text-align: center;
        margin-top: var(--spacing-md);
    }

    /* Estimated Time */
    .estimated-time[b-c4i106hfnl] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background-color: #dcfce7;
        border-radius: var(--radius-lg);
        margin-top: var(--spacing-md);
    }

    .estimated-time svg[b-c4i106hfnl] {
        color: #16a34a;
        flex-shrink: 0;
    }

    .estimated-time span[b-c4i106hfnl] {
        font-size: var(--font-size-sm);
        color: #15803d;
    }

    /* Responsive */
@media (min-width: 768px) {
        .checkout-layout[b-c4i106hfnl] {
            grid-template-columns: 1fr 380px;
        }
    }
@media (max-width: 640px) {
        .delivery-options[b-c4i106hfnl] {
            grid-template-columns: 1fr;
        }
    }

/* /Components/Pages/Cafeteria/Menu.razor.rz.scp.css */
.cafeteria-page[b-2q71kcf0kc] {
  max-width: 1400px;
}

/* Header */
.cafeteria-header[b-2q71kcf0kc] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.cafeteria-header-top[b-2q71kcf0kc] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-2q71kcf0kc] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Cart Button */
.cart-btn[b-2q71kcf0kc] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1.25rem;
  background-color: var(--primary-600);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cart-btn:hover[b-2q71kcf0kc] {
  background-color: var(--primary-700);
}

.cart-badge[b-2q71kcf0kc] {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background-color: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search & Filters */
.menu-filters[b-2q71kcf0kc] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-2q71kcf0kc] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}

.filter-search input[b-2q71kcf0kc] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-2q71kcf0kc] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-2q71kcf0kc] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

/* Category Tabs */
.category-tabs[b-2q71kcf0kc] {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
}

@media (max-width: 1024px) {
  .category-tabs[b-2q71kcf0kc] {
    flex-wrap: wrap;
  }
}

.category-tab[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.category-tab:hover[b-2q71kcf0kc] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.category-tab.active[b-2q71kcf0kc] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Menu Grid */
.menu-layout[b-2q71kcf0kc] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.menu-grid[b-2q71kcf0kc] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

/* Product Card */
.product-card[b-2q71kcf0kc] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.product-card:hover[b-2q71kcf0kc] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.product-image[b-2q71kcf0kc] {
  position: relative;
  width: 100%;
  height: 180px;
  background-color: var(--gray-100);
  overflow: hidden;
}

.product-image img[b-2q71kcf0kc] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder[b-2q71kcf0kc] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}

.product-badges[b-2q71kcf0kc] {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.product-badge[b-2q71kcf0kc] {
  padding: 0.25rem 0.5rem;
  background-color: white;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
}

.product-badge.popular[b-2q71kcf0kc] {
  background-color: #fef3c7;
  color: #b45309;
}

.product-badge.new[b-2q71kcf0kc] {
  background-color: #dcfce7;
  color: #15803d;
}

.product-badge.vegan[b-2q71kcf0kc] {
  background-color: #d1fae5;
  color: #047857;
}

.product-badge.spicy[b-2q71kcf0kc] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.product-favorite[b-2q71kcf0kc] {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.product-favorite:hover[b-2q71kcf0kc] {
  transform: scale(1.1);
}

.product-favorite.active[b-2q71kcf0kc] {
  color: #ef4444;
}

.product-content[b-2q71kcf0kc] {
  padding: var(--spacing-md);
}

.product-category[b-2q71kcf0kc] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.product-name[b-2q71kcf0kc] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.product-description[b-2q71kcf0kc] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.product-meta-item[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.product-footer[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.product-price[b-2q71kcf0kc] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
}

.product-price .currency[b-2q71kcf0kc] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-500);
}

.add-to-cart-btn[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.5rem 1rem;
  background-color: var(--primary-600);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.add-to-cart-btn:hover[b-2q71kcf0kc] {
  background-color: var(--primary-700);
}

.add-to-cart-btn:disabled[b-2q71kcf0kc] {
  background-color: var(--gray-300);
  cursor: not-allowed;
}

/* Quantity Selector */
.quantity-selector[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
}

.quantity-btn[b-2q71kcf0kc] {
  width: 32px;
  height: 32px;
  border: none;
  background-color: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quantity-btn:hover[b-2q71kcf0kc] {
  background-color: var(--gray-50);
}

.quantity-value[b-2q71kcf0kc] {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  color: var(--gray-900);
}

/* Cart Sidebar */
.cart-sidebar[b-2q71kcf0kc] {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background-color: white;
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.cart-sidebar.open[b-2q71kcf0kc] {
  transform: translateX(0);
}

.cart-overlay[b-2q71kcf0kc] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.cart-overlay.open[b-2q71kcf0kc] {
  opacity: 1;
  visibility: visible;
}

.cart-header[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}

.cart-header h2[b-2q71kcf0kc] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cart-close[b-2q71kcf0kc] {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gray-500);
  transition: all var(--transition-fast);
}

.cart-close:hover[b-2q71kcf0kc] {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.cart-items[b-2q71kcf0kc] {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.cart-item[b-2q71kcf0kc] {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-sm);
}

.cart-item-image[b-2q71kcf0kc] {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item-image img[b-2q71kcf0kc] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-image-placeholder[b-2q71kcf0kc] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-200);
  font-size: 1.5rem;
}

.cart-item-details[b-2q71kcf0kc] {
  flex: 1;
  min-width: 0;
}

.cart-item-name[b-2q71kcf0kc] {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.cart-item-price[b-2q71kcf0kc] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.cart-item-actions[b-2q71kcf0kc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
}

.cart-item-remove[b-2q71kcf0kc] {
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  color: var(--danger-500);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.cart-item-remove:hover[b-2q71kcf0kc] {
  text-decoration: underline;
}

.cart-empty[b-2q71kcf0kc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  text-align: center;
}

.cart-empty-icon[b-2q71kcf0kc] {
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.cart-empty h3[b-2q71kcf0kc] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.cart-empty p[b-2q71kcf0kc] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.cart-footer[b-2q71kcf0kc] {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

.cart-summary[b-2q71kcf0kc] {
  margin-bottom: var(--spacing-md);
}

.cart-summary-row[b-2q71kcf0kc] {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.cart-summary-row.total[b-2q71kcf0kc] {
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  border-top: 2px solid var(--gray-200);
  font-size: var(--font-size-base);
  font-weight: 700;
}

.checkout-btn[b-2q71kcf0kc] {
  width: 100%;
  padding: 0.875rem;
  background-color: var(--primary-600);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.checkout-btn:hover[b-2q71kcf0kc] {
  background-color: var(--primary-700);
}

/* Out of Stock */
.product-card.out-of-stock[b-2q71kcf0kc] {
  opacity: 0.7;
}

.product-card.out-of-stock .product-image[b-2q71kcf0kc]::after {
  content: 'Out of Stock';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
}

/* Responsive */
@media (max-width: 768px) {
  .cafeteria-header-top[b-2q71kcf0kc] {
    flex-direction: column;
  }

  .header-actions[b-2q71kcf0kc] {
    width: 100%;
    /* justify-content: flex-end; */
    flex-wrap: wrap;
  }

  .header-actions .cart-btn[b-2q71kcf0kc],
  .header-actions .btn[b-2q71kcf0kc] {
    width: 100%;
  }

  .menu-filters[b-2q71kcf0kc] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-2q71kcf0kc] {
    max-width: none;
  }

  .cart-sidebar[b-2q71kcf0kc] {
    width: 100%;
  }
}
/* /Components/Pages/Cafeteria/Orders.razor.rz.scp.css */
.orders-page[b-nzrtmh4sfk] {
        max-width: 1200px;
    }

    /* Header */
    .orders-header[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .orders-header-left[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-nzrtmh4sfk] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    /* Tabs */
    .order-tabs[b-nzrtmh4sfk] {
        display: flex;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
        background-color: var(--gray-100);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-lg);
    }

    .order-tab[b-nzrtmh4sfk] {
        padding: 0.625rem 1.25rem;
        background: none;
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .order-tab:hover[b-nzrtmh4sfk] {
        color: var(--gray-900);
    }

    .order-tab.active[b-nzrtmh4sfk] {
        background-color: white;
        color: var(--gray-900);
        box-shadow: var(--shadow-sm);
    }

    .order-tab .badge[b-nzrtmh4sfk] {
        margin-left: 0.5rem;
        padding: 0.125rem 0.5rem;
        background-color: var(--primary-100);
        color: var(--primary-700);
        border-radius: var(--radius-full);
        font-size: 11px;
    }

    /* Orders List */
    .orders-list[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .order-card[b-nzrtmh4sfk] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .order-card:hover[b-nzrtmh4sfk] {
        border-color: var(--gray-300);
        box-shadow: var(--shadow-md);
    }

    .order-card-header[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .order-info[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .order-number[b-nzrtmh4sfk] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .order-date[b-nzrtmh4sfk] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .order-status[b-nzrtmh4sfk] {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .order-status.pending[b-nzrtmh4sfk] {
        background-color: #fef3c7;
        color: #b45309;
    }

    .order-status.preparing[b-nzrtmh4sfk] {
        background-color: #dbeafe;
        color: #1d4ed8;
    }

    .order-status.ready[b-nzrtmh4sfk] {
        background-color: #dcfce7;
        color: #15803d;
    }

    .order-status.delivered[b-nzrtmh4sfk] {
        background-color: var(--gray-100);
        color: var(--gray-600);
    }

    .order-status.cancelled[b-nzrtmh4sfk] {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    .order-card-body[b-nzrtmh4sfk] {
        padding: var(--spacing-lg);
    }

    .order-items-preview[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .order-item-emoji[b-nzrtmh4sfk] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
    }

    .order-items-text[b-nzrtmh4sfk] {
        flex: 1;
    }

    .order-items-text strong[b-nzrtmh4sfk] {
        color: var(--gray-900);
    }

    .order-items-text span[b-nzrtmh4sfk] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .order-total[b-nzrtmh4sfk] {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--gray-900);
    }

    .order-card-footer[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
        background-color: var(--gray-50);
        border-top: 1px solid var(--gray-100);
    }

    .order-meta[b-nzrtmh4sfk] {
        display: flex;
        gap: var(--spacing-lg);
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .order-meta-item[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    /* Order Detail View */
    .order-detail[b-nzrtmh4sfk] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .detail-card[b-nzrtmh4sfk] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .detail-card-header[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .detail-card-header h2[b-nzrtmh4sfk] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .detail-card-body[b-nzrtmh4sfk] {
        padding: var(--spacing-lg);
    }

    /* Status Timeline */
    .status-timeline[b-nzrtmh4sfk] {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: var(--spacing-xl);
    }

    .status-timeline[b-nzrtmh4sfk]::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 40px;
        right: 40px;
        height: 2px;
        background-color: var(--gray-200);
    }

    .status-step[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .status-step-icon[b-nzrtmh4sfk] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        background-color: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
        margin-bottom: var(--spacing-sm);
    }

    .status-step.completed .status-step-icon[b-nzrtmh4sfk] {
        background-color: var(--success-500);
        color: white;
    }

    .status-step.current .status-step-icon[b-nzrtmh4sfk] {
        background-color: var(--primary-500);
        color: white;
        animation: pulse-b-nzrtmh4sfk 2s infinite;
    }
@keyframes pulse-b-nzrtmh4sfk {
        0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
        50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    }

    .status-step-label[b-nzrtmh4sfk] {
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--gray-500);
        text-align: center;
    }

    .status-step.completed .status-step-label[b-nzrtmh4sfk],
    .status-step.current .status-step-label[b-nzrtmh4sfk] {
        color: var(--gray-900);
    }

    .status-step-time[b-nzrtmh4sfk] {
        font-size: 10px;
        color: var(--gray-400);
    }

    /* Order Items List */
    .order-items-list[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .order-item-row[b-nzrtmh4sfk] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--gray-100);
    }

    .order-item-row:last-child[b-nzrtmh4sfk] {
        padding-bottom: 0;
        border-bottom: none;
    }

    .order-item-image[b-nzrtmh4sfk] {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-lg);
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        flex-shrink: 0;
    }

    .order-item-details[b-nzrtmh4sfk] {
        flex: 1;
    }

    .order-item-name[b-nzrtmh4sfk] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .order-item-qty[b-nzrtmh4sfk] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .order-item-price[b-nzrtmh4sfk] {
        font-weight: 600;
        color: var(--gray-900);
    }

    /* Order Summary */
    .order-summary-rows[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .summary-row[b-nzrtmh4sfk] {
        display: flex;
        justify-content: space-between;
        font-size: var(--font-size-sm);
    }

    .summary-row.total[b-nzrtmh4sfk] {
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-md);
        border-top: 2px solid var(--gray-200);
        font-size: var(--font-size-lg);
        font-weight: 700;
    }

    /* Info Grid */
    .info-grid[b-nzrtmh4sfk] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .info-item[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label[b-nzrtmh4sfk] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .info-value[b-nzrtmh4sfk] {
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        font-weight: 500;
    }

    /* Action Buttons */
    .order-actions[b-nzrtmh4sfk] {
        display: flex;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        border-top: 1px solid var(--gray-100);
    }

    /* Empty State */
    .empty-orders[b-nzrtmh4sfk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2xl);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        text-align: center;
    }

    .empty-orders-icon[b-nzrtmh4sfk] {
        width: 80px;
        height: 80px;
        margin-bottom: var(--spacing-md);
        background-color: var(--gray-100);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-400);
    }

    .empty-orders h3[b-nzrtmh4sfk] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: var(--spacing-sm);
    }

    .empty-orders p[b-nzrtmh4sfk] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin-bottom: var(--spacing-lg);
    }

    /* Responsive */
@media (min-width: 768px) {
        .order-detail[b-nzrtmh4sfk] {
            grid-template-columns: 2fr 1fr;
        }
    }
@media (max-width: 640px) {
        .orders-header[b-nzrtmh4sfk] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .status-timeline[b-nzrtmh4sfk] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .status-timeline[b-nzrtmh4sfk]::before {
            display: none;
        }

        .status-step[b-nzrtmh4sfk] {
            flex-direction: row;
            gap: var(--spacing-md);
        }

        .order-card-footer[b-nzrtmh4sfk] {
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .info-grid[b-nzrtmh4sfk] {
            grid-template-columns: 1fr;
        }
    }

/* /Components/Pages/Complaints/Detail.razor.rz.scp.css */
.complaint-detail-wrap[b-gr3crltlyk] {
  max-width: 1100px;
}
.complaint-header-left[b-gr3crltlyk] {
  display: flex;
  /* align-items: center; */
  gap: var(--spacing-md);
}

.back-btn[b-gr3crltlyk] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  text-decoration: none;
}

.back-btn:hover[b-gr3crltlyk] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.detail-grid[b-gr3crltlyk] {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-md);
}
.card[b-gr3crltlyk] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}
.badges[b-gr3crltlyk] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.badge[b-gr3crltlyk] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.badge-status-open[b-gr3crltlyk] {
  background: #dbeafe;
  color: #1d4ed8;
}
.badge-status-progress[b-gr3crltlyk] {
  background: #fef3c7;
  color: #b45309;
}
.badge-status-resolved[b-gr3crltlyk] {
  background: #dcfce7;
  color: #166534;
}
.badge-status-closed[b-gr3crltlyk] {
  background: #e5e7eb;
  color: #374151;
}
.badge-sev-low[b-gr3crltlyk] {
  background: #ecfeff;
  color: #155e75;
}
.badge-sev-medium[b-gr3crltlyk] {
  background: #fef3c7;
  color: #92400e;
}
.badge-sev-high[b-gr3crltlyk] {
  background: #fee2e2;
  color: #991b1b;
}
.meta-row[b-gr3crltlyk] {
  display: grid;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

@media (min-width: 450px) {
  .meta-row[b-gr3crltlyk] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.meta-item[b-gr3crltlyk] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}
.meta-item strong[b-gr3crltlyk] {
  color: var(--gray-900);
}
.timeline[b-gr3crltlyk] {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.timeline-item[b-gr3crltlyk] {
  border-left: 2px solid var(--gray-200);
  padding-left: 0.75rem;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}
@media (max-width: 900px) {
  .detail-grid[b-gr3crltlyk] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/Complaints/Form.razor.rz.scp.css */
.complaint-form-wrap[b-fofusi6lkp] { max-width: 1100px; }
    .form-layout[b-fofusi6lkp] {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-md);
    }
    .complaint-form-card[b-fofusi6lkp] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-xl);
    }
    .form-grid[b-fofusi6lkp] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
    .form-field[b-fofusi6lkp] { display: flex; flex-direction: column; gap: 0.4rem; }
    .form-field-full[b-fofusi6lkp] { grid-column: 1 / -1; }
    .form-field label[b-fofusi6lkp] { font-size: var(--font-size-sm); font-weight: 600; color: var(--gray-700); }
    .form-field input[b-fofusi6lkp], .form-field select[b-fofusi6lkp], .form-field textarea[b-fofusi6lkp] {
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-sm);
        width: 100%;
    }
    .form-actions[b-fofusi6lkp] {
        margin-top: var(--spacing-lg);
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
    }
    .info-card[b-fofusi6lkp] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        height: fit-content;
    }
    .info-title[b-fofusi6lkp] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: var(--spacing-sm);
    }
    .info-text[b-fofusi6lkp] {
        font-size: var(--font-size-sm);
        color: var(--gray-600);
        line-height: 1.5;
    }
    .chip[b-fofusi6lkp] {
        display: inline-flex;
        margin-top: var(--spacing-sm);
        padding: 0.25rem 0.625rem;
        background: var(--gray-100);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        color: var(--gray-700);
        font-weight: 600;
    }
@media (max-width: 768px) {
        .form-layout[b-fofusi6lkp] { grid-template-columns: 1fr; }
        .form-grid[b-fofusi6lkp] { grid-template-columns: 1fr; }
    }

/* /Components/Pages/Complaints/Index.razor.rz.scp.css */
.complaints-page[b-94627u1883] {
  max-width: 1400px;
}
.complaints-header[b-94627u1883] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
  .complaints-header[b-94627u1883] {
    margin-bottom: var(--spacing-xl);
  }
}
.header-actions[b-94627u1883] {
  display: flex;
  gap: var(--spacing-sm);
}

.header-actions:empty[b-94627u1883] {
  display: none;
}

.complaints-stats[b-94627u1883] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.stat-card[b-94627u1883] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

@media (max-width: 768px) {
  .stat-card[b-94627u1883] {
    padding: var(--spacing-md);
  }
}
.stat-icon[b-94627u1883] {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.stat-icon.open[b-94627u1883] {
  background: #dbeafe;
  color: #1d4ed8;
}
.stat-icon.progress[b-94627u1883] {
  background: #fef3c7;
  color: #b45309;
}
.stat-icon.high[b-94627u1883] {
  background: #fee2e2;
  color: #991b1b;
}
.stat-icon.done[b-94627u1883] {
  background: #dcfce7;
  color: #166534;
}
.stat-value[b-94627u1883] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
}
.stat-label[b-94627u1883] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.filters-bar[b-94627u1883] {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
}
.search-box[b-94627u1883] {
  flex: 1;
  min-width: 280px;
  position: relative;
}
.search-box input[b-94627u1883] {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  font-size: var(--font-size-sm);
  background: white;
}
.search-box svg[b-94627u1883] {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}
.filter-group[b-94627u1883] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.filter-group select[b-94627u1883] {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  font-size: var(--font-size-sm);
  background: white;
  min-width: 180px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 9L12 15L18 9' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* 👈 control spacing */
  background-size: 16px;
}

@media (max-width: 500px) {
  .filter-group select[b-94627u1883] {
    width: 100%;
  }
}

.complaint-list[b-94627u1883] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .complaint-list[b-94627u1883] {
    gap: var(--spacing-md);
  }
}
.complaint-card[b-94627u1883] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
}
.complaint-card:hover[b-94627u1883] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}
.complaint-card-top[b-94627u1883] {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
}
.complaint-title[b-94627u1883] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}
.complaint-meta[b-94627u1883] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}
.badge[b-94627u1883] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-right: 0.35rem;
}
.badge-status-open[b-94627u1883] {
  background: #dbeafe;
  color: #1d4ed8;
}
.badge-status-progress[b-94627u1883] {
  background: #fef3c7;
  color: #b45309;
}
.badge-status-resolved[b-94627u1883] {
  background: #dcfce7;
  color: #166534;
}
.badge-status-closed[b-94627u1883] {
  background: #e5e7eb;
  color: #374151;
}
.badge-sev-low[b-94627u1883] {
  background: #ecfeff;
  color: #155e75;
}
.badge-sev-medium[b-94627u1883] {
  background: #fef3c7;
  color: #92400e;
}
.badge-sev-high[b-94627u1883] {
  background: #fee2e2;
  color: #991b1b;
}
.complaint-footer[b-94627u1883] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}
.complaint-actions[b-94627u1883] {
  display: flex;
  gap: var(--spacing-sm);
}
.empty-state[b-94627u1883] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  background: white;
  color: var(--gray-500);
}

/* Loading skeletons */
.loading-grid[b-94627u1883] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.loading-card[b-94627u1883] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.skeleton[b-94627u1883] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-94627u1883 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer-b-94627u1883 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 1024px) {
  .complaints-stats[b-94627u1883] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
}
@media (max-width: 640px) {
  .complaints-stats[b-94627u1883] {
    grid-template-columns: 1fr;
  }
  .complaint-footer[b-94627u1883] {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Pagination */
.invoices-pagination[b-94627u1883] {
  margin-top: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.pagination-info[b-94627u1883] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.pagination-controls[b-94627u1883] {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.pagination-btn[b-94627u1883] {
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-700);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination-btn:disabled[b-94627u1883] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-94627u1883] {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: white;
}
/* /Components/Pages/Dashboard/AdminDashboard.razor.rz.scp.css */
.dashboard-header[b-8sqfkt8eg7] {
  margin-bottom: var(--spacing-lg);
}

.dashboard-header .page-title[b-8sqfkt8eg7] {
  margin-bottom: 0.25rem;
}

.dashboard-actions[b-8sqfkt8eg7] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-sm);
}

.quick-action-btn[b-8sqfkt8eg7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}

.quick-action-btn:hover[b-8sqfkt8eg7] {
  border-color: var(--primary-300);
  background-color: var(--primary-50);
  color: var(--primary-700);
}

.quick-action-icon[b-8sqfkt8eg7] {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    } */

.stat-card[b-8sqfkt8eg7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background-color: white;
}

.stats-grid .stat-icon[b-8sqfkt8eg7] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-grid .stat-icon.primary[b-8sqfkt8eg7] {
  background-color: #dbeafe;
  color: #2563eb;
}

.stats-grid .stat-icon.warning[b-8sqfkt8eg7] {
  background-color: #fef3c7;
  color: #d97706;
}

.stats-grid .stat-icon.success[b-8sqfkt8eg7] {
  background-color: #dcfce7;
  color: #16a34a;
}

.stats-grid .stat-icon.info[b-8sqfkt8eg7] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.stats-grid .stat-content[b-8sqfkt8eg7] {
  flex: 1;
}

.stats-grid .stat-value[b-8sqfkt8eg7] {
  margin-bottom: 0.125rem;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
}

.stats-grid .stat-label[b-8sqfkt8eg7] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.dashboard-card-header[b-8sqfkt8eg7],
.dashboard-card-body[b-8sqfkt8eg7] {
  padding: var(--spacing-md);
}

.dashboard-grid[b-8sqfkt8eg7] {
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.eid-welcome-widget[b-8sqfkt8eg7] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #ecfdf5 100%);
  border: 1px solid #dbeafe;
}

.eid-welcome-widget[b-8sqfkt8eg7]::before,
.eid-welcome-widget[b-8sqfkt8eg7]::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  opacity: 0.25;
  pointer-events: none;
}

.eid-welcome-widget[b-8sqfkt8eg7]::before {
  width: 180px;
  height: 180px;
  top: -70px;
  right: -55px;
  background: radial-gradient(circle, #86efac 0%, transparent 70%);
}

.eid-welcome-widget[b-8sqfkt8eg7]::after {
  width: 220px;
  height: 220px;
  bottom: -110px;
  left: -80px;
  background: radial-gradient(circle, #93c5fd 0%, transparent 70%);
}

.eid-welcome-content[b-8sqfkt8eg7] {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-md);
}

.eid-greeting-label[b-8sqfkt8eg7] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #dbeafe;
  border-radius: 999px;
  color: #4f46e5;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.7rem;
}

.eid-title[b-8sqfkt8eg7] {
  margin: 0;
  color: #111827;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
}

.eid-subtitle[b-8sqfkt8eg7] {
  margin: 0;
  color: #475569;
  font-size: var(--font-size-sm);
  max-width: 64ch;
}

.eid-illustration[b-8sqfkt8eg7] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.eid-crescent[b-8sqfkt8eg7] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b);
  box-shadow: inset -10px 0 0 0 #eef2ff;
}

.eid-star[b-8sqfkt8eg7] {
  color: #f59e0b;
  font-size: 1.1rem;
  line-height: 1;
}

.eid-footer-note[b-8sqfkt8eg7] {
  font-size: var(--font-size-xs);
  color: #64748b;
  margin-top: 0.2rem;
}

.lead-item[b-8sqfkt8eg7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
}

.lead-item:last-child[b-8sqfkt8eg7] {
  border-bottom: none;
}

.lead-main[b-8sqfkt8eg7] {
  min-width: 0;
}

.lead-name[b-8sqfkt8eg7] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.lead-meta[b-8sqfkt8eg7] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.badge-soft[b-8sqfkt8eg7] {
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.empty-state[b-8sqfkt8eg7] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}
@media (min-width: 400px) and (max-width: 768px) {
  .dashboard-actions[b-8sqfkt8eg7] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .dashboard-actions[b-8sqfkt8eg7] {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
  }
  /* 
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  } */
}
@media (min-width: 1024px) {
  .dashboard-grid[b-8sqfkt8eg7] {
    grid-template-columns: 2fr 1fr;
  }

  .eid-welcome-widget[b-8sqfkt8eg7] {
    grid-column: 1 / -1;
  }
}
/* /Components/Pages/Dashboard/Index.razor.rz.scp.css */
.trial-warning[b-chnr6g81p0] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-lg);
  color: #92400e;
}

.trial-warning svg[b-chnr6g81p0] {
  flex-shrink: 0;
}

.trial-warning-content[b-chnr6g81p0] {
  flex: 1;
  min-width: 0;
}

.trial-upgrade-btn[b-chnr6g81p0] {
  margin-left: auto;
  white-space: nowrap;
  border: 1px solid #d97706;
  color: #92400e;
  background-color: #fff7ed;
}

.trial-upgrade-btn:hover[b-chnr6g81p0] {
  background-color: #ffedd5;
}

@media (max-width: 768px) {
  .trial-warning[b-chnr6g81p0] {
    flex-wrap: wrap;
  }
  .trial-warning-content[b-chnr6g81p0] {
    width: calc(100% - 40px);
    flex: auto;
  }
  .trial-upgrade-btn[b-chnr6g81p0] {
    margin-right: auto;
  }
}
/* /Components/Pages/Dashboard/MemberDashboard.razor.rz.scp.css */
.member-hero[b-lm9wx7bmi5] {
  border: 1px solid #dbeafe;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #ecfeff 100%);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.member-hero h1[b-lm9wx7bmi5] {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  color: var(--gray-900);
}

.member-hero p[b-lm9wx7bmi5] {
  margin: 0;
  color: var(--gray-600);
  max-width: 70ch;
}

.member-kpis[b-lm9wx7bmi5] {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.member-kpi[b-lm9wx7bmi5] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.member-kpi-label[b-lm9wx7bmi5] {
  margin: 0 0 0.25rem;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.member-kpi-value[b-lm9wx7bmi5] {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.member-shortcuts[b-lm9wx7bmi5] {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.member-shortcut[b-lm9wx7bmi5] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  text-decoration: none;
  color: var(--gray-900);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.member-shortcut:hover[b-lm9wx7bmi5] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.member-grid[b-lm9wx7bmi5] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.status-chip[b-lm9wx7bmi5] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.status-chip.pending[b-lm9wx7bmi5],
.status-chip.sent[b-lm9wx7bmi5],
.status-chip.preparing[b-lm9wx7bmi5] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-chip.overdue[b-lm9wx7bmi5],
.status-chip.cancelled[b-lm9wx7bmi5] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.status-chip.ready[b-lm9wx7bmi5],
.status-chip.confirmed[b-lm9wx7bmi5] {
  background-color: #dcfce7;
  color: #15803d;
}

.empty-block[b-lm9wx7bmi5] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) 0;
}

.muted[b-lm9wx7bmi5] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .member-kpis[b-lm9wx7bmi5] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .member-shortcuts[b-lm9wx7bmi5] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


.member-hero[b-lm9wx7bmi5] {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-xl);
        border: 1px solid #dbeafe;
        background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #ecfeff 100%);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
    }

    .member-hero[b-lm9wx7bmi5]::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        top: -90px;
        right: -80px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, transparent 70%);
        pointer-events: none;
    }

    .member-hero-content[b-lm9wx7bmi5] {
        position: relative;
        z-index: 1;
    }

    .member-hero-title[b-lm9wx7bmi5] {
        margin: 0 0 0.35rem;
        font-size: clamp(1.45rem, 2.2vw, 2rem);
        line-height: 1.2;
        color: var(--gray-900);
        font-weight: 700;
    }

    .member-hero-subtitle[b-lm9wx7bmi5] {
        margin: 0;
        color: var(--gray-600);
        max-width: 60ch;
        font-size: var(--font-size-sm);
    }

    .member-kpis[b-lm9wx7bmi5] {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .member-kpi-card[b-lm9wx7bmi5] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
    }

    .member-kpi-label[b-lm9wx7bmi5] {
        margin: 0 0 0.35rem;
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        font-weight: 600;
    }

    .member-kpi-value[b-lm9wx7bmi5] {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--gray-900);
    }

    .member-kpi-icon[b-lm9wx7bmi5] {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-lg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .member-kpi-icon.blue[b-lm9wx7bmi5] {
        background: #dbeafe;
        color: #2563eb;
    }

    .member-kpi-icon.orange[b-lm9wx7bmi5] {
        background: #fef3c7;
        color: #d97706;
    }

    .member-kpi-icon.green[b-lm9wx7bmi5] {
        background: #dcfce7;
        color: #16a34a;
    }

    .member-kpi-icon.purple[b-lm9wx7bmi5] {
        background: #f3e8ff;
        color: #9333ea;
    }

    .member-section-title[b-lm9wx7bmi5] {
        margin: 0;
    }

    .member-shortcuts[b-lm9wx7bmi5] {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: var(--spacing-md);
    }

    .member-shortcut-card[b-lm9wx7bmi5] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        text-decoration: none;
        transition: all var(--transition-fast);
    }

    .member-shortcut-card:hover[b-lm9wx7bmi5] {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .member-shortcut-head[b-lm9wx7bmi5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        margin-bottom: 0.35rem;
    }

    .member-shortcut-name[b-lm9wx7bmi5] {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .member-shortcut-desc[b-lm9wx7bmi5] {
        margin: 0;
        color: var(--gray-500);
        font-size: var(--font-size-sm);
    }

    .member-shortcut-link[b-lm9wx7bmi5] {
        margin-top: var(--spacing-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--primary-700);
    }
@media (min-width: 768px) {
        .member-kpis[b-lm9wx7bmi5] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .member-shortcuts[b-lm9wx7bmi5] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

/* /Components/Pages/Dashboard/StaffDashboard.razor.rz.scp.css */
.staff-welcome[b-cnz0bt4d97] {
        margin-bottom: var(--spacing-lg);
    }

    .staff-welcome .page-title[b-cnz0bt4d97] {
        margin-bottom: 0.25rem;
    }

    .staff-welcome .page-subtitle[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .branch-badge[b-cnz0bt4d97] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.6rem;
        background-color: var(--primary-50);
        color: var(--primary-700);
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: var(--font-size-sm);
    }

    .staff-stats-grid[b-cnz0bt4d97] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .staff-stat-card[b-cnz0bt4d97] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .staff-stat-icon[b-cnz0bt4d97] {
        width: 52px;
        height: 52px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .staff-stat-icon.bookings[b-cnz0bt4d97] {
        background-color: #dbeafe;
        color: #2563eb;
    }

    .staff-stat-icon.checkins[b-cnz0bt4d97] {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .staff-stat-icon.spaces[b-cnz0bt4d97] {
        background-color: #f3e8ff;
        color: #9333ea;
    }

    .staff-stat-info[b-cnz0bt4d97] {
        flex: 1;
    }

    .staff-stat-value[b-cnz0bt4d97] {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1;
        margin-bottom: 0.25rem;
    }

    .staff-stat-label[b-cnz0bt4d97] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .quick-actions[b-cnz0bt4d97] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .quick-action-btn[b-cnz0bt4d97] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        cursor: pointer;
        transition: all var(--transition-fast);
        text-decoration: none;
        color: var(--gray-700);
    }

    .quick-action-btn:hover[b-cnz0bt4d97] {
        border-color: var(--primary-300);
        background-color: var(--primary-50);
        color: var(--primary-700);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .quick-action-icon[b-cnz0bt4d97] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quick-action-btn span[b-cnz0bt4d97] {
        font-size: var(--font-size-sm);
        font-weight: 500;
    }

    .staff-content-grid[b-cnz0bt4d97] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .checkin-item[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .checkin-item:last-child[b-cnz0bt4d97] {
        border-bottom: none;
    }

    .checkin-user[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .checkin-details h4[b-cnz0bt4d97] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0;
    }

    .checkin-details p[b-cnz0bt4d97] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .checkin-status[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--font-size-xs);
        color: var(--success-600);
    }

    .checkin-status .dot[b-cnz0bt4d97] {
        width: 6px;
        height: 6px;
        background-color: var(--success-500);
        border-radius: var(--radius-full);
    }

    .space-availability[b-cnz0bt4d97] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .space-item[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
    }

    .space-info[b-cnz0bt4d97] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .space-icon[b-cnz0bt4d97] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        color: var(--gray-600);
    }

    .space-details h4[b-cnz0bt4d97] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .space-details p[b-cnz0bt4d97] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .space-status[b-cnz0bt4d97] {
        text-align: right;
    }

    .space-count[b-cnz0bt4d97] {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--gray-900);
    }

    .space-total[b-cnz0bt4d97] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .empty-state[b-cnz0bt4d97] {
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-lg);
        color: var(--gray-400);
    }

    .empty-state svg[b-cnz0bt4d97] {
        margin-bottom: var(--spacing-sm);
    }

    .empty-state p[b-cnz0bt4d97] {
        margin: 0;
        font-size: var(--font-size-sm);
    }
@media (min-width: 768px) {
        .staff-stats-grid[b-cnz0bt4d97] {
            grid-template-columns: repeat(3, 1fr);
        }

        .quick-actions[b-cnz0bt4d97] {
            grid-template-columns: repeat(3, 1fr);
        }

        .staff-content-grid[b-cnz0bt4d97] {
            grid-template-columns: 1.5fr 1fr;
        }
    }

/* /Components/Pages/Invoices/Detail.razor.rz.scp.css */
.invoice-detail-page[b-rgiffbwpoq] {
  max-width: 1200px;
}

/* Header */
.detail-header[b-rgiffbwpoq] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.detail-header-top[b-rgiffbwpoq] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.detail-header-left[b-rgiffbwpoq] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.back-btn[b-rgiffbwpoq] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.back-btn:hover[b-rgiffbwpoq] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.invoice-header-info h1[b-rgiffbwpoq] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.invoice-header-meta[b-rgiffbwpoq] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.invoice-header-meta span[b-rgiffbwpoq] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.invoice-due-summary[b-rgiffbwpoq] {
  font-weight: 500;
}

.invoice-due-summary.overdue[b-rgiffbwpoq] {
  color: #dc2626;
}

.invoice-due-summary.soon[b-rgiffbwpoq] {
  color: #d97706;
}

.header-actions[b-rgiffbwpoq] {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Status Badge */
.invoice-status[b-rgiffbwpoq] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.invoice-status.draft[b-rgiffbwpoq] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.invoice-status.pending[b-rgiffbwpoq] {
  background-color: #fef3c7;
  color: #b45309;
}

.invoice-status.sent[b-rgiffbwpoq] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.invoice-status.paid[b-rgiffbwpoq] {
  background-color: #dcfce7;
  color: #15803d;
}

.invoice-status.overdue[b-rgiffbwpoq] {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Quick Actions */
.quick-actions[b-rgiffbwpoq] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.quick-action-btn[b-rgiffbwpoq] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background-color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover[b-rgiffbwpoq] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.quick-action-btn.primary[b-rgiffbwpoq] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.quick-action-btn.primary:hover[b-rgiffbwpoq] {
  background-color: var(--primary-700);
}

.quick-action-btn.success[b-rgiffbwpoq] {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: white;
}

.quick-action-btn.success:hover[b-rgiffbwpoq] {
  background-color: #15803d;
}

/* Layout */
.detail-grid[b-rgiffbwpoq] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Invoice Card (Printable) */
.invoice-card[b-rgiffbwpoq] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.invoice-document[b-rgiffbwpoq] {
  padding: var(--spacing-2xl);
}

/* Invoice Header */
.invoice-doc-header[b-rgiffbwpoq] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--gray-100);
}

.invoice-branding[b-rgiffbwpoq] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.invoice-logo[b-rgiffbwpoq] {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--primary-600);
  letter-spacing: -0.5px;
}

.invoice-company-info[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
}

.invoice-title-section[b-rgiffbwpoq] {
  text-align: right;
}

.invoice-title[b-rgiffbwpoq] {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--gray-900);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-md);
}

.invoice-number-display[b-rgiffbwpoq] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
}

.invoice-dates[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.invoice-dates span[b-rgiffbwpoq] {
  display: block;
  margin-bottom: 0.25rem;
}

.invoice-dates strong[b-rgiffbwpoq] {
  color: var(--gray-700);
}

/* Bill To / From Section */
.invoice-parties[b-rgiffbwpoq] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.invoice-party h3[b-rgiffbwpoq] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--gray-100);
}

.invoice-party-name[b-rgiffbwpoq] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.invoice-party-details[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
}

/* Invoice Table */
.invoice-items-container[b-rgiffbwpoq] {
  margin-bottom: var(--spacing-2xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.invoice-items-table[b-rgiffbwpoq] {
  width: 100%;
  border-collapse: collapse;
}

.invoice-items-table thead[b-rgiffbwpoq] {
  background-color: var(--gray-900);
  color: white;
}

.invoice-items-table th[b-rgiffbwpoq] {
  text-align: left;
  padding: 1rem 1.25rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-items-table th:nth-child(2)[b-rgiffbwpoq],
.invoice-items-table th:nth-child(3)[b-rgiffbwpoq],
.invoice-items-table th:nth-child(4)[b-rgiffbwpoq] {
  text-align: right;
}

.invoice-items-table td[b-rgiffbwpoq] {
  padding: 1rem 1.25rem;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--gray-100);
}

.invoice-items-table td:nth-child(2)[b-rgiffbwpoq],
.invoice-items-table td:nth-child(3)[b-rgiffbwpoq] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.invoice-items-table td:nth-child(4)[b-rgiffbwpoq] {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.invoice-items-table tbody tr:last-child td[b-rgiffbwpoq] {
  border-bottom: none;
}

.invoice-items-table tbody tr:nth-child(even)[b-rgiffbwpoq] {
  background-color: var(--gray-50);
}

.item-description[b-rgiffbwpoq] {
  font-weight: 500;
  color: var(--gray-900);
}

.item-details[b-rgiffbwpoq] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 0.25rem;
}

/* Totals */
.invoice-totals-section[b-rgiffbwpoq] {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-2xl);
}

.invoice-totals[b-rgiffbwpoq] {
  min-width: 320px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.totals-row[b-rgiffbwpoq] {
  display: flex;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--gray-100);
}

.totals-row:last-child[b-rgiffbwpoq] {
  border-bottom: none;
}

.totals-row.subtotal[b-rgiffbwpoq] {
  color: var(--gray-600);
}

.totals-row.discount[b-rgiffbwpoq] {
  color: #16a34a;
  background-color: #f0fdf4;
}

.totals-row.tax[b-rgiffbwpoq] {
  color: var(--gray-600);
}

.totals-row.total[b-rgiffbwpoq] {
  background-color: var(--gray-900);
  color: white;
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: 1.25rem;
}

.totals-label[b-rgiffbwpoq] {
  font-weight: 500;
}

.totals-value[b-rgiffbwpoq] {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Payment Info */
.invoice-payment-info[b-rgiffbwpoq] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.payment-info-section h4[b-rgiffbwpoq] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.payment-info-content[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.6;
}

/* Notes */
.invoice-notes[b-rgiffbwpoq] {
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.invoice-notes h4[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
}

.invoice-notes p[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Footer */
.invoice-footer[b-rgiffbwpoq] {
  text-align: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.invoice-footer strong[b-rgiffbwpoq] {
  color: var(--gray-700);
}

/* Sidebar Cards */
.detail-card[b-rgiffbwpoq] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-card-header[b-rgiffbwpoq] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.detail-card-header h2[b-rgiffbwpoq] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.detail-card-body[b-rgiffbwpoq] {
  padding: var(--spacing-lg);
}

/* Payment Timeline */
.payment-timeline[b-rgiffbwpoq] {
  position: relative;
  padding-left: var(--spacing-xl);
}

.payment-timeline[b-rgiffbwpoq]::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--gray-100);
}

.timeline-item[b-rgiffbwpoq] {
  position: relative;
  padding-bottom: var(--spacing-md);
}

.timeline-item:last-child[b-rgiffbwpoq] {
  padding-bottom: 0;
}

.timeline-dot[b-rgiffbwpoq] {
  position: absolute;
  left: -21px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--gray-300);
  border: 2px solid white;
}

.timeline-item.completed .timeline-dot[b-rgiffbwpoq] {
  background-color: var(--success-500);
}

.timeline-item.current .timeline-dot[b-rgiffbwpoq] {
  background-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.timeline-item.pending .timeline-dot[b-rgiffbwpoq] {
  background-color: var(--warning-500);
}

.timeline-content[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
}

.timeline-title[b-rgiffbwpoq] {
  font-weight: 500;
  color: var(--gray-900);
}

.timeline-date[b-rgiffbwpoq] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 0.125rem;
}

/* Activity */
.activity-list[b-rgiffbwpoq] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.activity-item[b-rgiffbwpoq] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.activity-item:hover[b-rgiffbwpoq] {
  background-color: var(--gray-50);
}

.activity-icon[b-rgiffbwpoq] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
}

.activity-icon.sent[b-rgiffbwpoq] {
  background-color: #dbeafe;
  color: #2563eb;
}
.activity-icon.viewed[b-rgiffbwpoq] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.activity-icon.paid[b-rgiffbwpoq] {
  background-color: #dcfce7;
  color: #16a34a;
}
.activity-icon.reminder[b-rgiffbwpoq] {
  background-color: #fef3c7;
  color: #d97706;
}

.activity-content[b-rgiffbwpoq] {
  flex: 1;
  min-width: 0;
}

.activity-text[b-rgiffbwpoq] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.activity-time[b-rgiffbwpoq] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

/* Print Styles */
@media print {
  .detail-header[b-rgiffbwpoq],
  .quick-actions[b-rgiffbwpoq],
  .detail-card[b-rgiffbwpoq],
  .no-print[b-rgiffbwpoq] {
    display: none !important;
  }

  .invoice-detail-page[b-rgiffbwpoq] {
    max-width: 100%;
    padding: 0;
  }

  .detail-grid[b-rgiffbwpoq] {
    grid-template-columns: 1fr;
  }

  .invoice-card[b-rgiffbwpoq] {
    border: none;
    box-shadow: none;
  }

  .invoice-document[b-rgiffbwpoq] {
    padding: 0;
  }
}

/* Responsive */
@media (min-width: 1024px) {
  .detail-grid[b-rgiffbwpoq] {
    grid-template-columns: 1fr 340px;
  }
}
@media (max-width: 768px) {
  .detail-header-top[b-rgiffbwpoq] {
    flex-direction: column;
  }

  .header-actions[b-rgiffbwpoq] {
    width: 100%;
    flex-wrap: wrap;
  }

  .header-actions .btn[b-rgiffbwpoq] {
    width: 100%;
  }

  .invoice-doc-header[b-rgiffbwpoq] {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .invoice-title-section[b-rgiffbwpoq] {
    text-align: left;
  }

  .invoice-parties[b-rgiffbwpoq] {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .invoice-payment-info[b-rgiffbwpoq] {
    grid-template-columns: 1fr;
  }

  .invoice-totals[b-rgiffbwpoq] {
    width: 100%;
  }
}
/* /Components/Pages/Invoices/Form.razor.rz.scp.css */
.invoice-form-page[b-zvzpv40lk0] {
        max-width: 1100px;
    }

    .form-header[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .form-header-left[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-zvzpv40lk0] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .form-title h1[b-zvzpv40lk0] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-title p[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-actions[b-zvzpv40lk0] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Form Layout */
    .form-layout[b-zvzpv40lk0] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Form Card */
    .form-card[b-zvzpv40lk0] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-card-header[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-card-icon[b-zvzpv40lk0] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-card-icon.blue[b-zvzpv40lk0] { background-color: #dbeafe; color: #2563eb; }
    .form-card-icon.green[b-zvzpv40lk0] { background-color: #dcfce7; color: #16a34a; }
    .form-card-icon.purple[b-zvzpv40lk0] { background-color: #f3e8ff; color: #7c3aed; }
    .form-card-icon.orange[b-zvzpv40lk0] { background-color: #fef3c7; color: #d97706; }

    .form-card-title h2[b-zvzpv40lk0] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-card-title p[b-zvzpv40lk0] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .form-card-body[b-zvzpv40lk0] {
        padding: var(--spacing-lg);
    }

    /* Form Elements */
    .form-grid[b-zvzpv40lk0] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .form-row[b-zvzpv40lk0] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-group[b-zvzpv40lk0] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-group.full-width[b-zvzpv40lk0] {
        grid-column: 1 / -1;
    }

    .form-label[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-zvzpv40lk0] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-zvzpv40lk0] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-zvzpv40lk0] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-zvzpv40lk0]::placeholder {
        color: var(--gray-400);
    }

    .form-input:disabled[b-zvzpv40lk0] {
        background-color: var(--gray-50);
        color: var(--gray-500);
    }

    select.form-input[b-zvzpv40lk0] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    textarea.form-input[b-zvzpv40lk0] {
        resize: vertical;
        min-height: 80px;
    }

    .form-hint[b-zvzpv40lk0] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    /* Input with prefix */
    .input-with-prefix[b-zvzpv40lk0] {
        position: relative;
    }

    .input-prefix[b-zvzpv40lk0] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-500);
        font-size: var(--font-size-sm);
        pointer-events: none;
    }

    .input-with-prefix .form-input[b-zvzpv40lk0] {
        padding-left: 1.75rem;
    }

    /* Member Selector */
    .member-selector[b-zvzpv40lk0] {
        position: relative;
    }

    .member-selected[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
    }

    .member-selected:hover[b-zvzpv40lk0] {
        border-color: var(--gray-300);
    }

    .member-selected-avatar[b-zvzpv40lk0] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-sm);
        font-weight: 600;
        flex-shrink: 0;
    }

    .member-selected-info[b-zvzpv40lk0] {
        flex: 1;
    }

    .member-selected-name[b-zvzpv40lk0] {
        font-weight: 500;
        color: var(--gray-900);
    }

    .member-selected-email[b-zvzpv40lk0] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .member-change-btn[b-zvzpv40lk0] {
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--gray-200);
        background-color: white;
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
    }

    .member-change-btn:hover[b-zvzpv40lk0] {
        background-color: var(--gray-50);
    }

    /* Line Items */
    .line-items-table[b-zvzpv40lk0] {
        width: 100%;
        border-collapse: collapse;
    }

    .line-items-table th[b-zvzpv40lk0] {
        text-align: left;
        padding: 0.75rem 1rem;
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background-color: var(--gray-50);
        border-bottom: 1px solid var(--gray-200);
    }

    .line-items-table td[b-zvzpv40lk0] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--gray-100);
        vertical-align: top;
    }

    .line-items-table tbody tr:last-child td[b-zvzpv40lk0] {
        border-bottom: none;
    }

    .line-item-input[b-zvzpv40lk0] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }

    .line-item-input:focus[b-zvzpv40lk0] {
        outline: none;
        border-color: var(--primary-300);
        box-shadow: 0 0 0 2px var(--primary-50);
    }

    .line-item-input.small[b-zvzpv40lk0] {
        width: 80px;
        text-align: right;
    }

    .line-item-total[b-zvzpv40lk0] {
        font-weight: 600;
        color: var(--gray-900);
        text-align: right;
        min-width: 100px;
    }

    .line-item-remove[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--gray-400);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .line-item-remove:hover[b-zvzpv40lk0] {
        background-color: #fee2e2;
        color: #dc2626;
    }

    .add-line-item[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        border: 2px dashed var(--gray-200);
        border-radius: var(--radius-lg);
        background: none;
        width: 100%;
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-500);
        cursor: pointer;
        margin-top: var(--spacing-md);
        transition: all var(--transition-fast);
    }

    .add-line-item:hover[b-zvzpv40lk0] {
        border-color: var(--primary-300);
        color: var(--primary-600);
        background-color: var(--primary-50);
    }

    /* Totals Section */
    .totals-section[b-zvzpv40lk0] {
        display: flex;
        justify-content: flex-end;
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--gray-200);
    }

    .totals-grid[b-zvzpv40lk0] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        min-width: 280px;
    }

    .totals-row[b-zvzpv40lk0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) 0;
    }

    .totals-row.subtotal[b-zvzpv40lk0] {
        color: var(--gray-600);
    }

    .totals-row.discount[b-zvzpv40lk0] {
        color: #16a34a;
    }

    .totals-row.tax[b-zvzpv40lk0] {
        color: var(--gray-600);
        align-items: flex-start;
    }

    .totals-row.total[b-zvzpv40lk0] {
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-sm);
        border-top: 2px solid var(--gray-200);
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--gray-900);
    }

    .totals-label[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
    }

    .totals-value[b-zvzpv40lk0] {
        font-weight: 600;
    }

    .totals-input[b-zvzpv40lk0] {
        width: 100px;
        padding: 0.375rem 0.625rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        text-align: right;
    }

    .totals-input:focus[b-zvzpv40lk0] {
        outline: none;
        border-color: var(--primary-300);
    }

    .tax-select[b-zvzpv40lk0] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        background-color: white;
        color: var(--gray-900);
        cursor: pointer;
        transition: all var(--transition-fast);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2.5rem;
    }

    .tax-select:hover[b-zvzpv40lk0] {
        border-color: var(--gray-300);
    }

    .tax-select:focus[b-zvzpv40lk0] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .tax-select option[b-zvzpv40lk0] {
        padding: 0.5rem;
    }

    /* Payment Terms */
    .payment-terms-grid[b-zvzpv40lk0] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .payment-term-option[b-zvzpv40lk0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .payment-term-option:hover[b-zvzpv40lk0] {
        border-color: var(--gray-300);
    }

    .payment-term-option.selected[b-zvzpv40lk0] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .payment-term-days[b-zvzpv40lk0] {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--gray-900);
    }

    .payment-term-label[b-zvzpv40lk0] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    /* Form Footer */
    .form-footer[b-zvzpv40lk0] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-footer-left[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .form-footer-right[b-zvzpv40lk0] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Invoice Preview */
    .invoice-preview-card[b-zvzpv40lk0] {
        position: sticky;
        top: var(--spacing-lg);
    }

    .preview-header[b-zvzpv40lk0] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
    }

    .preview-logo[b-zvzpv40lk0] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--primary-600);
    }

    .preview-invoice-info[b-zvzpv40lk0] {
        text-align: right;
    }

    .preview-invoice-number[b-zvzpv40lk0] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
    }

    .preview-invoice-date[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .preview-parties[b-zvzpv40lk0] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .preview-party h4[b-zvzpv40lk0] {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-sm);
    }

    .preview-party-name[b-zvzpv40lk0] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .preview-party-details[b-zvzpv40lk0] {
        font-size: var(--font-size-sm);
        color: var(--gray-600);
        line-height: 1.5;
    }

    .preview-items[b-zvzpv40lk0] {
        margin-bottom: var(--spacing-lg);
    }

    .preview-items-table[b-zvzpv40lk0] {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--font-size-sm);
    }

    .preview-items-table th[b-zvzpv40lk0] {
        text-align: left;
        padding: 0.75rem;
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--gray-500);
        border-bottom: 2px solid var(--gray-200);
    }

    .preview-items-table th:last-child[b-zvzpv40lk0] {
        text-align: right;
    }

    .preview-items-table td[b-zvzpv40lk0] {
        padding: 0.75rem;
        border-bottom: 1px solid var(--gray-100);
    }

    .preview-items-table td:last-child[b-zvzpv40lk0] {
        text-align: right;
        font-weight: 500;
    }

    .preview-totals[b-zvzpv40lk0] {
        display: flex;
        justify-content: flex-end;
    }

    .preview-totals-grid[b-zvzpv40lk0] {
        min-width: 200px;
    }

    .preview-totals-row[b-zvzpv40lk0] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: var(--font-size-sm);
    }

    .preview-totals-row.total[b-zvzpv40lk0] {
        border-top: 2px solid var(--gray-200);
        font-weight: 700;
        font-size: var(--font-size-base);
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
    }

    /* Responsive */
@media (min-width: 640px) {
        .form-row[b-zvzpv40lk0] {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-row.three-col[b-zvzpv40lk0] {
            grid-template-columns: repeat(3, 1fr);
        }
    }
@media (min-width: 1024px) {
        .form-layout[b-zvzpv40lk0] {
            grid-template-columns: 1fr 400px;
        }
    }
@media (max-width: 768px) {
        .form-header[b-zvzpv40lk0] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .form-actions[b-zvzpv40lk0] {
            width: 100%;
        }

        .form-actions .btn[b-zvzpv40lk0] {
            flex: 1;
        }

        .form-footer[b-zvzpv40lk0] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-footer-right[b-zvzpv40lk0] {
            width: 100%;
        }

        .form-footer-right .btn[b-zvzpv40lk0] {
            flex: 1;
        }

        .payment-terms-grid[b-zvzpv40lk0] {
            grid-template-columns: repeat(2, 1fr);
        }

        .preview-parties[b-zvzpv40lk0] {
            grid-template-columns: 1fr;
        }
    }

/* /Components/Pages/Invoices/Index.razor.rz.scp.css */
.invoices-page[b-j0rycw6z6j] {
  max-width: 1600px;
}

/* Header */
.invoices-header[b-j0rycw6z6j] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.invoices-header-top[b-j0rycw6z6j] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.invoice-stats[b-j0rycw6z6j] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
  align-items: stretch;
}

.invoice-stat-card[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  min-height: 96px;
}

@media (min-width: 768px) {
  .invoice-stat-card[b-j0rycw6z6j] {
    padding: var(--spacing-lg);
  }
}

.stat-icon[b-j0rycw6z6j] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-j0rycw6z6j] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-j0rycw6z6j] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-j0rycw6z6j] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.red[b-j0rycw6z6j] {
  background-color: #fee2e2;
  color: #dc2626;
}
.stat-icon.purple[b-j0rycw6z6j] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.stat-content[b-j0rycw6z6j] {
  flex: 1;
}

.stat-value[b-j0rycw6z6j] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-j0rycw6z6j] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.stat-change[b-j0rycw6z6j] {
  font-size: var(--font-size-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.stat-change.positive[b-j0rycw6z6j] {
  color: #16a34a;
}
.stat-change.negative[b-j0rycw6z6j] {
  color: #dc2626;
}

/* Filters */
.invoices-filters[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-j0rycw6z6j] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-j0rycw6z6j] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-j0rycw6z6j] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-j0rycw6z6j] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-j0rycw6z6j] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-j0rycw6z6j] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.member-autocomplete[b-j0rycw6z6j] {
  min-width: 220px;
  max-width: 300px;
}

.filter-date[b-j0rycw6z6j] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.filter-date:focus[b-j0rycw6z6j] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-actions[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

/* Tabs */
.invoice-tabs[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
}

.invoice-tab[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.invoice-tab:hover[b-j0rycw6z6j] {
  color: var(--gray-900);
}

.invoice-tab.active[b-j0rycw6z6j] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.tab-count[b-j0rycw6z6j] {
  padding: 0.125rem 0.5rem;
  background-color: var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
}

.invoice-tab.active .tab-count[b-j0rycw6z6j] {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

/* Table */
.invoices-table-container[b-j0rycw6z6j] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Loading skeleton rows */
.loading-table[b-j0rycw6z6j] {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.loading-row[b-j0rycw6z6j] {
  display: grid;
  grid-template-columns: 24px 160px 1fr 110px 100px 170px 90px;
  align-items: center;
  gap: 0.75rem;
}

.skeleton[b-j0rycw6z6j] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-j0rycw6z6j 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer-b-j0rycw6z6j {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.invoices-table[b-j0rycw6z6j] {
  width: 100%;
  border-collapse: collapse;
}

.invoices-table th[b-j0rycw6z6j] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.invoices-table th.sortable[b-j0rycw6z6j] {
  cursor: pointer;
  user-select: none;
}

.invoices-table th.sortable:hover[b-j0rycw6z6j] {
  color: var(--gray-700);
}

.sort-icon[b-j0rycw6z6j] {
  display: inline-flex;
  margin-left: 0.25rem;
  opacity: 0.5;
}

.invoices-table td[b-j0rycw6z6j] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.invoices-table tbody tr[b-j0rycw6z6j] {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.invoices-table tbody tr:hover[b-j0rycw6z6j] {
  background-color: var(--gray-50);
}

.invoices-table tbody tr:last-child td[b-j0rycw6z6j] {
  border-bottom: none;
}

/* Invoice Number */
.invoice-number[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.invoice-icon[b-j0rycw6z6j] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
}

.invoice-num[b-j0rycw6z6j] {
  font-weight: 600;
  color: var(--gray-900);
}

.invoice-date[b-j0rycw6z6j] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Member Info */
.member-info[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.member-avatar[b-j0rycw6z6j] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.member-details[b-j0rycw6z6j] {
  min-width: 0;
}

.member-name[b-j0rycw6z6j] {
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-email[b-j0rycw6z6j] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Badge */
.invoice-status[b-j0rycw6z6j] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.invoice-status .status-dot[b-j0rycw6z6j] {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

.invoice-status.draft[b-j0rycw6z6j] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}
.invoice-status.draft .status-dot[b-j0rycw6z6j] {
  background-color: var(--gray-500);
}

.invoice-status.pending[b-j0rycw6z6j] {
  background-color: #fef3c7;
  color: #b45309;
}
.invoice-status.pending .status-dot[b-j0rycw6z6j] {
  background-color: #f59e0b;
}

.invoice-status.sent[b-j0rycw6z6j] {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.invoice-status.sent .status-dot[b-j0rycw6z6j] {
  background-color: #3b82f6;
}

.invoice-status.paid[b-j0rycw6z6j] {
  background-color: #dcfce7;
  color: #15803d;
}
.invoice-status.paid .status-dot[b-j0rycw6z6j] {
  background-color: #22c55e;
}

.invoice-status.overdue[b-j0rycw6z6j] {
  background-color: #fee2e2;
  color: #b91c1c;
}
.invoice-status.overdue .status-dot[b-j0rycw6z6j] {
  background-color: #ef4444;
}

.invoice-status.cancelled[b-j0rycw6z6j] {
  background-color: var(--gray-100);
  color: var(--gray-500);
}
.invoice-status.cancelled .status-dot[b-j0rycw6z6j] {
  background-color: var(--gray-400);
}

/* Amount */
.invoice-amount[b-j0rycw6z6j] {
  font-weight: 600;
  color: var(--gray-900);
}

.invoice-amount.paid[b-j0rycw6z6j] {
  color: #15803d;
}

.invoice-amount.overdue[b-j0rycw6z6j] {
  color: #dc2626;
}

/* Due Date */
.due-date[b-j0rycw6z6j] {
  display: flex;
  flex-direction: column;
}

.due-date-value[b-j0rycw6z6j] {
  font-weight: 500;
  color: var(--gray-900);
}

.due-date-days[b-j0rycw6z6j] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.due-date-days.overdue[b-j0rycw6z6j] {
  color: #dc2626;
}

.due-date-days.soon[b-j0rycw6z6j] {
  color: #d97706;
}

/* Actions */
.row-actions[b-j0rycw6z6j] {
  display: flex;
  gap: 0.25rem;
}

.action-btn[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-j0rycw6z6j] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.action-btn.primary:hover[b-j0rycw6z6j] {
  background-color: var(--primary-50);
  color: var(--primary-600);
}

.action-btn.success:hover[b-j0rycw6z6j] {
  background-color: #dcfce7;
  color: #16a34a;
}

.action-btn.danger:hover[b-j0rycw6z6j] {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Bulk Actions */
.bulk-actions[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--primary-50);
  border-bottom: 1px solid var(--primary-100);
}

.bulk-count[b-j0rycw6z6j] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--primary-700);
}

.bulk-buttons[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Checkbox */
.checkbox-cell[b-j0rycw6z6j] {
  width: 48px;
  text-align: center;
}

.checkbox[b-j0rycw6z6j] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.checkbox:hover[b-j0rycw6z6j] {
  border-color: var(--primary-500);
}

.checkbox.checked[b-j0rycw6z6j] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Pagination */
.invoices-pagination[b-j0rycw6z6j] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
}

.pagination-info[b-j0rycw6z6j] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination-controls[b-j0rycw6z6j] {
  display: flex;
  gap: var(--spacing-xs);
}

.pagination-btn[b-j0rycw6z6j] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-j0rycw6z6j] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.pagination-btn:disabled[b-j0rycw6z6j] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-j0rycw6z6j] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Empty State */
.empty-state[b-j0rycw6z6j] {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.empty-icon[b-j0rycw6z6j] {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.empty-state h3[b-j0rycw6z6j] {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.empty-state p[b-j0rycw6z6j] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 500px) {
  .invoice-stats[b-j0rycw6z6j] {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
}
@media (min-width: 1280px) {
  .invoice-stats[b-j0rycw6z6j] {
    gap: var(--spacing-xl);
  }
}
@media (max-width: 1024px) {
  .invoices-table-container[b-j0rycw6z6j] {
    overflow-x: auto;
  }

  .invoices-table[b-j0rycw6z6j] {
    min-width: 900px;
  }
}
@media (max-width: 640px) {
  .invoices-header-top[b-j0rycw6z6j] {
    flex-direction: column;
  }

  .header-actions[b-j0rycw6z6j] {
    width: 100%;
    flex-wrap: wrap;
  }

  .header-actions .btn[b-j0rycw6z6j] {
    width: 100%;
  }

  .invoices-filters[b-j0rycw6z6j] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-j0rycw6z6j] {
    max-width: none;
  }

  .filter-actions[b-j0rycw6z6j] {
    margin-left: 0;
    justify-content: flex-end;
  }
}
/* /Components/Pages/Leads/Detail.razor.rz.scp.css */
.lead-detail-page[b-xdio2mkh59] {
  max-width: 1200px;
}

/* Header */
.detail-header[b-xdio2mkh59] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.detail-header-top[b-xdio2mkh59] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.detail-header-left[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.back-btn[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.back-btn:hover[b-xdio2mkh59] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.lead-profile[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.lead-avatar[b-xdio2mkh59] {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  flex-shrink: 0;
}

.lead-info h1[b-xdio2mkh59] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.lead-info-meta[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.lead-company[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.lead-badges[b-xdio2mkh59] {
  display: flex;
  gap: var(--spacing-xs);
}

.header-actions[b-xdio2mkh59] {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Quick Actions */
.quick-actions[b-xdio2mkh59] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.quick-action-btn[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background-color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover[b-xdio2mkh59] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.quick-action-btn.primary[b-xdio2mkh59] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.quick-action-btn.primary:hover[b-xdio2mkh59] {
  background-color: var(--primary-700);
}

/* Layout Grid */
.detail-grid[b-xdio2mkh59] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.detail-grid > div[b-xdio2mkh59] {
  min-width: 0;
}

/* Detail Cards */
.detail-card[b-xdio2mkh59] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-card-header[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.detail-card-header h2[b-xdio2mkh59] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.detail-card-body[b-xdio2mkh59] {
  padding: calc(var(--spacing-lg) - 5px) var(--spacing-lg) var(--spacing-lg);
}

/* Info List */
.info-list[b-xdio2mkh59] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.info-item[b-xdio2mkh59] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.info-icon[b-xdio2mkh59] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
}

.info-content[b-xdio2mkh59] {
  flex: 1;
  min-width: 0;
}

.info-label[b-xdio2mkh59] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: 0.125rem;
}

.info-value[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 500;
}

.info-value a[b-xdio2mkh59] {
  color: var(--primary-600);
}

.info-value a:hover[b-xdio2mkh59] {
  text-decoration: underline;
}

/* Details Grid */
.details-grid[b-xdio2mkh59] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.detail-item[b-xdio2mkh59] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label[b-xdio2mkh59] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 500;
}

/* Status Timeline */
.status-pipeline[b-xdio2mkh59] {
  display: flex;
  gap: 0;
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
}

.pipeline-stage[b-xdio2mkh59] {
  flex: 1;
  min-width: 80px;
  text-align: center;
  position: relative;
  margin-top: 5px;
}

.pipeline-stage[b-xdio2mkh59]::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  right: -50%;
  height: 2px;
  background-color: var(--gray-200);
}

.pipeline-stage:last-child[b-xdio2mkh59]::after {
  display: none;
}

.pipeline-stage.active[b-xdio2mkh59]::after,
.pipeline-stage.completed[b-xdio2mkh59]::after {
  background-color: var(--primary-500);
}

.pipeline-dot[b-xdio2mkh59] {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--gray-200);
  border: 2px solid white;
  margin: 0 auto var(--spacing-xs);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipeline-stage.completed .pipeline-dot[b-xdio2mkh59] {
  background-color: var(--primary-500);
  color: white;
}

.pipeline-stage.active .pipeline-dot[b-xdio2mkh59] {
  background-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.pipeline-stage.lost .pipeline-dot[b-xdio2mkh59] {
  background-color: var(--danger-500);
}

.pipeline-label[b-xdio2mkh59] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pipeline-stage.active .pipeline-label[b-xdio2mkh59],
.pipeline-stage.completed .pipeline-label[b-xdio2mkh59] {
  color: var(--gray-900);
  font-weight: 500;
}

/* Activity Timeline */
.activity-timeline[b-xdio2mkh59] {
  position: relative;
  padding-left: var(--spacing-xl);
}

.activity-timeline[b-xdio2mkh59]::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-color: var(--gray-100);
}

.activity-item[b-xdio2mkh59] {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.activity-item:last-child[b-xdio2mkh59] {
  padding-bottom: 0;
}

.activity-dot[b-xdio2mkh59] {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--gray-300);
  border: 2px solid white;
}

.activity-item.note .activity-dot[b-xdio2mkh59] {
  background-color: var(--primary-500);
}

.activity-item.call .activity-dot[b-xdio2mkh59] {
  background-color: var(--success-500);
}

.activity-item.email .activity-dot[b-xdio2mkh59] {
  background-color: var(--info-500);
}

.activity-item.meeting .activity-dot[b-xdio2mkh59] {
  background-color: var(--warning-500);
}

.activity-item.status .activity-dot[b-xdio2mkh59] {
  background-color: var(--purple-500, #8b5cf6);
}

.activity-content[b-xdio2mkh59] {
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.activity-header[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.activity-title[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

.activity-time[b-xdio2mkh59] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.activity-text[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.activity-user[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.activity-user-avatar[b-xdio2mkh59] {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--gray-600);
}

/* Notes Section */
.notes-section[b-xdio2mkh59] {
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.notes-text[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.7;
  white-space: pre-wrap;
}

.notes-empty[b-xdio2mkh59] {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

/* Add Activity Form */
.add-activity[b-xdio2mkh59] {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--spacing-md);
}

.add-activity input[b-xdio2mkh59] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.add-activity input:focus[b-xdio2mkh59] {
  outline: none;
  border-color: var(--primary-300);
}

/* Related Cards */
.related-item[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-sm);
}

.related-item:last-child[b-xdio2mkh59] {
  margin-bottom: 0;
}

.related-info[b-xdio2mkh59] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.related-icon[b-xdio2mkh59] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-details h4[b-xdio2mkh59] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.related-details p[b-xdio2mkh59] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

/* Status Badge Colors */
.status-new[b-xdio2mkh59] {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.status-contacted[b-xdio2mkh59] {
  background-color: #e0e7ff;
  color: #4338ca;
}
.status-qualified[b-xdio2mkh59] {
  background-color: #fef3c7;
  color: #b45309;
}
.status-proposal[b-xdio2mkh59] {
  background-color: #fce7f3;
  color: #be185d;
}
.status-negotiation[b-xdio2mkh59] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.status-won[b-xdio2mkh59] {
  background-color: #dcfce7;
  color: #15803d;
}
.status-lost[b-xdio2mkh59] {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Responsive */
@media (min-width: 1024px) {
  .detail-grid[b-xdio2mkh59] {
    grid-template-columns: 1fr 380px;
  }
}

/* @media (max-width: 1024px) { */
.detail-grid > div > .detail-card:not(:last-child)[b-xdio2mkh59] {
  margin-bottom: var(--spacing-lg);
}
/* } */
@media (max-width: 768px) {
  .detail-header-left[b-xdio2mkh59] {
    align-items: flex-start;
    width: 100%;
  }
  .lead-profile[b-xdio2mkh59] {
    flex: 1;
  }

  .detail-header-top[b-xdio2mkh59] {
    flex-direction: column;
  }

  .header-actions[b-xdio2mkh59] {
    width: 100%;
    flex-direction: column;
  }

  .header-actions .btn[b-xdio2mkh59] {
    width: 100%;
  }

  .lead-profile[b-xdio2mkh59] {
    flex-direction: column;
    text-align: center;
  }

  .lead-info-meta[b-xdio2mkh59] {
    justify-content: center;
  }

  .details-grid[b-xdio2mkh59] {
    grid-template-columns: 1fr;
  }
}

/* Action modal */
.action-modal-backdrop[b-xdio2mkh59] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.action-modal[b-xdio2mkh59] {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

.action-modal-header[b-xdio2mkh59] {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-modal-header h3[b-xdio2mkh59] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.action-modal-body[b-xdio2mkh59] {
  padding: var(--spacing-lg);
}

.action-modal-body .form-group[b-xdio2mkh59] {
  margin-bottom: var(--spacing-md);
}

.action-modal-body .form-group:last-child[b-xdio2mkh59] {
  margin-bottom: 0;
}

.action-modal-body label[b-xdio2mkh59] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
}

.action-modal-body input[type='text'][b-xdio2mkh59],
.action-modal-body input[type='date'][b-xdio2mkh59],
.action-modal-body input[type='time'][b-xdio2mkh59],
.action-modal-body textarea[b-xdio2mkh59] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.action-modal-body textarea[b-xdio2mkh59] {
  min-height: 100px;
  resize: vertical;
}

.action-modal-footer[b-xdio2mkh59] {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}
/* /Components/Pages/Leads/Form.razor.rz.scp.css */
.lead-form-page[b-zq66egwdol] {
  max-width: 900px;
}

.form-header[b-zq66egwdol] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
}

.form-header-left[b-zq66egwdol] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.back-btn[b-zq66egwdol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.back-btn:hover[b-zq66egwdol] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.form-title h1[b-zq66egwdol] {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.form-title p[b-zq66egwdol] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.form-actions[b-zq66egwdol] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Form Card */
.form-card[b-zq66egwdol] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.form-card-header[b-zq66egwdol] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.form-card-icon[b-zq66egwdol] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-card-icon.blue[b-zq66egwdol] {
  background-color: #dbeafe;
  color: #2563eb;
}

.form-card-icon.green[b-zq66egwdol] {
  background-color: #dcfce7;
  color: #16a34a;
}

.form-card-icon.purple[b-zq66egwdol] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.form-card-icon.orange[b-zq66egwdol] {
  background-color: #fef3c7;
  color: #d97706;
}

.form-card-title h2[b-zq66egwdol] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.form-card-title p[b-zq66egwdol] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.form-card-body[b-zq66egwdol] {
  padding: var(--spacing-lg);
}

/* Form Grid */
.form-grid[b-zq66egwdol] {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: var(--spacing-lg); */
}

.form-grid > div[b-zq66egwdol] {
  min-width: 0;
}

.form-row[b-zq66egwdol] {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-row[b-zq66egwdol] {
    gap: var(--spacing-md);
  }

  /* .form-grid {
    gap: var(--spacing-lg);
  } */
}

.form-group[b-zq66egwdol] {
  display: flex;
  flex-direction: column;
  /* gap: 0.375rem; */
}

.form-group.full-width[b-zq66egwdol] {
  grid-column: 1 / -1;
}

.form-label[b-zq66egwdol] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.form-label .required[b-zq66egwdol] {
  color: var(--danger-500);
  margin-left: 0.125rem;
}

.form-input[b-zq66egwdol] {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  transition: all var(--transition-fast);
  width: 100%;
}

.form-input:focus[b-zq66egwdol] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.form-input:disabled[b-zq66egwdol] {
  background-color: var(--gray-50);
  color: var(--gray-500);
}

.form-input[b-zq66egwdol]::placeholder {
  color: var(--gray-400);
}

.form-input.error[b-zq66egwdol] {
  border-color: var(--danger-500);
}

.form-input.error:focus[b-zq66egwdol] {
  box-shadow: 0 0 0 3px #fee2e2;
}

select.form-input[b-zq66egwdol] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

textarea.form-input[b-zq66egwdol] {
  resize: vertical;
  min-height: 100px;
}

.form-hint[b-zq66egwdol] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.form-error[b-zq66egwdol] {
  font-size: var(--font-size-xs);
  color: var(--danger-500);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Input with prefix */
.input-with-prefix[b-zq66egwdol] {
  position: relative;
  color: blue;
}

.input-prefix[b-zq66egwdol] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.input-with-prefix[b-zq66egwdol]  input[type='number'] {
  padding-left: 3rem;
}

/* Status Select with colors */
.status-option[b-zq66egwdol] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.status-dot[b-zq66egwdol] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

/* Avatar picker */
.avatar-section[b-zq66egwdol] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.avatar-preview[b-zq66egwdol] {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-info h4[b-zq66egwdol] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.avatar-info p[b-zq66egwdol] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

/* Form Footer */
.form-footer[b-zq66egwdol] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.form-footer-left[b-zq66egwdol] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.form-footer-right[b-zq66egwdol] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Responsive */
@media (min-width: 640px) {
  .form-row[b-zq66egwdol] {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row.three-col[b-zq66egwdol] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .form-header[b-zq66egwdol] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .form-actions[b-zq66egwdol] {
    width: 100%;
  }

  .form-actions .btn[b-zq66egwdol] {
    flex: 1;
  }

  .form-footer[b-zq66egwdol] {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .form-footer-right[b-zq66egwdol] {
    width: 100%;
  }

  .form-footer-right .btn[b-zq66egwdol] {
    flex: 1;
  }
}
/* /Components/Pages/Leads/Index.razor.rz.scp.css */
.leads-header[b-42p8qukpzx] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.leads-header-top[b-42p8qukpzx] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.leads-stats[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* @media (min-width: 768px) {
  .leads-stats {
    gap: var(--spacing-md);
  }
} */

.lead-stat[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.5rem 1rem;
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.lead-stat-dot[b-42p8qukpzx] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.lead-stat-dot.new[b-42p8qukpzx] {
  background-color: var(--info-500);
}
.lead-stat-dot.contacted[b-42p8qukpzx] {
  background-color: var(--primary-500);
}
.lead-stat-dot.qualified[b-42p8qukpzx] {
  background-color: var(--warning-500);
}
.lead-stat-dot.won[b-42p8qukpzx] {
  background-color: var(--success-500);
}

.lead-stat-count[b-42p8qukpzx] {
  font-weight: 600;
  color: var(--gray-900);
}

.lead-stat-label[b-42p8qukpzx] {
  color: var(--gray-500);
}

/* Filters */
.leads-filters[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.filter-group[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.filter-select[b-42p8qukpzx] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-42p8qukpzx] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

@media (max-width: 400px) {
  .filter-select[b-42p8qukpzx] {
    width: 100%;
  }
}

.search-input[b-42p8qukpzx] {
  position: relative;
  width: 100%;
}

.search-input input[b-42p8qukpzx] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

@media (min-width: 500px) {
  .search-input[b-42p8qukpzx] {
    width: 250px;
  }
}
.search-input input:focus[b-42p8qukpzx] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.search-input svg[b-42p8qukpzx] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

/* Lead Card Grid */
.leads-grid[b-42p8qukpzx] {
  display: grid;
  gap: var(--spacing-md);
}

.lead-card[b-42p8qukpzx] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lead-card-footer[b-42p8qukpzx] {
  margin-top: auto;
}

.lead-card:hover[b-42p8qukpzx] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.lead-card-header[b-42p8qukpzx] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.lead-card-info[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-md);
}

.lead-avatar[b-42p8qukpzx] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.lead-details h3[b-42p8qukpzx] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.lead-details p[b-42p8qukpzx] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.lead-card-actions[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-xs);
}

.lead-action-btn[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lead-action-btn:hover[b-42p8qukpzx] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.lead-card-body[b-42p8qukpzx] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.lead-field[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  min-width: 0;
}

.lead-field svg[b-42p8qukpzx] {
  color: var(--gray-400);
  flex-shrink: 0;
}

.lead-card-footer[b-42p8qukpzx] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.lead-tags[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.lead-source-tag[b-42p8qukpzx] {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.lead-date[b-42p8qukpzx] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

/* Status Badge Colors */
.status-new[b-42p8qukpzx] {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.status-contacted[b-42p8qukpzx] {
  background-color: #e0e7ff;
  color: #4338ca;
}
.status-qualified[b-42p8qukpzx] {
  background-color: #fef3c7;
  color: #b45309;
}
.status-proposal[b-42p8qukpzx] {
  background-color: #fce7f3;
  color: #be185d;
}
.status-negotiation[b-42p8qukpzx] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.status-won[b-42p8qukpzx] {
  background-color: #dcfce7;
  color: #15803d;
}
.status-lost[b-42p8qukpzx] {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Table View */
.leads-table-container[b-42p8qukpzx] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.leads-table[b-42p8qukpzx] {
  width: 100%;
  border-collapse: collapse;
}

.leads-table th[b-42p8qukpzx] {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.leads-table td[b-42p8qukpzx] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.leads-table tbody tr[b-42p8qukpzx] {
  transition: background-color var(--transition-fast);
}

.leads-table tbody tr:hover[b-42p8qukpzx] {
  background-color: var(--gray-50);
}

.leads-table tbody tr:last-child td[b-42p8qukpzx] {
  border-bottom: none;
}

.table-lead-info[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.table-lead-name[b-42p8qukpzx] {
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
}

.table-lead-email[b-42p8qukpzx] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

/* View Toggle */
.view-toggle[b-42p8qukpzx] {
  display: flex;
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 0.25rem;
}

.view-toggle-btn[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn.active[b-42p8qukpzx] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

/* Pagination */
.leads-pagination[b-42p8qukpzx] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
}

.pagination-info[b-42p8qukpzx] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination-controls[b-42p8qukpzx] {
  display: flex;
  gap: var(--spacing-xs);
}
@media (max-width: 768px) {
  .leads-pagination[b-42p8qukpzx] {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

.pagination-btn[b-42p8qukpzx] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-42p8qukpzx] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.pagination-btn:disabled[b-42p8qukpzx] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-42p8qukpzx] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Empty State */
.leads-empty[b-42p8qukpzx] {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.leads-empty-icon[b-42p8qukpzx] {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.leads-empty h3[b-42p8qukpzx] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.leads-empty p[b-42p8qukpzx] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
}
@media (min-width: 640px) {
  .leads-grid[b-42p8qukpzx] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .leads-header[b-42p8qukpzx] {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .leads-header-top[b-42p8qukpzx] {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1024px) {
  .leads-grid[b-42p8qukpzx] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .leads-grid[b-42p8qukpzx] {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* /Components/Pages/MeetingRooms/Booking.razor.rz.scp.css */
.booking-page[b-fs955zc5fe] {
  max-width: 1400px;
}

/* Header */
.booking-header[b-fs955zc5fe] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.header-actions[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Date Navigation */
.date-navigation[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.date-nav-btn[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-lg);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-nav-btn:hover[b-fs955zc5fe] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.date-picker-wrapper[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.current-date[b-fs955zc5fe] {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.current-date-day[b-fs955zc5fe] {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--gray-900);
}

.current-date-full[b-fs955zc5fe] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.date-input[b-fs955zc5fe] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.date-input:focus[b-fs955zc5fe] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.date-quick-btns[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

.date-quick-btn[b-fs955zc5fe] {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-quick-btn:hover[b-fs955zc5fe] {
  background-color: var(--gray-50);
}

.date-quick-btn.active[b-fs955zc5fe] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Room Filters */
.room-filters[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.filter-chip[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover[b-fs955zc5fe] {
  border-color: var(--gray-300);
}

.filter-chip.active[b-fs955zc5fe] {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.filter-chip svg[b-fs955zc5fe] {
  width: 16px;
  height: 16px;
}

/* Main Layout */
.booking-layout[b-fs955zc5fe] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Room Cards Grid */
.rooms-grid[b-fs955zc5fe] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-md);
}

/* Room Card */
.room-card[b-fs955zc5fe] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.room-card:hover[b-fs955zc5fe] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.room-card-header[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.room-image[b-fs955zc5fe] {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.room-image img[b-fs955zc5fe] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-image-placeholder[b-fs955zc5fe] {
  width: 36px;
  height: 36px;
  color: var(--primary-700);
  opacity: 0.9;
}

.room-info[b-fs955zc5fe] {
  flex: 1;
  min-width: 0;
}

.room-name[b-fs955zc5fe] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.room-location[b-fs955zc5fe] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--spacing-sm);
}

.room-features[b-fs955zc5fe] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.room-feature[b-fs955zc5fe] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: 10px;
  color: var(--gray-600);
}

.room-capacity[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--primary-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-700);
}

/* Time Slots */
.room-slots[b-fs955zc5fe] {
  padding: var(--spacing-md);
}

.slots-header[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.slots-title[b-fs955zc5fe] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slots-legend[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.legend-item[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.legend-dot[b-fs955zc5fe] {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-sm);
}

.legend-dot.available[b-fs955zc5fe] {
  background-color: var(--success-100);
  border: 1px solid var(--success-300);
}
.legend-dot.booked[b-fs955zc5fe] {
  background-color: var(--gray-200);
}
.legend-dot.selected[b-fs955zc5fe] {
  background-color: var(--primary-500);
}

.slots-grid[b-fs955zc5fe] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.375rem;
}

.time-slot[b-fs955zc5fe] {
  position: relative;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.time-slot.available[b-fs955zc5fe] {
  background-color: var(--success-50);
  border-color: var(--success-200);
  color: var(--success-700);
}

.time-slot.available:hover[b-fs955zc5fe] {
  background-color: var(--success-100);
  border-color: var(--success-300);
}

.time-slot.booked[b-fs955zc5fe] {
  background-color: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

.time-slot.selected[b-fs955zc5fe] {
  background-color: var(--primary-500);
  border-color: var(--primary-600);
  color: white;
}

.time-slot.range[b-fs955zc5fe] {
  background-color: var(--primary-100);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.slot-booked-by[b-fs955zc5fe] {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--gray-400);
  border-radius: var(--radius-full);
}

/* Room Card Footer */
.room-card-footer[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.availability-summary[b-fs955zc5fe] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.availability-summary strong[b-fs955zc5fe] {
  color: var(--success-600);
}

/* Booking Summary Sidebar */
.booking-sidebar[b-fs955zc5fe] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid var(--gray-200);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  z-index: 100;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.booking-sidebar.visible[b-fs955zc5fe] {
  transform: translateY(0);
}

.booking-summary-info[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.booking-summary-room[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.booking-summary-room-icon[b-fs955zc5fe] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.booking-summary-room-details h4[b-fs955zc5fe] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.booking-summary-room-details span[b-fs955zc5fe] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.booking-summary-time[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
}

.booking-summary-time svg[b-fs955zc5fe] {
  color: var(--gray-500);
}

.booking-summary-time span[b-fs955zc5fe] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

.booking-summary-actions[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Booking Modal */
.modal-overlay[b-fs955zc5fe] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.modal-overlay.open[b-fs955zc5fe] {
  opacity: 1;
  visibility: visible;
}

.modal[b-fs955zc5fe] {
  background-color: white;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease-in-out;
}

.modal-overlay.open .modal[b-fs955zc5fe] {
  transform: scale(1) translateY(0);
}

.modal-header[b-fs955zc5fe] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}

.modal-header h2[b-fs955zc5fe] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.modal-close[b-fs955zc5fe] {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover[b-fs955zc5fe] {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.modal-body[b-fs955zc5fe] {
  padding: var(--spacing-lg);
}

.modal-section[b-fs955zc5fe] {
  margin-bottom: var(--spacing-lg);
}

.modal-section:last-child[b-fs955zc5fe] {
  margin-bottom: 0;
}

.modal-section-title[b-fs955zc5fe] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.booking-detail-row[b-fs955zc5fe] {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
}

.booking-detail-row:last-child[b-fs955zc5fe] {
  border-bottom: none;
}

.booking-detail-label[b-fs955zc5fe] {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.booking-detail-value[b-fs955zc5fe] {
  font-weight: 500;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
}

.form-group[b-fs955zc5fe] {
  margin-bottom: var(--spacing-md);
}

.form-label[b-fs955zc5fe] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}

.form-input[b-fs955zc5fe] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.form-input:focus[b-fs955zc5fe] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.modal-footer[b-fs955zc5fe] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
  background-color: var(--gray-50);
}

.modal-footer .btn[b-fs955zc5fe] {
  flex: 1;
}

/* Success State */
.booking-success[b-fs955zc5fe] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
}

.success-icon[b-fs955zc5fe] {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: var(--success-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  color: var(--success-600);
}

.booking-success h3[b-fs955zc5fe] {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.booking-success p[b-fs955zc5fe] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
}

.booking-confirmation-card[b-fs955zc5fe] {
  width: 100%;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
  .booking-header[b-fs955zc5fe] {
    flex-direction: column;
  }

  .date-navigation[b-fs955zc5fe] {
    flex-direction: column;
    align-items: stretch;
  }

  .date-picker-wrapper[b-fs955zc5fe] {
    flex-direction: column;
  }

  .date-quick-btns[b-fs955zc5fe] {
    margin-left: 0;
    justify-content: center;
  }

  .rooms-grid[b-fs955zc5fe] {
    grid-template-columns: 1fr;
  }

  .slots-grid[b-fs955zc5fe] {
    grid-template-columns: repeat(4, 1fr);
  }

  .booking-sidebar[b-fs955zc5fe] {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-summary-info[b-fs955zc5fe] {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-summary-actions[b-fs955zc5fe] {
    width: 100%;
  }

  .booking-summary-actions .btn[b-fs955zc5fe] {
    flex: 1;
  }
}
/* /Components/Pages/MeetingRooms/MyBookings.razor.rz.scp.css */
.my-bookings-page[b-wa9kj8zsgu] {
  max-width: 1200px;
}

/* Header */
.bookings-header[b-wa9kj8zsgu] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.header-actions[b-wa9kj8zsgu] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats */
.booking-stats[b-wa9kj8zsgu] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.stat-card[b-wa9kj8zsgu] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.stat-icon[b-wa9kj8zsgu] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-wa9kj8zsgu] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-wa9kj8zsgu] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-wa9kj8zsgu] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.purple[b-wa9kj8zsgu] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.stat-content[b-wa9kj8zsgu] {
  flex: 1;
}

.stat-value[b-wa9kj8zsgu] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-wa9kj8zsgu] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Tabs */
.booking-tabs[b-wa9kj8zsgu] {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  width: fit-content;
}

.booking-tab[b-wa9kj8zsgu] {
  padding: 0.625rem 1.25rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.booking-tab:hover[b-wa9kj8zsgu] {
  color: var(--gray-900);
}

.booking-tab.active[b-wa9kj8zsgu] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.booking-tab .count[b-wa9kj8zsgu] {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  background-color: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-full);
  font-size: 11px;
}

/* Bookings List */
.bookings-list[b-wa9kj8zsgu] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Booking Card */
.booking-card[b-wa9kj8zsgu] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.booking-card:hover[b-wa9kj8zsgu] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.booking-card-main[b-wa9kj8zsgu] {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.booking-date-badge[b-wa9kj8zsgu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border-radius: var(--radius-lg);
  color: white;
  flex-shrink: 0;
}

.booking-date-badge.past[b-wa9kj8zsgu] {
  background: var(--gray-400);
}

.booking-date-badge.today[b-wa9kj8zsgu] {
  background: linear-gradient(135deg, var(--success-500), var(--success-600));
}

.booking-date-day[b-wa9kj8zsgu] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1;
}

.booking-date-month[b-wa9kj8zsgu] {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.booking-info[b-wa9kj8zsgu] {
  flex: 1;
  min-width: 0;
}

.booking-header-row[b-wa9kj8zsgu] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.booking-title[b-wa9kj8zsgu] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.booking-status[b-wa9kj8zsgu] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.booking-status.upcoming[b-wa9kj8zsgu] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.booking-status.today[b-wa9kj8zsgu] {
  background-color: #dcfce7;
  color: #15803d;
}

.booking-status.ongoing[b-wa9kj8zsgu] {
  background-color: #fef3c7;
  color: #b45309;
}

.booking-status.completed[b-wa9kj8zsgu] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.booking-status.cancelled[b-wa9kj8zsgu] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.booking-room[b-wa9kj8zsgu] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.booking-room-emoji[b-wa9kj8zsgu] {
  font-size: 1.25rem;
}

.booking-room-name[b-wa9kj8zsgu] {
  font-weight: 500;
  color: var(--gray-700);
}

.booking-room-location[b-wa9kj8zsgu] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.booking-meta[b-wa9kj8zsgu] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.booking-meta-item[b-wa9kj8zsgu] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.booking-meta-item svg[b-wa9kj8zsgu] {
  color: var(--gray-400);
}

.booking-card-footer[b-wa9kj8zsgu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.booking-confirmation[b-wa9kj8zsgu] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.booking-actions[b-wa9kj8zsgu] {
  display: flex;
  gap: var(--spacing-sm);
}

.action-btn[b-wa9kj8zsgu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-wa9kj8zsgu] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

.action-btn.danger:hover[b-wa9kj8zsgu] {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Empty State */
.empty-state[b-wa9kj8zsgu] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  text-align: center;
}

.empty-state-icon[b-wa9kj8zsgu] {
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.empty-state h3[b-wa9kj8zsgu] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.empty-state p[b-wa9kj8zsgu] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
}

/* Time Badge */
.time-badge[b-wa9kj8zsgu] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
}

/* Responsive */
@media (min-width: 640px) {
  .booking-stats[b-wa9kj8zsgu] {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .bookings-header[b-wa9kj8zsgu] {
    flex-direction: column;
  }

  .header-actions[b-wa9kj8zsgu] {
    width: 100%;
  }

  .header-actions .btn[b-wa9kj8zsgu] {
    flex: 1;
  }

  .booking-card-main[b-wa9kj8zsgu] {
    flex-direction: column;
  }

  .booking-date-badge[b-wa9kj8zsgu] {
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .booking-card-footer[b-wa9kj8zsgu] {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .booking-actions[b-wa9kj8zsgu] {
    width: 100%;
  }

  .booking-actions .action-btn[b-wa9kj8zsgu] {
    flex: 1;
  }
}
/* /Components/Pages/Members/CompanyDetail.razor.rz.scp.css */
.company-detail-page[b-2wozetvbcw] {
        max-width: 1200px;
    }

    .breadcrumb[b-2wozetvbcw] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .breadcrumb a[b-2wozetvbcw] {
        color: var(--gray-500);
        text-decoration: none;
    }

    .breadcrumb a:hover[b-2wozetvbcw] {
        color: var(--primary-600);
    }

    .breadcrumb-current[b-2wozetvbcw] {
        color: var(--gray-900);
        font-weight: 500;
    }

    .company-header[b-2wozetvbcw] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
    }

    .company-title[b-2wozetvbcw] {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: var(--font-size-2xl);
        color: var(--gray-900);
    }

    .company-subtitle[b-2wozetvbcw] {
        color: var(--gray-600);
        margin-bottom: var(--spacing-lg);
    }

    .owner-card[b-2wozetvbcw] {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
    }

    .section[b-2wozetvbcw] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
        overflow: hidden;
    }

    .section-header[b-2wozetvbcw] {
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
        font-weight: 600;
        color: var(--gray-900);
    }

    .member-list[b-2wozetvbcw] {
        display: flex;
        flex-direction: column;
    }

    .member-row[b-2wozetvbcw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
        cursor: pointer;
    }

    .member-row:last-child[b-2wozetvbcw] {
        border-bottom: none;
    }

    .member-row:hover[b-2wozetvbcw] {
        background-color: var(--gray-50);
    }

    .member-primary[b-2wozetvbcw] {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .member-name[b-2wozetvbcw] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .member-email[b-2wozetvbcw] {
        font-size: var(--font-size-sm);
        color: var(--gray-600);
    }

    .member-type[b-2wozetvbcw] {
        font-size: var(--font-size-xs);
        color: var(--primary-700);
        background-color: var(--primary-50);
        border-radius: var(--radius-full);
        padding: 0.2rem 0.6rem;
        font-weight: 600;
    }

/* /Components/Pages/Members/Detail.razor.rz.scp.css */
.member-detail-page[b-z7rgvrq0ev] {
        max-width: 1200px;
    }

    /* Breadcrumb */
    .breadcrumb[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .breadcrumb a[b-z7rgvrq0ev] {
        color: var(--gray-500);
        text-decoration: none;
    }

    .breadcrumb a:hover[b-z7rgvrq0ev] {
        color: var(--primary-600);
    }

    .breadcrumb span[b-z7rgvrq0ev] {
        color: var(--gray-400);
    }

    .breadcrumb-current[b-z7rgvrq0ev] {
        color: var(--gray-900);
        font-weight: 500;
    }

    /* Header */
    .member-header[b-z7rgvrq0ev] {
        display: flex;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-xl);
    }

    .member-avatar-large[b-z7rgvrq0ev] {
        width: 120px;
        height: 120px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 2.5rem;
        flex-shrink: 0;
    }

    .member-header-info[b-z7rgvrq0ev] {
        flex: 1;
    }

    .member-name-row[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }

    .member-name-large[b-z7rgvrq0ev] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
    }

    .verified-badge[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        background-color: #dbeafe;
        color: #1d4ed8;
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .member-meta[b-z7rgvrq0ev] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    .member-meta-item[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-sm);
        color: var(--gray-600);
    }

    .member-meta-item svg[b-z7rgvrq0ev] {
        color: var(--gray-400);
    }

    .member-meta-item a[b-z7rgvrq0ev] {
        color: var(--primary-600);
        text-decoration: none;
    }

    .member-meta-item a:hover[b-z7rgvrq0ev] {
        text-decoration: underline;
    }

    .member-tags[b-z7rgvrq0ev] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .member-tag[b-z7rgvrq0ev] {
        padding: 0.375rem 0.75rem;
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .member-tag.plan[b-z7rgvrq0ev] {
        background-color: var(--primary-50);
        color: var(--primary-700);
    }

    .member-tag.space[b-z7rgvrq0ev] {
        background-color: #f3e8ff;
        color: #7c3aed;
    }

    .member-tag.branch[b-z7rgvrq0ev] {
        background-color: #fef3c7;
        color: #b45309;
    }

    .member-header-actions[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-end;
    }

    .member-header-actions .btn[b-z7rgvrq0ev] {
        min-width: 140px;
    }

    /* Content Layout */
    .member-content[b-z7rgvrq0ev] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Cards */
    .detail-card[b-z7rgvrq0ev] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .detail-card-header[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .detail-card-header h3[b-z7rgvrq0ev] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .detail-card-header h3 svg[b-z7rgvrq0ev] {
        color: var(--gray-400);
    }

    .detail-card-body[b-z7rgvrq0ev] {
        padding: var(--spacing-lg);
    }

    /* Info Grid */
    .info-grid[b-z7rgvrq0ev] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .info-item[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .info-value[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        font-weight: 500;
    }

    /* Stats Row */
    .member-stats-row[b-z7rgvrq0ev] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .member-stat-card[b-z7rgvrq0ev] {
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        text-align: center;
    }

    .member-stat-value[b-z7rgvrq0ev] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .member-stat-label[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    /* Activity Timeline */
    .activity-timeline[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
    }

    .activity-item[b-z7rgvrq0ev] {
        display: flex;
        gap: var(--spacing-md);
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .activity-item:last-child[b-z7rgvrq0ev] {
        border-bottom: none;
    }

    .activity-icon[b-z7rgvrq0ev] {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .activity-icon.booking[b-z7rgvrq0ev] { background-color: #dbeafe; color: #2563eb; }
    .activity-icon.payment[b-z7rgvrq0ev] { background-color: #dcfce7; color: #16a34a; }
    .activity-icon.renewal[b-z7rgvrq0ev] { background-color: #fef3c7; color: #d97706; }

    .activity-content[b-z7rgvrq0ev] {
        flex: 1;
    }

    .activity-title[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .activity-description[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .activity-time[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-400);
        white-space: nowrap;
    }

    /* Booking History */
    .booking-list[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
    }

    .booking-item[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--gray-100);
    }

    .booking-item:last-child[b-z7rgvrq0ev] {
        border-bottom: none;
    }

    .booking-item:hover[b-z7rgvrq0ev] {
        background-color: var(--gray-50);
    }

    .booking-date-badge[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: var(--primary-50);
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }

    .booking-date-day[b-z7rgvrq0ev] {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--primary-700);
        line-height: 1;
    }

    .booking-date-month[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--primary-600);
        text-transform: uppercase;
    }

    .booking-info[b-z7rgvrq0ev] {
        flex: 1;
    }

    .booking-title[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .booking-meta[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .booking-amount[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
    }

    /* Payment History */
    .payment-item[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .payment-item:last-child[b-z7rgvrq0ev] {
        border-bottom: none;
    }

    .payment-info[b-z7rgvrq0ev] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .payment-icon[b-z7rgvrq0ev] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background-color: #dcfce7;
        color: #16a34a;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .payment-details h4[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .payment-details p[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .payment-amount[b-z7rgvrq0ev] {
        text-align: right;
    }

    .payment-amount-value[b-z7rgvrq0ev] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .payment-amount-date[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    /* Notes */
    .notes-list[b-z7rgvrq0ev] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .note-item[b-z7rgvrq0ev] {
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
    }

    .note-header[b-z7rgvrq0ev] {
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--spacing-sm);
    }

    .note-author[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--gray-700);
    }

    .note-date[b-z7rgvrq0ev] {
        font-size: var(--font-size-xs);
        color: var(--gray-400);
    }

    .note-content[b-z7rgvrq0ev] {
        font-size: var(--font-size-sm);
        color: var(--gray-600);
        line-height: 1.5;
    }

    /* Responsive */
@media (min-width: 1024px) {
        .member-content[b-z7rgvrq0ev] {
            grid-template-columns: 2fr 1fr;
        }

        .member-content > .detail-card:first-child[b-z7rgvrq0ev] {
            grid-column: 1 / -1;
        }
    }
@media (max-width: 768px) {
        .member-header[b-z7rgvrq0ev] {
            flex-direction: column;
            text-align: center;
        }

        .member-header-info[b-z7rgvrq0ev] {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .member-name-row[b-z7rgvrq0ev] {
            flex-direction: column;
        }

        .member-meta[b-z7rgvrq0ev] {
            justify-content: center;
        }

        .member-header-actions[b-z7rgvrq0ev] {
            width: 100%;
            align-items: stretch;
        }

        .member-stats-row[b-z7rgvrq0ev] {
            grid-template-columns: repeat(2, 1fr);
        }

        .info-grid[b-z7rgvrq0ev] {
            grid-template-columns: 1fr;
        }
    }

/* /Components/Pages/Members/Form.razor.rz.scp.css */
.member-form-page[b-t1qbh7pvp2] {
        max-width: 900px;
    }

    .loading-grid[b-t1qbh7pvp2] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: var(--spacing-lg);
        margin-top: var(--spacing-md);
    }

    .loading-card[b-t1qbh7pvp2] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
    }

    .skeleton[b-t1qbh7pvp2] {
        background: linear-gradient(
            90deg,
            var(--gray-200) 25%,
            var(--gray-100) 50%,
            var(--gray-200) 75%
        );
        background-size: 200% 100%;
        animation: shimmer-b-t1qbh7pvp2 1.5s infinite;
        border-radius: var(--radius-md);
    }

    /* Breadcrumb */
    .breadcrumb[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .breadcrumb a[b-t1qbh7pvp2] {
        color: var(--gray-500);
        text-decoration: none;
    }

    .breadcrumb a:hover[b-t1qbh7pvp2] {
        color: var(--primary-600);
    }

    .breadcrumb span[b-t1qbh7pvp2] {
        color: var(--gray-400);
    }

    .breadcrumb-current[b-t1qbh7pvp2] {
        color: var(--gray-900);
        font-weight: 500;
    }

    /* Form Header */
    .form-page-header[b-t1qbh7pvp2] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
    }

    .form-page-header h1[b-t1qbh7pvp2] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .form-page-header p[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    /* Form Sections */
    .form-section[b-t1qbh7pvp2] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
        overflow: hidden;
    }

    .form-section-header[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
        background-color: var(--gray-50);
    }

    .form-section-header svg[b-t1qbh7pvp2] {
        color: var(--gray-500);
    }

    .form-section-header h2[b-t1qbh7pvp2] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .form-section-body[b-t1qbh7pvp2] {
        padding: var(--spacing-lg);
    }

    /* Form Elements */
    .form-grid[b-t1qbh7pvp2] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .form-group[b-t1qbh7pvp2] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-group.full-width[b-t1qbh7pvp2] {
        grid-column: 1 / -1;
    }

    .form-label[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-t1qbh7pvp2] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-t1qbh7pvp2] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        transition: all var(--transition-fast);
    }

    .form-input:focus[b-t1qbh7pvp2] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input.error[b-t1qbh7pvp2] {
        border-color: var(--danger-500);
    }

    .form-input.error:focus[b-t1qbh7pvp2] {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    textarea.form-input[b-t1qbh7pvp2] {
        resize: vertical;
        min-height: 100px;
    }

    select.form-input[b-t1qbh7pvp2] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    .form-hint[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .member-type-grid[b-t1qbh7pvp2] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-md);
    }

    .member-type-option[b-t1qbh7pvp2] {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
        cursor: pointer;
        transition: all var(--transition-fast);
        background-color: white;
    }

    .member-type-option.active[b-t1qbh7pvp2] {
        border-color: var(--primary-600);
        background-color: var(--primary-50);
        box-shadow: 0 0 0 1px var(--primary-600);
    }

    .member-type-option h4[b-t1qbh7pvp2] {
        margin: 0 0 0.25rem 0;
        font-size: var(--font-size-sm);
        color: var(--gray-900);
    }

    .member-type-option p[b-t1qbh7pvp2] {
        margin: 0;
        font-size: var(--font-size-xs);
        color: var(--gray-600);
    }

    .billing-note[b-t1qbh7pvp2] {
        margin-top: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        background-color: #fef3c7;
        color: #92400e;
        font-size: var(--font-size-xs);
    }

    .form-error[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--danger-500);
    }

    /* Avatar Upload */
    .avatar-upload-wrapper[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border: 2px dashed var(--gray-200);
        border-radius: var(--radius-lg);
    }

    .avatar-preview[b-t1qbh7pvp2] {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.5rem;
        flex-shrink: 0;
        background-color: var(--primary-100);
        color: var(--primary-600);
    }

    .avatar-preview img[b-t1qbh7pvp2] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-full);
    }

    .avatar-upload-content[b-t1qbh7pvp2] {
        flex: 1;
    }

    .avatar-upload-content h4[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .avatar-upload-content p[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0 0 var(--spacing-sm);
    }

    .avatar-buttons[b-t1qbh7pvp2] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Space Assignment */
    .space-assignment[b-t1qbh7pvp2] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    /* Toggle Switch */
    .toggle-row[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .toggle-row:last-child[b-t1qbh7pvp2] {
        border-bottom: none;
    }

    .toggle-info h4[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .toggle-info p[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .toggle-switch[b-t1qbh7pvp2] {
        position: relative;
        width: 44px;
        height: 24px;
        flex-shrink: 0;
    }

    .toggle-switch input[b-t1qbh7pvp2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider[b-t1qbh7pvp2] {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background-color: var(--gray-200);
        border-radius: var(--radius-full);
        transition: var(--transition-fast);
    }

    .toggle-slider[b-t1qbh7pvp2]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: var(--radius-full);
        transition: var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }

    .toggle-switch input:checked + .toggle-slider[b-t1qbh7pvp2] {
        background-color: var(--primary-600);
    }

    .toggle-switch input:checked + .toggle-slider[b-t1qbh7pvp2]:before {
        transform: translateX(20px);
    }

    /* Form Actions */
    .form-actions[b-t1qbh7pvp2] {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        background-color: var(--gray-50);
        border-top: 1px solid var(--gray-200);
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        margin-top: calc(var(--spacing-lg) * -1);
    }

    /* ===== ADDONS SECTION STYLES ===== */
    
    /* Addon Cards Grid */
    .addons-grid[b-t1qbh7pvp2] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }

    /* Individual Addon Card */
    .addon-card[b-t1qbh7pvp2] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: var(--spacing-md);
        transition: all var(--transition-normal);
        cursor: pointer;
    }

    .addon-card:hover[b-t1qbh7pvp2] {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-md);
    }

    .addon-card.selected[b-t1qbh7pvp2] {
        border-color: var(--primary-600);
        background-color: var(--primary-50);
        box-shadow: 0 0 0 1px var(--primary-600);
    }

    .addon-card.disabled[b-t1qbh7pvp2] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .addon-card.disabled:hover[b-t1qbh7pvp2] {
        border-color: var(--gray-200);
        box-shadow: none;
    }

    /* Addon Card Header */
    .addon-header[b-t1qbh7pvp2] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: var(--spacing-md);
    }

    .addon-icon[b-t1qbh7pvp2] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        background-color: var(--primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-600);
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .addon-card.selected .addon-icon[b-t1qbh7pvp2] {
        background-color: var(--primary-200);
    }

    /* Addon Checkbox */
    .addon-checkbox[b-t1qbh7pvp2] {
        position: relative;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    .addon-checkbox input[b-t1qbh7pvp2] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .addon-checkbox-label[b-t1qbh7pvp2] {
        position: absolute;
        inset: 0;
        border: 2px solid var(--gray-300);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .addon-card.selected .addon-checkbox-label[b-t1qbh7pvp2] {
        background-color: var(--primary-600);
        border-color: var(--primary-600);
    }

    .addon-checkbox-label[b-t1qbh7pvp2]::after {
        content: '?';
        color: white;
        font-size: 0.875rem;
        font-weight: bold;
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .addon-card.selected .addon-checkbox-label[b-t1qbh7pvp2]::after {
        opacity: 1;
    }

    /* Addon Title */
    .addon-title[b-t1qbh7pvp2] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    /* Addon Description */
    .addon-description[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-bottom: var(--spacing-md);
        line-height: 1.4;
    }

    /* Addon Divider */
    .addon-divider[b-t1qbh7pvp2] {
        height: 1px;
        background-color: var(--gray-200);
        margin: var(--spacing-md) 0;
    }

    /* Addon Details */
    .addon-details[b-t1qbh7pvp2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .addon-availability[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .addon-availability.available[b-t1qbh7pvp2] {
        color: var(--success-600);
        font-weight: 500;
    }

    .addon-availability.unavailable[b-t1qbh7pvp2] {
        color: var(--danger-500);
        font-weight: 500;
    }

    /* Addon Price */
    .addon-price[b-t1qbh7pvp2] {
        text-align: right;
    }

    .addon-price-label[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        display: block;
        margin-bottom: 0.125rem;
    }

    .addon-price-amount[b-t1qbh7pvp2] {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--primary-600);
    }

    /* Selected Addons Summary */
    .addons-summary[b-t1qbh7pvp2] {
        background-color: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-top: var(--spacing-lg);
    }

    .addons-summary-header[b-t1qbh7pvp2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--gray-200);
    }

    .addons-summary-title[b-t1qbh7pvp2] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
    }

    .addons-count[b-t1qbh7pvp2] {
        background-color: var(--primary-100);
        color: var(--primary-700);
        font-size: var(--font-size-xs);
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-full);
    }

    /* Selected Addon Item */
    .addon-summary-item[b-t1qbh7pvp2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) 0;
        font-size: var(--font-size-sm);
        border-bottom: 1px solid #f0f0f0;
    }

    .addon-summary-item:last-of-type[b-t1qbh7pvp2] {
        border-bottom: none;
    }

    .addon-summary-item-name[b-t1qbh7pvp2] {
        color: var(--gray-700);
        font-weight: 500;
    }

    .addon-summary-item-price[b-t1qbh7pvp2] {
        color: var(--primary-600);
        font-weight: 600;
    }

    .addon-summary-item-remove[b-t1qbh7pvp2] {
        cursor: pointer;
        color: var(--danger-500);
        font-size: var(--font-size-xs);
        font-weight: 600;
        margin-left: var(--spacing-md);
        transition: color var(--transition-fast);
    }

    .addon-summary-item-remove:hover[b-t1qbh7pvp2] {
        color: var(--danger-600);
    }

    /* Addon Summary Footer */
    .addons-summary-footer[b-t1qbh7pvp2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--gray-200);
        margin-top: var(--spacing-md);
    }

    .addons-total-label[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        color: var(--gray-700);
        font-weight: 500;
    }

    .addons-total-amount[b-t1qbh7pvp2] {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--primary-600);
    }

    /* Addon Categories Tabs */
    .addon-categories[b-t1qbh7pvp2] {
        display: flex;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-200);
        overflow-x: auto;
        padding-bottom: 0;
    }

    .addon-category-tab[b-t1qbh7pvp2] {
        padding: var(--spacing-md) var(--spacing-lg);
        border: none;
        background: none;
        color: var(--gray-600);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: all var(--transition-fast);
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    .addon-category-tab:hover[b-t1qbh7pvp2] {
        color: var(--primary-600);
    }

    .addon-category-tab.active[b-t1qbh7pvp2] {
        color: var(--primary-600);
        border-bottom-color: var(--primary-600);
    }

    /* Addon Badge */
    .addon-badge[b-t1qbh7pvp2] {
        display: inline-block;
        background-color: var(--primary-100);
        color: var(--primary-700);
        font-size: var(--font-size-xs);
        font-weight: 600;
        padding: 0.25rem 0.625rem;
        border-radius: var(--radius-full);
        margin-top: var(--spacing-xs);
    }

    .addon-badge.popular[b-t1qbh7pvp2] {
        background-color: #fef3c7;
        color: #92400e;
    }

    .addon-badge.new[b-t1qbh7pvp2] {
        background-color: #dcfce7;
        color: #065f46;
    }

    /* Empty-state message */
    .addon-info-message[b-t1qbh7pvp2] {
        margin-top: var(--spacing-md);
        padding: var(--spacing-sm) 0;
        text-align: center;
    }

    .addon-info-message p[b-t1qbh7pvp2] {
        margin: 0;
        font-size: var(--font-size-sm);
        color: var(--gray-600);
    }

    .attachment-shell[b-t1qbh7pvp2] {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        padding: var(--spacing-md);
    }

    .attachment-toolbar[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
    }

    .attachment-title-wrap[b-t1qbh7pvp2] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }

    .attachment-title[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
    }

    .attachment-hint[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .attachment-count[b-t1qbh7pvp2] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 1.25rem;
        min-width: 1.25rem;
        padding: 0 0.35rem;
        margin-left: var(--spacing-xs);
        border-radius: 999px;
        background-color: var(--primary-100);
        color: var(--primary-700);
        font-size: 0.7rem;
        font-weight: 700;
    }

    .attachment-input-hidden[b-t1qbh7pvp2] {
        display: none;
    }

    .attachment-list[b-t1qbh7pvp2] {
        margin-top: var(--spacing-md);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .attachment-item[b-t1qbh7pvp2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        background-color: white;
        padding: 0.55rem 0.75rem;
    }

    .attachment-item-info[b-t1qbh7pvp2] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .attachment-item-name[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 520px;
    }

    .attachment-item-meta[b-t1qbh7pvp2] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    .attachment-empty[b-t1qbh7pvp2] {
        margin-top: var(--spacing-md);
        border: 1px dashed var(--gray-300);
        border-radius: var(--radius-md);
        background-color: var(--gray-50);
        padding: var(--spacing-lg);
        text-align: center;
    }

    .attachment-empty-title[b-t1qbh7pvp2] {
        font-size: var(--font-size-sm);
        color: var(--gray-700);
        font-weight: 600;
    }

    .attachment-empty-text[b-t1qbh7pvp2] {
        margin-top: 0.2rem;
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    /* Responsive Design */
@media (max-width: 768px) {
        .loading-grid[b-t1qbh7pvp2] {
            grid-template-columns: 1fr;
        }

        .member-type-grid[b-t1qbh7pvp2] {
            grid-template-columns: 1fr;
        }

        .form-grid[b-t1qbh7pvp2] {
            grid-template-columns: 1fr;
        }

        .space-assignment[b-t1qbh7pvp2] {
            grid-template-columns: 1fr;
        }

        .form-actions[b-t1qbh7pvp2] {
            flex-direction: column;
        }

        .form-actions .btn[b-t1qbh7pvp2] {
            width: 100%;
        }

        .avatar-upload-wrapper[b-t1qbh7pvp2] {
            flex-direction: column;
            text-align: center;
        }

        .addons-grid[b-t1qbh7pvp2] {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: var(--spacing-md);
        }

        .addon-card[b-t1qbh7pvp2] {
            padding: var(--spacing-sm);
        }

        .addon-price[b-t1qbh7pvp2] {
            margin-top: var(--spacing-sm);
        }

        .addons-summary[b-t1qbh7pvp2] {
            margin-top: var(--spacing-md);
        }

        .addon-categories[b-t1qbh7pvp2] {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
@media (max-width: 480px) {
        .addons-grid[b-t1qbh7pvp2] {
            grid-template-columns: 1fr;
        }

        .addon-categories[b-t1qbh7pvp2] {
            gap: 0;
        }

        .addon-category-tab[b-t1qbh7pvp2] {
            flex: 1;
            padding: var(--spacing-sm) var(--spacing-xs);
            font-size: var(--font-size-xs);
        }

        .addons-summary[b-t1qbh7pvp2] {
            padding: var(--spacing-md);
        }

        .addon-summary-item[b-t1qbh7pvp2] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-sm);
        }

        .addon-summary-item-remove[b-t1qbh7pvp2] {
            margin-left: 0;
        }
    }

    @keyframes shimmer-b-t1qbh7pvp2 {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

/* /Components/Pages/Members/Index.razor.rz.scp.css */
.members-page[b-tbff5tx9p6] {
  max-width: 1400px;
}

/* Header */
.members-header[b-tbff5tx9p6] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.header-actions[b-tbff5tx9p6] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.members-stats[b-tbff5tx9p6] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.stat-card[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.stat-icon[b-tbff5tx9p6] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-tbff5tx9p6] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-tbff5tx9p6] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-tbff5tx9p6] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.red[b-tbff5tx9p6] {
  background-color: #fee2e2;
  color: #dc2626;
}

.stat-content[b-tbff5tx9p6] {
  flex: 1;
}

.stat-value[b-tbff5tx9p6] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-tbff5tx9p6] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Loading + empty */
.loading-grid[b-tbff5tx9p6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.loading-card[b-tbff5tx9p6] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.skeleton[b-tbff5tx9p6] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-tbff5tx9p6 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer-b-tbff5tx9p6 {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state[b-tbff5tx9p6] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  background: white;
  color: var(--gray-500);
}

.stat-trend[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-top: 0.25rem;
}

.stat-trend.up[b-tbff5tx9p6] {
  color: var(--success-600);
}
.stat-trend.down[b-tbff5tx9p6] {
  color: var(--danger-600);
}

/* Filters Bar */
.filters-bar[b-tbff5tx9p6] {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.member-scope-toggle[b-tbff5tx9p6] {
  display: inline-flex;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: white;
}

.member-scope-btn[b-tbff5tx9p6] {
  border: none;
  background-color: white;
  color: var(--gray-600);
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-right: 1px solid var(--gray-200);
}

.member-scope-btn:last-child[b-tbff5tx9p6] {
  border-right: none;
}

.member-scope-btn.active[b-tbff5tx9p6] {
  background-color: var(--primary-50);
  color: var(--primary-700);
}

.search-box[b-tbff5tx9p6] {
  flex: 1;
  min-width: 250px;
  position: relative;
}

.search-box input[b-tbff5tx9p6] {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.search-box input:focus[b-tbff5tx9p6] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.search-box svg[b-tbff5tx9p6] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-tbff5tx9p6] {
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background-color: white;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  min-width: 150px;
}

.filter-select:focus[b-tbff5tx9p6] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* View Toggle */
.view-toggle[b-tbff5tx9p6] {
  display: flex;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.view-toggle-btn[b-tbff5tx9p6] {
  padding: 0.625rem 0.875rem;
  border: none;
  background-color: white;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn:hover[b-tbff5tx9p6] {
  background-color: var(--gray-50);
}

.view-toggle-btn.active[b-tbff5tx9p6] {
  background-color: var(--primary-50);
  color: var(--primary-600);
}

/* Members Grid */
.members-grid[b-tbff5tx9p6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
}

/* Member Card */
.member-card[b-tbff5tx9p6] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.member-card:hover[b-tbff5tx9p6] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.member-card-header[b-tbff5tx9p6] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.member-avatar[b-tbff5tx9p6] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.member-avatar img[b-tbff5tx9p6] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.member-info[b-tbff5tx9p6] {
  flex: 1;
  min-width: 0;
}

.member-name[b-tbff5tx9p6] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.member-email[b-tbff5tx9p6] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role-pill[b-tbff5tx9p6] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.member-status[b-tbff5tx9p6] {
  margin-left: auto;
}

.member-card-body[b-tbff5tx9p6] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.member-detail[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.member-detail svg[b-tbff5tx9p6] {
  color: var(--gray-400);
  flex-shrink: 0;
}

.member-plan[b-tbff5tx9p6] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--primary-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-700);
}

.member-card-footer[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.member-joined[b-tbff5tx9p6] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.member-actions[b-tbff5tx9p6] {
  display: flex;
  gap: var(--spacing-xs);
}

.action-btn[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-tbff5tx9p6] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

/* Members Table */
.members-table-wrapper[b-tbff5tx9p6] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.members-table[b-tbff5tx9p6] {
  width: 100%;
  border-collapse: collapse;
}

.members-table th[b-tbff5tx9p6],
.members-table td[b-tbff5tx9p6] {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.members-table th[b-tbff5tx9p6] {
  background-color: var(--gray-50);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.members-table tr:last-child td[b-tbff5tx9p6] {
  border-bottom: none;
}

.members-table tr:hover td[b-tbff5tx9p6] {
  background-color: var(--gray-50);
}

.companies-grid[b-tbff5tx9p6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
}

.company-card[b-tbff5tx9p6] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.company-card:hover[b-tbff5tx9p6] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.company-card h3[b-tbff5tx9p6] {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--gray-900);
}

.company-summary-row[b-tbff5tx9p6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.company-owner[b-tbff5tx9p6] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.company-plan-list[b-tbff5tx9p6] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.company-plan-chip[b-tbff5tx9p6] {
  padding: 0.25rem 0.625rem;
  background-color: var(--primary-50);
  color: var(--primary-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.table-member[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.table-member-avatar[b-tbff5tx9p6] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.table-member-info h4[b-tbff5tx9p6] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.table-member-info p[b-tbff5tx9p6] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.table-plan[b-tbff5tx9p6] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background-color: var(--gray-100);
  color: var(--gray-700);
}

/* Pagination */
.pagination-wrapper[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.pagination-info[b-tbff5tx9p6] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.pagination-btn[b-tbff5tx9p6] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-tbff5tx9p6] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.pagination-btn:disabled[b-tbff5tx9p6] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-tbff5tx9p6] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

@media (min-width: 560px) {
  .members-stats[b-tbff5tx9p6] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (min-width: 768px) {
  .members-stats[b-tbff5tx9p6] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 500px) {
  .header-actions .btn[b-tbff5tx9p6] {
    width: 100%;
  }
}

@media (max-width: 500px) and (min-width: 768px) {
  .header-actions .btn[b-tbff5tx9p6] {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .members-header[b-tbff5tx9p6] {
    flex-direction: column;
  }

  .header-actions[b-tbff5tx9p6] {
    width: 100%;
    flex-wrap: wrap;
  }

  .filters-bar[b-tbff5tx9p6] {
    flex-direction: column;
  }

  .search-box[b-tbff5tx9p6] {
    min-width: 100%;
  }

  .members-grid[b-tbff5tx9p6] {
    grid-template-columns: 1fr;
  }

  .members-table-wrapper[b-tbff5tx9p6] {
    overflow-x: auto;
  }

  .members-table[b-tbff5tx9p6] {
    min-width: 800px;
  }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-container[b-verw4dsfwv] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: linear-gradient(
    135deg,
    var(--gray-50) 0%,
    var(--gray-100) 100%
  );
}

.not-found-content[b-verw4dsfwv] {
  text-align: center;
  max-width: 500px;
}

.not-found-illustration[b-verw4dsfwv] {
  margin-bottom: var(--spacing-xl);
}

.not-found-code[b-verw4dsfwv] {
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(
    135deg,
    var(--primary-500) 0%,
    var(--primary-700) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-md);
}

.not-found-icon[b-verw4dsfwv] {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-lg);
  background-color: var(--primary-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-600);
  animation: float-b-verw4dsfwv 3s ease-in-out infinite;
}

@keyframes float-b-verw4dsfwv {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.not-found-title[b-verw4dsfwv] {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.not-found-description[b-verw4dsfwv] {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
}

.not-found-actions[b-verw4dsfwv] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
}

.not-found-links[b-verw4dsfwv] {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.not-found-link[b-verw4dsfwv] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  transition: color var(--transition-fast);
}

.not-found-link:hover[b-verw4dsfwv] {
  color: var(--primary-600);
}

.not-found-link svg[b-verw4dsfwv] {
  width: 16px;
  height: 16px;
}

@media (min-width: 640px) {
  .not-found-actions[b-verw4dsfwv] {
    flex-direction: row;
    justify-content: center;
  }

  .not-found-code[b-verw4dsfwv] {
    font-size: 10rem;
  }
}

/* /Components/Pages/Plans/Detail.razor.rz.scp.css */
.plan-detail-page[b-9h17uye9m2] {
  max-width: 1400px;
}

/* Header */
.detail-header[b-9h17uye9m2] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.detail-header-left[b-9h17uye9m2] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.back-btn[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.back-btn:hover[b-9h17uye9m2] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.plan-icon-large[b-9h17uye9m2] {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-icon-large.plan-icon-monogram[b-9h17uye9m2] {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.plan-info h1[b-9h17uye9m2] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.popular-badge[b-9h17uye9m2] {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(
    135deg,
    var(--primary-600) 0%,
    var(--primary-700) 100%
  );
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.plan-info p[b-9h17uye9m2] {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin: 0;
}

.plan-price-display[b-9h17uye9m2] {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: var(--spacing-sm);
}

.plan-price-currency[b-9h17uye9m2] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.plan-price-amount[b-9h17uye9m2] {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}

.plan-price-period[b-9h17uye9m2] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.detail-header-right[b-9h17uye9m2] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Content Layout */
.detail-content[b-9h17uye9m2] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Stats Cards */
.stats-grid[b-9h17uye9m2] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.stat-card[b-9h17uye9m2] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.stat-icon[b-9h17uye9m2] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-content[b-9h17uye9m2] {
  flex: 1;
}

.stat-value[b-9h17uye9m2] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-9h17uye9m2] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.stat-trend[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-top: 0.25rem;
}

.stat-trend.up[b-9h17uye9m2] {
  color: var(--success-600);
}

.stat-trend.down[b-9h17uye9m2] {
  color: var(--danger-600);
}

/* Detail Cards */
.detail-card[b-9h17uye9m2] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-card-header[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.detail-card-title[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.detail-card-title h2[b-9h17uye9m2] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.detail-card-body[b-9h17uye9m2] {
  padding: var(--spacing-lg);
}

/* Features List */
.features-list[b-9h17uye9m2] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.feature-item[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.feature-item svg.check[b-9h17uye9m2] {
  color: var(--success-500);
  flex-shrink: 0;
}

.feature-item svg.x[b-9h17uye9m2] {
  color: var(--gray-300);
  flex-shrink: 0;
}

.feature-item.disabled[b-9h17uye9m2] {
  color: var(--gray-400);
}

/* Subscribers Table */
.subscribers-table[b-9h17uye9m2] {
  width: 100%;
  border-collapse: collapse;
}

.subscribers-table th[b-9h17uye9m2] {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.subscribers-table td[b-9h17uye9m2] {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.subscribers-table tbody tr:last-child td[b-9h17uye9m2] {
  border-bottom: none;
}

.subscribers-table tbody tr:hover[b-9h17uye9m2] {
  background-color: var(--gray-50);
}

.subscriber-info[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.subscriber-avatar[b-9h17uye9m2] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-600);
}

.subscriber-name[b-9h17uye9m2] {
  font-weight: 500;
  color: var(--gray-900);
}

.subscriber-email[b-9h17uye9m2] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.status-badge[b-9h17uye9m2] {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.status-badge.active[b-9h17uye9m2] {
  background-color: #dcfce7;
  color: #15803d;
}

.status-badge.trial[b-9h17uye9m2] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-badge.canceled[b-9h17uye9m2] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.status-badge.past-due[b-9h17uye9m2] {
  background-color: #fef3c7;
  color: #b45309;
}

/* Settings List */
.settings-list[b-9h17uye9m2] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.setting-item[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.setting-info[b-9h17uye9m2] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.setting-info svg[b-9h17uye9m2] {
  color: var(--gray-400);
}

.setting-label[b-9h17uye9m2] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.setting-value[b-9h17uye9m2] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

.setting-badge[b-9h17uye9m2] {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.setting-badge.yes[b-9h17uye9m2] {
  background-color: #dcfce7;
  color: #15803d;
}

.setting-badge.no[b-9h17uye9m2] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

/* Revenue Chart Placeholder */
.revenue-chart[b-9h17uye9m2] {
  height: 200px;
  background: linear-gradient(180deg, var(--primary-50) 0%, transparent 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: var(--spacing-md);
  gap: var(--spacing-xs);
}

.chart-bar[b-9h17uye9m2] {
  flex: 1;
  max-width: 40px;
  background: linear-gradient(
    180deg,
    var(--primary-500) 0%,
    var(--primary-600) 100%
  );
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 20px;
}

/* Empty State */
.empty-state[b-9h17uye9m2] {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--gray-500);
}

.empty-state svg[b-9h17uye9m2] {
  color: var(--gray-300);
  margin-bottom: var(--spacing-md);
}

.empty-state p[b-9h17uye9m2] {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Responsive */
@media (min-width: 768px) {
  .stats-grid[b-9h17uye9m2] {
    grid-template-columns: repeat(4, 1fr);
  }

  .detail-content[b-9h17uye9m2] {
    grid-template-columns: 2fr 1fr;
  }
}
@media (max-width: 640px) {
  .detail-header[b-9h17uye9m2] {
    flex-direction: column;
  }

  .detail-header-right[b-9h17uye9m2] {
    width: 100%;
  }

  .detail-header-right .btn[b-9h17uye9m2] {
    flex: 1;
  }
}
/* /Components/Pages/Plans/Form.razor.rz.scp.css */
.plan-form-page[b-8hc8a33ac8] {
        max-width: 900px;
    }

    .form-header[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .form-header-left[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-8hc8a33ac8] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .form-title h1[b-8hc8a33ac8] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-title p[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-actions[b-8hc8a33ac8] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Form Card */
    .form-card[b-8hc8a33ac8] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
    }

    .form-card-header[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-card-icon[b-8hc8a33ac8] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-card-icon.blue[b-8hc8a33ac8] { background-color: #dbeafe; color: #2563eb; }
    .form-card-icon.green[b-8hc8a33ac8] { background-color: #dcfce7; color: #16a34a; }
    .form-card-icon.purple[b-8hc8a33ac8] { background-color: #f3e8ff; color: #7c3aed; }
    .form-card-icon.orange[b-8hc8a33ac8] { background-color: #fef3c7; color: #d97706; }

    .form-card-title h2[b-8hc8a33ac8] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-card-title p[b-8hc8a33ac8] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .form-card-body[b-8hc8a33ac8] {
        padding: var(--spacing-lg);
    }

    /* Form Grid */
    .form-grid[b-8hc8a33ac8] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .form-row[b-8hc8a33ac8] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-group[b-8hc8a33ac8] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-group.full-width[b-8hc8a33ac8] {
        grid-column: 1 / -1;
    }

    .form-label[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-8hc8a33ac8] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-8hc8a33ac8] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-8hc8a33ac8] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-8hc8a33ac8]::placeholder {
        color: var(--gray-400);
    }

    select.form-input[b-8hc8a33ac8] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    textarea.form-input[b-8hc8a33ac8] {
        resize: vertical;
        min-height: 100px;
    }

    .form-hint[b-8hc8a33ac8] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    /* Input with prefix */
    .input-with-prefix[b-8hc8a33ac8] {
        position: relative;
    }

    .input-prefix[b-8hc8a33ac8] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-500);
        font-size: var(--font-size-sm);
        pointer-events: none;
    }

    .input-with-prefix .form-input[b-8hc8a33ac8] {
        padding-left: 1.75rem;
    }

    /* Toggle Switch */
    .toggle-group[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
    }

    .toggle-group:hover[b-8hc8a33ac8] {
        border-color: var(--gray-300);
        background-color: var(--gray-50);
    }

    .toggle-info h4[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .toggle-info p[b-8hc8a33ac8] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .toggle-switch[b-8hc8a33ac8] {
        position: relative;
        width: 44px;
        height: 24px;
        background-color: var(--gray-200);
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .toggle-switch.active[b-8hc8a33ac8] {
        background-color: var(--primary-600);
    }

    .toggle-switch[b-8hc8a33ac8]::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        transition: transform var(--transition-fast);
    }

    .toggle-switch.active[b-8hc8a33ac8]::after {
        transform: translateX(20px);
    }

    /* Features Section */
    .features-list[b-8hc8a33ac8] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .feature-item[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        background-color: white;
    }

    .feature-item:hover[b-8hc8a33ac8] {
        border-color: var(--gray-300);
    }

    .feature-checkbox[b-8hc8a33ac8] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--gray-300);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--transition-fast);
    }

    .feature-checkbox.checked[b-8hc8a33ac8] {
        background-color: var(--primary-600);
        border-color: var(--primary-600);
        color: white;
    }

    .feature-input[b-8hc8a33ac8] {
        flex: 1;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }

    .feature-input:focus[b-8hc8a33ac8] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 2px var(--primary-50);
    }

    .feature-remove[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--gray-400);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .feature-remove:hover[b-8hc8a33ac8] {
        background-color: var(--danger-50);
        color: var(--danger-600);
    }

    .add-feature-btn[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        border: 2px dashed var(--gray-300);
        border-radius: var(--radius-lg);
        background: none;
        color: var(--gray-500);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .add-feature-btn:hover[b-8hc8a33ac8] {
        border-color: var(--primary-300);
        background-color: var(--primary-50);
        color: var(--primary-600);
    }

    /* Form Footer */
    .form-footer[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-footer-left[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .form-footer-right[b-8hc8a33ac8] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Preview Card */
    .preview-section[b-8hc8a33ac8] {
        position: sticky;
        top: var(--spacing-lg);
    }

    .preview-card[b-8hc8a33ac8] {
        background-color: white;
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .preview-card.popular[b-8hc8a33ac8] {
        border-color: var(--primary-500);
    }

    .preview-header[b-8hc8a33ac8] {
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
        position: relative;
    }

    .preview-popular-badge[b-8hc8a33ac8] {
        position: absolute;
        top: -1px;
        right: var(--spacing-lg);
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
        color: white;
        font-size: var(--font-size-xs);
        font-weight: 600;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .preview-icon[b-8hc8a33ac8] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--spacing-md);
    }

    .preview-name[b-8hc8a33ac8] {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .preview-description[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .preview-price[b-8hc8a33ac8] {
        display: flex;
        align-items: baseline;
        gap: 0.25rem;
        margin-top: var(--spacing-md);
    }

    .preview-currency[b-8hc8a33ac8] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
    }

    .preview-amount[b-8hc8a33ac8] {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--gray-900);
        line-height: 1;
    }

    .preview-period[b-8hc8a33ac8] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .preview-body[b-8hc8a33ac8] {
        padding: var(--spacing-lg);
    }

    .preview-features[b-8hc8a33ac8] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .preview-features li[b-8hc8a33ac8] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0.5rem 0;
        font-size: var(--font-size-sm);
        color: var(--gray-700);
    }

    .preview-features li svg.check[b-8hc8a33ac8] {
        color: var(--success-500);
    }

    .preview-features li svg.x[b-8hc8a33ac8] {
        color: var(--gray-300);
    }

    .preview-features li.disabled[b-8hc8a33ac8] {
        color: var(--gray-400);
    }

    /* Responsive */
@media (min-width: 640px) {
        .form-row[b-8hc8a33ac8] {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-row.three-col[b-8hc8a33ac8] {
            grid-template-columns: repeat(3, 1fr);
        }

        .icon-picker-grid[b-8hc8a33ac8] {
            grid-template-columns: repeat(8, 1fr);
        }
    }
@media (max-width: 640px) {
        .form-header[b-8hc8a33ac8] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .form-actions[b-8hc8a33ac8] {
            width: 100%;
        }

        .form-actions .btn[b-8hc8a33ac8] {
            flex: 1;
        }

        .form-footer[b-8hc8a33ac8] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-footer-right[b-8hc8a33ac8] {
            width: 100%;
        }

        .form-footer-right .btn[b-8hc8a33ac8] {
            flex: 1;
        }
    }

/* /Components/Pages/Plans/Index.razor.rz.scp.css */
.plans-page[b-f216lh47jn] {
  max-width: 1600px;
}

/* Header */
.plans-header[b-f216lh47jn] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.plans-header-top[b-f216lh47jn] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-f216lh47jn] {
  display: flex;
  gap: var(--spacing-sm);
}

@media (max-width: 768px) {
  .plans-header-top[b-f216lh47jn] {
    gap: 0;
  }
  .header-actions[b-f216lh47jn] {
    flex-wrap: wrap;
    width: 100%;
  }

  .header-actions .btn[b-f216lh47jn] {
    width: 100%;
  }
}

/* Stats Cards */
.plans-stats[b-f216lh47jn] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

.plan-stat[b-f216lh47jn] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .plan-stat[b-f216lh47jn] {
    padding: var(--spacing-lg);
  }
}

.plan-stat-icon[b-f216lh47jn] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-stat-content[b-f216lh47jn] {
  flex: 1;
}

.plan-stat-value[b-f216lh47jn] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.plan-stat-label[b-f216lh47jn] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.plan-stat-icon.blue[b-f216lh47jn] {
  background-color: #dbeafe;
  color: #2563eb;
}

.plan-stat-icon.green[b-f216lh47jn] {
  background-color: #dcfce7;
  color: #16a34a;
}

.plan-stat-icon.purple[b-f216lh47jn] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.plan-stat-icon.orange[b-f216lh47jn] {
  background-color: #fef3c7;
  color: #d97706;
}

/* Filters */
.plans-filters[b-f216lh47jn] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-f216lh47jn] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-f216lh47jn] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-f216lh47jn] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-f216lh47jn] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-f216lh47jn] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-f216lh47jn] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.view-toggle[b-f216lh47jn] {
  display: flex;
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  margin-left: auto;
}

.view-toggle-btn[b-f216lh47jn] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn.active[b-f216lh47jn] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

/* Plans Grid */
.plans-grid[b-f216lh47jn] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-lg);
}

/* Plan Card */
.plan-card[b-f216lh47jn] {
  background-color: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.plan-card:hover[b-f216lh47jn] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-lg);
}

.plan-card.popular[b-f216lh47jn] {
  border-color: var(--primary-500);
}

.plan-card.inactive[b-f216lh47jn] {
  opacity: 0.7;
}

.popular-badge[b-f216lh47jn] {
  position: absolute;
  top: -1px;
  right: var(--spacing-lg);
  padding: 0.375rem 1rem;
  background: linear-gradient(
    135deg,
    var(--primary-600) 0%,
    var(--primary-700) 100%
  );
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.plan-card-header[b-f216lh47jn] {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
  min-width: 0;
}

.plan-card-top[b-f216lh47jn] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.plan-icon[b-f216lh47jn] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-icon-monogram[b-f216lh47jn] {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.table-plan-icon.plan-icon-monogram[b-f216lh47jn] {
  font-size: 1rem;
}

.plan-card-actions[b-f216lh47jn] {
  display: flex;
  gap: 0.25rem;
}

.plan-action-btn[b-f216lh47jn] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plan-action-btn:hover[b-f216lh47jn] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.plan-name[b-f216lh47jn] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.plan-description[b-f216lh47jn] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.plan-pricing[b-f216lh47jn] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: var(--spacing-md);
  min-width: 0;
}

.plan-currency[b-f216lh47jn] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  flex-shrink: 0;
}

.plan-price[b-f216lh47jn] {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
  min-width: 0;
}

.plan-period[b-f216lh47jn] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  flex-shrink: 0;
}

.plan-card-body[b-f216lh47jn] {
  padding: var(--spacing-lg);
}

.plan-features[b-f216lh47jn] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-features li[b-f216lh47jn] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.plan-features li svg.check[b-f216lh47jn] {
  color: var(--success-500);
  flex-shrink: 0;
}

.plan-features li svg.x[b-f216lh47jn] {
  color: var(--gray-300);
  flex-shrink: 0;
}

.plan-features li.disabled[b-f216lh47jn] {
  color: var(--gray-400);
}

.plan-card-footer[b-f216lh47jn] {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-subscribers[b-f216lh47jn] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.plan-subscribers svg[b-f216lh47jn] {
  color: var(--gray-400);
}

.plan-status-badge[b-f216lh47jn] {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.plan-status-badge.active[b-f216lh47jn] {
  background-color: #dcfce7;
  color: #15803d;
}

.plan-status-badge.inactive[b-f216lh47jn] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

/* Table View */
.plans-table-container[b-f216lh47jn] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.plans-table[b-f216lh47jn] {
  width: 100%;
  border-collapse: collapse;
}

.plans-table th[b-f216lh47jn] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.plans-table td[b-f216lh47jn] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.plans-table tbody tr[b-f216lh47jn] {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.plans-table tbody tr:hover[b-f216lh47jn] {
  background-color: var(--gray-50);
}

.plans-table tbody tr:last-child td[b-f216lh47jn] {
  border-bottom: none;
}

.table-plan-info[b-f216lh47jn] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.table-plan-icon[b-f216lh47jn] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.table-plan-name[b-f216lh47jn] {
  font-weight: 600;
  color: var(--gray-900);
}

.table-plan-description[b-f216lh47jn] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.table-popular-badge[b-f216lh47jn] {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  background-color: var(--primary-100);
  color: var(--primary-700);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-sm);
}

.table-price[b-f216lh47jn] {
  font-weight: 600;
  color: var(--gray-900);
}

.table-period[b-f216lh47jn] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Empty State */
.plans-empty[b-f216lh47jn] {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.plans-empty-icon[b-f216lh47jn] {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.plans-empty h3[b-f216lh47jn] {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.plans-empty p[b-f216lh47jn] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (min-width: 640px) {
  .plans-grid[b-f216lh47jn] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .plans-stats[b-f216lh47jn] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
  }
}
@media (min-width: 1024px) {
  .plans-grid[b-f216lh47jn] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .plans-grid[b-f216lh47jn] {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* /Components/Pages/Reservations/Detail.razor.rz.scp.css */
.reservation-detail-page[b-p3r2n8dram] {
  max-width: 1200px;
}

/* Header */
.detail-header[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.detail-header-top[b-p3r2n8dram] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.detail-header-left[b-p3r2n8dram] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.back-btn[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.back-btn:hover[b-p3r2n8dram] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.reservation-header-info h1[b-p3r2n8dram] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.reservation-header-meta[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.reservation-header-meta span[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.header-actions[b-p3r2n8dram] {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Status Badge */
.reservation-status[b-p3r2n8dram] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.reservation-status.pending[b-p3r2n8dram] {
  background-color: #fef3c7;
  color: #b45309;
}

.reservation-status.confirmed[b-p3r2n8dram] {
  background-color: #dcfce7;
  color: #15803d;
}

.reservation-status.checked-in[b-p3r2n8dram] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.reservation-status.completed[b-p3r2n8dram] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.reservation-status.cancelled[b-p3r2n8dram] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.reservation-status.no-show[b-p3r2n8dram] {
  background-color: #fce7f3;
  color: #be185d;
}

/* Quick Actions */
.quick-actions[b-p3r2n8dram] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.quick-action-btn[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background-color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover[b-p3r2n8dram] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.quick-action-btn.primary[b-p3r2n8dram] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.quick-action-btn.primary:hover[b-p3r2n8dram] {
  background-color: var(--primary-700);
}

.quick-action-btn.success[b-p3r2n8dram] {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: white;
}

.quick-action-btn.danger[b-p3r2n8dram] {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
  color: white;
}

/* Layout */
.detail-grid[b-p3r2n8dram] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Detail Cards */
.detail-card[b-p3r2n8dram] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-card-header[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.detail-card-header h2[b-p3r2n8dram] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.detail-card-body[b-p3r2n8dram] {
  padding: var(--spacing-lg);
}

/* Booking Overview */
.booking-overview[b-p3r2n8dram] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

.booking-section[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.booking-section-title[b-p3r2n8dram] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Member Card */
.member-card[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.member-avatar-lg[b-p3r2n8dram] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  flex-shrink: 0;
}

.member-details[b-p3r2n8dram] {
  flex: 1;
}

.member-name-lg[b-p3r2n8dram] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.external-badge[b-p3r2n8dram] {
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: #f3e8ff;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.member-contact[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.member-contact a[b-p3r2n8dram] {
  color: var(--primary-600);
  text-decoration: none;
}

.member-contact a:hover[b-p3r2n8dram] {
  text-decoration: underline;
}

/* Space Card */
.space-card[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.space-icon-lg[b-p3r2n8dram] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.space-details-lg[b-p3r2n8dram] {
  flex: 1;
}

.space-name-lg[b-p3r2n8dram] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.space-meta[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.space-link[b-p3r2n8dram] {
  margin-top: var(--spacing-xs);
}

.space-link a[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--primary-600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.space-link a:hover[b-p3r2n8dram] {
  text-decoration: underline;
}

/* DateTime Display */
.datetime-display[b-p3r2n8dram] {
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.datetime-date[b-p3r2n8dram] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.datetime-time[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--gray-600);
}

.datetime-duration[b-p3r2n8dram] {
  padding: 0.25rem 0.75rem;
  background-color: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Pricing Summary */
.pricing-summary[b-p3r2n8dram] {
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.pricing-row[b-p3r2n8dram] {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
}

.pricing-row.total[b-p3r2n8dram] {
  border-top: 2px solid var(--gray-200);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 700;
}

.pricing-label[b-p3r2n8dram] {
  color: var(--gray-600);
}

.pricing-value[b-p3r2n8dram] {
  font-weight: 500;
  color: var(--gray-900);
}

/* Timeline */
.reservation-timeline[b-p3r2n8dram] {
  position: relative;
  padding-left: var(--spacing-xl);
}

.reservation-timeline[b-p3r2n8dram]::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--gray-200);
}

.timeline-item[b-p3r2n8dram] {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-item:last-child[b-p3r2n8dram] {
  padding-bottom: 0;
}

.timeline-dot[b-p3r2n8dram] {
  position: absolute;
  left: -21px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--gray-300);
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--gray-200);
}

.timeline-item.completed .timeline-dot[b-p3r2n8dram] {
  background-color: var(--success-500);
  box-shadow: 0 0 0 2px #dcfce7;
}

.timeline-item.current .timeline-dot[b-p3r2n8dram] {
  background-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-100);
  animation: pulse-b-p3r2n8dram 2s infinite;
}

.timeline-item.pending .timeline-dot[b-p3r2n8dram] {
  background-color: var(--warning-500);
  box-shadow: 0 0 0 2px #fef3c7;
}
@keyframes pulse-b-p3r2n8dram {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.timeline-content[b-p3r2n8dram] {
  padding-left: var(--spacing-sm);
}

.timeline-title[b-p3r2n8dram] {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.timeline-date[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.timeline-actor[b-p3r2n8dram] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: 0.25rem;
}

/* Check-in/out Card */
.checkin-card[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  border-radius: var(--radius-xl);
  color: white;
}

.checkin-header[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkin-title[b-p3r2n8dram] {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.checkin-status[b-p3r2n8dram] {
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.checkin-time[b-p3r2n8dram] {
  display: flex;
  gap: var(--spacing-xl);
}

.checkin-time-item[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkin-time-label[b-p3r2n8dram] {
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

.checkin-time-value[b-p3r2n8dram] {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.checkin-action[b-p3r2n8dram] {
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: var(--primary-700);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  align-self: flex-start;
}

.checkin-action:hover[b-p3r2n8dram] {
  background-color: var(--gray-100);
}

/* Notes */
.notes-content[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: 1.6;
  white-space: pre-wrap;
}

.notes-empty[b-p3r2n8dram] {
  color: var(--gray-400);
  font-style: italic;
}

/* Info Grid */
.info-grid[b-p3r2n8dram] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.info-item[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label[b-p3r2n8dram] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-value[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 500;
}

/* Related Reservations */
.related-list[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.related-item[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.related-item:hover[b-p3r2n8dram] {
  background-color: var(--gray-50);
}

.related-info[b-p3r2n8dram] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.related-avatar[b-p3r2n8dram] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.related-details[b-p3r2n8dram] {
  display: flex;
  flex-direction: column;
}

.related-space[b-p3r2n8dram] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

.related-date[b-p3r2n8dram] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Responsive */
@media (min-width: 1024px) {
  .detail-grid[b-p3r2n8dram] {
    grid-template-columns: 2fr 1fr;
  }
}
@media (max-width: 768px) {
  .detail-header-top[b-p3r2n8dram] {
    flex-direction: column;
  }

  .header-actions[b-p3r2n8dram] {
    width: 100%;
  }

  .header-actions .btn[b-p3r2n8dram] {
    flex: 1;
  }

  .booking-overview[b-p3r2n8dram] {
    grid-template-columns: 1fr;
  }

  .info-grid[b-p3r2n8dram] {
    grid-template-columns: 1fr;
  }

  .checkin-time[b-p3r2n8dram] {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}
/* /Components/Pages/Reservations/Form.razor.rz.scp.css */
.reservation-form-page[b-afvhgh5f1c] {
        max-width: 1100px;
    }

    .form-header[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .form-header-left[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-afvhgh5f1c] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .form-title h1[b-afvhgh5f1c] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-title p[b-afvhgh5f1c] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-actions[b-afvhgh5f1c] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Form Layout */
    .form-layout[b-afvhgh5f1c] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Form Card */
    .form-card[b-afvhgh5f1c] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-card-header[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-card-icon[b-afvhgh5f1c] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-card-icon.blue[b-afvhgh5f1c] { background-color: #dbeafe; color: #2563eb; }
    .form-card-icon.green[b-afvhgh5f1c] { background-color: #dcfce7; color: #16a34a; }
    .form-card-icon.purple[b-afvhgh5f1c] { background-color: #f3e8ff; color: #7c3aed; }
    .form-card-icon.orange[b-afvhgh5f1c] { background-color: #fef3c7; color: #d97706; }

    .form-card-title h2[b-afvhgh5f1c] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-card-title p[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .form-card-body[b-afvhgh5f1c] {
        padding: var(--spacing-lg);
    }

    /* Form Elements */
    .form-grid[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .form-row[b-afvhgh5f1c] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-group[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-label[b-afvhgh5f1c] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-afvhgh5f1c] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-afvhgh5f1c] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-afvhgh5f1c] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-afvhgh5f1c]::placeholder {
        color: var(--gray-400);
    }

    select.form-input[b-afvhgh5f1c] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    textarea.form-input[b-afvhgh5f1c] {
        resize: vertical;
        min-height: 80px;
    }

    .form-hint[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    /* Member Selector */
    .member-selector[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .member-search-input[b-afvhgh5f1c] {
        position: relative;
    }

    .member-search-input input[b-afvhgh5f1c] {
        width: 100%;
        padding: 0.625rem 0.875rem 0.625rem 2.5rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }

    .member-search-input input:focus[b-afvhgh5f1c] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .member-search-input svg[b-afvhgh5f1c] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
    }

    .member-results[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xs);
    }

    .member-result-item[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .member-result-item:hover[b-afvhgh5f1c] {
        background-color: var(--gray-50);
    }

    .member-result-item.selected[b-afvhgh5f1c] {
        background-color: var(--primary-50);
        border: 1px solid var(--primary-200);
    }

    .member-avatar[b-afvhgh5f1c] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-sm);
        font-weight: 600;
        flex-shrink: 0;
    }

    .member-info[b-afvhgh5f1c] {
        flex: 1;
    }

    .member-name[b-afvhgh5f1c] {
        font-weight: 500;
        color: var(--gray-900);
    }

    .member-email[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
    }

    /* Space Selector */
    .space-grid[b-afvhgh5f1c] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .space-option[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .space-option:hover[b-afvhgh5f1c] {
        border-color: var(--gray-300);
        background-color: var(--gray-50);
    }

    .space-option.selected[b-afvhgh5f1c] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .space-option.unavailable[b-afvhgh5f1c] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .space-icon[b-afvhgh5f1c] {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .space-info[b-afvhgh5f1c] {
        flex: 1;
        min-width: 0;
    }

    .space-name[b-afvhgh5f1c] {
        font-weight: 600;
        color: var(--gray-900);
    }

    .space-details[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .space-price[b-afvhgh5f1c] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--primary-600);
    }

    .space-availability[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-full);
    }

    .space-availability.available[b-afvhgh5f1c] {
        background-color: #dcfce7;
        color: #15803d;
    }

    .space-availability.unavailable[b-afvhgh5f1c] {
        background-color: #fee2e2;
        color: #b91c1c;
    }

    /* Date Time Picker */
    .datetime-grid[b-afvhgh5f1c] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .datetime-picker[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    /* Quick Duration Buttons */
    .duration-buttons[b-afvhgh5f1c] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .duration-btn[b-afvhgh5f1c] {
        padding: 0.5rem 1rem;
        border: 1px solid var(--gray-200);
        background-color: white;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .duration-btn:hover[b-afvhgh5f1c] {
        border-color: var(--gray-300);
        background-color: var(--gray-50);
    }

    .duration-btn.selected[b-afvhgh5f1c] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
        color: var(--primary-700);
    }

    /* Recurring Options */
    .recurring-toggle[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
        cursor: pointer;
    }

    .toggle-switch[b-afvhgh5f1c] {
        width: 44px;
        height: 24px;
        background-color: var(--gray-300);
        border-radius: var(--radius-full);
        position: relative;
        transition: all var(--transition-fast);
        flex-shrink: 0;
    }

    .toggle-switch.active[b-afvhgh5f1c] {
        background-color: var(--primary-600);
    }

    .toggle-switch[b-afvhgh5f1c]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: var(--radius-full);
        top: 2px;
        left: 2px;
        transition: all var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }

    .toggle-switch.active[b-afvhgh5f1c]::after {
        left: 22px;
    }

    .recurring-options[b-afvhgh5f1c] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        margin-top: var(--spacing-md);
        padding: var(--spacing-md);
        background-color: var(--gray-50);
        border-radius: var(--radius-lg);
    }

    /* Summary Card */
    .summary-card[b-afvhgh5f1c] {
        position: sticky;
        top: var(--spacing-lg);
    }

    .summary-section[b-afvhgh5f1c] {
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .summary-section:last-child[b-afvhgh5f1c] {
        border-bottom: none;
    }

    .summary-label[b-afvhgh5f1c] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-xs);
    }

    .summary-value[b-afvhgh5f1c] {
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        font-weight: 500;
    }

    .summary-member[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .summary-space[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .summary-datetime[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .summary-total[b-afvhgh5f1c] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-md);
        border-top: 2px solid var(--gray-200);
    }

    .summary-total-label[b-afvhgh5f1c] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-700);
    }

    .summary-total-value[b-afvhgh5f1c] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
    }

    .summary-actions[b-afvhgh5f1c] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);
    }

    .summary-actions .btn[b-afvhgh5f1c] {
        width: 100%;
        justify-content: center;
    }

    /* Form Footer */
    .form-footer[b-afvhgh5f1c] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-footer-left[b-afvhgh5f1c] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .form-footer-right[b-afvhgh5f1c] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Responsive */
@media (min-width: 640px) {
        .form-row[b-afvhgh5f1c] {
            grid-template-columns: repeat(2, 1fr);
        }

        .space-grid[b-afvhgh5f1c] {
            grid-template-columns: repeat(2, 1fr);
        }
    }
@media (min-width: 1024px) {
        .form-layout[b-afvhgh5f1c] {
            grid-template-columns: 1fr 340px;
        }

        .space-grid[b-afvhgh5f1c] {
            grid-template-columns: 1fr;
        }
    }
@media (max-width: 768px) {
        .form-header[b-afvhgh5f1c] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .form-actions[b-afvhgh5f1c] {
            width: 100%;
        }

        .form-actions .btn[b-afvhgh5f1c] {
            flex: 1;
        }

        .datetime-grid[b-afvhgh5f1c] {
            grid-template-columns: 1fr;
        }

        .form-footer[b-afvhgh5f1c] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-footer-right[b-afvhgh5f1c] {
            width: 100%;
        }

        .form-footer-right .btn[b-afvhgh5f1c] {
            flex: 1;
        }
    }

/* /Components/Pages/Reservations/Index.razor.rz.scp.css */
.reservations-page[b-4d73t2w7k9] {
  max-width: 1600px;
}

/* Header */
.reservations-header[b-4d73t2w7k9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.reservations-header-top[b-4d73t2w7k9] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.reservation-stats[b-4d73t2w7k9] {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: var(--spacing-sm);
}

.reservation-stat-card[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .reservation-stat-card[b-4d73t2w7k9] {
    padding: var(--spacing-lg);
  }
}

.stat-icon[b-4d73t2w7k9] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-4d73t2w7k9] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-4d73t2w7k9] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-4d73t2w7k9] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.purple[b-4d73t2w7k9] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.stat-icon.red[b-4d73t2w7k9] {
  background-color: #fee2e2;
  color: #dc2626;
}

.stat-content[b-4d73t2w7k9] {
  flex: 1;
}

.stat-value[b-4d73t2w7k9] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-4d73t2w7k9] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.stat-change[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  margin-top: 0.25rem;
}

/* View Toggle */
.view-tabs[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.view-tab[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-tab:hover[b-4d73t2w7k9] {
  color: var(--gray-900);
}

.view-tab.active[b-4d73t2w7k9] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

/* Filters */
.reservations-filters[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-4d73t2w7k9] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-4d73t2w7k9] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-4d73t2w7k9] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-4d73t2w7k9] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-4d73t2w7k9] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-4d73t2w7k9] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-date[b-4d73t2w7k9] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-actions[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

/* Calendar View */
.calendar-container[b-4d73t2w7k9] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.calendar-header[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}
@media (max-width: 768px) {
  .calendar-header[b-4d73t2w7k9] {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

.calendar-nav[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.calendar-nav-btn[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-nav-btn:hover[b-4d73t2w7k9] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.calendar-title[b-4d73t2w7k9] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  min-width: 180px;
  text-align: center;
}

.calendar-today-btn[b-4d73t2w7k9] {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
}

.calendar-today-btn:hover[b-4d73t2w7k9] {
  background-color: var(--gray-50);
}

.calendar-view-options[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-xs);
}

.calendar-view-btn[b-4d73t2w7k9] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
}

.calendar-view-btn.active[b-4d73t2w7k9] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Week Calendar Grid */
.week-calendar[b-4d73t2w7k9] {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
}

.week-header[b-4d73t2w7k9] {
  display: contents;
}

.week-header-cell[b-4d73t2w7k9] {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-100);
  background-color: var(--gray-50);
}

.week-header-cell:first-child[b-4d73t2w7k9] {
  background-color: white;
}

.week-header-cell:last-child[b-4d73t2w7k9] {
  border-right: none;
}

.week-day-name[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.week-day-date[b-4d73t2w7k9] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 0.25rem;
}

.week-day-date.today[b-4d73t2w7k9] {
  width: 32px;
  height: 32px;
  margin: 0.25rem auto 0;
  background-color: var(--primary-600);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-body[b-4d73t2w7k9] {
  display: contents;
}

.time-slot-row[b-4d73t2w7k9] {
  display: contents;
}

.time-label[b-4d73t2w7k9] {
  padding: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-align: right;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
  background-color: white;
}

.time-slot[b-4d73t2w7k9] {
  min-height: 60px;
  padding: 0.25rem;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  position: relative;
}

.time-slot:last-child[b-4d73t2w7k9] {
  border-right: none;
}

.time-slot:hover[b-4d73t2w7k9] {
  background-color: var(--gray-50);
}

/* Calendar Event */
.calendar-event[b-4d73t2w7k9] {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: all var(--transition-fast);
}

.calendar-event:hover[b-4d73t2w7k9] {
  z-index: 10;
  box-shadow: var(--shadow-md);
}

.calendar-event.confirmed[b-4d73t2w7k9] {
  background-color: #dcfce7;
  border-left: 3px solid #16a34a;
  color: #15803d;
}

.calendar-event.pending[b-4d73t2w7k9] {
  background-color: #fef3c7;
  border-left: 3px solid #f59e0b;
  color: #b45309;
}

.calendar-event.checked-in[b-4d73t2w7k9] {
  background-color: #dbeafe;
  border-left: 3px solid #3b82f6;
  color: #1d4ed8;
}

.calendar-event.completed[b-4d73t2w7k9] {
  background-color: var(--gray-100);
  border-left: 3px solid var(--gray-400);
  color: var(--gray-600);
}

.event-title[b-4d73t2w7k9] {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-space[b-4d73t2w7k9] {
  font-size: 10px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-time[b-4d73t2w7k9] {
  font-size: 10px;
  opacity: 0.9;
  margin-top: 0.125rem;
}

.event-meta[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.2rem;
  font-size: 10px;
  opacity: 0.85;
}

.event-booking[b-4d73t2w7k9] {
  white-space: nowrap;
}

.event-status[b-4d73t2w7k9] {
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.event-external-badge[b-4d73t2w7k9] {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #f3e8ff;
  color: #7c3aed;
}

/* List View Table */
.reservations-table-container[b-4d73t2w7k9] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.reservations-table[b-4d73t2w7k9] {
  width: 100%;
  border-collapse: collapse;
}

.reservations-table th[b-4d73t2w7k9] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.reservations-table td[b-4d73t2w7k9] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.reservations-table tbody tr[b-4d73t2w7k9] {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.reservations-table tbody tr:hover[b-4d73t2w7k9] {
  background-color: var(--gray-50);
}

.reservations-table tbody tr:last-child td[b-4d73t2w7k9] {
  border-bottom: none;
}

/* Member Info */
.member-info[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.member-avatar[b-4d73t2w7k9] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.member-details[b-4d73t2w7k9] {
  min-width: 0;
}

.member-name[b-4d73t2w7k9] {
  font-weight: 500;
  color: var(--gray-900);
}

.external-badge[b-4d73t2w7k9] {
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: #f3e8ff;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.member-email[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Space Info */
.space-info[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.space-icon[b-4d73t2w7k9] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.space-details[b-4d73t2w7k9] {
  min-width: 0;
}

.space-name[b-4d73t2w7k9] {
  font-weight: 500;
  color: var(--gray-900);
}

.space-type[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Date Time */
.datetime-info[b-4d73t2w7k9] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.datetime-date[b-4d73t2w7k9] {
  font-weight: 500;
  color: var(--gray-900);
}

.datetime-time[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Status Badge */
.reservation-status[b-4d73t2w7k9] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.reservation-status .status-dot[b-4d73t2w7k9] {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

.reservation-status.pending[b-4d73t2w7k9] {
  background-color: #fef3c7;
  color: #b45309;
}
.reservation-status.pending .status-dot[b-4d73t2w7k9] {
  background-color: #f59e0b;
}

.reservation-status.confirmed[b-4d73t2w7k9] {
  background-color: #dcfce7;
  color: #15803d;
}
.reservation-status.confirmed .status-dot[b-4d73t2w7k9] {
  background-color: #22c55e;
}

.reservation-status.checked-in[b-4d73t2w7k9] {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.reservation-status.checked-in .status-dot[b-4d73t2w7k9] {
  background-color: #3b82f6;
}

.reservation-status.completed[b-4d73t2w7k9] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}
.reservation-status.completed .status-dot[b-4d73t2w7k9] {
  background-color: var(--gray-400);
}

.reservation-status.cancelled[b-4d73t2w7k9] {
  background-color: #fee2e2;
  color: #b91c1c;
}
.reservation-status.cancelled .status-dot[b-4d73t2w7k9] {
  background-color: #ef4444;
}

.reservation-status.no-show[b-4d73t2w7k9] {
  background-color: #fce7f3;
  color: #be185d;
}
.reservation-status.no-show .status-dot[b-4d73t2w7k9] {
  background-color: #ec4899;
}

/* Actions */
.row-actions[b-4d73t2w7k9] {
  display: flex;
  gap: 0.25rem;
}

.action-btn[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-4d73t2w7k9] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.action-btn.success:hover[b-4d73t2w7k9] {
  background-color: #dcfce7;
  color: #16a34a;
}

.action-btn.danger:hover[b-4d73t2w7k9] {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Timeline View */
.timeline-container[b-4d73t2w7k9] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.timeline-day[b-4d73t2w7k9] {
  margin-bottom: var(--spacing-xl);
}

.timeline-day:last-child[b-4d73t2w7k9] {
  margin-bottom: 0;
}

.timeline-date[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.timeline-date-badge[b-4d73t2w7k9] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-lg);
  min-width: 60px;
}

.timeline-date-badge.today[b-4d73t2w7k9] {
  background-color: var(--primary-600);
  color: white;
}

.timeline-date-day[b-4d73t2w7k9] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1;
}

.timeline-date-month[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.timeline-date-label[b-4d73t2w7k9] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.timeline-events[b-4d73t2w7k9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-left: calc(60px + var(--spacing-md));
}

.timeline-event-card[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.timeline-event-card:hover[b-4d73t2w7k9] {
  background-color: var(--gray-100);
}

.timeline-event-time[b-4d73t2w7k9] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  min-width: 100px;
}

.timeline-event-content[b-4d73t2w7k9] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.timeline-event-info[b-4d73t2w7k9] {
  flex: 1;
}

.timeline-event-title[b-4d73t2w7k9] {
  font-weight: 500;
  color: var(--gray-900);
}

.timeline-event-subtitle[b-4d73t2w7k9] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Pagination */
.reservations-pagination[b-4d73t2w7k9] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
}

.pagination-info[b-4d73t2w7k9] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination-controls[b-4d73t2w7k9] {
  display: flex;
  gap: var(--spacing-xs);
}

.pagination-btn[b-4d73t2w7k9] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-4d73t2w7k9] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.pagination-btn:disabled[b-4d73t2w7k9] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-4d73t2w7k9] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Responsive */
@media (min-width: 500px) {
  .reservation-stats[b-4d73t2w7k9] {
    gap: var(--spacing-md);
  }
}
@media (min-width: 500px) and (max-width: 768px) {
  .reservation-stats[b-4d73t2w7k9] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .reservation-stats[b-4d73t2w7k9] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .reservation-stats[b-4d73t2w7k9] {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1024px) {
  .reservations-table-container[b-4d73t2w7k9] {
    overflow-x: auto;
  }

  .reservations-table[b-4d73t2w7k9] {
    min-width: 900px;
  }

  .calendar-container .week-calendar-outer[b-4d73t2w7k9] {
    overflow-x: auto;
  }

  .week-calendar[b-4d73t2w7k9] {
    min-width: 900px;
  }
}
@media (max-width: 640px) {
  .reservations-header-top[b-4d73t2w7k9] {
    flex-direction: column;
  }

  .header-actions[b-4d73t2w7k9] {
    flex-wrap: wrap;
    width: 100%;
  }

  .header-actions .btn[b-4d73t2w7k9] {
    width: 100%;
  }

  .reservations-filters[b-4d73t2w7k9] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-4d73t2w7k9] {
    max-width: none;
  }

  .filter-actions[b-4d73t2w7k9] {
    margin-left: 0;
    justify-content: flex-end;
  }
}
/* /Components/Pages/Roles/Index.razor.rz.scp.css */
.roles-page[b-8eyq2qs3u9] {
  max-width: 1400px;
}

/* Header */
.roles-header[b-8eyq2qs3u9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.roles-header-top[b-8eyq2qs3u9] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-8eyq2qs3u9] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.roles-stats[b-8eyq2qs3u9] {
  display: grid;
  /* grid-template-columns: repeat(1, 1fr); */
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.stat-card[b-8eyq2qs3u9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.stat-icon[b-8eyq2qs3u9] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-8eyq2qs3u9] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-8eyq2qs3u9] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.purple[b-8eyq2qs3u9] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.stat-icon.orange[b-8eyq2qs3u9] {
  background-color: #fef3c7;
  color: #d97706;
}

.stat-content[b-8eyq2qs3u9] {
  flex: 1;
}

.stat-value[b-8eyq2qs3u9] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-8eyq2qs3u9] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Filters */
.roles-filters[b-8eyq2qs3u9] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-8eyq2qs3u9] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-8eyq2qs3u9] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-8eyq2qs3u9] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-8eyq2qs3u9] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

/* Roles Grid */
.roles-grid[b-8eyq2qs3u9] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.role-card[b-8eyq2qs3u9] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
  position: relative;
}

.role-card:hover[b-8eyq2qs3u9] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.role-card-header[b-8eyq2qs3u9] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.role-info h3[b-8eyq2qs3u9] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.role-description[b-8eyq2qs3u9] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
  line-height: 1.5;
}

.role-actions-menu[b-8eyq2qs3u9] {
  position: relative;
}

.role-menu-btn[b-8eyq2qs3u9] {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.role-menu-btn:hover[b-8eyq2qs3u9] {
  background: var(--gray-100);
  color: var(--gray-600);
}

.role-menu[b-8eyq2qs3u9] {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 100;
  display: none;
}

.role-menu.open[b-8eyq2qs3u9] {
  display: block;
}

.role-menu-item[b-8eyq2qs3u9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.role-menu-item:hover[b-8eyq2qs3u9] {
  background: var(--gray-50);
}

.role-menu-item.danger[b-8eyq2qs3u9] {
  color: var(--danger-600);
}

.role-menu-item.danger:hover[b-8eyq2qs3u9] {
  background: var(--danger-50);
}

.role-permissions[b-8eyq2qs3u9] {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.role-permissions-header[b-8eyq2qs3u9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.role-permissions-title[b-8eyq2qs3u9] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.permissions-count[b-8eyq2qs3u9] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.permissions-list[b-8eyq2qs3u9] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.permission-badge[b-8eyq2qs3u9] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.permission-badge.more[b-8eyq2qs3u9] {
  background: var(--primary-50);
  color: var(--primary-700);
}

.empty-state[b-8eyq2qs3u9] {
  text-align: center;
  padding: var(--spacing-xl);
  background: white;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
}

.empty-state-icon[b-8eyq2qs3u9] {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: var(--gray-400);
}

/* Responsive */
@media (min-width: 500px) {
  .roles-stats[b-8eyq2qs3u9] {
    gap: var(--spacing-md);
  }
}

@media (min-width: 500px) and (max-width: 768px) {
  .roles-stats[b-8eyq2qs3u9] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .roles-stats[b-8eyq2qs3u9] {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) {
  .roles-header-top[b-8eyq2qs3u9] {
    flex-direction: column;
  }

  .header-actions[b-8eyq2qs3u9] {
    width: 100%;
  }

  .header-actions .btn[b-8eyq2qs3u9] {
    flex: 1;
  }

  .roles-filters[b-8eyq2qs3u9] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-8eyq2qs3u9] {
    max-width: none;
  }

  .roles-grid[b-8eyq2qs3u9] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/Roles/RoleForm.razor.rz.scp.css */
.form-page[b-kn8xwspm0v] {
        max-width: 1000px;
        margin: 0 auto;
    }

    .form-header[b-kn8xwspm0v] {
        margin-bottom: var(--spacing-xl);
    }

    .form-header-nav[b-kn8xwspm0v] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .back-link[b-kn8xwspm0v] {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--gray-500);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: color var(--transition-fast);
    }

    .back-link:hover[b-kn8xwspm0v] {
        color: var(--primary-600);
    }

    .form-header h1[b-kn8xwspm0v] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
        margin: 0 0 var(--spacing-xs) 0;
    }

    .form-header p[b-kn8xwspm0v] {
        color: var(--gray-500);
        margin: 0;
    }

    .form-card[b-kn8xwspm0v] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: var(--spacing-lg);
    }

    .form-section[b-kn8xwspm0v] {
        padding: var(--spacing-xl);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-section:last-child[b-kn8xwspm0v] {
        border-bottom: none;
    }

    .form-section-header[b-kn8xwspm0v] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .form-section-icon[b-kn8xwspm0v] {
        width: 40px;
        height: 40px;
        background: var(--primary-100);
        color: var(--primary-600);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-section-icon.blue[b-kn8xwspm0v] { background-color: #dbeafe; color: #2563eb; }
    .form-section-icon.purple[b-kn8xwspm0v] { background-color: #f3e8ff; color: #7c3aed; }

    .form-section-title h2[b-kn8xwspm0v] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }

    .form-section-title p[b-kn8xwspm0v] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-group[b-kn8xwspm0v] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .form-label[b-kn8xwspm0v] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-kn8xwspm0v] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-kn8xwspm0v] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-kn8xwspm0v] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-kn8xwspm0v]::placeholder {
        color: var(--gray-400);
    }

    textarea.form-input[b-kn8xwspm0v] {
        resize: vertical;
        min-height: 100px;
    }

    .form-hint[b-kn8xwspm0v] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    .form-footer[b-kn8xwspm0v] {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg) var(--spacing-xl);
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
    }

    .alert[b-kn8xwspm0v] {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-lg);
    }

    .alert-danger[b-kn8xwspm0v] {
        background: var(--danger-50);
        color: var(--danger-700);
        border: 1px solid var(--danger-200);
    }

    .alert-success[b-kn8xwspm0v] {
        background: var(--success-50);
        color: var(--success-700);
        border: 1px solid var(--success-200);
    }

    .permission-category[b-kn8xwspm0v] {
        margin-bottom: var(--spacing-lg);
    }

    .permission-category-title[b-kn8xwspm0v] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: var(--spacing-md);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding-bottom: var(--spacing-xs);
        border-bottom: 2px solid var(--gray-200);
    }

    .permission-list[b-kn8xwspm0v] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .permission-item[b-kn8xwspm0v] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast);
    }

    .permission-item:hover[b-kn8xwspm0v] {
        background-color: var(--gray-50);
    }

    .permission-item label[b-kn8xwspm0v] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        cursor: pointer;
        flex: 1;
        font-size: var(--font-size-sm);
        color: var(--gray-700);
    }

    .permission-item input[type="checkbox"][b-kn8xwspm0v] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary-500);
    }

    .permission-item input[type="checkbox"]:checked[b-kn8xwspm0v] {
        accent-color: var(--primary-600);
    }

    .permission-description[b-kn8xwspm0v] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-left: 30px;
    }

/* /Components/Pages/Settings/Index.razor.rz.scp.css */
.settings-container[b-5vy5fhha8c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 1200px;
}

/* Settings Navigation */
.settings-nav[b-5vy5fhha8c] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
}

.settings-nav-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
}

.settings-nav-item:hover[b-5vy5fhha8c] {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

.settings-nav-item.active[b-5vy5fhha8c] {
  background-color: var(--primary-50);
  color: var(--primary-700);
}

.settings-nav-item svg[b-5vy5fhha8c] {
  flex-shrink: 0;
}

/* Settings Content */
.settings-content[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.settings-section[b-5vy5fhha8c] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.settings-section-header[b-5vy5fhha8c] {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.settings-section-header h2[b-5vy5fhha8c] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.settings-section-header p[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.settings-section-body[b-5vy5fhha8c] {
  padding: var(--spacing-lg);
}

.settings-section-footer[b-5vy5fhha8c] {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Form Styles */
.settings-form[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-row[b-5vy5fhha8c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.form-group[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.form-group .form-hint[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.form-input[b-5vy5fhha8c] {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.form-input:focus[b-5vy5fhha8c] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.form-input:disabled[b-5vy5fhha8c] {
  background-color: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

.form-error[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--danger-600);
}

.validation-message[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--danger-600);
}

textarea.form-input[b-5vy5fhha8c] {
  resize: vertical;
  min-height: 100px;
}

select.form-input[b-5vy5fhha8c] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Avatar Upload */
.avatar-upload[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.avatar-preview[b-5vy5fhha8c] {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: var(--primary-100);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-actions[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.avatar-actions p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.avatar-buttons[b-5vy5fhha8c] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Toggle Switch */
.toggle-group[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--gray-100);
}

.toggle-group:last-child[b-5vy5fhha8c] {
  border-bottom: none;
  padding-bottom: 0;
}

.toggle-group:first-child[b-5vy5fhha8c] {
  padding-top: 0;
}

/* Input with action button */
.input-action-btn[b-5vy5fhha8c] {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.input-action-btn:hover[b-5vy5fhha8c] {
  color: var(--gray-700);
}

.toggle-info h4[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.toggle-info p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.toggle-switch[b-5vy5fhha8c] {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input[b-5vy5fhha8c] {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider[b-5vy5fhha8c] {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--gray-200);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.toggle-slider[b-5vy5fhha8c]:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider[b-5vy5fhha8c] {
  background-color: var(--primary-600);
}

.toggle-switch input:checked + .toggle-slider[b-5vy5fhha8c]:before {
  transform: translateX(20px);
}

/* Branch List */
.branch-list[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.branch-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}

.branch-item.primary[b-5vy5fhha8c] {
  background-color: var(--primary-50);
  border-color: var(--primary-200);
}

.branch-info[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.branch-icon[b-5vy5fhha8c] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}

.branch-item.primary .branch-icon[b-5vy5fhha8c] {
  background-color: var(--primary-100);
  color: var(--primary-600);
}

.branch-details h4[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.branch-details p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.branch-actions[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Team List */
.team-list[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
}

.team-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--gray-100);
}

.team-item:last-child[b-5vy5fhha8c] {
  border-bottom: none;
}

.team-user[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.team-avatar[b-5vy5fhha8c] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.team-details h4[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.team-details p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.team-role[b-5vy5fhha8c] {
  padding: 0.25rem 0.75rem;
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--gray-600);
}

.team-role.admin[b-5vy5fhha8c] {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

/* Billing plan cards — aligned with Landing pricing (_PricingSection + landing.css) */
.billing-cards[b-5vy5fhha8c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: 0 auto;
}

.billing-card[b-5vy5fhha8c] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-normal, 0.2s ease),
    border-color var(--transition-normal, 0.2s ease),
    transform var(--transition-normal, 0.2s ease);
}

.billing-card:hover[b-5vy5fhha8c] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.billing-card.featured[b-5vy5fhha8c] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
}

.billing-card.featured:hover[b-5vy5fhha8c] {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.billing-card.current[b-5vy5fhha8c] {
  border-color: var(--primary-400);
  background-color: var(--primary-50);
  box-shadow: var(--shadow-md);
}

.billing-card.current:hover[b-5vy5fhha8c] {
  transform: none;
  border-color: var(--primary-400);
}

.billing-price-badge[b-5vy5fhha8c] {
  position: absolute;
  top: calc(-1 * var(--spacing-sm));
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
}

.billing-card h3[b-5vy5fhha8c] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs);
}

.billing-price-desc[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-lg);
}

.billing-price-amount[b-5vy5fhha8c] {
  margin-bottom: var(--spacing-lg);
}

.billing-price-value[b-5vy5fhha8c] {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.billing-price-period[b-5vy5fhha8c] {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  font-weight: 400;
}

.billing-current-pill[b-5vy5fhha8c] {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-800);
  background: var(--primary-100);
}

.billing-card-actions[b-5vy5fhha8c] {
  margin-top: auto;
}

/* Danger Zone */
.danger-zone[b-5vy5fhha8c] {
  border-color: var(--danger-200);
}

.danger-zone .settings-section-header[b-5vy5fhha8c] {
  background-color: #fef2f2;
  border-bottom-color: var(--danger-100);
}

.danger-zone .settings-section-header h2[b-5vy5fhha8c] {
  color: var(--danger-700);
}

.danger-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--gray-100);
}

.danger-item:last-child[b-5vy5fhha8c] {
  border-bottom: none;
}

.danger-info h4[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.danger-info p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

/* Tax Rate List */
.tax-rate-list[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.tax-rate-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
}

.tax-rate-item.default[b-5vy5fhha8c] {
  background-color: var(--primary-50);
  border-color: var(--primary-200);
}

.tax-rate-info[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.tax-rate-icon[b-5vy5fhha8c] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.tax-rate-item.default .tax-rate-icon[b-5vy5fhha8c] {
  background-color: var(--primary-100);
  color: var(--primary-600);
}

.tax-rate-details h4[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.tax-rate-details p[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

.tax-rate-value[b-5vy5fhha8c] {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--gray-900);
  min-width: 60px;
  text-align: right;
}

.tax-rate-actions[b-5vy5fhha8c] {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: var(--spacing-md);
}

/* Currency Preview */
.currency-preview[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}

.currency-preview-item[b-5vy5fhha8c] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.currency-preview-label[b-5vy5fhha8c] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.currency-preview-value[b-5vy5fhha8c] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
}

/* Tax Categories */
.tax-category-grid[b-5vy5fhha8c] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.tax-category-item[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.tax-category-info[b-5vy5fhha8c] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tax-category-icon[b-5vy5fhha8c] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tax-category-icon.space[b-5vy5fhha8c] {
  background-color: #dbeafe;
  color: #2563eb;
}
.tax-category-icon.meeting[b-5vy5fhha8c] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.tax-category-icon.cafeteria[b-5vy5fhha8c] {
  background-color: #fef3c7;
  color: #d97706;
}
.tax-category-icon.membership[b-5vy5fhha8c] {
  background-color: #dcfce7;
  color: #16a34a;
}

.tax-category-name[b-5vy5fhha8c] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

@media (min-width: 640px) {
  .form-row[b-5vy5fhha8c] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .settings-container[b-5vy5fhha8c] {
    grid-template-columns: 220px 1fr;
  }

  .settings-nav[b-5vy5fhha8c] {
    flex-direction: column;
    height: fit-content;
    position: sticky;
    top: calc(var(--navbar-height) + var(--spacing-lg));
  }

  .billing-cards[b-5vy5fhha8c] {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* /Components/Pages/Spaces/Detail.razor.rz.scp.css */
.space-detail-page[b-zuh396830g] {
  max-width: 1400px;
}

/* Header */
.detail-header[b-zuh396830g] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.detail-header-top[b-zuh396830g] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.detail-header-left[b-zuh396830g] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.back-btn[b-zuh396830g] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.back-btn:hover[b-zuh396830g] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.space-header-info[b-zuh396830g] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.space-header-badges[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.space-type-badge[b-zuh396830g] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: white;
}

.space-status-badge[b-zuh396830g] {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.space-status-badge.available[b-zuh396830g] {
  background-color: #dcfce7;
  color: #15803d;
}

.space-status-badge.occupied[b-zuh396830g] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.space-status-badge.maintenance[b-zuh396830g] {
  background-color: #fef3c7;
  color: #b45309;
}

.space-header-info h1[b-zuh396830g] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.space-header-meta[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.space-header-meta span[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.header-actions[b-zuh396830g] {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Quick Actions */
.quick-actions[b-zuh396830g] {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.quick-action-btn[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background-color: white;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover[b-zuh396830g] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.quick-action-btn.primary[b-zuh396830g] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.quick-action-btn.primary:hover[b-zuh396830g] {
  background-color: var(--primary-700);
}

.quick-action-btn.success[b-zuh396830g] {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: white;
}

.quick-action-btn.warning[b-zuh396830g] {
  background-color: var(--warning-500);
  border-color: var(--warning-500);
  color: white;
}

/* Layout Grid */
.detail-grid[b-zuh396830g] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Detail Cards */
.detail-card[b-zuh396830g] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-card-header[b-zuh396830g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.detail-card-header h2[b-zuh396830g] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.detail-card-body[b-zuh396830g] {
  padding: var(--spacing-lg);
}

/* Image Gallery */
.space-gallery[b-zuh396830g] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.gallery-main[b-zuh396830g] {
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--gray-100);
}

.gallery-main img[b-zuh396830g] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-main-placeholder[b-zuh396830g] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  gap: var(--spacing-sm);
}

.gallery-thumbs[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
}

.gallery-thumb[b-zuh396830g] {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--gray-100);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.gallery-thumb:hover[b-zuh396830g] {
  border-color: var(--gray-300);
}

.gallery-thumb.active[b-zuh396830g] {
  border-color: var(--primary-500);
}

.gallery-thumb img[b-zuh396830g] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pricing Cards */
.pricing-cards[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.pricing-card[b-zuh396830g] {
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  text-align: center;
}

.pricing-card-value[b-zuh396830g] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.pricing-card-label[b-zuh396830g] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pricing-card.highlight[b-zuh396830g] {
  background-color: var(--primary-50);
  border: 1px solid var(--primary-200);
}

.pricing-card.highlight .pricing-card-value[b-zuh396830g] {
  color: var(--primary-700);
}

/* Amenities List */
.amenities-list[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.amenity-item[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-md);
}

.amenity-icon[b-zuh396830g] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-600);
  flex-shrink: 0;
}

.amenity-name[b-zuh396830g] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 500;
}

/* Details Grid */
.details-grid[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.detail-item[b-zuh396830g] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label[b-zuh396830g] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value[b-zuh396830g] {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 500;
}

/* Availability Calendar */
.availability-header[b-zuh396830g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.calendar-nav[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.calendar-nav-btn[b-zuh396830g] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-nav-btn:hover[b-zuh396830g] {
  background-color: var(--gray-50);
  border-color: var(--gray-300);
}

.calendar-month[b-zuh396830g] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  min-width: 140px;
  text-align: center;
}

.calendar-grid[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.calendar-header-cell[b-zuh396830g] {
  padding: var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
}

.calendar-cell[b-zuh396830g] {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.calendar-cell:hover:not(.disabled):not(.other-month)[b-zuh396830g] {
  background-color: var(--gray-100);
}

.calendar-cell.other-month[b-zuh396830g] {
  color: var(--gray-300);
}

.calendar-cell.today[b-zuh396830g] {
  font-weight: 600;
  color: var(--primary-600);
  background-color: var(--primary-50);
}

.calendar-cell.available[b-zuh396830g] {
  background-color: #dcfce7;
  color: #15803d;
}

.calendar-cell.booked[b-zuh396830g] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.calendar-cell.partial[b-zuh396830g] {
  background-color: #fef3c7;
  color: #b45309;
}

.calendar-cell.selected[b-zuh396830g] {
  background-color: var(--primary-600);
  color: white;
}

.calendar-legend[b-zuh396830g] {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.legend-item[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.legend-dot[b-zuh396830g] {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

/* Reservations Table */
.reservations-table[b-zuh396830g] {
  width: 100%;
  border-collapse: collapse;
}

.reservations-table th[b-zuh396830g] {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gray-200);
}

.reservations-table td[b-zuh396830g] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.reservations-table tbody tr:hover[b-zuh396830g] {
  background-color: var(--gray-50);
}

.reservations-table tbody tr:last-child td[b-zuh396830g] {
  border-bottom: none;
}

.reservation-member[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.member-avatar[b-zuh396830g] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.member-name[b-zuh396830g] {
  font-weight: 500;
  color: var(--gray-900);
}

.reservation-status[b-zuh396830g] {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.reservation-status.active[b-zuh396830g] {
  background-color: #dcfce7;
  color: #15803d;
}

.reservation-status.upcoming[b-zuh396830g] {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.reservation-status.completed[b-zuh396830g] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.reservation-status.cancelled[b-zuh396830g] {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Current Occupant */
.current-occupant[b-zuh396830g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
}

.occupant-avatar[b-zuh396830g] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  flex-shrink: 0;
}

.occupant-info[b-zuh396830g] {
  flex: 1;
}

.occupant-name[b-zuh396830g] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.occupant-details[b-zuh396830g] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.occupant-dates[b-zuh396830g] {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

.occupant-date[b-zuh396830g] {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.occupant-date strong[b-zuh396830g] {
  color: var(--gray-900);
}

/* Stats Grid */
.stats-grid[b-zuh396830g] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.stat-item[b-zuh396830g] {
  padding: var(--spacing-md);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stat-value[b-zuh396830g] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.stat-label[b-zuh396830g] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Empty State */
.empty-state[b-zuh396830g] {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--gray-400);
}

.empty-state svg[b-zuh396830g] {
  margin-bottom: var(--spacing-sm);
}

.empty-state p[b-zuh396830g] {
  font-size: var(--font-size-sm);
}

/* Responsive */
@media (min-width: 640px) {
  .amenities-list[b-zuh396830g] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .space-gallery[b-zuh396830g] {
    grid-template-columns: 2fr 1fr;
  }

  .gallery-thumbs[b-zuh396830g] {
    grid-template-columns: 1fr;
    height: 100%;
  }

  .gallery-thumb[b-zuh396830g] {
    aspect-ratio: auto;
  }
}
@media (min-width: 1024px) {
  .detail-grid[b-zuh396830g] {
    grid-template-columns: 2fr 1fr;
  }

  .amenities-list[b-zuh396830g] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .detail-header-top[b-zuh396830g] {
    flex-direction: column;
  }

  .header-actions[b-zuh396830g] {
    width: 100%;
  }

  .header-actions .btn[b-zuh396830g] {
    flex: 1;
  }

  .pricing-cards[b-zuh396830g] {
    grid-template-columns: 1fr;
  }

  .details-grid[b-zuh396830g] {
    grid-template-columns: 1fr;
  }

  .stats-grid[b-zuh396830g] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/Spaces/Form.razor.rz.scp.css */
.space-form-page[b-pv1r4v3166] {
        max-width: 900px;
    }

    .form-header[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-xl);
    }

    .form-header-left[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .back-btn[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        background-color: white;
        color: var(--gray-600);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .back-btn:hover[b-pv1r4v3166] {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    .form-title h1[b-pv1r4v3166] {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-title p[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-actions[b-pv1r4v3166] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Form Card */
    .form-card[b-pv1r4v3166] {
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
    }

    .form-card-header[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-card-icon[b-pv1r4v3166] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .form-card-icon.blue[b-pv1r4v3166] { background-color: #dbeafe; color: #2563eb; }
    .form-card-icon.green[b-pv1r4v3166] { background-color: #dcfce7; color: #16a34a; }
    .form-card-icon.purple[b-pv1r4v3166] { background-color: #f3e8ff; color: #7c3aed; }
    .form-card-icon.orange[b-pv1r4v3166] { background-color: #fef3c7; color: #d97706; }

    .form-card-title h2[b-pv1r4v3166] {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .form-card-title p[b-pv1r4v3166] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .form-card-body[b-pv1r4v3166] {
        padding: var(--spacing-lg);
    }

    /* Form Grid */
    .form-grid[b-pv1r4v3166] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .form-row[b-pv1r4v3166] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .form-group[b-pv1r4v3166] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .form-group.full-width[b-pv1r4v3166] {
        grid-column: 1 / -1;
    }

    .form-label[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-label .required[b-pv1r4v3166] {
        color: var(--danger-500);
        margin-left: 0.125rem;
    }

    .form-input[b-pv1r4v3166] {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
        transition: all var(--transition-fast);
        width: 100%;
    }

    .form-input:focus[b-pv1r4v3166] {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-50);
    }

    .form-input[b-pv1r4v3166]::placeholder {
        color: var(--gray-400);
    }

    select.form-input[b-pv1r4v3166] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    textarea.form-input[b-pv1r4v3166] {
        resize: vertical;
        min-height: 100px;
    }

    .form-hint[b-pv1r4v3166] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    /* Input with prefix */
    .input-with-prefix[b-pv1r4v3166] {
        position: relative;
    }

    .input-prefix[b-pv1r4v3166] {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-500);
        font-size: var(--font-size-sm);
        pointer-events: none;
    }

    .input-with-prefix .form-input[b-pv1r4v3166] {
        padding-left: 1.75rem;
    }

    /* Image Upload */
    .image-upload-section[b-pv1r4v3166] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .image-upload-area[b-pv1r4v3166] {
        border: 2px dashed var(--gray-300);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        text-align: center;
        cursor: pointer;
        transition: all var(--transition-fast);
        background-color: var(--gray-50);
    }

    .image-upload-area:hover[b-pv1r4v3166] {
        border-color: var(--primary-300);
        background-color: var(--primary-50);
    }

    .image-upload-area.has-image[b-pv1r4v3166] {
        padding: 0;
        border-style: solid;
        overflow: hidden;
    }

    .image-upload-area img[b-pv1r4v3166] {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .upload-icon[b-pv1r4v3166] {
        width: 48px;
        height: 48px;
        margin: 0 auto var(--spacing-md);
        background-color: var(--gray-200);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
    }

    .upload-text h4[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .upload-text p[b-pv1r4v3166] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    .upload-text span[b-pv1r4v3166] {
        color: var(--primary-600);
        font-weight: 500;
    }

    .image-preview-grid[b-pv1r4v3166] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-sm);
    }

    .image-preview-item[b-pv1r4v3166] {
        position: relative;
        aspect-ratio: 1;
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    .image-preview-item img[b-pv1r4v3166] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .image-preview-remove[b-pv1r4v3166] {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: 24px;
        height: 24px;
        border-radius: var(--radius-full);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-preview-item.primary[b-pv1r4v3166]::after {
        content: 'Primary';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.25rem;
        background-color: var(--primary-600);
        color: white;
        font-size: var(--font-size-xs);
        text-align: center;
    }

    /* Amenities Grid */
    .amenities-grid[b-pv1r4v3166] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .amenity-item[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .amenity-item:hover[b-pv1r4v3166] {
        border-color: var(--gray-300);
        background-color: var(--gray-50);
    }

    .amenity-item.selected[b-pv1r4v3166] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .amenity-checkbox[b-pv1r4v3166] {
        width: 18px;
        height: 18px;
        border: 2px solid var(--gray-300);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--transition-fast);
    }

    .amenity-item.selected .amenity-checkbox[b-pv1r4v3166] {
        background-color: var(--primary-600);
        border-color: var(--primary-600);
        color: white;
    }

    .amenity-icon[b-pv1r4v3166] {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-md);
        background-color: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
    }

    .amenity-item.selected .amenity-icon[b-pv1r4v3166] {
        background-color: var(--primary-100);
        color: var(--primary-600);
    }

    .amenity-label[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--gray-700);
    }

    /* Space Type Selection */
    .space-type-grid[b-pv1r4v3166] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .space-type-option[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .space-type-option:hover[b-pv1r4v3166] {
        border-color: var(--gray-300);
    }

    .space-type-option.selected[b-pv1r4v3166] {
        border-color: var(--primary-500);
        background-color: var(--primary-50);
    }

    .space-type-color[b-pv1r4v3166] {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
    }

    .space-type-info h4[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.125rem;
    }

    .space-type-info p[b-pv1r4v3166] {
        font-size: var(--font-size-xs);
        color: var(--gray-500);
        margin: 0;
    }

    /* Form Footer */
    .form-footer[b-pv1r4v3166] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
    }

    .form-footer-left[b-pv1r4v3166] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
    }

    .form-footer-right[b-pv1r4v3166] {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Responsive */
@media (min-width: 640px) {
        .form-row[b-pv1r4v3166] {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-row.three-col[b-pv1r4v3166] {
            grid-template-columns: repeat(3, 1fr);
        }

        .amenities-grid[b-pv1r4v3166] {
            grid-template-columns: repeat(3, 1fr);
        }

        .space-type-grid[b-pv1r4v3166] {
            grid-template-columns: repeat(3, 1fr);
        }
    }
@media (min-width: 1024px) {
        .amenities-grid[b-pv1r4v3166] {
            grid-template-columns: repeat(4, 1fr);
        }
    }
@media (max-width: 640px) {
        .form-header[b-pv1r4v3166] {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .form-actions[b-pv1r4v3166] {
            width: 100%;
        }

        .form-actions .btn[b-pv1r4v3166] {
            flex: 1;
        }

        .form-footer[b-pv1r4v3166] {
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-footer-right[b-pv1r4v3166] {
            width: 100%;
        }

        .form-footer-right .btn[b-pv1r4v3166] {
            flex: 1;
        }
    }

/* /Components/Pages/Spaces/Index.razor.rz.scp.css */
.spaces-page[b-yp31ce5ze7] {
  max-width: 1600px;
}

/* Header */
.spaces-header[b-yp31ce5ze7] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.spaces-header-top[b-yp31ce5ze7] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-sm);
}
@media (max-width: 768px) {
  .header-actions[b-yp31ce5ze7] {
    flex-wrap: wrap;
  }
  .header-actions .btn[b-yp31ce5ze7] {
    width: 100%;
  }
}
/* Stats Cards */
.spaces-stats[b-yp31ce5ze7] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

.space-stat[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
  .space-stat[b-yp31ce5ze7] {
    padding: var(--spacing-lg);
  }
}

.space-stat-icon[b-yp31ce5ze7] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.space-stat-content[b-yp31ce5ze7] {
  flex: 1;
}

.space-stat-value[b-yp31ce5ze7] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.space-stat-label[b-yp31ce5ze7] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.space-stat-icon.blue[b-yp31ce5ze7] {
  background-color: #dbeafe;
  color: #2563eb;
}

.space-stat-icon.green[b-yp31ce5ze7] {
  background-color: #dcfce7;
  color: #16a34a;
}

.space-stat-icon.red[b-yp31ce5ze7] {
  background-color: #fee2e2;
  color: #dc2626;
}

.space-stat-icon.orange[b-yp31ce5ze7] {
  background-color: #fef3c7;
  color: #d97706;
}

.space-stat-icon.purple[b-yp31ce5ze7] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

/* Filters */
.spaces-filters[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-yp31ce5ze7] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-yp31ce5ze7] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-yp31ce5ze7] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-yp31ce5ze7] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-yp31ce5ze7] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-yp31ce5ze7] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.view-toggle[b-yp31ce5ze7] {
  display: flex;
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  margin-left: auto;
}

.view-toggle-btn[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn.active[b-yp31ce5ze7] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

/* Space Grid */
.spaces-grid[b-yp31ce5ze7] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-md);
}

/* Space Card */
.space-card[b-yp31ce5ze7] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.space-card:hover[b-yp31ce5ze7] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.space-card-image[b-yp31ce5ze7] {
  position: relative;
  height: 160px;
  background-color: var(--gray-100);
  overflow: hidden;
}

.space-card-image img[b-yp31ce5ze7] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-card-placeholder[b-yp31ce5ze7] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.space-type-badge[b-yp31ce5ze7] {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: white;
}

.space-status-badge[b-yp31ce5ze7] {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.space-status-badge.available[b-yp31ce5ze7] {
  background-color: #dcfce7;
  color: #15803d;
}

.space-status-badge.occupied[b-yp31ce5ze7] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.space-status-badge.maintenance[b-yp31ce5ze7] {
  background-color: #fef3c7;
  color: #b45309;
}

.space-card-body[b-yp31ce5ze7] {
  padding: var(--spacing-md);
}

.space-card-header[b-yp31ce5ze7] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.space-card-title[b-yp31ce5ze7] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.space-card-code[b-yp31ce5ze7] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.space-card-actions[b-yp31ce5ze7] {
  display: flex;
  gap: 0.25rem;
}

.space-action-btn[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.space-action-btn:hover[b-yp31ce5ze7] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.space-card-details[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.space-detail-item[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.space-detail-item svg[b-yp31ce5ze7] {
  color: var(--gray-400);
}

.space-card-pricing[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.price-item[b-yp31ce5ze7] {
  flex: 1;
  text-align: center;
  padding: var(--spacing-xs) 0;
}

.price-item:not(:last-child)[b-yp31ce5ze7] {
  border-right: 1px solid var(--gray-100);
}

.price-value[b-yp31ce5ze7] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.price-label[b-yp31ce5ze7] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Table View */
.spaces-table-container[b-yp31ce5ze7] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.spaces-table[b-yp31ce5ze7] {
  width: 100%;
  border-collapse: collapse;
}

.spaces-table th[b-yp31ce5ze7] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.spaces-table td[b-yp31ce5ze7] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.spaces-table tbody tr[b-yp31ce5ze7] {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.spaces-table tbody tr:hover[b-yp31ce5ze7] {
  background-color: var(--gray-50);
}

.spaces-table tbody tr:last-child td[b-yp31ce5ze7] {
  border-bottom: none;
}

.table-space-info[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.table-space-image[b-yp31ce5ze7] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  flex-shrink: 0;
}

.table-space-image img[b-yp31ce5ze7] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.table-space-name[b-yp31ce5ze7] {
  font-weight: 500;
  color: var(--gray-900);
}

.table-space-code[b-yp31ce5ze7] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.table-type-badge[b-yp31ce5ze7] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.table-type-dot[b-yp31ce5ze7] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

/* Empty State */
.spaces-empty[b-yp31ce5ze7] {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.spaces-empty-icon[b-yp31ce5ze7] {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.spaces-empty h3[b-yp31ce5ze7] {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.spaces-empty p[b-yp31ce5ze7] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Floor Plan View */
.floor-plan-container[b-yp31ce5ze7] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.floor-plan-header[b-yp31ce5ze7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.floor-selector[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-xs);
}

.floor-btn[b-yp31ce5ze7] {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.floor-btn:hover[b-yp31ce5ze7] {
  border-color: var(--gray-300);
}

.floor-btn.active[b-yp31ce5ze7] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.floor-plan-legend[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-md);
}

.legend-item[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.legend-dot[b-yp31ce5ze7] {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.floor-plan-grid[b-yp31ce5ze7] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  min-height: 400px;
}

.floor-plan-space[b-yp31ce5ze7] {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.floor-plan-space:hover[b-yp31ce5ze7] {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.floor-plan-space.available[b-yp31ce5ze7] {
  background-color: #dcfce7;
  color: #15803d;
}

.floor-plan-space.occupied[b-yp31ce5ze7] {
  background-color: #fee2e2;
  color: #b91c1c;
}

.floor-plan-space.selected[b-yp31ce5ze7] {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.floor-plan-space-name[b-yp31ce5ze7] {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.floor-plan-space-type[b-yp31ce5ze7] {
  opacity: 0.8;
}

/* Pagination */
.spaces-pagination[b-yp31ce5ze7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
}

.pagination-info[b-yp31ce5ze7] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pagination-controls[b-yp31ce5ze7] {
  display: flex;
  gap: var(--spacing-xs);
}

.pagination-btn[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-200);
  background-color: white;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled)[b-yp31ce5ze7] {
  border-color: var(--gray-300);
  background-color: var(--gray-50);
}

.pagination-btn:disabled[b-yp31ce5ze7] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active[b-yp31ce5ze7] {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Responsive */
@media (min-width: 640px) {
  .spaces-grid[b-yp31ce5ze7] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .spaces-header-top[b-yp31ce5ze7] {
    flex-wrap: nowrap;
  }

  .spaces-stats[b-yp31ce5ze7] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-md);
  }
}
@media (min-width: 1024px) {
  .spaces-grid[b-yp31ce5ze7] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .spaces-grid[b-yp31ce5ze7] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Bulk Import Modal Styles */
.bulk-import-modal[b-yp31ce5ze7] {
  max-width: 560px;
}

.bulk-import-icon[b-yp31ce5ze7] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background-color: var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.import-section[b-yp31ce5ze7] {
  margin-bottom: var(--spacing-lg);
}

.import-section:last-of-type[b-yp31ce5ze7] {
  margin-bottom: 0;
}

.import-section-header[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--spacing-md);
}

.import-section-header svg[b-yp31ce5ze7] {
  color: var(--gray-500);
}

.coming-soon-badge[b-yp31ce5ze7] {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  background-color: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.file-upload-area[b-yp31ce5ze7] {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  background-color: var(--gray-50);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.file-upload-area:hover[b-yp31ce5ze7] {
  border-color: var(--primary-400);
  background-color: var(--primary-50);
}

.file-upload-content[b-yp31ce5ze7] {
  pointer-events: none;
}

.file-input[b-yp31ce5ze7] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.import-divider[b-yp31ce5ze7] {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--spacing-xl) 0;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

.import-divider[b-yp31ce5ze7]::before,
.import-divider[b-yp31ce5ze7]::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--gray-200);
}

.import-divider span[b-yp31ce5ze7] {
  padding: 0 var(--spacing-md);
}

.generate-form-grid[b-yp31ce5ze7] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.generate-form-row[b-yp31ce5ze7] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.generate-input-group[b-yp31ce5ze7] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.generate-input-group.full-width[b-yp31ce5ze7] {
  grid-column: 1 / -1;
}

.generate-label[b-yp31ce5ze7] {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--gray-600);
}

.generate-input[b-yp31ce5ze7] {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  transition: all var(--transition-fast);
  width: 100%;
}

.generate-input:focus[b-yp31ce5ze7] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.generate-input:disabled[b-yp31ce5ze7] {
  background-color: var(--gray-50);
  color: var(--gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

.generate-btn[b-yp31ce5ze7] {
  white-space: nowrap;
}

.generate-btn:disabled[b-yp31ce5ze7] {
  opacity: 0.6;
  cursor: not-allowed;
}
/* /Components/Pages/SpaceTypes/Index.razor.rz.scp.css */
.space-types-header[b-6ppgne3btg] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.space-types-title h1[b-6ppgne3btg] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.space-types-title p[b-6ppgne3btg] {
  color: var(--gray-500);
  margin: 0;
}

.space-types-actions[b-6ppgne3btg] {
  display: flex;
  gap: var(--spacing-sm);
}

.search-box[b-6ppgne3btg] {
  position: relative;
}

.search-box input[b-6ppgne3btg] {
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  width: 250px;
  transition: all var(--transition-fast);
}

.search-box input:focus[b-6ppgne3btg] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.search-box svg[b-6ppgne3btg] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.space-types-grid[b-6ppgne3btg] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.space-type-card[b-6ppgne3btg] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
  position: relative;
}

.space-type-card:hover[b-6ppgne3btg] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.space-type-card.inactive[b-6ppgne3btg] {
  opacity: 0.6;
  background: var(--gray-50);
}

.space-type-card-header[b-6ppgne3btg] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.space-type-icon[b-6ppgne3btg] {
  width: 48px;
  height: 48px;
  background: var(--primary-100);
  color: var(--primary-600);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-type-info[b-6ppgne3btg] {
  flex: 1;
  margin-left: var(--spacing-md);
}

.space-type-info h3[b-6ppgne3btg] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.space-type-description[b-6ppgne3btg] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-type-footer[b-6ppgne3btg] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.card-actions[b-6ppgne3btg] {
  display: flex;
  gap: var(--spacing-xs);
}

.card-action-btn[b-6ppgne3btg] {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.card-action-btn:hover[b-6ppgne3btg] {
  background: var(--gray-100);
  color: var(--gray-600);
}

.card-action-btn.danger:hover[b-6ppgne3btg] {
  background: var(--danger-50);
  color: var(--danger-600);
}

.empty-state[b-6ppgne3btg] {
  text-align: center;
  padding: var(--spacing-xl);
  background: white;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
}

.empty-state-icon[b-6ppgne3btg] {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: var(--gray-400);
}

.empty-state h3[b-6ppgne3btg] {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.empty-state p[b-6ppgne3btg] {
  color: var(--gray-500);
  margin: 0 0 var(--spacing-lg) 0;
}

.loading-grid[b-6ppgne3btg] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.loading-card[b-6ppgne3btg] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
}

.skeleton[b-6ppgne3btg] {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-b-6ppgne3btg 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer-b-6ppgne3btg {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Modal styles */
.modal-overlay[b-6ppgne3btg] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-md);
}

.modal-content[b-6ppgne3btg] {
  background: white;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.modal-header[b-6ppgne3btg] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}

.modal-header h3[b-6ppgne3btg] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.modal-close[b-6ppgne3btg] {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--gray-400);
  border-radius: var(--radius-md);
}

.modal-close:hover[b-6ppgne3btg] {
  background: var(--gray-100);
  color: var(--gray-600);
}

.modal-body[b-6ppgne3btg] {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.modal-body p[b-6ppgne3btg] {
  color: var(--gray-600);
  margin: 0 0 var(--spacing-md) 0;
}

.modal-footer[b-6ppgne3btg] {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
@media (max-width: 768px) {
  .space-types-header[b-6ppgne3btg] {
    flex-direction: column;
  }

  .space-types-actions[b-6ppgne3btg] {
    width: 100%;
    flex-direction: column;
  }

  .search-box input[b-6ppgne3btg] {
    width: 100%;
  }

  .space-types-grid[b-6ppgne3btg] {
    grid-template-columns: 1fr;
  }

  .space-type-rates[b-6ppgne3btg] {
    grid-template-columns: 1fr;
  }
}
/* /Components/Pages/SpaceTypes/SpaceTypeForm.razor.rz.scp.css */
.form-page[b-999ows99ul] {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-header[b-999ows99ul] {
        margin-bottom: var(--spacing-xl);
    }

    .form-header-nav[b-999ows99ul] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .back-link[b-999ows99ul] {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--gray-500);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: color var(--transition-fast);
    }

    .back-link:hover[b-999ows99ul] {
        color: var(--primary-600);
    }

    .form-header h1[b-999ows99ul] {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--gray-900);
        margin: 0 0 var(--spacing-xs) 0;
    }

    .form-header p[b-999ows99ul] {
        color: var(--gray-500);
        margin: 0;
    }

    .form-card[b-999ows99ul] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    .form-section[b-999ows99ul] {
        padding: var(--spacing-xl);
        border-bottom: 1px solid var(--gray-100);
    }

    .form-section:last-child[b-999ows99ul] {
        border-bottom: none;
    }

    .form-section-header[b-999ows99ul] {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .form-section-icon[b-999ows99ul] {
        width: 40px;
        height: 40px;
        background: var(--primary-100);
        color: var(--primary-600);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-section-title h2[b-999ows99ul] {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }

    .form-section-title p[b-999ows99ul] {
        font-size: var(--font-size-sm);
        color: var(--gray-500);
        margin: 0;
    }

    .form-grid[b-999ows99ul] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .form-grid .form-group.full-width[b-999ows99ul] {
        grid-column: 1 / -1;
    }

    .form-footer[b-999ows99ul] {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg) var(--spacing-xl);
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
    }

    .alert[b-999ows99ul] {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-lg);
    }

    .alert-danger[b-999ows99ul] {
        background: var(--danger-50);
        color: var(--danger-700);
        border: 1px solid var(--danger-200);
    }

    .checkbox-grid[b-999ows99ul] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .checkbox-card[b-999ows99ul] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        background: var(--gray-50);
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--transition-fast);
        text-align: center;
    }

    .checkbox-card:hover[b-999ows99ul] {
        border-color: var(--primary-300);
        background: var(--primary-50);
    }

    .checkbox-card.selected[b-999ows99ul] {
        border-color: var(--primary-500);
        background: var(--primary-50);
    }

    .checkbox-card input[type="checkbox"][b-999ows99ul] {
        display: none;
    }

    .checkbox-card-icon[b-999ows99ul] {
        width: 40px;
        height: 40px;
        background: white;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-500);
    }

    .checkbox-card.selected .checkbox-card-icon[b-999ows99ul] {
        background: var(--primary-100);
        color: var(--primary-600);
    }

    .checkbox-card-label[b-999ows99ul] {
        font-weight: 500;
        color: var(--gray-700);
        font-size: var(--font-size-sm);
    }

    .checkbox-card.selected .checkbox-card-label[b-999ows99ul] {
        color: var(--primary-700);
    }

    .rate-inputs[b-999ows99ul] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .rate-input-group[b-999ows99ul] {
        position: relative;
    }

    .rate-input-group .currency-symbol[b-999ows99ul] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        font-weight: 500;
    }

    .rate-input-group input[b-999ows99ul] {
        padding-left: 28px;
    }

    .rate-input-group .rate-suffix[b-999ows99ul] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        font-size: var(--font-size-sm);
    }

    .toggle-switch[b-999ows99ul] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        background: var(--gray-50);
        border-radius: var(--radius-lg);
        cursor: pointer;
    }

    .toggle-switch:hover[b-999ows99ul] {
        background: var(--gray-100);
    }

    .toggle-label[b-999ows99ul] {
        flex: 1;
    }

    .toggle-label span[b-999ows99ul] {
        display: block;
        font-weight: 500;
        color: var(--gray-900);
    }

    .toggle-label small[b-999ows99ul] {
        color: var(--gray-500);
        font-size: var(--font-size-sm);
    }

    .toggle-control[b-999ows99ul] {
        position: relative;
        width: 48px;
        height: 26px;
        background: var(--gray-300);
        border-radius: var(--radius-full);
        transition: background var(--transition-fast);
    }

    .toggle-control.active[b-999ows99ul] {
        background: var(--primary-500);
    }

    .toggle-control[b-999ows99ul]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: var(--radius-full);
        transition: transform var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }

    .toggle-control.active[b-999ows99ul]::after {
        transform: translateX(22px);
    }

    .skeleton[b-999ows99ul] {
        background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
        background-size: 200% 100%;
        animation: shimmer-b-999ows99ul 1.5s infinite;
        border-radius: var(--radius-md);
    }
@keyframes shimmer-b-999ows99ul {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
@media (max-width: 768px) {
        .form-grid[b-999ows99ul] {
            grid-template-columns: 1fr;
        }

        .checkbox-grid[b-999ows99ul] {
            grid-template-columns: 1fr;
        }

        .rate-inputs[b-999ows99ul] {
            grid-template-columns: 1fr;
        }

        .form-footer[b-999ows99ul] {
            flex-direction: column-reverse;
        }

        .form-footer .btn[b-999ows99ul] {
            width: 100%;
        }
    }

/* /Components/Pages/Staff/Index.razor.rz.scp.css */
.staff-page[b-albfgevvat] {
  max-width: 1400px;
}

/* Header */
.staff-header[b-albfgevvat] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.staff-header-top[b-albfgevvat] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.header-actions[b-albfgevvat] {
  display: flex;
  gap: var(--spacing-sm);
}

/* Stats Cards */
.staff-stats[b-albfgevvat] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.stat-card[b-albfgevvat] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.stat-icon[b-albfgevvat] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue[b-albfgevvat] {
  background-color: #dbeafe;
  color: #2563eb;
}
.stat-icon.green[b-albfgevvat] {
  background-color: #dcfce7;
  color: #16a34a;
}
.stat-icon.orange[b-albfgevvat] {
  background-color: #fef3c7;
  color: #d97706;
}
.stat-icon.purple[b-albfgevvat] {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.stat-content[b-albfgevvat] {
  flex: 1;
}

.stat-value[b-albfgevvat] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.stat-label[b-albfgevvat] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* Filters */
.staff-filters[b-albfgevvat] {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}

.filter-search[b-albfgevvat] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-search input[b-albfgevvat] {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.filter-search input:focus[b-albfgevvat] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.filter-search svg[b-albfgevvat] {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.filter-select[b-albfgevvat] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  appearance: none;
  cursor: pointer;
}

.filter-select:focus[b-albfgevvat] {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Staff Table */
.staff-table-container[b-albfgevvat] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.staff-table[b-albfgevvat] {
  width: 100%;
  border-collapse: collapse;
}

.staff-table th[b-albfgevvat] {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.staff-table td[b-albfgevvat] {
  padding: 1rem;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.staff-table tbody tr[b-albfgevvat] {
  transition: background-color var(--transition-fast);
}

.staff-table tbody tr:hover[b-albfgevvat] {
  background-color: var(--gray-50);
}

.staff-table tbody tr:last-child td[b-albfgevvat] {
  border-bottom: none;
}

/* Staff Info */
.staff-info[b-albfgevvat] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.staff-avatar[b-albfgevvat] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.staff-avatar img[b-albfgevvat] {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.staff-details[b-albfgevvat] {
  min-width: 0;
}

.staff-name[b-albfgevvat] {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.staff-email[b-albfgevvat] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* Role Badge */
.role-badge[b-albfgevvat] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.role-badge.admin[b-albfgevvat] {
  background-color: #fef3c7;
  color: #92400e;
}
.role-badge.manager[b-albfgevvat] {
  background-color: #cffafe;
  color: #0e7490;
}
.role-badge.member[b-albfgevvat] {
  background-color: #e0e7ff;
  color: #3730a3;
}

/* Status Badge */
.status-badge[b-albfgevvat] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.status-badge.active[b-albfgevvat] {
  background-color: #dcfce7;
  color: #166534;
}
.status-badge.inactive[b-albfgevvat] {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Actions */
.row-actions[b-albfgevvat] {
  display: flex;
  gap: 0.25rem;
}

.action-btn[b-albfgevvat] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover[b-albfgevvat] {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.action-btn.danger:hover[b-albfgevvat] {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Empty State */
.empty-state[b-albfgevvat] {
  text-align: center;
  padding: var(--spacing-xl);
  background: white;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
}

.empty-state-icon[b-albfgevvat] {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: var(--gray-400);
}

@media (min-width: 500px) and (max-width: 768px) {
  .staff-stats[b-albfgevvat] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 500px) {
  .staff-stats[b-albfgevvat] {
    gap: var(--spacing-md);
  }
}
@media (min-width: 768px) {
  .staff-stats[b-albfgevvat] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .staff-table-container[b-albfgevvat] {
    overflow-x: auto;
  }

  .staff-table[b-albfgevvat] {
    min-width: 800px;
  }
}
@media (max-width: 640px) {
  .staff-header-top[b-albfgevvat] {
    flex-direction: column;
  }

  .header-actions[b-albfgevvat] {
    width: 100%;
  }

  .header-actions .btn[b-albfgevvat] {
    flex: 1;
  }

  .staff-filters[b-albfgevvat] {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-search[b-albfgevvat] {
    max-width: none;
  }
}

/* Transfer modal: typography (shell is global .modal-content) */
.transfer-modal-current[b-albfgevvat] {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  line-height: 1.5;
}

.transfer-modal-branch-name[b-albfgevvat] {
  color: var(--gray-600);
  font-weight: 500;
}

.transfer-modal-label[b-albfgevvat] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.transfer-modal-hint[b-albfgevvat] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--spacing-sm);
  line-height: 1.45;
}
/* /Components/Pages/Staff/StaffForm.razor.rz.scp.css */
.form-page[b-7k0h05ir4g] {
  margin: 0 auto;
}

.form-header[b-7k0h05ir4g] {
  margin-bottom: var(--spacing-xl);
}

.form-header-nav[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.back-link[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.back-link:hover[b-7k0h05ir4g] {
  color: var(--primary-600);
}

.form-header h1[b-7k0h05ir4g] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.form-header p[b-7k0h05ir4g] {
  color: var(--gray-500);
  margin: 0;
}

.form-card[b-7k0h05ir4g] {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.form-section[b-7k0h05ir4g] {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--gray-100);
}

.form-section:last-child[b-7k0h05ir4g] {
  border-bottom: none;
}

.form-section-header[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.form-section-icon[b-7k0h05ir4g] {
  width: 40px;
  height: 40px;
  background: var(--primary-100);
  color: var(--primary-600);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-section-icon.blue[b-7k0h05ir4g] {
  background-color: #dbeafe;
  color: #2563eb;
}
.form-section-icon.green[b-7k0h05ir4g] {
  background-color: #dcfce7;
  color: #16a34a;
}
.form-section-icon.purple[b-7k0h05ir4g] {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.form-section-icon.orange[b-7k0h05ir4g] {
  background-color: #fef3c7;
  color: #d97706;
}

.form-section-title h2[b-7k0h05ir4g] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.form-section-title p[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.form-grid[b-7k0h05ir4g] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.form-grid .form-group.full-width[b-7k0h05ir4g] {
  grid-column: 1 / -1;
}

.form-group[b-7k0h05ir4g] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.form-label .required[b-7k0h05ir4g] {
  color: var(--danger-500);
  margin-left: 0.125rem;
}

.form-input[b-7k0h05ir4g] {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  transition: all var(--transition-fast);
  width: 100%;
}

.form-input:focus[b-7k0h05ir4g] {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.form-input[b-7k0h05ir4g]::placeholder {
  color: var(--gray-400);
}

select.form-input[b-7k0h05ir4g] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-hint[b-7k0h05ir4g] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.form-footer[b-7k0h05ir4g] {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

.alert[b-7k0h05ir4g] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.alert-danger[b-7k0h05ir4g] {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-200);
}

.alert-success[b-7k0h05ir4g] {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-200);
}

.toggle-group[b-7k0h05ir4g] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.toggle-item[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-item:hover[b-7k0h05ir4g] {
  background: var(--gray-100);
}

.toggle-switch[b-7k0h05ir4g] {
  width: 44px;
  height: 24px;
  background-color: var(--gray-300);
  border-radius: var(--radius-full);
  position: relative;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.toggle-switch.active[b-7k0h05ir4g] {
  background-color: var(--primary-600);
}

.toggle-switch[b-7k0h05ir4g]::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: var(--radius-full);
  top: 3px;
  left: 3px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-switch.active[b-7k0h05ir4g]::after {
  left: 23px;
}

.toggle-label[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  flex: 1;
}

.role-muted[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.role-inline-link[b-7k0h05ir4g] {
  color: var(--primary-600);
  font-weight: 600;
  text-decoration: none;
}

.role-inline-link:hover[b-7k0h05ir4g] {
  text-decoration: underline;
}

.role-perms-block[b-7k0h05ir4g] {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.role-perms-header[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.role-perms-title[b-7k0h05ir4g] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-perms-count[b-7k0h05ir4g] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background-color: var(--primary-100);
  color: var(--primary-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.role-perms-subtitle[b-7k0h05ir4g] {
  margin-top: 0.35rem;
  margin-bottom: var(--spacing-sm);
  color: var(--gray-500);
  font-size: var(--font-size-xs);
}

.role-perms-list[b-7k0h05ir4g] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-sm);
  max-height: 260px;
  overflow: auto;
  padding-right: 0.25rem;
}

.role-perms-list li[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.role-perms-bullet[b-7k0h05ir4g] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--primary-500);
  flex-shrink: 0;
}

.role-perms-name[b-7k0h05ir4g] {
  word-break: break-word;
}

.attachment-shell[b-7k0h05ir4g] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: var(--spacing-md);
}

.attachment-toolbar[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.attachment-title-wrap[b-7k0h05ir4g] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.attachment-title[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.attachment-hint[b-7k0h05ir4g] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.attachment-count[b-7k0h05ir4g] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  margin-left: var(--spacing-xs);
  border-radius: 999px;
  background-color: var(--primary-100);
  color: var(--primary-700);
  font-size: 0.7rem;
  font-weight: 700;
}

.attachment-input-hidden[b-7k0h05ir4g] {
  display: none;
}

.attachment-list[b-7k0h05ir4g] {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.attachment-item[b-7k0h05ir4g] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background-color: white;
  padding: 0.55rem 0.75rem;
}

.attachment-item-info[b-7k0h05ir4g] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.attachment-item-name[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

.attachment-item-meta[b-7k0h05ir4g] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.attachment-empty[b-7k0h05ir4g] {
  margin-top: var(--spacing-md);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--gray-50);
  padding: var(--spacing-lg);
  text-align: center;
}

.attachment-empty-title[b-7k0h05ir4g] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 600;
}

.attachment-empty-text[b-7k0h05ir4g] {
  margin-top: 0.2rem;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}
@media (max-width: 768px) {
  .form-grid[b-7k0h05ir4g] {
    grid-template-columns: 1fr;
  }

  .role-perms-list[b-7k0h05ir4g] {
    grid-template-columns: 1fr;
    max-height: 300px;
  }
}
/* /Components/Pages/Subscriptions/Index.razor.rz.scp.css */
.subscriptions-page[b-ng5npzea00] {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.subscriptions-header[b-ng5npzea00] {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.subscriptions-header h1[b-ng5npzea00] {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.subscriptions-header p[b-ng5npzea00] {
  font-size: var(--font-size-lg);
  color: var(--gray-500);
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
}

/* Billing Toggle */
.billing-toggle[b-ng5npzea00] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.375rem;
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
}

.billing-toggle-btn[b-ng5npzea00] {
  padding: 0.625rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.billing-toggle-btn.active[b-ng5npzea00] {
  background-color: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.billing-save[b-ng5npzea00] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background-color: #dcfce7;
  color: #15803d;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-sm);
}

/* Current Plan Banner */
.current-plan-banner[b-ng5npzea00] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: linear-gradient(
    135deg,
    var(--primary-600) 0%,
    var(--primary-700) 100%
  );
  border-radius: var(--radius-xl);
  color: white;
  margin-bottom: var(--spacing-xl);
}

.current-plan-info h3[b-ng5npzea00] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.current-plan-info p[b-ng5npzea00] {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  margin: 0;
}

.current-plan-details[b-ng5npzea00] {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.plan-stat[b-ng5npzea00] {
  text-align: center;
}

.plan-stat-value[b-ng5npzea00] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.plan-stat-label[b-ng5npzea00] {
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

/* Pricing Cards */
.pricing-grid[b-ng5npzea00] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.pricing-card[b-ng5npzea00] {
  background-color: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  position: relative;
  transition: all var(--transition-fast);
}

.pricing-card:hover[b-ng5npzea00] {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-lg);
}

.pricing-card.popular[b-ng5npzea00] {
  border-color: var(--primary-500);
  box-shadow:
    0 0 0 1px var(--primary-500),
    var(--shadow-lg);
}

.pricing-card.current[b-ng5npzea00] {
  border-color: var(--success-500);
  background-color: #f0fdf4;
}

.popular-badge[b-ng5npzea00] {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 1rem;
  background: linear-gradient(
    135deg,
    var(--primary-600) 0%,
    var(--primary-700) 100%
  );
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.current-badge[b-ng5npzea00] {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 1rem;
  background: linear-gradient(
    135deg,
    var(--success-500) 0%,
    var(--success-600) 100%
  );
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-header[b-ng5npzea00] {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.pricing-icon[b-ng5npzea00] {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card:nth-child(1) .pricing-icon[b-ng5npzea00] {
  background-color: #f0f9ff;
  color: #0369a1;
}

.pricing-card:nth-child(2) .pricing-icon[b-ng5npzea00] {
  background-color: var(--primary-100);
  color: var(--primary-600);
}

.pricing-card:nth-child(3) .pricing-icon[b-ng5npzea00] {
  background-color: #faf5ff;
  color: #7c3aed;
}

.pricing-card:nth-child(4) .pricing-icon[b-ng5npzea00] {
  background-color: #fef3c7;
  color: #b45309;
}

.pricing-name[b-ng5npzea00] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.pricing-description[b-ng5npzea00] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.pricing-amount[b-ng5npzea00] {
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.pricing-currency[b-ng5npzea00] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  vertical-align: top;
}

.pricing-value[b-ng5npzea00] {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}

.pricing-period[b-ng5npzea00] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.pricing-yearly[b-ng5npzea00] {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: 0.25rem;
}

.pricing-features[b-ng5npzea00] {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
}

.pricing-features li[b-ng5npzea00] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.pricing-features li svg[b-ng5npzea00] {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.pricing-features li svg.check[b-ng5npzea00] {
  color: var(--success-500);
}

.pricing-features li svg.x[b-ng5npzea00] {
  color: var(--gray-300);
}

.pricing-features li.disabled[b-ng5npzea00] {
  color: var(--gray-400);
}

.pricing-cta[b-ng5npzea00] {
  width: 100%;
}

/* Feature Comparison */
.features-section[b-ng5npzea00] {
  margin-bottom: var(--spacing-2xl);
}

.features-header[b-ng5npzea00] {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.features-header h2[b-ng5npzea00] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.features-header p[b-ng5npzea00] {
  font-size: var(--font-size-base);
  color: var(--gray-500);
}

.features-table-wrapper[b-ng5npzea00] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.features-table[b-ng5npzea00] {
  width: 100%;
  border-collapse: collapse;
}

.features-table th[b-ng5npzea00],
.features-table td[b-ng5npzea00] {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.features-table thead th[b-ng5npzea00] {
  background-color: var(--gray-50);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  position: sticky;
  top: 0;
}

.features-table thead th:not(:first-child)[b-ng5npzea00] {
  text-align: center;
  min-width: 120px;
}

.features-table tbody tr:last-child td[b-ng5npzea00] {
  border-bottom: none;
}

.features-table tbody tr:hover[b-ng5npzea00] {
  background-color: var(--gray-50);
}

.feature-category[b-ng5npzea00] {
  background-color: var(--gray-50);
  font-weight: 600;
  color: var(--gray-900);
}

.feature-name[b-ng5npzea00] {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.feature-name small[b-ng5npzea00] {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  font-weight: 400;
  margin-top: 0.125rem;
}

.feature-value[b-ng5npzea00] {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.feature-check[b-ng5npzea00] {
  color: var(--success-500);
}

.feature-x[b-ng5npzea00] {
  color: var(--gray-300);
}

/* FAQ Section */
.faq-section[b-ng5npzea00] {
  margin-bottom: var(--spacing-2xl);
}

.faq-header[b-ng5npzea00] {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.faq-header h2[b-ng5npzea00] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.faq-grid[b-ng5npzea00] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.faq-item[b-ng5npzea00] {
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.faq-question[b-ng5npzea00] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-lg);
  background: none;
  border: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.faq-question:hover[b-ng5npzea00] {
  background-color: var(--gray-50);
}

.faq-question svg[b-ng5npzea00] {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}

.faq-item.open .faq-question svg[b-ng5npzea00] {
  transform: rotate(180deg);
}

.faq-answer[b-ng5npzea00] {
  display: none;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.7;
}

.faq-item.open .faq-answer[b-ng5npzea00] {
  display: block;
}

/* Add-ons Section */
.addons-section[b-ng5npzea00] {
  margin-bottom: var(--spacing-2xl);
}

.addons-header[b-ng5npzea00] {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.addons-header h2[b-ng5npzea00] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.addons-header p[b-ng5npzea00] {
  font-size: var(--font-size-base);
  color: var(--gray-500);
}

.addons-grid[b-ng5npzea00] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-md);
}

.addon-card[b-ng5npzea00] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background-color: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  transition: all var(--transition-fast);
}

.addon-card:hover[b-ng5npzea00] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.addon-info[b-ng5npzea00] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.addon-icon[b-ng5npzea00] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.addon-details h4[b-ng5npzea00] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.addon-details p[b-ng5npzea00] {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.addon-pricing[b-ng5npzea00] {
  text-align: right;
}

.addon-price[b-ng5npzea00] {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--gray-900);
}

.addon-period[b-ng5npzea00] {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

/* CTA Section */
.cta-section[b-ng5npzea00] {
  text-align: center;
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
  border-radius: var(--radius-2xl);
  color: white;
}

.cta-section h2[b-ng5npzea00] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.cta-section p[b-ng5npzea00] {
  font-size: var(--font-size-base);
  opacity: 0.8;
  margin-bottom: var(--spacing-lg);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons[b-ng5npzea00] {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.btn-white[b-ng5npzea00] {
  background-color: white;
  color: var(--gray-900);
  border-color: white;
}

.btn-white:hover[b-ng5npzea00] {
  background-color: var(--gray-100);
}

.btn-white-outline[b-ng5npzea00] {
  background-color: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-white-outline:hover[b-ng5npzea00] {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (min-width: 640px) {
  .pricing-grid[b-ng5npzea00] {
    grid-template-columns: repeat(2, 1fr);
  }

  .addons-grid[b-ng5npzea00] {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-grid[b-ng5npzea00] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .pricing-grid[b-ng5npzea00] {
    grid-template-columns: repeat(4, 1fr);
  }

  .addons-grid[b-ng5npzea00] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .current-plan-banner[b-ng5npzea00] {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-lg);
  }

  .features-table-wrapper[b-ng5npzea00] {
    overflow-x: auto;
  }

  .features-table[b-ng5npzea00] {
    min-width: 700px;
  }
}
/* /Pages/Auth/Login.cshtml.rz.scp.css */
.auth-toast[b-pg32pjsxvw] {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  min-width: 260px;
  max-width: 420px;
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.875rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  animation: toast-in-b-pg32pjsxvw 0.18s ease-out;
}

.auth-toast.error[b-pg32pjsxvw] {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.auth-toast.info[b-pg32pjsxvw] {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1e40af;
}

@keyframes toast-in-b-pg32pjsxvw {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}