/* Required for indicating mandatory fields */
.required:after {
    content: " *";
    color: red;
}

/* Loader styles for blocking elements during loading */
.loader-container {
    position: absolute; /* anchor to parent */
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(255,255,255,0.8);
    z-index: 10; /* above card-body content */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

/* Fading effect for loading messages */
.loading-message {
    opacity: 1;
    transition: opacity 1.5s ease;
}

    .loading-message.fade-out {
        opacity: 0;
    }

/* IP animation container sizes */
.ip {
    width: 16em;
    height: 8em;
}

/* IP track animation and color */
.ip__track {
    stroke: hsl(var(--hue),90%,90%);
    transition: stroke var(--trans-dur);
}

/* Worm animations for IP */
.ip__worm1,
.ip__worm2 {
    animation: worm1 2s linear infinite;
}

.ip__worm2 {
    animation-name: worm2;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,5%);
        --fg: hsl(var(--hue),90%,95%);
    }

    .ip__track {
        stroke: hsl(var(--hue),90%,15%);
    }
}

/* Animation keyframes for worm movements */
@keyframes worm1 {
    from {
        stroke-dashoffset: 0;
    }

    50% {
        animation-timing-function: steps(1);
        stroke-dashoffset: -358;
    }

    50.01% {
        animation-timing-function: linear;
        stroke-dashoffset: 358;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes worm2 {
    from {
        stroke-dashoffset: 358;
    }

    50% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -358;
    }
}

/* Inline loader container styles */
.loader-container-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column; /* Center the text below the spinner */
    padding: 1em; /* Add padding to ensure content fits well */
    border-radius: 8px; /* Optional: Add border radius for better aesthetics */
}

    .loader-container-inline .ip-inline {
        width: 16em; /* Adjust width for inline display */
        height: 8em; /* Adjust height for inline display */
    }

    .loader-container-inline .ip__track-inline {
        stroke: hsl(var(--hue), 90%, 90%);
        transition: stroke var(--trans-dur);
    }

    .loader-container-inline .ip__worm1-inline,
    .loader-container-inline .ip__worm2-inline {
        animation: worm1 2s linear infinite;
    }

    .loader-container-inline .ip__worm2-inline {
        animation-name: worm2;
    }

/* Dark theme adjustments for inline loader */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 90%, 5%);
        --fg: hsl(var(--hue), 90%, 95%);
    }

    .loader-container-inline .ip__track-inline {
        stroke: hsl(var(--hue), 90%, 15%);
    }
}

/* Header gradient animation for visual effect */
.header-gradient {
    background-image: linear-gradient(to right, rgba(var(--ct-primary-rgb), 0.2) 10%, rgba(255, 255, 255, 0.5) 90%);
    background-size: 200% 100%; /* Extend the background to allow for movement */
    animation: slideGradient 10s linear infinite; /* Animation over 10 seconds */
}

@keyframes slideGradient {
    0% {
        background-position: 0% 0%; /* Start at the left */
    }

    50% {
        background-position: 100% 0%; /* Move to the right */
    }

    100% {
        background-position: 0% 0%; /* Reset to the start */
    }
}


/* Loader visibility controlled via class */
.loader-container {
    opacity: 0;
    transition: opacity .25s ease;
}

    .loader-container.loader-enter {
        opacity: 1;
    }

.cursor-pointer {
    cursor: pointer;
}

/* ===================================
   TRIPLE RING LOADING SPINNER
   =================================== */

/* Loading spinner inline styles */
.loading-spinner-inline {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.spinner-ring-inline {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin-ring 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.spinner-ring-inline:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: rgba(var(--bs-primary-rgb), 0.6);
    animation-delay: -0.5s;
}

.spinner-ring-inline:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: rgba(var(--bs-primary-rgb), 0.4);
    animation-delay: -1s;
}

