/* ===== Klync Design Tokens ===== */
/* All colours flow from these variables. Override --klync-primary/secondary/accent
   at runtime (via Business branding) to re-skin the entire app. */

:root {
    /* ── Brand ── */
    --klync-primary:          #6366f1;
    --klync-primary-hover:    #4f46e5;
    --klync-primary-light:    #a5b4fc;
    --klync-primary-bg:       #1e1b4b;
    --klync-primary-rgb:      99, 102, 241;

    --klync-secondary:        #6c757d;
    --klync-accent:           #22c55e;
    --klync-accent-light:     #4ade80;
    --klync-accent-bg:        #052e16;

    /* ── Light theme (main app) ── */
    --klync-bg:               #f5f7fa;
    --klync-surface:          #ffffff;
    --klync-surface-alt:      #f8f9fa;
    --klync-border:           #dee2e6;
    --klync-border-subtle:    #adb5bd;
    --klync-text:             #212529;
    --klync-text-muted:       #6c757d;

    /* ── Sidebar ── */
    --klync-sidebar-bg:       #2c3e50;
    --klync-sidebar-active:   #3498db;

    /* ── Status ── */
    --klync-danger:           #ef4444;
    --klync-danger-light:     #f87171;
    --klync-danger-dark:      #7f1d1d;
    --klync-danger-bg:        #2d1f1f;
    --klync-warning:          #f59e0b;
    --klync-warning-dark:     #92400e;
    --klync-success:          #22c55e;
    --klync-success-light:    #4ade80;
    --klync-success-bg:       #052e16;
    --klync-error:            #e50000;

    /* ── Dark theme (wizard/chat) ── */
    --klync-dark-bg-deep:     #0f1117;
    --klync-dark-bg-deeper:   #09090b;
    --klync-dark-bg:          #18181b;
    --klync-dark-border:      #27272a;
    --klync-dark-border-subtle: #3f3f46;
    --klync-dark-text-faint:  #52525b;
    --klync-dark-text-muted:  #71717a;
    --klync-dark-text-secondary: #a1a1aa;
    --klync-dark-text:        #e4e4e7;
    --klync-dark-text-bright: #fafafa;

    /* ── Scheduler cell backgrounds ── */
    --klync-sc-working-bg:        #ffffff;
    --klync-sc-non-working-bg:    #f0f0f0;
    --klync-sc-break-bg:          #FFF3E0;
    --klync-sc-location-break-bg: #fff3e0;
    --klync-sc-open-bg:           #dcfce7;
    --klync-sc-closed-bg:         #f3f4f6;
    --klync-sc-other-location-bg: #E3F2FD;
    --klync-sc-pending-bg:        #bbdefb;
    --klync-sc-pending-outline:   #1976d2;

    /* ── Scheduler label text ── */
    --klync-sc-working-text:      #1565C0;
    --klync-sc-break-text:        #37474F;
    --klync-sc-pending-text:      #0d6efd;
    --klync-sc-open-text:         #166534;
    --klync-sc-break-label-text:  #92400e;
    --klync-sc-other-loc-text:    #1976D2;

    /* ── Semantic status (light-mode) ── */
    --klync-info:             #0dcaf0;
    --klync-info-text:        #055160;
    --klync-info-bg:          #cff4fc;
    --klync-info-border:      #b6effb;
    --klync-success-text:     #0f5132;
    --klync-success-bg:       #d1e7dd;
    --klync-success-border:   #badbcc;
    --klync-danger-text:      #842029;
    --klync-danger-bg:        #f8d7da;
    --klync-danger-border:    #f5c2c7;
    --klync-warning-text:     #664d03;
    --klync-warning-bg:       #fff3cd;
    --klync-warning-border:   #ffecb5;

    /* ── Subtle backgrounds (light-mode) ── */
    --klync-primary-subtle-bg:    #cfe2ff;
    --klync-primary-subtle-border:#9ec5fe;
    --klync-primary-subtle-text:  #052c65;
    --klync-success-subtle-bg:    #d1e7dd;
    --klync-success-subtle-border:#a3cfbb;
    --klync-success-subtle-text:  #0a3622;
    --klync-danger-subtle-bg:     #f8d7da;
    --klync-danger-subtle-border: #f1aeb5;
    --klync-warning-subtle-bg:    #fff3cd;
    --klync-warning-subtle-border:#ffe69c;
    --klync-info-subtle-bg:       #cff4fc;
    --klync-info-subtle-border:   #9eeaf9;
    --klync-secondary-subtle-bg:  #e2e3e5;
    --klync-secondary-subtle-border:#c4c8cb;

    /* ── Card ── */
    --klync-card-bg:          #fff;
    --klync-card-border:      rgba(0, 0, 0, 0.125);
    --klync-card-header-bg:   rgba(0, 0, 0, 0.03);

    /* ── Bootstrap overrides (so BS components follow brand) ── */
    --bs-primary:             var(--klync-primary);
    --bs-primary-rgb:         var(--klync-primary-rgb);
}

