/*
 * dhtmlxscheduler.material.modified.css
 * Visual override layer for DHTMLX Scheduler v5 Material theme.
 * Imports the foundation then applies 2026-premium aesthetics via CSS variables.
 * Geometry (top/left/width/height/display/position) on event containers is
 * never touched here — only color, background, border, shadow, font, and transition.
 */

/* ─────────────────────────────────────────────
   DESIGN TOKENS  — change one value, repaint everywhere
   Material variant: deeper indigo-blue accent over the flat Material base
   ───────────────────────────────────────────── */
:root {
    /* Brand accent — elevated from Material's #0288D1 to a richer indigo */
    --dhx-accent:              #3B6FEA;
    --dhx-accent-hover:        #2B5DD4;
    --dhx-accent-active:       #1E4EBF;
    --dhx-accent-lighter:      rgba(59, 111, 234, 0.10);
    --dhx-accent-text:         #ffffff;

    /* Surfaces */
    --dhx-bg-soft:             #F4F6FB;
    --dhx-bg-white:            #ffffff;
    --dhx-bg-today:            #EBF1FF;

    /* Borders — finer than Material's original e0e0e0 */
    --dhx-border-color:        #DDE3EE;
    --dhx-border-thin:         1px solid var(--dhx-border-color);
    --dhx-border-radius:       6px;
    --dhx-border-radius-sm:    4px;

    /* Text */
    --dhx-text-base:           #1A1F2E;
    --dhx-text-light:          #4A505F;
    --dhx-text-muted:          #8C93A2;

    /* Shadows — richer depth than Material's original flat style */
    --dhx-shadow-s:            0 2px 8px rgba(30, 40, 80, 0.08);
    --dhx-shadow-m:            0 4px 24px rgba(30, 40, 80, 0.16);
    --dhx-shadow-l:            0 8px 40px rgba(30, 40, 80, 0.24);
    --dhx-shadow-glass:        0 8px 32px rgba(59, 111, 234, 0.14),
                               0 2px 8px rgba(30, 40, 80, 0.08);

    /* Event gradients — premium over Material's flat single-color events */
    --dhx-event-gradient:      linear-gradient(160deg, #3B6FEA 0%, #7C3AED 100%);
    --dhx-event-gradient-alt:  linear-gradient(160deg, #06B6D4 0%, #10B981 100%);
    --dhx-event-color:         rgba(255, 255, 255, 0.95);

    /* Danger */
    --dhx-danger:              #EF4444;
    --dhx-danger-lighter:      rgba(239, 68, 68, 0.10);

    /* Motion */
    --dhx-transition:          all 0.2s ease;
    --dhx-transition-slow:     all 0.35s ease;

    /* Font — Inter replaces Roboto for a crisper 2026 feel */
    --dhx-font:                Inter, Roboto, Helvetica, Arial, sans-serif;
    --dhx-font-size:           13px;
}


/* Font import removed: app-level Inter is loaded once in index.html */


/* ─────────────────────────────────────────────
   CONTAINER
   ───────────────────────────────────────────── */
.dhx_cal_container {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    background-color: var(--dhx-bg-white);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-s);
}


/* ─────────────────────────────────────────────
   NAV BAR
   ───────────────────────────────────────────── */
.dhx_cal_navline {
    color: var(--dhx-text-light);
    border-bottom: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_cal_navline .dhx_cal_date {
    font-family: var(--dhx-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--dhx-text-base);
    letter-spacing: -0.2px;
}

/* ── Base state: all three nav buttons ───────────────────────────── */
.dhx_cal_prev_button,
.dhx_cal_next_button,
.dhx_cal_today_button {
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    color: var(--dhx-text-light);
    background-color: var(--dhx-bg-white);
    box-shadow: none;
    transition: var(--dhx-transition);
}

/* ── Specificity fix: material uses .dhx_cal_navline prefix (2 classes)
      so we must match it to override border-radius: 50% on prev/next hover
      and transparent border / rgba bg on today hover ──────────────────── */
.dhx_cal_navline .dhx_cal_prev_button,
.dhx_cal_navline .dhx_cal_next_button {
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    background-color: var(--dhx-bg-white);
    transition: var(--dhx-transition);
}

/* Today button — material sets border-radius: 2px and text-transform: uppercase */
.dhx_cal_navline .dhx_cal_today_button {
    font-family: var(--dhx-font);
    font-weight: 500;
    font-size: var(--dhx-font-size);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    color: var(--dhx-text-light);
    background-color: var(--dhx-bg-white);
    text-transform: none;
    transition: var(--dhx-transition);
}

/* Prev icon shape — keep SVG image, override the chrome only */
.dhx_cal_prev_button { border-radius: var(--dhx-border-radius-sm) 0 0 var(--dhx-border-radius-sm); }
.dhx_cal_next_button { border-radius: 0 var(--dhx-border-radius-sm) var(--dhx-border-radius-sm) 0; }

/* ── HOVER states (high-specificity to beat material's defaults) ── */
.dhx_cal_navline .dhx_cal_prev_button:hover,
.dhx_cal_navline .dhx_cal_next_button:hover {
    background-color: var(--dhx-accent-lighter);
    border-color: var(--dhx-accent);
    border-radius: var(--dhx-border-radius-sm);   /* override material's border-radius:50% */
    color: var(--dhx-accent);
    box-shadow: var(--dhx-shadow-s);
}

.dhx_cal_navline .dhx_cal_today_button:hover {
    background-color: var(--dhx-accent-lighter);
    border: var(--dhx-border-thin);               /* override material's transparent border */
    border-color: var(--dhx-accent);
    color: var(--dhx-accent);
    box-shadow: var(--dhx-shadow-s);
}

/* ── ACTIVE states ───────────────────────────────────────────────── */
.dhx_cal_navline .dhx_cal_prev_button:active,
.dhx_cal_navline .dhx_cal_next_button:active {
    background-color: var(--dhx-accent);
    border-color: var(--dhx-accent);
    border-radius: var(--dhx-border-radius-sm);
    color: var(--dhx-accent-text);
    box-shadow: none;
}

.dhx_cal_navline .dhx_cal_today_button:active {
    background-color: var(--dhx-accent-active);
    border-color: var(--dhx-accent-active);
    color: var(--dhx-accent-text);
    box-shadow: none;
}


/* ─────────────────────────────────────────────
   VIEW TABS  (day / week / month / year)
   Material base: border-radius:0, flat border, #0288d1 color
   We apply accent colour and proper rounding for ALL tabs uniformly
   ───────────────────────────────────────────── */

/* Base — all tabs including year_tab */
.dhx_cal_tab {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    font-weight: 500;
    color: var(--dhx-accent);
    border: 1px solid var(--dhx-accent);
    background-color: var(--dhx-bg-white);
    border-radius: 0;
    box-shadow: none;
    transition: var(--dhx-transition);
    text-transform: none;
}

/* Rounded ends — first and last in the segmented group */
.dhx_cal_tab_first { border-radius: var(--dhx-border-radius-sm) 0 0 var(--dhx-border-radius-sm); }
.dhx_cal_tab_last  { border-radius: 0 var(--dhx-border-radius-sm) var(--dhx-border-radius-sm) 0; }

/* Standalone tab (year_tab when used alone) */
.dhx_cal_tab_standalone {
    border-radius: var(--dhx-border-radius-sm) !important;
    margin: 0 4px;
}

/* HOVER — override material's #edf8ff */
.dhx_cal_tab:hover {
    background-color: var(--dhx-accent-lighter);
    color: var(--dhx-accent-hover);
    border-color: var(--dhx-accent-hover);
    box-shadow: var(--dhx-shadow-s);
}

/* ACTIVE (click/press) */
.dhx_cal_tab:active {
    background-color: var(--dhx-accent-active);
    color: var(--dhx-accent-text);
    border-color: var(--dhx-accent-active);
    box-shadow: none;
}

/* SELECTED tab */
.dhx_cal_tab.active {
    background-color: var(--dhx-accent);
    color: var(--dhx-accent-text);
    border-color: var(--dhx-accent);
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(59, 111, 234, 0.30);
}

/* SELECTED + hover — override material's .dhx_cal_tab.active:hover */
.dhx_cal_tab.active:hover {
    background-color: var(--dhx-accent-hover);
    color: var(--dhx-accent-text);
    border-color: var(--dhx-accent-hover);
}

/* SELECTED + active (mouse held down) */
.dhx_cal_tab.active:active {
    background-color: var(--dhx-accent-active);
    color: var(--dhx-accent-text);
    border-color: var(--dhx-accent-active);
}


/* ─────────────────────────────────────────────
   HEADER / SCALE BARS
   ───────────────────────────────────────────── */
.dhx_cal_header {
    background-color: var(--dhx-bg-soft);
    border-top: var(--dhx-border-thin);
    border-right: var(--dhx-border-thin);
}

.dhx_scale_bar {
    font-family: var(--dhx-font);
    font-size: 11px;
    font-weight: 500;
    color: var(--dhx-text-muted);
    border-left: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_scale_hour {
    font-family: var(--dhx-font);
    font-size: 11px;
    color: var(--dhx-text-muted);
    border-bottom: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_cal_data { border-top: var(--dhx-border-thin); }

.dhx_scale_holder { border-right: var(--dhx-border-thin); }

/* Material has a scale placeholder shadow — leave it, just ensure border is ours */
.dhx_cal_scale_placeholder {
    border-bottom: var(--dhx-border-thin);
}


/* ─────────────────────────────────────────────
   EVENTS  — color & decoration only, never geometry
   Material base used a flat single-color; we add gradient + hover glow
   ───────────────────────────────────────────── */
.dhx_cal_event .dhx_body,
.dhx_cal_event .dhx_footer,
.dhx_cal_event .dhx_header,
.dhx_cal_event .dhx_title {
    background: var(--dhx-event-gradient);
    color: var(--dhx-event-color);
    border-color: transparent;
    font-family: var(--dhx-font);
    transition: var(--dhx-transition);
}

.dhx_cal_event .dhx_title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--dhx-border-radius-sm) var(--dhx-border-radius-sm) 0 0;
    border-bottom-style: solid;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.dhx_cal_event .dhx_body {
    font-size: var(--dhx-font-size);
    font-weight: 400;
    border-radius: 0 0 var(--dhx-border-radius-sm) var(--dhx-border-radius-sm);
    padding: 4px 6px 6px;
}

/* Material uses drag-horizontal.svg for resize handle — preserve the SVG, style the bg */
.dhx_cal_event .dhx_footer,
.dhx_cal_event .dhx_select_menu_footer {
    background-image: url(imgs_dhx_material/drag-horizontal.svg);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    /* Tint the bar with the gradient via pseudo (not possible on non-::before) — use bg-color from gradient end */
    background-color: rgba(124, 58, 237, 0.75);
}

/* Hover glow — only on interior divs, not the event container itself */
.dhx_cal_event:hover .dhx_body,
.dhx_cal_event:hover .dhx_title {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px rgba(59, 111, 234, 0.32);
}

/* Multi-day / all-day event line */
.dhx_cal_event_line {
    background: var(--dhx-event-gradient);
    color: var(--dhx-event-color);
    border-color: transparent;
    border-radius: var(--dhx-border-radius-sm);
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 500;
    transition: var(--dhx-transition);
    box-shadow: none;
}

.dhx_cal_event_line:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 10px rgba(59, 111, 234, 0.28);
}

.dhx_cal_event_line_start { border-radius: var(--dhx-border-radius-sm) 0 0 var(--dhx-border-radius-sm); }
.dhx_cal_event_line_end   { border-radius: 0 var(--dhx-border-radius-sm) var(--dhx-border-radius-sm) 0; }

/* Resize dots (timeline drag handles) */
.dhx_cal_event_line .dhx_event_resize {
    background: url(imgs_dhx_material/drag-vertical.svg) center center no-repeat;
    background-color: rgba(0,0,0,0.12);
}

/* "Clear" — month view text event */
.dhx_cal_event_clear {
    color: var(--dhx-accent);
    font-family: var(--dhx-font);
    font-size: 12px;
}

/* Selected event */
.dhx_cal_event_selected .dhx_body,
.dhx_cal_event_selected .dhx_title {
    filter: brightness(0.88);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
}


/* ─────────────────────────────────────────────
   DRAG MARKER
   ───────────────────────────────────────────── */
.dhx_drag_marker {
    background-color: var(--dhx-accent-lighter);
    border-top: 1px solid var(--dhx-accent);
    border-bottom: 1px solid var(--dhx-accent);
    opacity: 0.55;
}


/* ─────────────────────────────────────────────
   FOCUS SLOT
   ───────────────────────────────────────────── */
.dhx_focus_slot {
    background: var(--dhx-accent-lighter);
    opacity: 0.45;
    transition: var(--dhx-transition);
}


/* ─────────────────────────────────────────────
   CURRENT TIME INDICATOR
   Material had red — we use accent
   ───────────────────────────────────────────── */
.dhx_now_time {
    border-bottom: 2px solid var(--dhx-accent);
    opacity: 0.7;
}

.dhx_scheduler_month .dhx_now_time {
    border-left: 2px solid var(--dhx-accent);
    border-bottom: none;
}

.dhx_matrix_now_time {
    border-left: 2px solid var(--dhx-accent);
}


/* ─────────────────────────────────────────────
   MONTH VIEW CELLS
   ───────────────────────────────────────────── */
.dhx_month_head {
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--dhx-text-base);
    border-right: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_month_body {
    border-right: var(--dhx-border-thin);
    border-bottom: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_after .dhx_month_head,
.dhx_before .dhx_month_head {
    color: var(--dhx-text-muted);
}

/* Today cell */
.dhx_now .dhx_month_head,
.dhx_now .dhx_month_body {
    background-color: var(--dhx-bg-today);
}

.dhx_now .dhx_month_head {
    color: var(--dhx-accent);
    font-weight: 700;
}

/* Month link ("more" overflow) */
.dhx_month_link a {
    color: var(--dhx-accent);
    font-family: var(--dhx-font);
    font-size: 11px;
}

.dhx_month_link a:hover {
    color: var(--dhx-accent-hover);
    text-decoration: underline;
}

/* Year event dot */
.dhx_month_head.dhx_year_event {
    background-color: var(--dhx-accent-lighter);
    color: var(--dhx-accent);
}


/* ─────────────────────────────────────────────
   TIMELINE (workload / shift views)
   ───────────────────────────────────────────── */
.dhx_matrix_cell,
.dhx_matrix_scell {
    border-bottom: var(--dhx-border-thin);
    border-right: var(--dhx-border-thin);
    font-family: var(--dhx-font);
}

.dhx_matrix_cell { background-color: var(--dhx-bg-white); }

.dhx_matrix_scell {
    font-size: 12px;
    font-weight: 500;
    color: var(--dhx-text-light);
}

.dhx_matrix_scell.folder {
    background-color: var(--dhx-bg-soft);
    color: var(--dhx-accent);
    font-weight: 600;
}

.dhx_data_table.folder .dhx_matrix_cell {
    background-color: var(--dhx-bg-soft);
}

/* Tree timeline expand arrow — material uses SVG; keep it, update the bg tint */
.dhx_timeline_folder_row .dhx_matrix_scell,
.dhx_matrix_scell.dhx_treetimeline_scell_level0 {
    background-color: var(--dhx-bg-soft);
}


/* ─────────────────────────────────────────────
   LIGHTBOX  — glassmorphism 2026 over Material's box-shadow base
   ───────────────────────────────────────────── */
.dhx_cal_light,
.dhx_cal_light_wide,
.dhx_cal_light_rec {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(221, 227, 238, 0.70);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-glass);
}

/* Material lightbox title strip — replace the full-blue strip with a refined header */
.dhx_cal_ltitle {
    font-family: var(--dhx-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--dhx-text-base);
    background: linear-gradient(135deg, var(--dhx-bg-soft) 0%, rgba(221, 227, 238, 0.5) 100%);
    border-bottom: var(--dhx-border-thin);
    letter-spacing: -0.1px;
    padding: 2px 14px;
    border-radius: var(--dhx-border-radius) var(--dhx-border-radius) 0 0;
    text-transform: none;
}

.dhx_cal_ltitle span { color: var(--dhx-text-base); }

/*
 * Material also styles the title text via a higher-specificity rule:
 *   .dhx_cal_light .dhx_title { color:#fff; text-transform:uppercase }  (0,2,0)
 * We must match or beat that specificity to apply our preferences.
 */
.dhx_cal_light .dhx_title {
    color: var(--dhx-text-base);
    text-transform: none;
    font-family: var(--dhx-font);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.1px;
}

.dhx_time {
    font-family: var(--dhx-font);
    font-weight: 600;
    color: var(--dhx-accent);
}

/* Section labels */
.dhx_cal_lsection {
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--dhx-text-muted);
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Textarea */
.dhx_cal_ltext textarea {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    background-color: var(--dhx-bg-soft);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
}

.dhx_cal_ltext textarea:focus {
    outline: none;
    border-color: var(--dhx-accent);
    box-shadow: 0 0 0 3px var(--dhx-accent-lighter);
    background-color: var(--dhx-bg-white);
}

/* Selects & inputs in lightbox */
.dhx_cal_light select,
.dhx_cal_light input {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
}

/* Material time select dropdowns — override the SVG bg-image with border box */
.dhx_section_time select {
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    background-color: var(--dhx-bg-white);
    color: var(--dhx-text-base);
    font-family: var(--dhx-font);
}

/* Wrap sections */
.dhx_cal_light_wide .dhx_wrap_section {
    border-bottom: var(--dhx-border-thin);
}

/* Lightbox body area */
.dhx_cal_larea {
    background-color: rgba(255, 255, 255, 0.96);
}

/* Close icon */
.dhx_close_icon {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.dhx_close_icon:hover { opacity: 1; }


/* ─────────────────────────────────────────────
   LIGHTBOX BUTTONS (Save / Delete / Cancel)
   Material originally used text-transform:uppercase — we normalise
   ───────────────────────────────────────────── */
.dhx_btn_set,
.dhx_cancel_btn_set {
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
    height: 32px;
    text-transform: none;
}

/*
 * Inner <div> of each button carries the label text.
 * Material's .dhx_save_btn_set:hover div (specificity 0,2,1) sets its own
 * background-color on hover — we must explicitly keep inner divs transparent
 * so the outer container color always shows through cleanly.
 */
.dhx_save_btn_set div,
.dhx_cancel_btn_set div,
.dhx_delete_btn_set div {
    background-color: transparent;
    border: none;
}

/* Save */
.dhx_save_btn_set {
    background-color: var(--dhx-accent);
    border: 1px solid var(--dhx-accent);
    color: var(--dhx-accent-text);
    text-shadow: none;
    border-radius: var(--dhx-border-radius-sm);
}

/* Beats Material's .dhx_save_btn_set:hover div (0,2,1) */
.dhx_save_btn_set:hover,
.dhx_save_btn_set:hover div {
    background-color: var(--dhx-accent-hover);
    border-color: var(--dhx-accent-hover);
    transition: var(--dhx-transition);
}

.dhx_save_btn_set:active,
.dhx_save_btn_set:active div {
    background-color: var(--dhx-accent-active);
    border-color: var(--dhx-accent-active);
}

/* Delete */
.dhx_delete_btn_set {
    background-color: var(--dhx-danger);
    border: 1px solid var(--dhx-danger);
    color: #fff;
    text-shadow: none;
    border-radius: var(--dhx-border-radius-sm);
}

.dhx_delete_btn_set:hover,
.dhx_delete_btn_set:hover div {
    background-color: #DC2626;
    border-color: #DC2626;
    transition: var(--dhx-transition);
}

/* Cancel */
.dhx_cancel_btn_set {
    background-color: transparent;
    border: var(--dhx-border-thin);
    color: var(--dhx-text-light);
    border-radius: var(--dhx-border-radius-sm);
}

.dhx_cancel_btn_set:hover,
.dhx_cancel_btn_set:hover div {
    background-color: var(--dhx-bg-soft);
    border-color: var(--dhx-accent);
    color: var(--dhx-accent);
    transition: var(--dhx-transition);
}


/* ─────────────────────────────────────────────
   QUICK INFO POPUP
   ───────────────────────────────────────────── */
.dhx_cal_quick_info {
    font-family: var(--dhx-font);
    background-color: rgba(26, 31, 46, 0.90);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-m);
}

/* Override Material's .dhx_cal_qi_title { background-color: #0288d1 } */
.dhx_cal_qi_title {
    background: linear-gradient(135deg, var(--dhx-accent) 0%, var(--dhx-accent-hover) 100%);
    color: rgba(255, 255, 255, 0.95);
    border-radius: var(--dhx-border-radius) var(--dhx-border-radius) 0 0;
    padding: 10px 12px;
}

.dhx_cal_qi_tdate {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.70);
}

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

.dhx_cal_qi_content {
    background-color: rgba(255, 255, 255, 0.97);
    border: none;
    border-radius: 0 0 var(--dhx-border-radius) var(--dhx-border-radius);
    color: var(--dhx-text-base);
    font-size: var(--dhx-font-size);
}

.dhx_qi_big_icon {
    background-color: var(--dhx-accent);
    border: none;
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
}

.dhx_qi_big_icon:hover { background-color: var(--dhx-accent-hover); }


/* ─────────────────────────────────────────────
   TOOLTIP
   ───────────────────────────────────────────── */
.dhtmlXTooltip.tooltip {
    font-family: var(--dhx-font);
    font-size: 12px;
    color: var(--dhx-text-base);
    background-color: var(--dhx-bg-white);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    box-shadow: var(--dhx-shadow-s);
}


/* ─────────────────────────────────────────────
   MODAL / ALERT DIALOGS
   ───────────────────────────────────────────── */
.dhtmlx_modal_box {
    font-family: var(--dhx-font);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-l);
    border: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhtmlx_popup_text {
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}

.dhtmlx_popup_button.dhtmlx_ok_button,
.dhtmlx_popup_button.dhtmlx_ok_button div {
    background: var(--dhx-accent);
    border-color: var(--dhx-accent);
    color: var(--dhx-accent-text);
}

.dhtmlx_popup_button.dhtmlx_ok_button:hover,
.dhtmlx_popup_button.dhtmlx_ok_button div:hover {
    background: var(--dhx-accent-hover);
    border-color: var(--dhx-accent-hover);
}


/* ─────────────────────────────────────────────
   MINI CALENDAR
   ───────────────────────────────────────────── */
.dhx_cal_container.dhx_mini_calendar {
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-s);
    background-color: var(--dhx-bg-white);
}

