/*
 * Deepslate: a theme for the squaremap web UI
 * Tested against squaremap 1.3.x (Leaflet 1.9 frontend).
 *
 * Install
 *   1. In plugins/squaremap/config.yml set  settings.web-directory.auto-update: false
 *      (otherwise squaremap overwrites index.html on every start).
 *   2. Put this file in the squaremap web folder (plugins/squaremap/web/).
 *   3. In web/index.html, after the existing <link rel="stylesheet" ...> line, add:
 *        <link rel="stylesheet" href="squaremap-deepslate.css">
 *   4. Hard-refresh the map (Ctrl+Shift+R). No server restart needed.
 *   After a squaremap update, turn auto-update back on once, restart, then repeat
 *   steps 1 and 3 so you get the new frontend files.
 *
 * Customize by editing the variables in :root below.
 *
 * AI Disclosure: This file was generated and reviewed by Claude Opus 5.5.
 */

/* Font. Delete this line to use system fonts only (no request to Google). */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

:root {
    --sq-font: "Barlow Semi Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --sq-panel: rgba(36, 40, 47, 0.88);      /* deepslate */
    --sq-panel-solid: #24282f;
    --sq-raised: rgba(255, 255, 255, 0.06);  /* hover / pressed fill */
    --sq-line: rgba(255, 255, 255, 0.09);    /* dividers and panel edges */
    --sq-text: #ebe8e2;
    --sq-muted: #9aa1ab;

    --sq-accent: #5cbfa4;                    /* oxidized copper */
    --sq-accent-soft: rgba(92, 191, 164, 0.16);

    --sq-radius: 8px;
    --sq-radius-small: 6px;
    --sq-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --sq-blur: blur(8px) saturate(1.2);
}

/* ---------- Base ---------- */

.leaflet-container,
#sidebar {
    font-family: var(--sq-font);
}

.leaflet-container a {
    color: var(--sq-accent);
}

.leaflet-container :focus-visible,
#sidebar :focus-visible {
    outline: 2px solid var(--sq-accent);
    outline-offset: 2px;
}

/* Markers (player arrows, spawn, plugin icons) stay legible on bright terrain */
.leaflet-marker-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

/* ---------- Shared panel look for every Leaflet control ---------- */

.leaflet-bar,
.leaflet-touch .leaflet-bar,
.leaflet-control-layers,
.leaflet-touch .leaflet-control-layers {
    background: var(--sq-panel);
    -webkit-backdrop-filter: var(--sq-blur);
    backdrop-filter: var(--sq-blur);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-radius);
    box-shadow: var(--sq-shadow);
    color: var(--sq-text);
    overflow: hidden;
}

/* ---------- Zoom buttons ---------- */

.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
    width: 34px;
    height: 34px;
    line-height: 32px;
    background: transparent;
    color: var(--sq-text);
    border-bottom: 1px solid var(--sq-line);
    font: 600 20px/32px var(--sq-font);
    transition: background-color 0.15s;
}

.leaflet-bar a:last-child {
    border-bottom: none;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus-visible {
    background: var(--sq-raised);
    color: var(--sq-accent);
}

.leaflet-bar a:first-child,
.leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child {
    border-radius: 0;
}

.leaflet-bar a.leaflet-disabled {
    background: transparent;
    color: rgba(235, 232, 226, 0.25);
}

/* ---------- Layer toggles (top left) ---------- */

.leaflet-control-layers-toggle,
.leaflet-touch .leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
    width: 34px;
    height: 34px;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebe8e2' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 8 12 13l9.5-5z'/%3E%3Cpath d='m2.5 12 9.5 5 9.5-5' opacity='.75'/%3E%3Cpath d='m2.5 16 9.5 5 9.5-5' opacity='.5'/%3E%3C/svg%3E");
}

.leaflet-control-layers-expanded {
    padding: 8px 12px 8px 10px;
}

.leaflet-control-layers-list {
    font-size: 14px;
    font-weight: 500;
}

.leaflet-control-layers label {
    display: block;
    padding: 3px 0;
    cursor: pointer;
}

.leaflet-control-layers label:hover {
    color: var(--sq-accent);
}

.leaflet-control-layers-selector {
    accent-color: var(--sq-accent);
    margin: 0 6px 0 0;
    vertical-align: -1px;
}

.leaflet-control-layers-separator {
    border-top-color: var(--sq-line);
    margin: 6px -12px 6px -10px;
}

/* ---------- Copy-link button and coordinates (bottom left) ---------- */

.leaflet-bottom.leaflet-left .link,
.leaflet-bottom.leaflet-left .coordinates {
    margin-right: 0;
    vertical-align: bottom;
}

div.leaflet-control-layers.link {
    cursor: pointer;
    transition: background-color 0.15s;
}

div.leaflet-control-layers.link:hover {
    background-color: rgba(52, 58, 67, 0.92);
}

div.leaflet-control-layers.link img {
    display: block;
    width: 38px;
    height: 38px;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebe8e2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
}

div.leaflet-control-layers.link:hover img {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cbfa4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
}