/* ── Dark mode token overrides ── */
/* BrandThemeProvider sets data-bs-theme on <html> when switching themes */
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* ── Core surfaces ── */
    --klync-bg:               #1a1a1e;
    --klync-surface:          #2a2a2e;
    --klync-surface-alt:      #232327;
    --klync-border:           #3f3f46;
    --klync-border-subtle:    #52525b;
    --klync-text:             #e4e4e7;
    --klync-text-muted:       #a1a1aa;

    /* ── Status ── */
    --klync-info:             #67d6ed;
    --klync-info-text:        #67d6ed;
    --klync-info-bg:          #0c3547;
    --klync-info-border:      #155e75;
    --klync-success-text:     #6ee7b7;
    --klync-success-bg:       #0d2e1f;
    --klync-success-border:   #1a5c3a;
    --klync-danger-text:      #fca5a5;
    --klync-danger-bg:        #3b1c1c;
    --klync-danger-border:    #7f1d1d;
    --klync-warning-text:     #fbbf24;
    --klync-warning-bg:       #3b2e0a;
    --klync-warning-border:   #78540f;

    /* ── Subtle backgrounds ── */
    --klync-primary-subtle-bg:    #1e2a4a;
    --klync-primary-subtle-border:#2d4280;
    --klync-primary-subtle-text:  #93b5ff;
    --klync-success-subtle-bg:    #0d2e1f;
    --klync-success-subtle-border:#1a5c3a;
    --klync-success-subtle-text:  #6ee7b7;
    --klync-danger-subtle-bg:     #3b1c1c;
    --klync-danger-subtle-border: #7f1d1d;
    --klync-warning-subtle-bg:    #3b2e0a;
    --klync-warning-subtle-border:#78540f;
    --klync-info-subtle-bg:       #0c3547;
    --klync-info-subtle-border:   #155e75;
    --klync-secondary-subtle-bg:  #2a2a2e;
    --klync-secondary-subtle-border:#52525b;

    /* ── Card ── */
    --klync-card-bg:          #2a2a2e;
    --klync-card-border:      #3f3f46;
    --klync-card-header-bg:   #232327;

    /* ── Sidebar stays dark in both modes ── */
}

/* ── Scheduler dark mode overrides ── */
[data-bs-theme="dark"] {
    --klync-sc-working-bg:        #1e1e1e;
    --klync-sc-non-working-bg:    #141414;
    --klync-sc-break-bg:          #2a2315;
    --klync-sc-location-break-bg: #2a2315;
    --klync-sc-open-bg:           #0d2818;
    --klync-sc-closed-bg:         #1a1a1c;
    --klync-sc-other-location-bg: #0d1f2d;
    --klync-sc-pending-bg:        #0d2948;
    --klync-sc-pending-outline:   #42a5f5;

    --klync-sc-working-text:      #64b5f6;
    --klync-sc-break-text:        #b0bec5;
    --klync-sc-pending-text:      #64b5f6;
    --klync-sc-open-text:         #66bb6a;
    --klync-sc-break-label-text:  #ffb74d;
    --klync-sc-other-loc-text:    #64b5f6;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--klync-success);
}

.invalid {
    outline: 1px solid var(--klync-error);
}