.dhx_mini_calendar .dhx_month_head {
    font-family: var(--dhx-font);
    font-size: 12px;
    color: var(--dhx-text-base);
}

.dhx_mini_calendar .dhx_calendar_click,
.dhx_mini_calendar .dhx_year_event {
    background-color: var(--dhx-accent-lighter);
    color: var(--dhx-accent);
    border-radius: 50%;
}

.dhx_mini_calendar .dhx_year_month {
    font-family: var(--dhx-font);
    font-weight: 600;
    color: var(--dhx-text-base);
    border-color: var(--dhx-border-color);
}


/* ─────────────────────────────────────────────
   AGENDA VIEW
   ───────────────────────────────────────────── */
.dhx_agenda_line span,
.dhx_agenda_line div {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}

.dhx_agenda_line {
    border-bottom: var(--dhx-border-thin);
    transition: background-color 0.15s ease;
}

.dhx_agenda_line:hover { background-color: var(--dhx-bg-today); }

.dhx_v_border { border-right: var(--dhx-border-thin); }

/* Material agenda has a calendar SVG icon — leave it, just set row hover */
.dhx_scheduler_agenda .dhx_cal_data {
    background-color: var(--dhx-bg-white);
}


/* ─────────────────────────────────────────────
   MAP VIEW
   ───────────────────────────────────────────── */
