@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Radzen Theme Overrides */
:root {
    /* Radzen base colors mapped to your palette */
    --rz-base: var(--color-light-secondary) !important;
    --rz-base-50: var(--color-white) !important;
    --rz-base-100: var(--color-light) !important;
    --rz-base-200: var(--color-light-secondary) !important;
    --rz-base-300: var(--color-light-secondary) !important;
    --rz-base-400: var(--color-primary) !important;
    --rz-base-500: var(--color-primary) !important;
    --rz-base-600: var(--color-primary) !important;
    --rz-base-700: var(--color-primary) !important;
    --rz-base-800: var(--color-primary) !important;
    --rz-base-900: var(--color-primary) !important;
    --rz-base-light: var(--color-light-secondary) !important;
    --rz-base-lighter: var(--color-white) !important;
    --rz-base-dark: var(--color-primary) !important;
    --rz-base-darker: var(--color-primary) !important;
    --rz-primary: var(--color-primary) !important;
    --rz-primary-light: var(--color-primary) !important;
    --rz-primary-lighter: var(--color-primary) !important;
    --rz-primary-dark: var(--color-primary) !important;
    --rz-primary-darker: var(--color-primary) !important;
    --rz-secondary: var(--color-accent) !important;
    --rz-secondary-light: var(--color-accent) !important;
    --rz-secondary-lighter: var(--color-accent) !important;
    --rz-secondary-dark: var(--color-accent) !important;
    --rz-secondary-darker: var(--color-accent) !important;
    --rz-info: var(--color-accent) !important;
    --rz-info-light: var(--color-accent) !important;
    --rz-info-lighter: var(--color-accent) !important;
    --rz-info-dark: var(--color-accent) !important;
    --rz-info-darker: var(--color-accent) !important;
    --rz-success: var(--color-accent) !important;
    --rz-success-light: var(--color-accent) !important;
    --rz-success-lighter: var(--color-accent) !important;
    --rz-success-dark: var(--color-accent) !important;
    --rz-success-darker: var(--color-accent) !important;
    --rz-warning: var(--color-warning) !important;
    --rz-warning-light: var(--color-warning) !important;
    --rz-warning-lighter: var(--color-warning) !important;
    --rz-warning-dark: var(--color-warning) !important;
    --rz-warning-darker: var(--color-warning) !important;
    --rz-danger: var(--color-danger) !important;
    --rz-danger-light: var(--color-danger) !important;
    --rz-danger-lighter: var(--color-danger) !important;
    --rz-danger-dark: var(--color-danger) !important;
    --rz-danger-darker: var(--color-danger) !important;
    --rz-on-base: var(--color-primary) !important;
    --rz-on-base-light: var(--color-primary) !important;
    --rz-on-base-lighter: var(--color-primary) !important;
}
/* Table */
.table-action-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.table-action-btn + .table-action-btn {
    margin-left: 8px;
}
.table-action-icon {
    font-size: 13px;
}
/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.5px;
    height: fit-content;
}
.status-badge.confirmed {
    background-color: var(--color-success);
}
.status-badge.not-confirmed {
    background-color: var(--color-warning);
    color: var(--color-primary);
}

:root {
    --color-light: #f7f7f7;
    --color-light-secondary: #d6d6d6;
    --color-accent: #1d7777;
    --color-white: #fff;
    --color-danger: #cb2323;
    --color-primary: #3e3e3e;
    --color-warning: #d8cf27;
    --color-tint: #902a7e;

    /* Hover */
    --color-success: #1db954; /* Added success color */
    --color-light-hover: rgba(214, 214, 214, 0.8);
    --color-primary-hover: #3e3e3efa;
    --color-accent-hover: #196969;

    /* Nav pill */
    --color-nav-pill-bg: #eaeaea;
}

html {
    font-family: 'Montserrat', sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: var(--color-light);
}

p {
    font-family: 'Montserrat', sans-serif;
    margin: 0px !important;
    color: var(--color-primary);
}

.content {
    padding: 20px;
}

