/* =====================================================================
   TechPulse.Blazor.Ui. Every rule is scoped to a tp- class, so nothing
   here touches the rest of a host page. Colors, radius and font come
   from the --tp-* tokens below (QOps dark theme by default): a host
   restyles the components by overriding them, e.g.
     :root { --tp-accent: rgb(14, 165, 233); }
   ===================================================================== */

:root {
    --tp-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --tp-bg: rgb(17, 24, 39);
    --tp-surface: rgb(30, 41, 59);
    --tp-surface-2: rgb(51, 65, 85);
    --tp-surface-glass: rgba(31, 41, 55, 0.5);
    --tp-border: rgba(71, 85, 105, 0.6);
    --tp-border-strong: rgb(71, 85, 105);

    --tp-text: rgb(241, 245, 249);
    --tp-text-2: rgb(209, 213, 219);
    --tp-text-muted: rgb(148, 163, 184);

    --tp-accent: rgb(99, 102, 241);
    --tp-accent-soft: rgba(99, 102, 241, 0.18);
    --tp-success: rgb(16, 185, 129);
    --tp-success-soft: rgba(16, 185, 129, 0.15);
    --tp-danger: rgb(239, 68, 68);
    --tp-warning: rgb(251, 191, 36);

    --tp-grad-primary: linear-gradient(to right, rgb(16, 185, 129), rgb(20, 184, 166));
    --tp-grad-secondary: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234));
    --tp-grad-danger: linear-gradient(to right, rgb(220, 38, 38), rgb(219, 39, 119));

    --tp-radius: 8px;
    --tp-radius-lg: 12px;
    --tp-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    --tp-focus: 0 0 0 3px rgba(99, 102, 241, 0.35);
    --tp-transition: all 0.2s ease;
}

/* ------------------------------------------------------------- popups */
.tp-popup {
    display: none;
    position: fixed;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--tp-border-strong);
    border-radius: var(--tp-radius);
    background: var(--tp-surface);
    color: var(--tp-text);
    box-shadow: var(--tp-shadow);
    font-family: var(--tp-font);
    font-size: 14px;
    overflow: hidden;
}

.tp-popup:popover-open {
    display: block;
}

/* -------------------------------------------------------------- inputs */
.tp-textbox {
    position: relative;
    width: 100%;
}

.tp-input {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    background: rgba(15, 23, 42, 0.6);
    color: var(--tp-text);
    font-family: var(--tp-font);
    font-size: 14px;
    transition: var(--tp-transition);
    outline: none;
}

textarea.tp-input {
    height: auto;
    resize: vertical;
}

.tp-input::placeholder {
    color: var(--tp-text-muted);
}

.tp-input:focus {
    border-color: var(--tp-accent);
    box-shadow: var(--tp-focus);
}

.tp-textbox.is-readonly .tp-input {
    background: rgba(51, 65, 85, 0.35);
    color: var(--tp-text-2);
    cursor: default;
}

.tp-textbox.is-readonly .tp-input:focus {
    border-color: var(--tp-border);
    box-shadow: none;
}

.tp-textbox.is-disabled .tp-input {
    opacity: 0.5;
    cursor: not-allowed;
}

.tp-numeric .tp-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The browser draws the calendar and the little icon itself. color-scheme is what tells it to draw them
   dark: without it the pop-up calendar comes up white over a dark page, and the icon is nearly invisible. */
.tp-date .tp-input {
    color-scheme: dark;
    font-variant-numeric: tabular-nums;
}

.tp-date .tp-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.tp-date .tp-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ------------------------------------------------------------ checkbox */
.tp-checkbox {
    position: relative; /* keeps the hidden input inside the label (see .tp-checkbox input) */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    color: var(--tp-text-2);
    font-size: 14px;
    user-select: none;
}

.tp-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.tp-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--tp-border-strong);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.6);
    transition: var(--tp-transition);
}

.tp-checkbox-box .tp-icon {
    font-size: 10px;
    color: white;
    opacity: 0;
}

.tp-checkbox input:checked + .tp-checkbox-box {
    background: var(--tp-success);
    border-color: var(--tp-success);
}

.tp-checkbox input:checked + .tp-checkbox-box .tp-icon {
    opacity: 1;
}

.tp-checkbox input:focus-visible + .tp-checkbox-box {
    box-shadow: var(--tp-focus);
}