.dhx_map_line {
    border-bottom: var(--dhx-border-thin);
    font-family: var(--dhx-font);
    transition: background-color 0.15s ease;
}

.dhx_map_line.highlight { background-color: var(--dhx-bg-today); }


/* ─────────────────────────────────────────────
   LOADING INDICATOR
   ───────────────────────────────────────────── */
.dhx_loading { opacity: 0.7; }


/* ─────────────────────────────────────────────
   WEEK AGENDA (wa_ views)
   ───────────────────────────────────────────── */
.dhx_wa_scale_bar {
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--dhx-text-muted);
    background-color: var(--dhx-bg-soft);
    border-top: var(--dhx-border-thin);
    border-bottom: var(--dhx-border-thin);
}

.dhx_wa_ev_body {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    border-bottom: var(--dhx-border-thin);
    transition: background-color 0.15s ease;
}

.dhx_wa_ev_body.dhx_cal_event_selected {
    background-color: var(--dhx-bg-today);
    color: var(--dhx-accent);
}

.dhx_wa_dnd {
    background-color: #fddb93 !important;
    color: var(--dhx-text-base) !important;
    border: 1px solid #ccb177;
}


/* ─────────────────────────────────────────────
   CUSTOM BUTTONS (recurring / lightbox extra)
   ───────────────────────────────────────────── */