div.leaflet-control-layers.coordinates {
    height: auto;
    min-height: 38px;
    box-sizing: border-box;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: var(--sq-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Sidebar (worlds and players) ---------- */

#sidebar {
    background: var(--sq-panel);
    -webkit-backdrop-filter: var(--sq-blur);
    backdrop-filter: var(--sq-blur);
    border-left: 1px solid var(--sq-line);
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.3);
    color: var(--sq-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

#sidebar.show {
    width: 220px;
}

#sidebar #pin {
    right: -184px;
    width: 18px;
    height: 18px;
    margin: 10px 8px 6px;
    padding: 5px;
    border: none;
    border-radius: var(--sq-radius-small);
    filter: none;
    -webkit-filter: none;
    opacity: 0.7;
    transition: opacity 0.15s, background-color 0.15s;
}

#sidebar #pin:hover,
#sidebar #pin.pinned:hover,
#sidebar #pin.unpinned:hover {
    border: none;
    background: var(--sq-raised);
    opacity: 1;
}

#sidebar #pin.pinned {
    opacity: 1;
}

#sidebar fieldset {
    margin: 0;
    padding: 0 8px;
    border: none;
    border-top: 1px solid var(--sq-line);
}

#sidebar fieldset#worlds {
    margin: 0;
    padding-bottom: 8px;
}

#sidebar fieldset#players {
    margin: 0;
    padding-bottom: 12px;
}

#sidebar legend {
    padding: 14px 8px 6px;
    margin: 0;
    color: var(--sq-muted);
    font-size: 13px;
    font-weight: 600;
    float: left;          /* keeps the legend inside the fieldset, under the divider */
    width: 100%;
    box-sizing: border-box;
}

#sidebar fieldset a,
#sidebar fieldset a:visited,
#sidebar fieldset#players a {
    clear: both;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--sq-radius-small);
    color: var(--sq-text);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s, color 0.15s;
}

#sidebar fieldset a span {
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar fieldset a:hover,
#sidebar fieldset a.following:hover {
    background: var(--sq-raised);
}

#sidebar fieldset a.following {
    background: var(--sq-accent-soft);
    box-shadow: inset 3px 0 0 var(--sq-accent);
    color: #ffffff;
}

#sidebar fieldset a img {
    flex: none;
    padding: 0;
    filter: none;
    -webkit-filter: none;
}

#sidebar fieldset#worlds a img {
    width: 20px;
    height: 20px;
    /* lifts the dark nether/end cubes off the slate background */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
    -webkit-filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

#sidebar fieldset#players a img.head {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Players in another world */
#sidebar fieldset a .other-world {
    filter: none !important;
    opacity: 0.45;
    font-style: normal;
}

#sidebar fieldset#players::-webkit-scrollbar-thumb {
    border-right-color: rgba(255, 255, 255, 0.18);
}

#sidebar fieldset#players::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#sidebar fieldset#players {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ---------- Player nameplates ---------- */

.leaflet-nameplate-pane .leaflet-tooltip {
    padding: 3px 7px 3px 3px;
    background: var(--sq-panel);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-radius-small);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-family: var(--sq-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.leaflet-nameplate-pane .leaflet-tooltip::before {
    display: none;
}

.leaflet-nameplate-pane .nameplate-container {
    gap: 6px;
}

.leaflet-nameplate-pane img.head {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.leaflet-nameplate-pane .nameplate-col2 {
    gap: 2px;
}

/* ---------- Marker tooltips (claim names, warps, etc.) ---------- */

.leaflet-tooltip-pane .leaflet-tooltip {
    padding: 4px 9px;
    background: var(--sq-panel-solid);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-radius-small);
    box-shadow: var(--sq-shadow);
    color: var(--sq-text);
    font-family: var(--sq-font);
    font-size: 14px;
    font-weight: 600;
}

.leaflet-tooltip-pane .leaflet-tooltip-top::before    { border-top-color: var(--sq-panel-solid); }
.leaflet-tooltip-pane .leaflet-tooltip-bottom::before { border-bottom-color: var(--sq-panel-solid); }
.leaflet-tooltip-pane .leaflet-tooltip-left::before   { border-left-color: var(--sq-panel-solid); }
.leaflet-tooltip-pane .leaflet-tooltip-right::before  { border-right-color: var(--sq-panel-solid); }

/* ---------- Popups (click on a claim, marker, etc.) ---------- */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--sq-panel-solid);
    color: var(--sq-text);
    box-shadow: var(--sq-shadow);
}

.leaflet-popup-content-wrapper {
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-radius);
}

.leaflet-popup-content {
    margin: 12px 30px 12px 14px;
    font-family: var(--sq-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.leaflet-popup-content b,
.leaflet-popup-content strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: var(--sq-radius-small);
    color: var(--sq-muted);
    font: 400 20px/24px var(--sq-font);
}

.leaflet-container a.leaflet-popup-close-button:hover {
    background: var(--sq-raised);
    color: var(--sq-text);
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #sidebar *,
    .leaflet-nameplate-pane div,
    .leaflet-marker-pane img {
        transition: none !important;
    }
}