.tp-checkbox.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------ dropdown */
.tp-dropdown {
    position: relative;
    width: 100%;
    font-family: var(--tp-font);
}

.tp-dropdown-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    background: rgba(15, 23, 42, 0.6);
    color: var(--tp-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: var(--tp-transition);
}

.tp-dropdown-input:hover:not(:disabled) {
    border-color: var(--tp-accent);
}

.tp-dropdown-input:focus-visible {
    outline: none;
    border-color: var(--tp-accent);
    box-shadow: var(--tp-focus);
}

.tp-dropdown-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tp-dropdown-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tp-placeholder {
    color: var(--tp-text-muted);
}

.tp-dropdown-caret {
    flex: none;
    font-size: 11px;
    color: var(--tp-text-muted);
}

.tp-dropdown-popup {
    max-width: 480px;
}

.tp-dropdown-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tp-border);
    color: var(--tp-text-muted);
}

.tp-dropdown-filter input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--tp-text);
    font-size: 14px;
}

.tp-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.tp-dropdown-option {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--tp-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-dropdown-option:hover,
.tp-dropdown-option.is-active {
    background: var(--tp-accent-soft);
    color: var(--tp-text);
}

.tp-dropdown-option.is-selected {
    color: rgb(52, 211, 153);
    font-weight: 600;
}

.tp-dropdown-empty {
    padding: 10px;
    color: var(--tp-text-muted);
    font-style: italic;
}

/* -------------------------------------------------------------- buttons */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--tp-radius);
    background: var(--tp-grad-secondary);
    color: white;
    font-family: var(--tp-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tp-transition);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25);
}

.tp-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.tp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------------------------------------------------------- menu button */
.tp-menu-button {
    display: inline-block;
}

.tp-menu-trigger {
    width: 100%;
}

.tp-menu-caret {
    font-size: 11px;
    opacity: 0.8;
}

.tp-menu-popup {
    min-width: 240px;
    padding: 6px;
}

.tp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-text-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--tp-transition);
}

.tp-menu-item i {
    width: 18px;
    text-align: center;
    color: var(--tp-text-muted);
}

.tp-menu-item:hover,
.tp-menu-item:focus-visible {
    outline: none;
    background: var(--tp-accent-soft);
    color: var(--tp-text);
}

.tp-menu-item:hover i {
    color: var(--tp-text);
}

/* -------------------------------------------------------------- tooltip */
.tp-tooltip-anchor {
    display: inline-block;
    max-width: 100%;
}

.tp-tooltip {
    position: fixed;
    z-index: 20000;
    display: none;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid var(--tp-border-strong);
    border-radius: 6px;
    background: rgb(15, 23, 42);
    color: var(--tp-text);
    font-family: var(--tp-font);
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: pre-line;
}

/* --------------------------------------------------------------- dialog */
/* Stays where the page renders the window (it takes no space); see TpDialog.razor. */
.tp-dialog-anchor {
    display: contents;
}

.tp-dialog-layer {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tp-dialog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

/* No transform/filter on the window itself: they would trap fixed-position children. */
.tp-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    border: 1px solid rgba(99, 102, 241, 0.6);
    border-radius: var(--tp-radius-lg);
    background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(30, 41, 59) 100%);
    color: var(--tp-text);
    box-shadow: var(--tp-shadow);
    font-family: var(--tp-font);
    outline: none;
}

.tp-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    min-height: 44px;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--tp-border);
}

.tp-dialog-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(to right, rgb(241, 245, 249), rgb(165, 180, 252));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-dialog-title i {
    -webkit-text-fill-color: rgb(129, 140, 248);
}

.tp-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    background: rgba(51, 65, 85, 0.5);
    color: var(--tp-text-2);
    cursor: pointer;
    transition: var(--tp-transition);
}

.tp-dialog-close:hover {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.8);
    color: white;
}

.tp-dialog-content {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.tp-dialog-footer {
    flex: none;
    padding: 12px 16px;
    border-top: 1px solid var(--tp-border);
}

/* -------------------------------------------------------------- spinner */
.tp-spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.tp-spinner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    background: var(--tp-surface);
    box-shadow: var(--tp-shadow);
}

.tp-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(99, 102, 241, 0.25);
    border-top-color: var(--tp-accent);
    border-radius: 50%;
    animation: tp-spin 0.8s linear infinite;
}

.tp-spinner-label {
    color: var(--tp-text-2);
    font-family: var(--tp-font);
    font-size: 14px;
}

