/* Custom theming */
:root {
    /* Primary color scale */
    --rcx-primary-25: #e2f5fd;
    --rcx-primary-50: #e2f5fd;
    --rcx-primary-100: #b5e6f9;
    --rcx-primary-200: #85d6f6;
    --rcx-primary-300: #59c5f1;
    --rcx-primary-400: #3bb9f0;
    --rcx-primary-500: #26aced;
    --rcx-primary-600: #229edf; /* dark */
    --rcx-primary-700: #1b8bcb;
    --rcx-primary-800: #197ab7; /* main */
    --rcx-primary-900: #115b95;

    /* Secondary color scale */
    --rcx-secondary-25: #fafafa;
    --rcx-secondary-50: #fafafa;
    --rcx-secondary-100: #f4f4f4;
    --rcx-secondary-200: #ececec;
    --rcx-secondary-300: #dedede;
    --rcx-secondary-400: #bbbbbb;
    --rcx-secondary-500: #9b9b9b; /* main */
    --rcx-secondary-600: #727272;
    --rcx-secondary-700: #5f5f5f;
    --rcx-secondary-800: #5f5f5f;
    --rcx-secondary-900: #404040;
    
    --bs-primary-hover: #15689c;
}

:root[data-theme="dark"] {
    --bs-body-bg: #1a1d23;
    --bs-body-color: #e1e2e4;
    --bs-card-bg: #272c33;
    --bs-border-color: #3a3f48;
}

html[data-theme="dark"] header.header {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
}

html[data-theme="dark"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

html[data-theme="dark"] .card {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

html[data-theme="dark"] .form-check .form-check-label,
html[data-theme="dark"] .form-check .form-check-description {
    color: #878787;
}

html[data-theme="dark"] .table {
    --bs-table-color: #fff;
    --bs-table-bg: #272c33;
    --bs-table-border-color: rgb(82.2, 86.2, 91.8);
    --bs-table-striped-bg: rgb(49.8, 54.55, 61.2);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: rgb(60.6, 65.1, 71.4);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgb(55.2, 59.825, 66.3);
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table tbody td {
    color: var(--bs-table-color);
}

html[data-theme="dark"] .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e1e2e4'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-color: #878787;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #878787;
}

html[data-theme="dark"] .form-check.form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg-color: var(--bs-body-bg);
}

.header,
.main-content .header {
    height: 60px;
}

header.header {
    z-index: 1030;
    left: 0 !important;
}

.current-application {
    opacity: 1;
    transition: opacity 120ms ease;
    margin-top: auto;
    margin-bottom: 0;
    padding: 18px 20px 0 20px;
}

.left-panel.collapsed .current-application {
    opacity: 0;
}

.left-panel.collapsed:hover .current-application {
    transition-delay: 240ms;
    opacity: 1;
}

.current-application-title {
    font-size: 10px;
    font-weight: 600;
    color: #fff6;
    letter-spacing: 1px;
}

*[tabindex="-1"] {
    outline: none;
}

/* User profile name with circle icon */
.header-user {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: currentColor;
}

.header-user .profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--rcx-primary-800);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    font-size: 1rem;
}

.header-user:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    padding: 0;
    border-radius: 0.25rem;
    right: 0;
    top: 100%;
    z-index: 1000;
}

.dropdown-item {
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    color: currentColor;
}

.dropdown-item:hover {
    background-color: var(--bs-primary-hover);
    color: white;
}

.table {
    --bs-table-striped-bg: var(--rcx-secondary-100);
}

.table thead th {
    color: var(--rcx-secondary-500);
}

.form-select {
    padding-right: 3.6rem;
}

.dropdown .dropdown-toggle.show:after {
    transform: scale(-1);
}

.text-body > *:last-child {
    margin-bottom: 0;
}

.form-control--password {
    padding-right: 44px;
}

.form-show-password {
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    transition: color .15s ease;
    box-shadow: none !important;
    border-color: transparent;
    height: 100%;
    background: none;
    color: var(--bs-primary);
}

.form-show-password:focus,
.form-show-password:focus-within {
    outline: none;
}

.form-show-password:hover {
    color: var(--bs-primary-hover);
}

.form-check.form-switch {
    padding-left: 2.5rem;
}

.form-check.form-switch .form-check-input {
    --bs-form-switch-border-color: var(--rcx-secondary-400);
    --bs-form-switch-bg-color: var(--bs-white);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bbbbbb'/%3e%3c/svg%3e");
    margin-right: 0.75rem;
    border-color: var(--bs-form-switch-border-color);
    background-color: var(--bs-form-switch-bg-color);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-border-color: var(--bs-primary);
    --bs-form-switch-bg-color: var(--bs-form-switch-border-color);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-description {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--rcx-secondary-500);
}

.form-switch .form-check-description {
    margin-top: 0;
    padding-left: 0.85rem;
}

