.e-control, .e-control *, .e-input, .e-input-group input, .e-dropdownbase, .e-popup {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.e-btn.tp-sf-btn, .tp-sf-btn.e-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(68, 238, 140, .35) !important;
    background: linear-gradient(135deg, var(--tp-green-2), var(--tp-green)) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 32px rgba(35, 210, 111, .20) !important;
}

.e-btn.tp-sf-btn-outline, .tp-sf-btn-outline.e-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 18px !important;
    background: rgba(7, 15, 28, .72) !important;
    border: 1px solid var(--tp-line) !important;
    color: var(--tp-soft) !important;
    box-shadow: none !important;
}

.tp-sf-grid.e-grid,
.tp-sf-grid .e-gridcontent,
.tp-sf-grid .e-content,
.tp-sf-grid .e-table,
.tp-sf-grid .e-headercontent,
.tp-sf-grid .e-gridheader {
    background: transparent !important;
    border: none !important;
}

.tp-sf-grid.e-grid {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.tp-sf-grid .e-headercell {
    background: transparent !important;
    color: var(--tp-muted) !important;
    border-color: var(--tp-line-soft) !important;
    padding: 15px 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.tp-sf-grid .e-rowcell {
    background: transparent !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-line-soft) !important;
    padding: 15px 12px !important;
}

.tp-sf-grid .e-row:hover .e-rowcell {
    background: rgba(255, 255, 255, .025) !important;
}

.tp-sf-grid .e-pager {
    background: transparent !important;
    border-color: var(--tp-line-soft) !important;
    color: var(--tp-muted) !important;
}

.tp-sf-grid .e-pager .e-currentitem {
    background: rgba(72, 238, 134, .16) !important;
    color: var(--tp-green) !important;
    border-color: rgba(72, 238, 134, .25) !important;
}

.e-input-group,
.e-control-wrapper,
.e-ddl,
.e-datepicker,
.e-daterangepicker,
.e-numerictextbox {
    background: rgba(7, 15, 28, .75) !important;
    border: 1px solid rgba(128, 166, 215, .32) !important;
    border-radius: 14px !important;
    color: var(--tp-text) !important;
}

.e-input-group input,
.e-control-wrapper input,
.e-input-group textarea {
    color: var(--tp-text) !important;
}

.e-input-group:focus-within,
.e-control-wrapper:focus-within {
    border-color: rgba(96, 234, 216, .8) !important;
    box-shadow: 0 0 0 4px rgba(96, 234, 216, .1) !important;
}

/* Scheduler (Syncfusion) — ONLY scoped via tp-scheduler-card */
.tp-scheduler-card {
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(20,34,54,.90), rgba(7,17,31,.92));
    border: 1px solid rgba(117,159,218,.22);
    padding: 16px;
    overflow: hidden;
}

.tp-scheduler-card .e-schedule {
    background: transparent !important;
    border: 0 !important;
    color: #f4f8ff !important;
    font-family: Inter, system-ui, sans-serif !important;
}

.tp-scheduler-card .e-schedule-toolbar {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 14px !important;
}

.tp-scheduler-card .e-toolbar-items {
    background: rgba(7,17,31,.45) !important;
    border: 1px solid rgba(117,159,218,.18) !important;
    border-radius: 16px !important;
    padding: 6px !important;
}