@keyframes tp-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------- progress bar */
.tp-progress {
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.2);
}

.tp-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to right, rgb(16, 185, 129), rgb(52, 211, 153));
    transition: width 0.5s ease;
}

/* ------------------------------------------------------------------ grid */
.tp-grid {
    width: 100%;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    background: rgba(15, 23, 42, 0.55);
    color: var(--tp-text-2);
    font-family: var(--tp-font);
    font-size: 13px;
    overflow: hidden;
}

.tp-grid-scroll {
    position: relative;
    overflow: auto;
}

.tp-grid-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.tp-grid-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tp-grid-header {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid var(--tp-border);
    border-right: 1px solid rgba(71, 85, 105, 0.3);
    background: rgb(30, 41, 59);
    color: var(--tp-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.tp-grid-header.is-sortable {
    cursor: pointer;
}

.tp-grid-header.is-sortable:hover {
    background: rgb(51, 65, 85);
}

.tp-grid-group-header {
    border-bottom: 1px solid rgba(71, 85, 105, 0.4);
    color: rgb(165, 180, 252);
}

.tp-grid-header-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-grid-sort-icon {
    margin-left: 6px;
    color: rgb(129, 140, 248);
}

.tp-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
}

.tp-resize-handle:hover {
    background: rgba(99, 102, 241, 0.5);
}

body.tp-resizing,
body.tp-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.tp-grid-filter-row th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--tp-border);
    background: rgb(30, 41, 59);
}

.tp-grid-filter {
    width: 100%;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.7);
    color: var(--tp-text);
    font-size: 12.5px;
    font-weight: 400;
    outline: none;
    /* A column with FilterOptions renders a native <select>, whose arrow and drop-down list the browser
       draws itself. Without this it paints them light over the dark row, which is what gave the filter
       row away as "not ours" (same reason the date field carries it). */
    color-scheme: dark;
}

.tp-grid-filter:focus {
    border-color: var(--tp-accent);
}

.tp-grid-table td {
    padding: 0 8px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Compact density (CssClass="tp-grid-compact"): less padding in headers, filters and cells, for
   dense working screens where seeing more rows matters more than air. Pair it with a lower RowHeight. */
.tp-grid-compact .tp-grid-header {
    padding: 4px 6px;
    font-size: 12px;
}

.tp-grid-compact .tp-grid-filter-row th {
    padding: 2px 4px;
}

.tp-grid-compact .tp-grid-filter {
    height: 24px;
    padding: 1px 6px;
    font-size: 12px;
}

.tp-grid-compact .tp-grid-table td {
    padding: 0 5px;
}

.tp-grid-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-grid-hover .tp-grid-row:hover td {
    background: rgba(51, 65, 85, 0.5);
}

.tp-grid-selectable .tp-grid-row {
    cursor: pointer;
}

.tp-grid-row.is-selected td {
    background: var(--tp-accent-soft);
}

.tp-grid-hover .tp-grid-row.is-selected:hover td {
    background: rgba(99, 102, 241, 0.26);
}

.tp-grid-check-cell {
    text-align: center;
}

.tp-grid-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: rgb(16, 185, 129);
    cursor: pointer;
}

.tp-grid-checkbox:disabled {
    cursor: default;
}

.tp-grid-empty {
    padding: 24px !important;
    text-align: center;
    color: var(--tp-text-muted);
    font-style: italic;
}

.tp-align-left { text-align: left; }
.tp-align-center { text-align: center; }
.tp-align-right { text-align: right; }

/* Read-only yes/no flag (TpFlag). */
.tp-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(100, 116, 139, 0.6);
    border-radius: 4px;
    vertical-align: middle;
}

.tp-flag .tp-icon {
    font-size: 10px;
    color: white;
    opacity: 0;
}

.tp-flag.is-on {
    background: rgb(16, 185, 129);
    border-color: rgb(16, 185, 129);
}

.tp-flag.is-on .tp-icon {
    opacity: 1;
}

.tp-flag.is-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.8);
}

.tp-flag.is-danger .tp-icon {
    color: rgb(248, 113, 113);
    opacity: 1;
}

/* Icons drawn by the components (TpIcon): sized by the surrounding font, colored by currentColor. */
.tp-icon {
    display: inline-block;
    flex: none;
    vertical-align: -0.125em;
}