.dhx_custom_button {
    font-family: var(--dhx-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--dhx-text-light);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    background-color: var(--dhx-bg-white);
    transition: var(--dhx-transition);
}

.dhx_custom_button:hover {
    background-color: var(--dhx-accent-lighter);
    border-color: var(--dhx-accent);
    color: var(--dhx-accent);
}


/* ─────────────────────────────────────────────
   MULTI-DAY ROW ICONS (clock badges)
   Material uses PNG clocks
   ───────────────────────────────────────────── */
.dhx_multi_day {
    border-top: var(--dhx-border-thin);
    background-color: var(--dhx-bg-white);
}

.dhx_multi_day_icon,
.dhx_multi_day_icon_small {
    border-bottom: var(--dhx-border-thin);
    border-right: var(--dhx-border-thin);
    background-color: var(--dhx-bg-soft);
}


/* ─────────────────────────────────────────────
   GRID VIEW
   ───────────────────────────────────────────── */
.dhx_grid_area {
    background-color: var(--dhx-bg-white);
    font-family: var(--dhx-font);
}

.dhx_grid_area tr.dhx_grid_event:nth-child(2n) {
    background-color: var(--dhx-bg-soft);
}

.dhx_grid_area tr.dhx_grid_event td {
    border-bottom: var(--dhx-border-thin);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}