.form-control-color {
    border: none;
    height: 1rem;
    padding: 0 !important;
    background: transparent;
}

.form-control-time[readonly] {
    opacity: 1 !important;
    background-color: var(--bs-body-bg) !important;
    text-align: center;
}

.form-check.form-day {
    margin: 0;
    padding-left: 0;
}

.form-check.form-day .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-check.form-day .form-check-label {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
    border-radius: 100%;
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--rcx-secondary-200);
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rcx-secondary-600);
}

.form-check.form-day .form-check-label:hover {
    background-color: var(--rcx-secondary-400);
    color: var(--bs-white);
}

.form-check.form-day .form-check-input:checked + .form-check-label {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.badge {
    --bs-badge-font-size: 0.9em;
}

.btn-ripple {
    --x: 50%;
    --y: 100%;

    position: relative;
    overflow: hidden;
    transition: box-shadow 240ms ease-in-out, border-color 100ms 240ms ease-in-out;
    border-radius: 0.5rem;
}

.btn-ripple:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background-color: var(--bs-btn-bg);
}

.btn-ripple::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    transition: width 360ms ease-in-out, padding 360ms ease-in-out;
    border-radius: 50%;
    width: 0;
    height: 0;
    padding: 0;
    background-color: var(--bs-btn-hover-bg);
    pointer-events: none;
}

.btn-ripple.w-100::before {
    transition-duration: 540ms;
}

.btn-ripple:hover::before {
    width: 300%;
    padding-bottom: 300%;
}

.btn-ripple span,
.btn-ripple i {
    position: relative;
    z-index: 1;
}