.tp-scheduler-card .e-toolbar-item .e-tbar-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.tp-scheduler-card .e-toolbar-item .e-icons {
    color: #fff !important;
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tp-scheduler-card .e-toolbar-item {
    margin-right: 8px !important;
}

.tp-scheduler-card .e-toolbar-item .e-tbar-btn {
    min-width: 42px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(7,17,31,.65) !important;
    border: 1px solid rgba(117,159,218,.22) !important;
}

.tp-scheduler-card .e-toolbar-item .e-tbar-btn-text {
    color: #fff !important;
    font-weight: 900 !important;
}

.tp-scheduler-card .e-toolbar-item.e-active-view .e-tbar-btn {
    background: linear-gradient(135deg, rgba(72,239,140,.32), rgba(88,230,217,.16)) !important;
    border-color: rgba(72,239,140,.45) !important;
}

/* Prev/Next strelice: ako ikone ne rade normalno, potpuno sakrij */
.tp-scheduler-card .e-toolbar .e-prev,
.tp-scheduler-card .e-toolbar .e-next {
    display: none !important;
}

/* Header + time column (dark, readable) */
.tp-scheduler-card .e-schedule .e-date-header-wrap,
.tp-scheduler-card .e-schedule .e-date-header-container,
.tp-scheduler-card .e-schedule .e-header-cells,
.tp-scheduler-card .e-schedule .e-time-cells-wrap,
.tp-scheduler-card .e-schedule .e-time-cells {
    background: rgba(7,17,31,.55) !important;
    color: #dce8f8 !important;
    border-color: rgba(117,159,218,.10) !important;
}

.tp-scheduler-card .e-schedule .e-header-cells {
    font-size: 13px !important;
    font-weight: 900 !important;
}

.tp-scheduler-card .e-schedule .e-time-cells-wrap {
    width: 54px !important;
}

.tp-scheduler-card .e-schedule .e-time-cells-wrap table td {
    background: transparent !important;
    color: #9fc4ff !important;
    font-weight: 750 !important;
    border-color: rgba(160,190,230,0.08) !important;
}

/* Grid (no Excel look) */
.tp-scheduler-card .e-schedule .e-work-cells {
    background: rgba(12,25,43,.62) !important;
    border-color: rgba(160,190,230,0.08) !important;
}

.tp-scheduler-card .e-schedule .e-work-cells:hover {
    background: rgba(72,239,140,.045) !important;
}

.tp-scheduler-card .e-schedule .e-current-day,
.tp-scheduler-card .e-schedule .e-header-cells.e-current-day {
    color: #58e6d9 !important;
}

/* Appointment cards — premium dark gradients */
.tp-scheduler-card .e-schedule .e-appointment,
.tp-scheduler-card .e-schedule .e-appointment.e-appointment-border {
    background: linear-gradient(
        135deg,
        rgba(62, 214, 133, .88),
        rgba(44, 138, 104, .82)
    ) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tp-scheduler-card .e-schedule .e-appointment::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .22) 100%);
    pointer-events: none;
    z-index: 0;
}

.tp-scheduler-card .e-schedule .e-appointment {
    min-height: 64px !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.tp-scheduler-card .e-schedule .e-appointment-details {
    height: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.tp-scheduler-card .e-schedule .e-subject {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: unset !important;
}

.tp-scheduler-card .e-schedule .e-time {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
    opacity: .82 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    white-space: normal !important;
    overflow: hidden !important;
}

/* Split appointment text (title + subtitle) */
.tp-scheduler-card .tp-appt {
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    overflow: hidden;
}

.tp-scheduler-card .tp-appt-title {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    white-space: normal;
}

.tp-scheduler-card .tp-appt-sub {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    color: #ffffff;
    opacity: .82;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    white-space: normal;
}

/* Current time indicator (pink/red line + pill label) */
.tp-scheduler-card .e-schedule .e-current-timeline {
    border-top: 2px solid #ff4d68 !important;
}

.tp-scheduler-card .e-schedule .e-current-time {
    background: #ff4d68 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 2px 8px !important;
    margin-left: 6px !important;
}

/* Scrollbars (dark, thin) */
.tp-scheduler-card .e-content-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(88,230,217,.42) rgba(255,255,255,.03);
}
.tp-scheduler-card .e-content-wrap::-webkit-scrollbar { width: 7px; }
.tp-scheduler-card .e-content-wrap::-webkit-scrollbar-thumb { background: rgba(88,230,217,.42); border-radius: 999px; }
.tp-scheduler-card .e-content-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }

.e-dialog, .e-popup, .e-dropdown-popup, .e-datepicker.e-popup, .e-daterangepicker.e-popup {
    background: #0b1526 !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: 16px !important;
    color: var(--tp-text) !important;
    box-shadow: var(--tp-shadow) !important;
}

.e-dialog .e-dlg-header-content, .e-dialog .e-footer-content {
    background: transparent !important;
    border-color: var(--tp-line-soft) !important;
}

.e-tab .e-tab-header {
    background: transparent !important;
    border: none !important;
}