@keyframes spin-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Stronger active state for side-navs used inside cards or content columns */
.side-nav.SubMenu .side-nav-link {
    position: relative;
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: var(--ct-gray-700, #6c757d);
    transition: background-color .15s ease, color .15s ease;
}

    .side-nav.SubMenu .side-nav-link:hover {
        background: rgba(var(--ct-primary-rgb, 64,81,137), .06);
        color: var(--ct-primary, #405189);
    }

    .side-nav.SubMenu .side-nav-link.active,
    .side-nav.SubMenu .menuitem-active > .side-nav-link {
        background: rgba(var(--ct-primary-rgb, 64,81,137), .12);
        color: var(--ct-primary, #405189);
        font-weight: 600;
    }

        .side-nav.SubMenu .menuitem-active > .side-nav-link::before,
        .side-nav.SubMenu .side-nav-link.active::before {
            content: "";
            position: absolute;
            left: .35rem;
            top: .35rem;
            bottom: .35rem;
            width: .25rem;
            border-radius: .25rem;
            background: var(--ct-primary, #405189);
        }

        .side-nav.SubMenu .menuitem-active i,
        .side-nav.SubMenu .side-nav-link.active i {
            color: var(--ct-primary, #405189);
        }


.sticky-table-headers thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--ct-secondary-bg) !important;
    border-bottom: 1px solid #dee2e6;
}

.text-primary-subtle {
    color: rgba(var(--ct-primary-rgb), var(--ct-border-opacity)) !important;
}

.dropdown-menu.show {
    display: block;
    z-index: 1080;
}

.avatar-crop {
    border-radius: 50%;
    overflow: hidden
}

    .avatar-crop img {
        object-fit: cover;
        transform: scale(1.06)
    }


.topbar-progress {
    height: 3px;
    border-radius: 0;
    background: var(--ct-topbar-bg);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1100;
    pointer-events: none;
    transition: opacity 0.2s, height 0.2s;
    margin: 0;
    padding: 0;
}

/* Hide the wrapper completely when no progress is in flight. Without this
   rule the empty `.topbar-progress.inactive` div still renders as a 3px
   white strip pinned to the top of the viewport (because of the rules above)
   and creates a visible bar above the topbar. */
.topbar-progress.inactive {
    display: none;
}
    .topbar-progress .progress {
        width: 100%;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }

/* Reserve a thin slot at the bottom of the full-width topbar container */
/*.navbar-custom {
    padding-bottom: 3px;*/ /* keep sticky/fixed from theme (no position override) */
/*}*/

/* Full-bleed bar anchored to bottom edge of the sticky/fixed navbar */
.navbar-custom .topbar-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;
    border-radius: 0;
    z-index: 10;
}

/* Smooth width updates */
.topbar-progress .progress-bar {
    transition: width .2s ease;
}

/* Dragula essentials */
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    pointer-events: none;
}
.gu-hide { display: none !important; }
.gu-transit { opacity: .2; }

/* Nice visual cue when a dropzone is active */
.dropzoneTarget.gu-over {
    outline: 2px dashed var(--ct-primary, #405189);
    background-color: rgba(64,81,137,.06);
}

/* ===================================
   SERA CHAT STYLES
   =================================== */

/* Floating Chat Container */
.sera-floating-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* Chat Toggle Button */
.sera-chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sera-chat-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.sera-chat-toggle:active {
    transform: translateY(0);
}

/* Avatar inside button */
.sera-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sera-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Pulse animation when chat is closed */
.sera-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.4);
    animation: sera-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes sera-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Chat Window */
.sera-chat-window {
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 550px;
    max-height: calc(100vh - 100px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sera-slide-up 0.3s ease-out;
}

@keyframes sera-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat Header */
.sera-chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sera-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sera-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: sera-status-pulse 2s ease-in-out infinite;
}

@keyframes sera-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sera-title {
    font-weight: 600;
    font-size: 16px;
}

.sera-chat-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sera-chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sera-chat-close i {
    font-size: 20px;
}

/* Chat Body */
.sera-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sera-chat-body::-webkit-scrollbar {
    width: 6px;
}

.sera-chat-body::-webkit-scrollbar-track {
    background: transparent;
}

.sera-chat-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.sera-chat-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Messages */
.sera-message {
    display: flex;
    gap: 10px;
    animation: sera-message-appear 0.3s ease-out;
}

@keyframes sera-message-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sera-message-user {
    flex-direction: row-reverse;
}

.sera-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sera-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sera-message-content {
    flex: 1;
    min-width: 0;
}

.sera-message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    max-width: 100%;
}