/* Widgets */
.widget-1 {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.widget-2 {
    flex: 2;
    padding: 20px;
}

.widget-3 {
    display: flex;
    padding: 20px;
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 24px;
    gap: 10px;
    max-width: 800px;
}

/* 2K and 4K screens: set max-width to 1600px */
@media (min-width: 1920px) {
    .grid-wrapper {
        max-width: 1600px;
    }
}

.grid-controlls {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    gap: 10px;
    height: 36px;
}

/* Validation */
.validation-errors {
    color: var(--color-danger);
    font-size: 12px;
}

/* Raadzen Override */

.rz-pager-page {
    border-radius: 100% !important;
}

.rz-grid-table {
    font-family: 'Montserrat', sans-serif !important;
}

.rz-grid-table thead th {
    background-color: var(--color-nav-pill-bg) !important;
    color: var(--color-primary) !important;
    font-weight: 300 !important;
}

.rz-grid-table thead th .rz-column-title {
    font-weight: 300 !important;
}

/* Rounded corners for first and last th in table row */
.rz-grid-table thead tr th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.rz-grid-table thead tr th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.rz-datatable-data td,
.rz-grid-table td {
    border: none !important;
}

.rz-cell-data {
    color: var(--color-primary) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.rz-pager-element {
    border-radius: 100% !important;
}

.rz-datatable {
    border: none !important;
    box-shadow: none !important;
}

.table-button {
    border: none;
    background-color: transparent;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 200ms;
}

.table-button:hover {
    border: none;
    background-color: var(--color-light-secondary);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 100%;
    transition: background-color 200ms;
}

.rz-datatable-emptymessage {
    font-size: 13px;
    font-weight: 300;
}

.table-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.rz-datatable-loading {
    background-color: transparent !important;
}

/* Radzen DatePicker */

.rz-datepicker-popup-container {
    z-index: 999999 !important;
    right: 40px !important;
}

.rz-datepicker-popup-container {
    height: 41.5px !important;
}

.rz-popup {
    z-index: 999999 !important;
}

.rz-calendar-view {
    background-color: #fff !important;
}

.date-pick {
    background: var(--color-light, #f7f7f7);
    color: var(--color-primary, #3e3e3e);
    border: 1px solid var(--color-light-secondary, #d6d6d6);
    font-family: 'Montserrat', sans-serif;
    border-radius: 30px;
    min-height: 41.5px;
    font-weight: 200;
    padding: 10px 20px;
    min-width: 150px;
    text-align: center;
    font-size: 16px;
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

/* Radzen File upload */
.rz-fileupload-buttonbar {
    border-radius: 30px !important;
    padding: 6px 16px !important;
    background: var(--color-light) !important;
    border: 1px solid var(--color-light-secondary, #d6d6d6);
}
.rz-fileupload-choose rz-button {
    border-radius: 6px !important;
}
.rz-fileupload-row {
    font-size: 10px !important;
}
/* Utilites */
.flex-1 {
    flex: 1;
}

/* Appointment Switch Styles */
.switch-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.switch-title {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-primary);
}

.switch-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.switch-label {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 400;
}

/* Radzen Switch Overrides */

.rz-switch .rz-switch-circle {
    border-radius: 20px !important;
}

.rz-switch .rz-switch-circle:before {
    border-radius: 100% !important;
}

/* Radzen Time Picker */
.rz-inputtext {
    border-radius: 30px !important;
    cursor: pointer !important;
}

.rz-inputtext:hover {
    border-color: var(--color-accent) !important;
}

.rz-timespanpicker-popup-container {
    z-index: 999999 !important;
}

/* Radzen Tabs */
.rz-tabview-nav li {
    background-color: var(--color-nav-pill-bg) !important;
    color: var(--color-primary) !important;
    border-left: none;
    border-bottom: 0px;
    border-right: 0px;
}

.rz-tabview-top > .rz-tabview-nav li {
    border-top-width: 2px;
    border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0;
    border-bottom: 0px;
    border-right: 0px;
}

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background-color: var(--color-light) !important;
}

.t-tabs {
    padding-top: 20px;
}

/* Sections */

.section-title {
    font-size: 20px;
    font-weight: 200;
    margin: 0px;
}