.dhx_grid_event_selected {
    background-color: var(--dhx-bg-today) !important;
    color: var(--dhx-accent) !important;
}

.dhx_grid_v_border { border-right-color: var(--dhx-border-color); }


/* ═══════════════════════════════════════════════
   GAP FIXES — areas that still showed v5 defaults
   ═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. TOAST / INFO NOTIFICATIONS
   Material v5 used Roboto, flat shadow, #fff bg, 2px radius
   ───────────────────────────────────────────── */
.dhtmlx-info {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    background-color: var(--dhx-bg-white);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-m);
}

.dhtmlx-info div {
    background-color: var(--dhx-bg-white);
    border: none;
    border-radius: var(--dhx-border-radius);
    color: var(--dhx-text-base);
}

.dhtmlx_message_area .dhtmlx-error {
    background-color: var(--dhx-danger);
    border-color: var(--dhx-danger);
}

.dhtmlx_message_area .dhtmlx-error div {
    background-color: var(--dhx-danger);
    color: #fff;
}


/* ─────────────────────────────────────────────
   2. MODAL POPUP TITLE
   Material v5: background:0 0; text-transform:uppercase; font-size:16px
   ───────────────────────────────────────────── */
.dhtmlx_popup_title {
    font-family: var(--dhx-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--dhx-text-base);
    background: transparent;
    text-transform: none;
    text-shadow: none;
    line-height: 1.4;
    padding: 16px 16px 4px;
}