.sera-message-bot .sera-message-bubble {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sera-message-user .sera-message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-left: auto;
}

/* Markdown formatting in messages */
.sera-message-bubble p {
    margin: 0 0 8px 0;
}

.sera-message-bubble p:last-child {
    margin-bottom: 0;
}

.sera-message-bubble ul,
.sera-message-bubble ol {
    margin: 8px 0;
    padding-left: 20px;
}

.sera-message-bubble li {
    margin: 4px 0;
}

.sera-message-bubble code {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.sera-message-bubble pre {
    background: rgba(0, 0, 0, 0.08);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
}

.sera-message-bubble strong {
    font-weight: 600;
}

/* Typing Cursor */
.sera-typing-cursor {
    display: inline-block;
    animation: sera-blink 1s steps(1) infinite;
    margin-left: 2px;
}

@keyframes sera-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Error Message */
.sera-error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.sera-error-message i {
    font-size: 18px;
}

/* Chat Footer */
.sera-chat-footer {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.sera-input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    resize: none;
    max-height: 120px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.sera-input:focus {
    outline: none;
    border-color: #667eea;
}

.sera-input:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
}

.sera-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sera-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.sera-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.sera-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sera-send-btn i {
    font-size: 18px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .sera-floating-chat {
        bottom: 16px;
        right: 16px;
    }
    
    .sera-chat-window {
        width: calc(100vw - 32px);
        height: calc(100vh - 100px);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .sera-chat-window {
        background: #1e293b;
    }
    
    .sera-chat-body {
        background: #0f172a;
    }
    
    .sera-message-bot .sera-message-bubble {
        background: #1e293b;
        color: #e2e8f0;
    }
    
    .sera-input {
        background: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }
    
    .sera-input:focus {
        border-color: #667eea;
    }
    
    .sera-chat-footer {
        background: #1e293b;
        border-top-color: #334155;
    }
    
    .sera-message-bubble code,
    .sera-message-bubble pre {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ==========================================================================
   Lock Screen Styles (Global fallback for security-critical page)
   ========================================================================== */
.lock-screen-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/assets/images/login-bg.jpg') center center / cover no-repeat fixed;
    position: relative;
}

.lock-screen-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.lock-screen-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.lock-screen-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.lock-screen-card .system-logo {
    margin-bottom: 24px;
}

.lock-screen-card .system-logo .logo-img {
    max-height: 48px;
    width: auto;
}

.lock-screen-card .lock-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

.lock-screen-card .lock-avatar .avatar-img,
.lock-screen-card .lock-avatar .avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.lock-screen-card .lock-avatar .avatar-placeholder {
    background: linear-gradient(135deg, #0081B8, #005a82);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-screen-card .lock-avatar .avatar-placeholder span {
    font-size: 32px;
    font-weight: 600;
    color: white;
}

.lock-screen-card .lock-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #D9534F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lock-screen-card .lock-badge i {
    color: white;
    font-size: 14px;
}

.lock-screen-card .user-name {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.lock-screen-card .user-email {
    margin: 0 0 20px 0;
    font-size: 0.875rem;
    color: #64748b;
}

.lock-screen-card .lock-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 10px 20px;
    border-radius: 24px;
    color: #475569;
    font-size: 0.875rem;
    margin-bottom: 24px;
}

.lock-screen-card .lock-message i {
    font-size: 1rem;
    color: #64748b;
}

.lock-screen-card .error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 12px 16px;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.lock-screen-card .unlock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: #0081B8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 129, 184, 0.3);
}

.lock-screen-card .unlock-btn:hover {
    background: #006a99;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 129, 184, 0.4);
    color: white;
}

.lock-screen-card .unlock-btn i {
    font-size: 1.125rem;
}

.lock-screen-card .unlock-hint {
    margin: 16px 0 0 0;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.lock-screen-card .alt-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.lock-screen-card .alt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.lock-screen-card .alt-link:hover {
    color: #0081B8;
}

.lock-screen-card .alt-link i {
    font-size: 1rem;
}

.lock-screen-card .lock-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.lock-screen-card .lock-time i {
    font-size: 0.875rem;
}

@media (max-width: 480px) {
    .lock-screen-card {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .lock-screen-card .lock-avatar .avatar-img,
    .lock-screen-card .lock-avatar .avatar-placeholder {
        width: 80px;
        height: 80px;
    }

    .lock-screen-card .lock-avatar .avatar-placeholder span {
        font-size: 24px;
    }

/* ── Booked Appointment Calendar Events ── */
.fc-event.bg-booked-appointment,
.bg-booked-appointment {
    background-color: #9ca3af !important;
    border-color: #6b7280 !important;
    color: #fff !important;
    opacity: 0.85;
    cursor: default !important;
    border-left: 3px solid #6b7280 !important;
}

.fc-event.bg-booked-appointment .fc-event-title::before {
    content: "\f033c";
    font-family: "Material Design Icons";
    margin-right: 4px;
    font-size: 0.85em;
}
}

/* ============================================================================
   Specialist availability calendar — appointment state styling.
   Applied alongside `bg-booked-appointment` so the base look stays the same
   and the state class adjusts colour / opacity / decoration on top.
   - appt-scheduled:  default (no override) — future appointments not yet actioned
   - appt-past:       muted grey for past appointments without an outcome
   - appt-completed:  green for outcomes that mark the appointment as done
   - appt-cancelled:  red strike-through for cancelled appointments
   ============================================================================ */
.fc-event.appt-past {
    background-color: #cbd5e1 !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
    opacity: 0.7;
}

.fc-event.appt-completed {
    background-color: #198754 !important;
    border-color: #146c43 !important;
    color: #fff !important;
    opacity: 0.95;
}

.fc-event.appt-cancelled {
    background-color: #dc3545 !important;
    border-color: #b02a37 !important;
    color: #fff !important;
    opacity: 0.85;
    text-decoration: line-through;
}

.fc-event.appt-cancelled .fc-event-title,
.fc-event.appt-cancelled .fc-event-time {
    text-decoration: line-through;
}

/* ============================================================================
   FullCalendar — Orcanex theme

   The legacy Hyper colours leaked into the calendar via the bg-success /
   bg-info / bg-warning / bg-secondary classes attached to events, and the
   default Bootstrap toolbar buttons looked nothing like the rest of the app.
   Below we restyle every visible piece so the calendar reads as part of the
   Orcanex design system: tokenised colours, calm panel surfaces, accessible
   contrast on every event tile, and no cross-app inconsistency.

   All overrides go through `!important` because FullCalendar applies inline
   styles (and Bootstrap utilities apply with !important too on the bg-*
   classes themselves), so token-based rules must win the cascade.
   ============================================================================ */

/* Event category swatches at the top — these are picked up by drag/drop. */
.external-event {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 12px !important;
    background: var(--color-panel) !important;
    color: var(--color-text) !important;
    transition: border-color 120ms ease, background 120ms ease;
}
.external-event:hover {
    border-color: var(--color-accent);
    background: var(--color-bg) !important;
}
.external-event .mdi { font-size: 12px; }

.external-event.bg-success-lighten,
.external-event.bg-success-lighten.text-success {
    background: var(--color-success-soft) !important;
    color: var(--color-success) !important;
    border-color: rgba(14, 143, 90, 0.35);
}
.external-event.bg-info-lighten,
.external-event.bg-info-lighten.text-info {
    background: var(--color-accent-soft) !important;
    color: var(--color-accent) !important;
    border-color: rgba(47, 98, 255, 0.35);
}
.external-event.bg-warning-lighten,
.external-event.bg-warning-lighten.text-warning {
    background: var(--color-warn-soft) !important;
    color: var(--color-warn) !important;
    border-color: rgba(182, 120, 31, 0.35);
}
.external-event.bg-secondary-lighten,
.external-event.bg-secondary-lighten.text-secondary {
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border);
}

/* ── FullCalendar layout chrome ── */
.fc {
    font-family: var(--font-family) !important;
    color: var(--color-text);
    --fc-border-color: var(--color-border);
    --fc-page-bg-color: var(--color-panel);
    --fc-neutral-bg-color: var(--color-bg);
    --fc-today-bg-color: var(--color-accent-soft);
    --fc-event-text-color: #fff;
}

.fc .fc-toolbar-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    letter-spacing: 0;
    text-transform: uppercase;
}

.fc .fc-col-header-cell-cushion {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px;
}

.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    font-size: 11px;
    color: var(--color-text-muted);
}

.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-bootstrap td,
.fc-theme-bootstrap th {
    border-color: var(--color-border) !important;
}

/* ── Toolbar buttons (Prev / Next / Today / Month / Week / Day / List) ── */
.fc .fc-button,
.fc .fc-button-primary {
    background-color: var(--color-panel) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.fc .fc-button:hover,
.fc .fc-button-primary:hover {
    background-color: var(--color-bg) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}
.fc .fc-button:focus,
.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 3px var(--color-accent-soft) !important;
}
.fc .fc-button-primary:disabled {
    opacity: 0.5;
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* ── Event tiles — solid, accessible, tokenised ──
   We replace the muted Bootstrap utility classes that the calendar code attaches
   to events with proper Orcanex colours so the title is always readable. The
   classes are double-targeted (.fc-event.bg-X and .bg-X.fc-event) because the
   external-event drop pattern uses one form and the calendar engine uses the
   other. */

.fc-event {
    border-radius: var(--radius-sm) !important;
    border: none !important;
    padding: 2px 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer;
}
.fc-event:not(.bg-booked-appointment):not(.appt-past):not(.appt-completed):not(.appt-cancelled) {
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06);
}

/* Availability — All */
.fc-event.bg-success {
    background-color: var(--color-success) !important;
    color: #fff !important;
    border-left: 3px solid #0a6f47 !important;
}

/* Availability — Video (the pre-Orcanex code uses bg-info for "Video") */
.fc-event.bg-info {
    background-color: var(--color-accent) !important;
    color: #fff !important;
    border-left: 3px solid #1E51EE !important;
}

/* Availability — In Person */
.fc-event.bg-warning {
    background-color: var(--color-warn) !important;
    color: #fff !important;
    border-left: 3px solid #8a5b18 !important;
}

/* Availability — Admin */
.fc-event.bg-secondary {
    background-color: var(--color-text-muted) !important;
    color: #fff !important;
    border-left: 3px solid #4f5560 !important;
}

/* Make sure inner labels inherit the fff colour FullCalendar applies via vars */
.fc-event .fc-event-title,
.fc-event .fc-event-time,
.fc-event .fc-event-title-container {
    color: inherit !important;
    text-shadow: none;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-event .fc-event-main {
    color: inherit !important;
}

/* Today highlight tinted with accent-soft instead of bright Bootstrap yellow */
.fc .fc-day-today {
    background-color: var(--color-accent-soft) !important;
}

/* "More events" link colour */
.fc .fc-more-link {
    color: var(--color-accent) !important;
    font-weight: 500;
}

/* List view rows */
.fc-list-event:hover td { background: var(--color-bg) !important; }
.fc-list-day-cushion {
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
}