.tp-dialog-close .tp-icon {
    font-size: 15px;
}

/* --------------------------------------------------------------- switch */
.tp-switch {
    position: relative; /* keeps the hidden input inside the label */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    color: var(--tp-text-2);
    font-family: var(--tp-font);
    font-size: 14px;
    user-select: none;
}

.tp-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.tp-switch-track {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--tp-surface-2);
    border: 1px solid var(--tp-border-strong);
    transition: var(--tp-transition);
}

.tp-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tp-text-2);
    transition: var(--tp-transition);
}

.tp-switch input:checked + .tp-switch-track {
    background: var(--tp-grad-primary);
    border-color: var(--tp-success);
}

.tp-switch input:checked + .tp-switch-track .tp-switch-thumb {
    left: 18px;
    background: white;
}

.tp-switch input:focus-visible + .tp-switch-track {
    box-shadow: var(--tp-focus);
}

.tp-switch.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- radio */
.tp-radio {
    position: relative; /* keeps the hidden input inside the label */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    color: var(--tp-text-2);
    font-family: var(--tp-font);
    font-size: 14px;
    user-select: none;
}

.tp-radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.tp-radio-dot {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--tp-border-strong);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    transition: var(--tp-transition);
}

.tp-radio input:checked + .tp-radio-dot {
    border-color: var(--tp-success);
}

.tp-radio input:checked + .tp-radio-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--tp-success);
}

.tp-radio input:focus-visible + .tp-radio-dot {
    box-shadow: var(--tp-focus);
}

.tp-radio.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------- card */
.tp-card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    background: var(--tp-surface-glass);
    color: var(--tp-text);
    font-family: var(--tp-font);
    overflow: hidden;
}

.tp-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--tp-border);
    font-weight: 600;
}

.tp-card-content {
    padding: 20px;
}

.tp-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--tp-border);
}

/* ----------------------------------------------------------------- tabs */
.tp-tabs {
    font-family: var(--tp-font);
    color: var(--tp-text);
}

.tp-tabs-headers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--tp-border);
}

.tp-tab {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
    background: none;
    color: var(--tp-text-2);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: var(--tp-transition);
    /* The header sits on the strip's own border line, so the two never double up. */
    margin-bottom: -1px;
}

.tp-tab:hover:not(:disabled) {
    background: var(--tp-accent-soft);
    color: var(--tp-text);
}

.tp-tab:focus-visible {
    outline: none;
    box-shadow: var(--tp-focus);
}

.tp-tab.is-selected {
    color: var(--tp-text);
    border-bottom-color: var(--tp-accent);
    font-weight: 600;
}

.tp-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tp-tabs-body {
    padding-top: 16px;
}

/* ------------------------------------------------------------- skeleton */
.tp-skeleton {
    border-radius: var(--tp-radius);
    background: linear-gradient(90deg, rgba(51, 65, 85, 0.35) 25%, rgba(71, 85, 105, 0.55) 37%, rgba(51, 65, 85, 0.35) 63%);
    background-size: 400% 100%;
    animation: tp-shimmer 1.4s ease infinite;
}

.tp-skeleton-circle {
    border-radius: 50%;
}

.tp-skeleton-text {
    border-radius: 4px;
}

@keyframes tp-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------- file upload */
.tp-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border: 2px dashed var(--tp-border-strong);
    border-radius: var(--tp-radius);
    background: rgba(15, 23, 42, 0.45);
    color: var(--tp-text-2);
    font-family: var(--tp-font);
    font-size: 14px;
    transition: var(--tp-transition);
}

.tp-upload:hover,
.tp-upload:focus-within {
    border-color: var(--tp-accent);
    background: var(--tp-accent-soft);
}

/* The real file input covers the whole area: click or drop anywhere. */
.tp-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tp-upload-icon {
    flex: none;
    font-size: 22px;
    color: var(--tp-accent);
}

.tp-upload-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tp-upload-button {
    flex: none;
    pointer-events: none;
}

.tp-upload.is-disabled {
    opacity: 0.5;
}

.tp-upload.is-disabled .tp-upload-input {
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- chart */
.tp-chart {
    position: relative;
    width: 100%;
}

/* Labels of the form controls keep their own look even when a host page styles every <label>
   (uppercase captions, display: block...). */
label.tp-checkbox,
label.tp-switch,
label.tp-radio {
    text-transform: none;
    display: inline-flex;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
    width: auto;
}