/* ============================================
   BASE UTILITIES - Common utility classes
   ============================================ */

/* Focus visible styles */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Disabled state */
[disabled],
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   GLOBAL ROUNDNESS APPLICATION
   Apply border-radius variables to common elements
   ============================================ */

/* Apply roundness to common interactive elements */
button {
    border-radius: var(--radius-button, var(--radius-sm, 6px));
}

input,
textarea,
select {
    border-radius: var(--radius-input, var(--radius-sm, 6px));
}

/* Apply container roundness to generic card demo classes only.
   See the matching rule in base/utilities.css for the rationale: the previous
   [class*="card"] / [class*="container"] substring matches were clobbering
   every component's internal wrappers (e.g. .xwui-input-text-container was
   getting --radius-container=12px instead of the intended --radius-input=6px,
   rendering text inputs as pill-shaped capsules). Components now self-manage
   their own radius; this utility only covers the bare demo classes. */
.demo-card,
.card,
.theme-controls {
    border-radius: var(--radius-container, var(--radius-lg, 12px));
}

/* Apply roundness to photos and images */
img,
.photo,
[class*="photo"],
[class*="image"]:not([class*="badge"]) {
    border-radius: var(--radius-photo, var(--radius-md, 8px));
}

/* Map tiles must NEVER be rounded — at any roundness setting, in any theme.
 * Leaflet renders raster tiles as <img class="leaflet-tile"> and vector / heat
 * tiles as <canvas>, so the bare `img` rounding above (and any media-rounding
 * preset) would round each tile. Four rounded tiles meeting at a corner leave
 * star-shaped "sparkle" gaps along every seam. This reset is co-located with
 * the rule it counteracts so the two can never ship apart, keyed on Leaflet's
 * own always-present classes (no app-wrapper dependency) so it holds the
 * instant tiles paint — including during the map's async bootstrap, before its
 * component stylesheet loads. Popups/controls keep their own radius (not img/
 * canvas, not matched here). */
.leaflet-tile,
.leaflet-container img,
.leaflet-container canvas,
.leaflet-tile-container img,
.leaflet-tile-container canvas,
img.leaflet-image-layer,
.leaflet-pane > img,
.leaflet-pane > canvas {
    border-radius: 0 !important;
}

/* Apply roundness to badges and pills */
.badge,
[class*="badge"] {
    border-radius: var(--radius-badge, var(--radius-full, 9999px));
}

/* Apply roundness to progress bars */
.progress-bar {
    border-radius: var(--radius-full, 9999px);
}

/* Apply roundness to alerts */
.alert {
    border-radius: var(--radius-alert, var(--radius-md, 8px));
}

/* Apply roundness to code blocks */
.code-block,
pre {
    border-radius: var(--radius-code, var(--radius-md, 8px));
}

/* ============================================
   CORNER-BASED ROUNDNESS UTILITIES
   Optional utility classes for directional/corner rounding
   Components can choose these based on layout (LTR/RTL)
   ============================================ */

/* Button corner utilities (use --radius-button) */
.radius-button-pill {
    border-radius: var(--radius-button, var(--radius-sm, 6px));
}

/* Outer corners rounded when button is on the left (right side rounded) */
.radius-button-left-cut {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-button, var(--radius-sm, 6px));
    border-bottom-right-radius: var(--radius-button, var(--radius-sm, 6px));
}

/* Outer corners rounded when button is on the right (left side rounded) */
.radius-button-right-cut {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-button, var(--radius-sm, 6px));
    border-bottom-left-radius: var(--radius-button, var(--radius-sm, 6px));
}

/* Container / card corner utilities (use --radius-container) */
.radius-container-pill {
    border-radius: var(--radius-container, var(--radius-lg, 12px));
}

/* Only top corners rounded (bottom flush) */
.radius-container-top-only {
    border-top-left-radius: var(--radius-container, var(--radius-lg, 12px));
    border-top-right-radius: var(--radius-container, var(--radius-lg, 12px));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Only bottom corners rounded (top flush) */
.radius-container-bottom-only {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-container, var(--radius-lg, 12px));
    border-bottom-right-radius: var(--radius-container, var(--radius-lg, 12px));
}

/* Outer corners rounded when container is docked to the left */
.radius-container-left-cut {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-container, var(--radius-lg, 12px));
    border-bottom-right-radius: var(--radius-container, var(--radius-lg, 12px));
}

/* Outer corners rounded when container is docked to the right */
.radius-container-right-cut {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-container, var(--radius-lg, 12px));
    border-bottom-left-radius: var(--radius-container, var(--radius-lg, 12px));
}