/* ─────────────────────────────────────────────
   3. MODAL CANCEL BUTTON + GENERIC POPUP BUTTON
   Material v5: color:#0288d1, border:transparent, various :active/:focus states
   ───────────────────────────────────────────── */
.dhtmlx_popup_button {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    font-weight: 500;
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
    color: var(--dhx-accent);
    border: 1px solid transparent;
}

.dhtmlx_popup_button div {
    font-family: var(--dhx-font);
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--dhx-border-radius-sm);
    color: inherit;
    text-shadow: none;
}

.dhtmlx_popup_button.dhtmlx_cancel_button {
    color: var(--dhx-text-light);
    border: var(--dhx-border-thin);
}

.dhtmlx_popup_button.dhtmlx_cancel_button div {
    background: transparent;
    border-color: transparent;
    color: var(--dhx-text-light);
}

.dhtmlx_popup_button.dhtmlx_cancel_button:hover,
.dhtmlx_popup_button.dhtmlx_cancel_button:hover div {
    background-color: var(--dhx-bg-soft);
    border-color: var(--dhx-accent);
    color: var(--dhx-accent);
    transition: var(--dhx-transition);
}

.dhtmlx_button input:active,
.dhtmlx_button input:focus,
.dhtmlx_popup_button div:active,
.dhtmlx_popup_button div:focus {
    background: var(--dhx-accent-lighter);
    color: var(--dhx-accent);
    box-shadow: none;
    outline: none;
}

