/* /admin/map/tilesets — upload dropzone, ag-grid kind cells, modal */

/* Upload dropzone — turn the bare dcc.Upload div into something the
 * eye reads as "drop here" without depending on Mantine's Card. The
 * inner column stays Mantine-themed (theme tokens for colors). */
.ts-admin-upload-dropzone {
    border-radius: 10px !important;
    border: 1.5px dashed var(--mantine-color-default-border) !important;
    background: var(--mantine-color-default-hover) !important;
    transition: border-color 120ms ease, background-color 120ms ease;
    cursor: pointer;
}

.ts-admin-upload-dropzone:hover {
    border-color: var(--mantine-color-tidal-5) !important;
    background: light-dark(
        var(--mantine-color-tidal-0),
        var(--mantine-color-tidal-9)
    ) !important;
}

.ts-admin-upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    pointer-events: none; /* clicks pass through to the parent Upload */
    text-align: center;
}

.ts-admin-upload-status:not(:empty) {
    margin-top: 8px;
}

/* ag-grid kind-cell tinting. The Catalog grid sets a class per row
 * based on the kind field; we colorize the cell text to match the
 * Style References dropdown's color language. Selectors target both
 * the light theme (.ag-theme-quartz) and the dark one
 * (.ag-theme-quartz-dark) — Mantine tokens are color-scheme aware so
 * the same var resolves to the right shade in either mode. */
.ag-theme-quartz .ts-kind-historical,
.ag-theme-quartz-dark .ts-kind-historical {
    color: var(--mantine-color-brass-7);
    font-weight: 600;
}
.ag-theme-quartz .ts-kind-seed,
.ag-theme-quartz-dark .ts-kind-seed {
    color: var(--mantine-color-harbor-7);
    font-weight: 600;
}
.ag-theme-quartz .ts-kind-generated,
.ag-theme-quartz-dark .ts-kind-generated {
    color: var(--mantine-color-tidal-7);
    font-weight: 600;
}
.ag-theme-quartz .ts-kind-other,
.ag-theme-quartz-dark .ts-kind-other {
    color: var(--mantine-color-dimmed);
}

.ag-theme-quartz .ts-status-archived,
.ag-theme-quartz-dark .ts-status-archived {
    color: var(--mantine-color-dimmed);
    font-style: italic;
}
.ag-theme-quartz .ts-status-ready,
.ag-theme-quartz-dark .ts-status-ready {
    color: var(--mantine-color-tidal-7);
}
.ag-theme-quartz .ts-status-failed,
.ag-theme-quartz-dark .ts-status-failed {
    color: var(--mantine-color-red-6);
    font-weight: 600;
}

/* Archived column glyphs — green check for archived rows, muted X for
 * the rest. Same color tokens both themes; Mantine resolves them per
 * color-scheme so we don't need a dark-mode override. */
.ag-theme-quartz .ts-archived-yes,
.ag-theme-quartz-dark .ts-archived-yes {
    color: var(--mantine-color-brass-7);
    font-weight: 700;
}
.ag-theme-quartz .ts-archived-no,
.ag-theme-quartz-dark .ts-archived-no {
    color: var(--mantine-color-dimmed);
    opacity: 0.55;
}

/* AG Grid dark-mode polish — ag-theme-quartz-dark already sets sensible
 * defaults, but the row-hover and selected-row colours feel too neutral
 * against the rest of the app. Override with Mantine dark-scale tokens
 * so the grid reads as part of the SailsBoard UI rather than a foreign
 * widget. The variables ag-grid exposes are well-documented in their
 * theming docs; we only override the ones that visually disagree with
 * the Mantine dark theme. */
.ag-theme-quartz-dark {
    --ag-background-color:        var(--mantine-color-body);
    --ag-foreground-color:        var(--mantine-color-text);
    --ag-header-background-color: var(--mantine-color-dark-6);
    --ag-header-foreground-color: var(--mantine-color-text);
    --ag-row-hover-color:         var(--mantine-color-dark-5);
    --ag-selected-row-background-color: color-mix(
        in srgb,
        var(--mantine-color-tidal-9) 50%,
        transparent
    );
    --ag-border-color:            var(--mantine-color-dark-4);
    --ag-secondary-border-color:  var(--mantine-color-dark-4);
    --ag-odd-row-background-color: var(--mantine-color-body);
    --ag-control-panel-background-color: var(--mantine-color-dark-6);
}

/* Light theme — same tightening, but against Mantine's light scale.
 * We keep the default ag-theme-quartz colours mostly intact; only the
 * selected-row tint gets a tidal accent to match the dark mode's. */
.ag-theme-quartz {
    --ag-selected-row-background-color: color-mix(
        in srgb,
        var(--mantine-color-tidal-1) 70%,
        transparent
    );
    --ag-row-hover-color: color-mix(
        in srgb,
        var(--mantine-color-tidal-0) 60%,
        transparent
    );
}

/* The drawer body needs to fill the viewport flush — DMC's default
 * leaves padding around the title bar that the upload form looks
 * pinched against. ``padding: 0`` on the body lets the inner
 * ScrollArea own its own padding. */
.ts-admin-drawer-body {
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The Profile preview map's Esri attribution otherwise wraps onto a
 * second line in narrow mobile drawers. */
#ts-admin-profile-preview-map .leaflet-control-attribution {
    font-size: 9px;
}

/* Reset button: pull-right on desktop so it doesn't compete with the
 * primary Slice CTA but lives at the right edge of the form. */
@media (min-width: 768px) {
    #ts-admin-create-reset-btn {
        margin-left: auto;
    }
}