.scrollbar-hidden {
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.theme-toggle {
    --toggle-width: 108px;
    --toggle-height: 32px;
    --toggle-color: var(--bs-primary);
    --toggle-bg: var(--rcx-secondary-300);
    --toggle-slider-size: 26px;
    --toggle-slider-bg: var(--bs-white);
    --toggle-duration: 360ms;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    transition: opacity var(--toggle-duration) ease-in-out, background-color var(--toggle-duration) ease-in-out;
    border: none;
    border-radius: var(--toggle-height);
    width: var(--toggle-width);
    height: var(--toggle-height);
    padding: 0 6px;
    background-color: var(--toggle-bg);
    cursor: pointer;
}

.theme-toggle:hover {
    opacity: 0.8;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    transition: color var(--toggle-duration) ease-in-out;
    font-size: 14px;
    color: var(--toggle-color);
}

.theme-toggle .toggle-slider {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translate(0, -50%);
    transition: left var(--toggle-duration) ease-in-out, background var(--toggle-duration) ease-in-out;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    width: var(--toggle-slider-size);
    height: var(--toggle-slider-size);
    background: var(--toggle-slider-bg);
}

/* Dark mode */
[data-theme="dark"] .theme-toggle {
    --toggle-bg: var(--rcx-secondary-900);
    --toggle-color: var(--rcx-secondary-100);
    --toggle-slider-bg: var(--rcx-secondary-400);
}

[data-theme="dark"] .theme-toggle .toggle-slider {
    left: calc(100% - 2px - var(--toggle-slider-size));
}

/* --- Login layout --- */
.login-page {
    --animation-duration: 720ms;
    --animation-delay: 540ms;

    position: relative;
    overflow: hidden;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: #fff;
}

.image-panel {
    position: absolute;
    z-index: 1;
    inset: 0;
    transition: transform var(--animation-duration) ease-in-out;
    transition-delay: var(--animation-delay);
    background-image: url('Resources/LoginImage.jpg');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.form-panel {
    position: absolute;
    z-index: 2;
    inset: 0;
    transform: translateX(-4rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: all var(--animation-duration) ease-in-out;
    transition-delay: var(--animation-delay);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);
    width: 41.67%;
    left: -41.67%;
    background: #fff;
}

.login-page.active .image-panel {
    transform: translateX(41.67%);
}

.login-page.active .form-panel {
    left: 0;
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 720px) {
    .login-page {
        --animation-delay: 0;
        justify-content: center;
        align-items: center;
    }

    .image-panel {
        display: none;
    }

    .form-panel {
        position: relative;
        left: 0;
        transform: translateY(48px);
        opacity: 0;
        transition: transform 720ms ease-in-out, opacity 720ms ease-in-out;
        box-shadow: none;
        width: 100%;
    }

    .login-page.active .form-panel {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .image-panel,
    .form-panel {
        transform: none !important;
        transition: none !important;
    }
}

/* --- Toast layout --- */
.blazored-toast-container {
    position: fixed;
    z-index: 9999;
    top: 4.2rem;
    right: 1rem;
    max-width: calc(100% - 2rem);
}

.blazored-toast {
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: var(--bs-secondary-text-emphasis);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    --bs-alert-color position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: var(--bs-alert-margin-bottom);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    padding-right: 3rem;
    background-color: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

@media (min-width: 540px) {
    .blazored-toast {
        min-width: 456px;
    }
}

.blazored-toast-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-link-color: var(--bs-success-text-emphasis);
    --bs-badge-bg: var(--bs-success-rgb);
    --alert-badge-text: "Success";
}

.blazored-toast-error {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
    --bs-badge-bg: var(--bs-danger-rgb);
    --alert-badge-text: "Failed";
}

.blazored-toast-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
    --bs-badge-bg: var(--bs-warning-rgb);
    --alert-badge-text: "Warning";
}

.blazored-toast-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
    --bs-badge-bg: var(--bs-info-rgb);
    --alert-badge-text: "Info";
}

.blazored-toast-icon {
    --bs-badge-padding-x: .65em;
    --bs-badge-padding-top: .45em;
    --bs-badge-padding-bottom: .65em;
    --bs-badge-font-size: .75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: none;
    margin-right: 0.25rem;
    border-radius: var(--bs-border-radius-pill);
    padding: var(--bs-badge-padding-top) var(--bs-badge-padding-x) var(--bs-badge-padding-bottom) var(--bs-badge-padding-x);
    background-color: rgba(var(--bs-badge-bg), 1);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    color: var(--bs-badge-color);
}

.blazored-toast-icon::before {
    content: var(--alert-badge-text);
}

.blazored-toast-icon svg {
    display: none;
}

.blazored-toast-success .blazored-toast-icon,
.blazored-toast-error .blazored-toast-icon,
.blazored-toast-warning .blazored-toast-icon,
.blazored-toast-info .blazored-toast-icon {
    display: inline-block;
}

.blazored-toast-message {
    display: inline;
    margin: 0;
}

.blazored-toast-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: .5;
    --bs-btn-close-hover-opacity: .75;
    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(3, 169, 243, .25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: .25;
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 0;
    opacity: var(--bs-btn-close-opacity);
    box-sizing: content-box;
    border: 0;
    border-radius: .375rem;
    width: 1em;
    height: 1em;
    padding: 1.25rem 1rem;
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
    filter: var(--bs-btn-close-filter);
    cursor: pointer;
    color: var(--bs-btn-close-color);
}

.blazored-toast-close:hover {
    opacity: var(--bs-btn-close-hover-opacity);
    color: var(--bs-btn-close-color);
    text-decoration: none;
}

.blazored-toast-close i {
    display: none;
}

.calendar-container {
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    max-width: 480px;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: var(--rcx-secondary-600);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
}

.calendar-cell.empty {
    background-color: transparent;
}

.day-pill {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    cursor: default;
    font-size: 0.8rem;
    line-height: 32px;
    text-align: center;
}

.day-pill.normal {
    background-color: var(--rcx-secondary-200);
    color: var(--rcx-secondary-700);
}

.day-pill.open {
    background-color: #58b653;
    font-weight: 600;
    color: white;
}

.day-pill.closed {
    background-color: #ed4b40;
    font-weight: 600;
    color: white;
}

.calendar-month-card {
    border-radius: 8px;
    padding: 8px;
}

.form-select-custom-choices .choices {
    margin-bottom: 0;
}

.form-select-custom-choices .choices__inner {
    height: 37px;
    min-height: 37px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 13px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select-custom-choices .choices__item--selectable {
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 13px;
    color: inherit;
}

.form-select-custom-choices .choices__input {
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 13px;
    color: var(--bs-body-color);
    background-color: transparent !important;
    border: none;
    outline: none;
}

.form-select-custom-choices
.choices[data-type*="select-one"]::after {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-color: var(--bs-body-color) transparent transparent transparent;
}

.form-select-custom-choices .choices__list--dropdown,
.form-select-custom-choices .choices__list[aria-expanded] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    margin-top: 4px;
}

.form-select-custom-choices .choices__list--dropdown .choices__item {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 13px;
    color: var(--bs-body-color);
}

.form-select-custom-choices
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--bs-primary-hover);
    color: #fff;
}

.form-select-custom-choices .choices.is-focused .choices__inner,
.form-select-custom-choices .choices.is-open .choices__inner {
    border-color: #8cbddb;
    box-shadow: 0 0 0 .25rem #197ab740;
    outline: none;
}

html[data-theme="dark"]
.form-select-custom-choices .choices__list--dropdown {
    scrollbar-color: #6c757d #1a1d23;
}

html[data-theme="dark"]
.form-select-custom-choices .choices__list--dropdown::-webkit-scrollbar {
    width: 8px;
}

html[data-theme="dark"]
.form-select-custom-choices .choices__list--dropdown::-webkit-scrollbar-track {
    background: #1a1d23;
}

html[data-theme="dark"]
.form-select-custom-choices .choices__list--dropdown::-webkit-scrollbar-thumb {
    background-color: #6c757d;
    border-radius: 4px;
}

.alert-info .fa-circle-info {
    font-size: 1.5rem;
}