.e-tab .e-tab-header .e-toolbar-item {
    border-radius: 12px !important;
    background: rgba(7, 15, 28, .55) !important;
    margin-right: 8px !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: rgba(72, 238, 134, .13) !important;
    border: 1px solid rgba(72, 238, 134, .28) !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text { color: var(--tp-soft) !important; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--tp-green) !important; }

/* Column charts (CSS — pouzdano u WASM bez Syncfusion JS) */
.tp-css-chart-frame {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    height: 100%;
    align-items: stretch;
}

.tp-css-yaxis {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 0 22px;
}

.tp-css-yaxis-tick {
    position: relative;
    height: 1px;
}

.tp-css-yaxis-tick span {
    position: absolute;
    top: -8px;
    right: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--tp-muted);
    opacity: .92;
}

.tp-css-column-chart {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.tp-css-column-bars {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
    min-height: 180px;
    padding: 0 12px 4px 10px;
}

.tp-css-grid {
    position: absolute;
    inset: 6px 0 22px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.tp-css-grid-line {
    height: 1px;
    background: rgba(160,190,230,0.08);
}

.tp-css-column {
    flex: 0 0 auto;
    width: 72px;
    min-width: 56px;
    max-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 8px;
}

.tp-css-column-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--tp-soft);
    opacity: .95;
    text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.tp-css-column-bar {
    width: 100%;
    max-width: 44px;
    min-height: 8px;
    border-radius: 8px 8px 4px 4px;
    transition: height .35s ease;
}

.tp-css-column-bar.green {
    background: linear-gradient(180deg, #48ee86 0%, rgba(72, 238, 134, .35) 100%);
    box-shadow: 0 6px 18px rgba(72, 238, 134, .18);
}

.tp-css-column-bar.red {
    background: linear-gradient(180deg, #ff5268 0%, rgba(255, 82, 104, .35) 100%);
    box-shadow: 0 6px 18px rgba(255, 82, 104, .16);
}

.tp-css-column-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tp-muted);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tp-chart-wrap.mini .tp-css-column-bars {
    min-height: 72px;
    gap: 6px;
    justify-content: flex-start;
    padding-left: 4px;
}

.tp-chart-wrap.mini .tp-css-column-bar {
    max-width: 36px;
}

/* (legacy) Syncfusion chart overrides — no longer used */
.tp-chart-wrap {
    width: 100%;
    min-height: 220px;
    height: 260px;
    position: relative;
}

.tp-chart-wrap .tp-sf-chart,
.tp-chart-wrap .tp-sf-chart > div,
.tp-chart-wrap .e-chart {
    width: 100% !important;
    min-height: inherit;
    height: 100% !important;
}

.tp-panel-span-2 {
    grid-column: 1 / -1;
}

.tp-panel .tp-chart-wrap + .upcoming-row,
.tp-panel .tp-chart-wrap + .tp-empty,
.tp-panel .tp-chart-wrap + div.upcoming-row {
    margin-top: 14px;
}

.tp-chart-wrap.mini {
    min-height: 96px;
    height: 100px;
}

.tp-chart-wrap.wide {
    min-height: 280px;
    height: 300px;
}

.tp-chart-wrap .tp-empty {
    min-height: inherit;
    height: 100%;
}

.tp-sf-chart.e-chart,
.tp-sf-chart.e-accumulationchart,
.tp-sf-chart .e-chart-area,
.tp-sf-chart .e-accumulationchart-area,
.tp-sf-chart .e-chart-series-group,
.tp-sf-chart .e-accumulationchart-series-group,
.tp-sf-chart svg {
    background: transparent !important;
    border: none !important;
}

.tp-sf-chart .e-chart-axis-title,
.tp-sf-chart .e-chart-title {
    color: var(--tp-text) !important;
}

.tp-sf-chart .e-chart-tooltip,
.tp-sf-chart .e-accumulationchart-tooltip {
    background: rgba(11, 21, 38, .96) !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: 12px !important;
    color: var(--tp-text) !important;
    box-shadow: var(--tp-shadow) !important;
}

.tp-sf-chart .e-chart-legend-text,
.tp-sf-chart .e-accumulationchart-legend-text {
    color: #f5f8fc !important;
}

.tp-panel.wide-chart {
    min-height: 340px;
}

.summary-panel .tp-chart-wrap.mini {
    width: 220px;
    flex-shrink: 0;
}