.validation-message {
    color: var(--klync-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--klync-border-subtle);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Klync Layout Styles */

/* Establish full-height chain so DxDrawer fills the viewport */
html, body {
    height: 100%;
    margin: 0;
}

/* DxDrawer Sidebar Styles */

.sidebar-brand {
    padding: 0.75rem;
}

.sidebar-brand-text {
    padding: 0 0.25rem;
}

.sidebar-title {
    margin: 0;
    color: white;
    font-weight: 600;
}

.sidebar-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.sidebar-toggle:hover {
    color: white;
}

/* Collapsed sidebar — icon-only links */
.sidebar-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.sidebar-icon-link:hover {
    color: white;
}

/* Style the DxDrawer panel */
.dxbl-drawer-panel {
    background-color: var(--klync-sidebar-bg) !important;
    color: white;
}

/* Style DxAccordion inside the drawer — kill ALL borders */
.sidebar-accordion,
.sidebar-accordion .dxbl-accordion-item,
.sidebar-accordion .dxbl-accordion-item-header-content,
.sidebar-accordion .dxbl-accordion-item-content,
.sidebar-accordion .dxbl-accordion-item-expand-btn,
.sidebar-accordion .dxbl-btn,
.sidebar-accordion li,
.sidebar-accordion ul {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

/* Text colours */
.sidebar-accordion .dxbl-accordion-item-header-content,
.sidebar-accordion .dxbl-accordion-item-text,
.sidebar-accordion .dxbl-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-accordion .dxbl-accordion-item-header-content:hover .dxbl-accordion-item-text,
.sidebar-accordion .dxbl-accordion-item-header-content:hover .dxbl-text,
.sidebar-accordion .dxbl-accordion-item-header-content:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Expand/collapse icons */
.sidebar-accordion .dxbl-accordion-item-expand-btn {
    color: rgba(255, 255, 255, 0.7) !important;
    --dxbl-btn-color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar-accordion .dxbl-accordion-item-expand-btn svg {
    fill: rgba(255, 255, 255, 0.7) !important;
}

/* Nav icon colours */
.sidebar-accordion .dxbl-image {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Active/selected state */
.sidebar-accordion .dxbl-active,
.sidebar-accordion .dxbl-selected {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid var(--klync-sidebar-active) !important;
}

/* Child items indented */
.sidebar-accordion .dxbl-accordion-item-content .dxbl-accordion-item {
    padding-left: 1rem;
    font-size: 0.9rem;
}

/* DxDrawer header border — subtle line under Klync header */
.app-drawer .dxbl-drawer-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* DxDrawer fills viewport; .dxbl-drawer-content is the target content container */
.app-drawer {
    height: 100vh;
}

.app-drawer > .dxbl-drawer-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-row {
    background-color: var(--klync-surface-alt);
    border-bottom: 1px solid var(--klync-border);
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.task-bell-btn {
    background: none;
    border: none;
    color: var(--klync-text);
    font-size: 1.25rem;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
}

.task-bell-btn:hover {
    color: var(--klync-primary);
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background-color: var(--klync-bg);
    min-height: 0;
}

/* When ScheduleLayout nests inside MainLayout, remove padding for fullscreen content */
.main-content:has(> .content-fullscreen) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content-fullscreen {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    background: var(--klync-danger);
    color: white;
    padding: 1rem;
    font-size: 1rem;
    display: none;
}
#blazor-error-ui[style*="display: flex"],
#blazor-error-ui[style*="display:flex"] {
    display: flex !important;
}

/* Appointment Type Colour Swatch Picker */
.colour-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.colour-swatch:hover {
    border-color: var(--klync-text);
}
.colour-swatch.selected {
    border-color: var(--klync-text);
    box-shadow: 0 0 0 2px var(--klync-surface), 0 0 0 4px var(--klync-text);
}

/* ── Sortable drag-and-drop ── */
.sortable-ghost {
    opacity: 0.4;
}
.sortable-chosen .card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.drag-handle:hover {
    color: var(--klync-primary) !important;
}

/* ── Appointment type card — themed border + background ── */
.appt-type-card {
    border: 1px solid var(--klync-card-border);
    border-radius: 0.375rem;
    background: var(--klync-card-bg);
}

/* ── Settings toast — themed floating notification ── */
.settings-toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1080;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    max-width: 400px;
}
.settings-toast-success {
    background: var(--klync-success-bg);
    color: var(--klync-success-text);
    border: 1px solid var(--klync-success-border);
}
.settings-toast-danger {
    background: var(--klync-danger-bg);
    color: var(--klync-danger-text);
    border: 1px solid var(--klync-danger-border);
}
.settings-toast-warning {
    background: var(--klync-warning-bg);
    color: var(--klync-warning-text);
    border: 1px solid var(--klync-warning-border);
}
.settings-toast-info {
    background: var(--klync-info-bg);
    color: var(--klync-info-text);
    border: 1px solid var(--klync-info-border);
}

/* ── StatusBadge — themed outline pill ── */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid;
    white-space: nowrap;
    line-height: 1.5;
}
.status-badge-success { color: var(--klync-success); border-color: var(--klync-success); }
.status-badge-danger  { color: var(--klync-danger);  border-color: var(--klync-danger);  }
.status-badge-warning { color: var(--klync-warning); border-color: var(--klync-warning); }
.status-badge-info    { color: var(--klync-info);    border-color: var(--klync-info);    }
.status-badge-primary { color: var(--klync-primary); border-color: var(--klync-primary); }
.status-badge-secondary { color: var(--klync-text-muted); border-color: var(--klync-border); }
.status-badge-purple  { color: #7c3aed; border-color: #7c3aed; }
[data-bs-theme="dark"] .status-badge-purple { color: #a78bfa; border-color: #a78bfa; }

/* ── Read-only field display (looks like a disabled input) ── */
.readonly-field {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--klync-text);
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    background-color: var(--klync-surface-alt);
    border: 1px solid var(--klync-border);
    border-radius: 0.375rem;
}

/* ===== Task Panel (DxWindow) — global dark theme =====
   DxWindow renders at body level, so scoped CSS cannot reach it.
   These styles apply the dark theme to the task panel window. */

.task-panel-window {
    border-radius: 12px !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
}

.task-panel-window .dxbl-window-header {
    background: var(--klync-dark-border, #27272a) !important;
    color: var(--klync-dark-text, #e4e4e7) !important;
    border-bottom: 1px solid var(--klync-dark-border, #27272a) !important;
}

.task-panel-window .dxbl-window-header .dxbl-btn {
    color: var(--klync-dark-text-muted, #71717a) !important;
}

.task-panel-window .dxbl-window-header .dxbl-btn:hover {
    color: var(--klync-dark-text, #e4e4e7) !important;
}

.task-panel-window .dxbl-window-body {
    background: var(--klync-dark-bg, #18181b) !important;
    color: var(--klync-dark-text, #e4e4e7) !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* DxComboBox / DxDateEdit inside task panel — dark inputs */
.task-panel-window .dxbl-edit {
    background-color: var(--klync-dark-border, #27272a) !important;
    color: var(--klync-dark-text, #e4e4e7) !important;
    border-color: var(--klync-dark-border-subtle, #3f3f46) !important;
}

.task-panel-window .dxbl-edit:focus-within {
    border-color: var(--klync-primary, #6366f1) !important;
    box-shadow: 0 0 0 1px var(--klync-primary, #6366f1) !important;
}

.task-panel-window .dxbl-edit input,
.task-panel-window .dxbl-edit .dxbl-edit-input {
    color: var(--klync-dark-text, #e4e4e7) !important;
}

.task-panel-window .dxbl-edit .dxbl-edit-btn {
    color: var(--klync-dark-text-muted, #71717a) !important;
}

/* DxComboBox dropdown list items — dark theme */
.task-panel-window .dxbl-listbox,
.task-panel-window .dxbl-listbox-item {
    background-color: var(--klync-dark-bg, #18181b) !important;
    color: var(--klync-dark-text, #e4e4e7) !important;
}

.task-panel-window .dxbl-listbox-item:hover,
.task-panel-window .dxbl-listbox-item.dxbl-active {
    background-color: rgba(var(--klync-primary-rgb), 0.2) !important;
    color: var(--klync-dark-text-bright) !important;
}

/* DxMemo inside task panel */
.task-panel-window .dxbl-memo {
    background-color: var(--klync-dark-border, #27272a) !important;
    color: var(--klync-dark-text, #e4e4e7) !important;
    border-color: var(--klync-dark-border-subtle, #3f3f46) !important;
}

.task-panel-window textarea {
    color: var(--klync-dark-text, #e4e4e7) !important;
    background: transparent !important;
}

/* Assignee combo item styling — active vs inactive staff.
   Dropdown renders at body level (light bg) so use explicit colors. */
.assignee-active {
    color: var(--klync-text);
    font-weight: 600;
}

.assignee-inactive {
    color: var(--klync-text-muted);
    font-style: italic;
}

.assignee-count {
    display: inline-block;
    background: var(--klync-primary, #6366f1);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    padding: 0 5px;
    margin-left: 6px;
    min-width: 16px;
    text-align: center;
}