/* =====================================================================
   Design tokens — CSS custom properties
   Consumed by Radzen overrides and any custom styles below.
   MudBlazor theming is driven by the C# Theme classes.
   ===================================================================== */
:root {
    /* Brand */
    --brand:             #3b3fcb;
    --brand-600:         #2f33a8;
    --brand-700:         #252882;
    --brand-tint:        #e8e9fb;
    --brand-black:       #0a0a0b;

    /* Slate neutrals */
    --slate-0:   #ffffff;
    --slate-25:  #fbfbfc;
    --slate-50:  #f6f7f9;
    --slate-100: #eef0f3;
    --slate-150: #e4e7ec;
    --slate-200: #d6dae1;
    --slate-300: #bcc2cc;
    --slate-400: #9aa2af;
    --slate-500: #71798a;
    --slate-600: #525a6b;
    --slate-700: #3b4252;
    --slate-800: #272c38;
    --slate-850: #1d2230;
    --slate-900: #151a25;
    --slate-950: #0e121b;

    /* Semantic */
    --green-600:  #1b9a41; --green-tint: #e7f6ec;
    --amber-600:  #d98c12; --amber-tint: #fdf2dc;
    --red-600:    #d92d20; --red-tint:   #fdeceb;
    --info-600:   #1577ae; --info-tint:  #e2f1fa;

    /* Layout */
    --topbar-height: 64px;
    --drawer-width:  248px;
    --drawer-mini:   60px;
}

.only-on-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .only-on-dark {
        display: block;
    }

    .only-on-light {
        display: none;
    }
}
body.dark-mode .mud-elevation-3 {
    box-shadow: 0px 5px 10px rgba(255, 255, 255, 0.12) !important;
}

.rz-scheduler-nav {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-scheduler-nav-title {
    color: var( --mud-palette-text-primary) !important;
}

.rz-button {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-scheduler {
    color: var( --mud-palette-text-primary) !important;
    background: var(--mud-palette-background) !important;
    background-clip: border-box;
}

.rz-view-header {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-text-subtitle1 {
    color: var( --mud-palette-text-primary) !important;
}

.rz-dialog {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-dialog-titlebar, .rz-dialog-side-titlebar {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-dialog-title, .rz-dialog-side-title {
    color: var( --mud-palette-text-primary) !important;
}

.rz-html-editor-content {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

.rz-html-editor-button {
    background-color: var(--mud-palette-background) !important;
/*    color: var( --mud-palette-text-primary) !important;*/
}

.rz-html-editor-toolbar {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}
.rz-html-editor-colorpicker {
    background-color: var(--mud-palette-background) !important;
}

.rz-html-editor-colorpicker .rz-colorpicker-trigger {
    background-color: var(--mud-palette-background) !important;
}

.rz-colorpicker-popup {
    background-color: var(--mud-palette-background) !important;
    color: var( --mud-palette-text-primary) !important;
}

/*text.rz-tick-text {
    fill: var(--mud-palette-black) !important;
}*/

/* ── On-Screen Keyboard ─────────────────────────────────────────── */
.osk-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--mud-palette-surface);
    border-top: 2px solid var(--mud-palette-primary);
    border-radius: 16px 16px 0 0;
    padding: 12px 16px 28px;
    box-shadow: 0 -6px 40px rgba(0,0,0,0.25);
    user-select: none;
    -webkit-user-select: none;
}

.osk-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}

.osk-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.osk-btn-close {
    background: none;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    line-height: 1;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.12s;
}

.osk-btn-close:hover {
    background: var(--mud-palette-action-default-hover);
}

.osk-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.osk-row-inset {
    padding: 0 4.5%;
}

.osk-key {
    flex: 1;
    height: 50px;
    max-width: 76px;
    min-width: 32px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.08s, transform 0.06s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.osk-key:hover {
    background: var(--mud-palette-action-default-hover);
}

.osk-key:active {
    transform: scale(0.92);
    background: var(--mud-palette-primary);
    color: #ffffff;
    border-color: var(--mud-palette-primary);
}

.osk-key-wide {
    flex: 1.6;
    max-width: 108px;
    font-size: 0.82rem;
}

.osk-key-special {
    flex: 1;
    max-width: 60px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.osk-backspace {
    color: var(--red-600, #d92d20);
}

.osk-space {
    flex: 4;
    max-width: 260px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.osk-active {
    background: var(--mud-palette-primary) !important;
    color: #ffffff !important;
    border-color: var(--mud-palette-primary) !important;
}