.dhtmlx_popup_button.dhtmlx_cancel_button div:active {
    background-color: var(--dhx-bg-soft);
    border-color: transparent;
}

.dhtmlx_popup_button.dhtmlx_ok_button:active div {
    color: #fff;
}


/* ─────────────────────────────────────────────
   4. RECURRING EVENT EDIT DIALOGS
   Material v5: series=#0288d1 filled, occurrence=white/outline
   ───────────────────────────────────────────── */
.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_series_button {
    border: 1px solid var(--dhx-accent);
    background-color: var(--dhx-accent);
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_series_button div {
    border: 1px solid var(--dhx-accent);
    background-color: var(--dhx-accent);
    color: #fff;
    font-family: var(--dhx-font);
    text-transform: none;
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_series_button:hover {
    border-color: var(--dhx-accent-hover);
    background-color: var(--dhx-accent-hover);
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_series_button:hover div {
    background-color: var(--dhx-accent-hover);
    border-color: var(--dhx-accent-hover);
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_occurrence_button {
    border: var(--dhx-border-thin);
    background-color: transparent;
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_occurrence_button div {
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--dhx-accent);
    font-family: var(--dhx-font);
    text-transform: none;
}

.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_occurrence_button:hover,
.dhtmlx_modal_box.dhtmlx-alert .dhtmlx_edit_occurrence_button:hover div {
    background-color: var(--dhx-accent-lighter);
}


/* ─────────────────────────────────────────────
   5. QUICK INFO — DELETE ICON VARIANT
   Material v5: .icon_delete { color:#ff584c } + red-tinted hover
   ───────────────────────────────────────────── */
.dhx_qi_big_icon.icon_delete {
    color: var(--dhx-danger);
    background-color: transparent;
}

.dhx_qi_big_icon.icon_delete:hover {
    background-color: var(--dhx-danger-lighter);
    color: var(--dhx-danger);
}


/* ─────────────────────────────────────────────
   6. QUICK INFO CONTROLS — RESET TEXT-TRANSFORM
   Material v5: .dhx_cal_qi_controls div.dhx_qi_big_icon { text-transform:uppercase }
   ───────────────────────────────────────────── */
.dhx_cal_qi_controls div.dhx_qi_big_icon {
    text-transform: none;
    font-family: var(--dhx-font);
    font-weight: 500;
}

.dhx_cal_qi_controls div.dhx_qi_big_icon div {
    font-family: var(--dhx-font);
}


/* ─────────────────────────────────────────────
   7. SECTION TIME COLOR FIX
   Material v5: .dhx_section_time { color:#fff } — invisible on white lightbox bg
   ───────────────────────────────────────────── */
.dhx_section_time {
    color: var(--dhx-text-base);
}


/* ─────────────────────────────────────────────
   8. IN-LIGHTBOX CUSTOM BUTTON — SPECIFICITY FIX
   Material v5: .dhx_cal_lsection div.dhx_custom_button (0,3,1) with Roboto, #0288d1
   ───────────────────────────────────────────── */
.dhx_cal_lsection div.dhx_custom_button {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    font-weight: 500;
    color: var(--dhx-accent);
    background-color: transparent;
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius-sm);
    transition: var(--dhx-transition);
}

.dhx_cal_lsection div.dhx_custom_button:hover {
    background-color: var(--dhx-accent-lighter);
    border-color: var(--dhx-accent);
}

.dhx_cal_lsection div.dhx_custom_button div {
    text-transform: none;
    font-family: var(--dhx-font);
    font-weight: 500;
    border-radius: var(--dhx-border-radius-sm);
}


/* ─────────────────────────────────────────────
   9. COVER / OVERLAY
   Material v5: .dhx_cal_cover { background-color:#000; opacity:.4 }
   ───────────────────────────────────────────── */
.dhx_cal_cover {
    background-color: rgba(0, 0, 0, 0.45);
}

div.dhx_modal_cover {
    background-color: rgba(26, 31, 46, 0.35);
}


/* ─────────────────────────────────────────────
   10. EVENT EDITOR
   Material v5: textarea.dhx_cal_editor { Roboto, 14px }
                .dhx_cal_event.dhx_cal_editor { background-color:#0288d1 }
   ───────────────────────────────────────────── */
textarea.dhx_cal_editor {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-event-color);
}

.dhx_cal_event.dhx_cal_editor {
    background-color: var(--dhx-accent);
}


/* ─────────────────────────────────────────────
   11. YEAR TOOLTIP
   Material v5: Roboto font, border:none, box-shadow, #0288d1 icons
   ───────────────────────────────────────────── */
div.dhx_year_tooltip {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    background-color: var(--dhx-bg-white);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-m);
}

div.dhx_year_tooltip .dhx_tooltip_line .dhx_event_icon.icon_details:hover {
    background-color: var(--dhx-accent-lighter);
    border-radius: 50%;
}


/* ─────────────────────────────────────────────
   12. IN-MOVE BACKGROUND
   Material v5: .dhx_in_move { background-color:#0288d1; color:#fff }
   ───────────────────────────────────────────── */
.dhx_in_move {
    background-color: var(--dhx-accent);
    color: var(--dhx-accent-text);
}


/* ─────────────────────────────────────────────
   13. LTEXT BASE FONT
   Material v5: .dhx_cal_ltext { font-family: Roboto,Arial }
   ───────────────────────────────────────────── */
.dhx_cal_ltext {
    font-family: var(--dhx-font);
}

.dhx_cal_ltext input[type=text] {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
    border-color: var(--dhx-border-color);
}


/* ─────────────────────────────────────────────
   14. REPEAT FORM
   Material v5: Roboto font throughout, old border/select colors
   ───────────────────────────────────────────── */
.dhx_form_repeat {
    font-family: var(--dhx-font);
}

.dhx_form_repeat form {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}

.dhx_form_repeat form select {
    font-family: var(--dhx-font);
    font-size: 12px;
    color: var(--dhx-text-base);
    border-color: var(--dhx-border-color);
    border-radius: var(--dhx-border-radius-sm);
}

.dhx_form_repeat form label {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}

.dhx_repeat_right input.dhx_repeat_date {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    border-color: var(--dhx-border-color);
    border-radius: var(--dhx-border-radius-sm);
}

input.dhx_repeat_text {
    font-family: var(--dhx-font);
    border-color: var(--dhx-border-color);
    border-radius: var(--dhx-border-radius-sm);
}

.dhx_repeat_left,
.dhx_repeat_center {
    border-bottom-color: var(--dhx-border-color);
}


/* ─────────────────────────────────────────────
   15. TEXT DISABLED
   Material v5: .dhx_text_disabled { Roboto, #2e2e2e }
   ───────────────────────────────────────────── */
.dhx_text_disabled {
    font-family: var(--dhx-font);
    font-size: var(--dhx-font-size);
    color: var(--dhx-text-base);
}


/* ─────────────────────────────────────────────
   16. GLOBAL TIP
   Material v5: Tahoma font, old bg rgba
   ───────────────────────────────────────────── */
.dhx_global_tip {
    font-family: var(--dhx-font);
    color: var(--dhx-text-base);
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--dhx-border-thin);
    border-radius: var(--dhx-border-radius);
    box-shadow: var(--dhx-shadow-m);
}


/* ─────────────────────────────────────────────
   17. CONTAINER FOCUS OUTLINE
   Material v5: outline-style:auto with default blue
   ───────────────────────────────────────────── */
.dhx_cal_container *:focus {
    outline-color: var(--dhx-accent-lighter);
}