/* ============================================================================
   MapSystem design system
   Tokens taken from the "Geospatial Precision System" design (DESIGN.md):
   MapSystem Blue (#0052CC), Hanken Grotesk, JetBrains Mono for data/coords,
   light + dark themes, low-contrast outlines over shadows, dense data tables.
   ========================================================================== */

:root {
    /* Brand / primary */
    --ms-primary: #0052cc;
    --ms-primary-strong: #003d9b;
    --ms-on-primary: #ffffff;

    /* Surfaces (light) */
    --ms-bg: #f7f9fb;
    --ms-surface: #ffffff;
    --ms-surface-2: #f2f4f6;
    --ms-surface-3: #eceef0;

    /* Text */
    --ms-text: #0f172a;       /* headlines (slate 900) */
    --ms-text-body: #1e293b;  /* body (slate 800) */
    --ms-text-muted: #64748b;

    /* Lines / outlines */
    --ms-outline: #e2e8f0;
    --ms-outline-strong: #cbd5e1;

    /* Status (darkened for AA contrast on light) */
    --ms-ok-bg: #dcfce7;   --ms-ok-fg: #15803d;
    --ms-warn-bg: #fef9c3; --ms-warn-fg: #a16207;
    --ms-err-bg: #fee2e2;  --ms-err-fg: #b91c1c;

    /* Radii (DESIGN.md) */
    --ms-radius-sm: .25rem;
    --ms-radius: .5rem;
    --ms-radius-md: .75rem;
    --ms-radius-lg: 1rem;

    /* Spacing rhythm (4px base) */
    --ms-gutter: 16px;
    --ms-panel-pad: 20px;

    --ms-sidebar-w: 264px;
    --ms-topbar-h: 60px;

    --ms-font: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --ms-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Aliases used by component-scoped styles. They resolve through the theme variables above, so
       a dark-theme override of --ms-outline reaches every component that says --ms-border. Without
       these, borders, tab underlines and progress bars simply rendered invisible. */
    --ms-danger: #c0341d;
}

[data-theme="dark"] {
    --ms-bg: #0e1417;
    --ms-surface: #161d22;
    --ms-surface-2: #1b2329;
    --ms-surface-3: #222c33;
    --ms-text: #eaf0f4;
    --ms-text-body: #cdd7df;
    --ms-text-muted: #8b9aa6;
    --ms-outline: #2a353d;
    --ms-outline-strong: #3a4751;
    /* Text/icon blue: 6:1 on the dark surfaces. Filled buttons use the deeper shade so white
       labels on them stay readable (4.7:1). */
    --ms-primary: #5b9bff;
    --ms-primary-strong: #2f6fe0;
    --ms-danger: #ff8a78;
    --ms-ok-bg: #12351f;   --ms-ok-fg: #6ee7a0;
    --ms-warn-bg: #3a2f0b; --ms-warn-fg: #fcd34d;
    --ms-err-bg: #3d1614;  --ms-err-fg: #fca5a5;
    color-scheme: dark;    /* native controls: scrollbars, select popups, date/number pickers */
}

/* Aliases must be (re)declared on every element that sets a theme: a custom property that refers
   to another one is resolved where it is DECLARED, so aliases declared only on :root kept the
   light values inside the dark shell. */
:root, [data-theme] {
    --ms-border: var(--ms-outline);
    --ms-muted: var(--ms-text-muted);
    --ms-accent: var(--ms-primary);
}

/* Inherited colours are resolved where they are declared too: body's colour is computed from the
   light tokens, so the shell restates it inside the themed scope. Without this every element that
   simply inherits its colour (table cells, <strong>, numbers, paths) stayed dark slate on the dark
   background in night mode. */
.ms-shell { color: var(--ms-text-body); }

[data-theme="dark"] .ms-btn-primary, [data-theme="dark"] .ms-avatar {
    background: var(--ms-primary-strong); border-color: var(--ms-primary-strong);
}
[data-theme="dark"] .ms-btn-primary:hover { background: #2560c8; }
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
[data-theme="dark"] select, [data-theme="dark"] textarea {
    background-color: var(--ms-surface); color: var(--ms-text-body); border-color: var(--ms-outline-strong);
}
[data-theme="dark"] ::placeholder { color: var(--ms-text-muted); opacity: 1; }

* { box-sizing: border-box; }
/* Form controls do not inherit the page font by default (buttons fell back to Arial). */
button, input, select, textarea { font-family: inherit; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--ms-font);
    color: var(--ms-text-body);
    background: var(--ms-bg);
    font-size: 17px;
    line-height: 1.5;
}

h1, h2, h3 { color: var(--ms-text); font-weight: 600; letter-spacing: -0.01em; }

code, .ms-mono { font-family: var(--ms-mono); font-size: 12px; }
.ms-muted { color: var(--ms-text-muted); }
.ms-spacer { flex: 1; }

/* ---- Shell ------------------------------------------------------------- */
.ms-shell { display: flex; min-height: 100vh; background: var(--ms-bg); }

.ms-sidebar {
    width: var(--ms-sidebar-w);
    flex: 0 0 var(--ms-sidebar-w);
    background: var(--ms-surface);
    border-right: 1px solid var(--ms-outline);
    display: flex;
    flex-direction: column;
}

.ms-brand {
    height: var(--ms-topbar-h);
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--ms-outline);
    font-weight: 700; color: var(--ms-text);
}
.ms-brand-mark { color: var(--ms-primary); font-size: 22px; }
.ms-brand-logo { display: block; flex: none; }

.ms-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.ms-topbar {
    min-height: var(--ms-topbar-h);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 8px;
    padding: 6px 24px;
    background: var(--ms-surface);
    border-bottom: 1px solid var(--ms-outline);
}
.ms-workspace { display: flex; flex-direction: column; line-height: 1.15; }
.ms-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ms-text-muted); }
.ms-search { width: 280px; }
.ms-search input {
    width: 100%; padding: 8px 14px;
    border: 1px solid var(--ms-outline-strong); border-radius: 9999px;
    background: var(--ms-surface); color: var(--ms-text-body);
}
/* All top-bar tools pushed to the right. */
.ms-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ms-icon-btn {
    border: 1px solid var(--ms-outline); background: var(--ms-surface);
    border-radius: var(--ms-radius); width: 36px; height: 36px; cursor: pointer;
    color: var(--ms-text-body);
}
.ms-avatar {
    width: 32px; height: 32px; border-radius: 9999px;
    background: var(--ms-primary); color: var(--ms-on-primary);
    display: grid; place-items: center; font-weight: 600;
}

/* Signed-in user chip → click to reveal a logout dropdown */
.ms-user-menu { position: relative; }
.ms-user { display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: var(--ms-radius); padding: 4px 6px; color: inherit; }
.ms-user:hover { background: var(--ms-surface-2); }
.ms-user-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ms-user-name { font-size: 14px; font-weight: 600; color: var(--ms-text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-user-caret { color: var(--ms-text-muted); font-size: 11px; }
.ms-user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px;
    background: var(--ms-surface); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-sm);
    box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; z-index: 1200; }
.ms-dropdown-item { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none;
    border: none; border-radius: var(--ms-radius-sm); cursor: pointer; color: var(--ms-text); font-size: 15px; }
.ms-dropdown-item:hover { background: var(--ms-surface-2); color: var(--ms-primary); }

/* Gentle motion — buttons, cards, theme switch feel responsive, never flashy */
.ms-btn, .ms-icon-btn, .ms-nav-item, .ms-kind-card, .ms-matrix-cell { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ms-shell { transition: background-color .2s ease; }
.ms-btn:focus-visible, .ms-icon-btn:focus-visible, .ms-input:focus-visible {
    outline: 2px solid var(--ms-primary); outline-offset: 2px;
}

.ms-content { padding: 24px; overflow: auto; }
.ms-page-title { margin: 0 0 20px; font-size: 28px; }

/* ---- Navigation -------------------------------------------------------- */
.ms-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.ms-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--ms-radius);
    color: var(--ms-text-body); text-decoration: none; font-size: 15px;
}
.ms-nav-item:hover { background: var(--ms-surface-2); }
.ms-nav-item.active { background: color-mix(in srgb, var(--ms-primary) 12%, transparent); color: var(--ms-primary); font-weight: 600; }
.ms-nav-ico { width: 18px; text-align: center; opacity: .85; font-variant-emoji: text; } /* menü simgeleri tek renk kalsın (emoji olarak çizilmesin) */

/* ---- Cards / panels ---------------------------------------------------- */
.ms-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ms-gutter); margin-bottom: 24px; }
.ms-metric {
    background: var(--ms-surface); border: 1px solid var(--ms-outline);
    border-radius: var(--ms-radius-md); padding: var(--ms-panel-pad);
    display: flex; flex-direction: column; gap: 6px;
}
.ms-metric-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-muted); }
.ms-metric-value { font-size: 30px; font-weight: 700; color: var(--ms-text); }

.ms-panel {
    background: var(--ms-surface); border: 1px solid var(--ms-outline);
    border-radius: var(--ms-radius-md); padding: var(--ms-panel-pad); margin-bottom: 20px;
}
/* A CLOSED <details> must not paint its contents. Chrome only hides them while the element keeps
   its default block display; a panel that is also a <details> (the Services accordions) gets a
   `display` from .ms-panel, and the collapsed endpoint lists were then still laid out — drawing on
   top of the sections underneath. Belt and braces, cheap, and it cannot affect an open accordion. */
details:not([open]) > *:not(summary) { display: none !important; }

.ms-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ms-panel-head h2 { font-size: 16px; margin: 0; }

.ms-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Buttons ----------------------------------------------------------- */
.ms-btn {
    border: 1px solid var(--ms-outline-strong); background: var(--ms-surface);
    color: var(--ms-text-body); padding: 8px 16px; border-radius: var(--ms-radius);
    cursor: pointer; text-decoration: none; font-size: 15px; display: inline-block;
}
.ms-btn:hover { background: var(--ms-surface-2); }
.ms-btn-primary { background: var(--ms-primary); border-color: var(--ms-primary); color: var(--ms-on-primary); }
.ms-btn-primary:hover { background: var(--ms-primary-strong); }

/* ---- Inputs / toolbar -------------------------------------------------- */
.ms-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ms-input {
    padding: 8px 14px; border: 1px solid var(--ms-outline-strong);
    border-radius: var(--ms-radius); background: var(--ms-surface); color: var(--ms-text-body);
    /* NO fixed minimum: a 240px floor made every input overflow its cell inside tables, grid
       columns and side panels, which pushed whole pages sideways. Inputs now shrink with their
       container; standalone toolbar inputs get a comfortable size from .ms-toolbar below. */
    min-width: 0; max-width: 100%;
}
.ms-toolbar > .ms-input { flex: 1 1 220px; min-width: 180px; max-width: 420px; }
.ms-input:focus, .ms-search input:focus { outline: none; border-color: var(--ms-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-primary) 20%, transparent); }

/* ---- Tables (dense) ---------------------------------------------------- */
.ms-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ms-table th, .ms-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ms-outline); }
.ms-table th { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ms-text-muted); font-weight: 600; }
.ms-table tbody tr:hover { background: var(--ms-surface-2); }

/* ---- Chips ------------------------------------------------------------- */
.ms-chip { display: inline-block; padding: 2px 8px; line-height: 1.5; vertical-align: middle; border-radius: 9999px; font-size: 12px; font-weight: 600; background: var(--ms-surface-3); color: var(--ms-text-muted); }
.ms-chip-ok { background: var(--ms-ok-bg); color: var(--ms-ok-fg); }
.ms-chip-warn { background: var(--ms-warn-bg); color: var(--ms-warn-fg); }
.ms-chip-err { background: var(--ms-err-bg); color: var(--ms-err-fg); }

/* ---- Empty state ------------------------------------------------------- */
.ms-empty { padding: 28px; text-align: center; color: var(--ms-text-muted); background: var(--ms-surface); border: 1px dashed var(--ms-outline-strong); border-radius: var(--ms-radius-md); }

/* ---- Style cards ------------------------------------------------------- */
.ms-style-card { background: var(--ms-surface); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-md); padding: 12px; }
.ms-style-thumb { height: 96px; border-radius: var(--ms-radius); background: linear-gradient(135deg, var(--ms-surface-3), var(--ms-primary)); margin-bottom: 10px; opacity: .85; }
.ms-style-name { font-weight: 600; color: var(--ms-text); margin-bottom: 6px; }

/* ---- Endpoint list ----------------------------------------------------- */
.ms-endpoint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-endpoint-list code { background: var(--ms-surface-2); padding: 3px 6px; border-radius: var(--ms-radius-sm); }

/* Each endpoint is a ROW, not free-flowing inline content: chip · url · copy button.
   As inline content the chips' vertical padding did not grow the line box, so when a long URL
   wrapped, the next line's chip was drawn ON TOP of the previous one. A flex row also keeps the
   copy buttons in a straight column instead of scattering them after each URL. */
.ms-endpoint-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.ms-endpoint-list li > code { flex: 1 1 auto; min-width: 0; }
.ms-endpoint-list li > .ms-chip { flex: 0 0 auto; margin-top: 2px; }
.ms-endpoint-list li > .ms-btn { flex: 0 0 auto; }

/* ---- Tabs -------------------------------------------------------------- */
.ms-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ms-outline); margin-bottom: 16px; flex-wrap: wrap; }
.ms-tab { padding: 8px 14px; font-size: 15px; color: var(--ms-text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.ms-tab-active { color: var(--ms-primary); border-bottom-color: var(--ms-primary); font-weight: 600; }

/* ---- Map screen (hero) ------------------------------------------------- */
.ms-map-screen { position: relative; height: calc(100vh - var(--ms-topbar-h) - 48px); border-radius: var(--ms-radius-md); overflow: hidden; border: 1px solid var(--ms-outline); }
.ms-map { position: absolute; inset: 0; }
.ms-map-panel {
    position: absolute; top: 16px; left: 16px; width: 340px;
    /* Above Leaflet panes/controls (which go up to ~z-index 1000) so the panel is never covered. */
    z-index: 1100;
    max-height: calc(100% - 32px); overflow-y: auto; overflow-x: hidden;
    background: color-mix(in srgb, var(--ms-surface) 96%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ms-map-panel-head {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; font: inherit; font-weight: 600; color: var(--ms-text); text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--ms-outline); cursor: pointer;
}
.ms-map-panel-caret { color: var(--ms-text-muted); transition: transform .15s ease; }
/* Desktop: open by default, the header folds it. Phone: folded by default, the header opens it. */
.ms-map-panel.toggled .ms-map-panel-body { display: none; }
.ms-map-panel.toggled .ms-map-panel-caret { transform: rotate(-90deg); }
.ms-map-panel.toggled .ms-map-panel-head { border-bottom: 0; }
@media (max-width: 640px) {
    .ms-map-panel .ms-map-panel-body { display: none; }
    .ms-map-panel .ms-map-panel-caret { transform: rotate(-90deg); }
    .ms-map-panel .ms-map-panel-head { border-bottom: 0; }
    .ms-map-panel.toggled .ms-map-panel-body { display: block; }
    .ms-map-panel.toggled .ms-map-panel-caret { transform: none; }
    .ms-map-panel.toggled .ms-map-panel-head { border-bottom: 1px solid var(--ms-outline); }
}
.ms-map-panel-empty { padding: 14px; color: var(--ms-text-muted); font-size: 15px; }
.ms-layer-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 15px; }
.ms-layer-row-indent { padding-left: 30px; }
.ms-layer-row > span { min-width: 0; overflow-wrap: anywhere; }
.ms-layer-row > input { flex: none; }
.ms-ws-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 15px; font-weight: 600;
    color: var(--ms-text); cursor: pointer; border-top: 1px solid var(--ms-outline); }
.ms-ws-head:hover { background: var(--ms-surface-2); }
.ms-ws-caret { width: 12px; color: var(--ms-text-muted); }
.ms-ws-count { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--ms-text-muted);
    background: var(--ms-surface-2); border-radius: 9999px; padding: 1px 8px; }

/* ---- Sources & layers (master/detail) ---------------------------------- */
.ms-row-click { cursor: pointer; }
.ms-row-click:hover { background: var(--ms-surface-2); }
.ms-detail > td { background: color-mix(in srgb, var(--ms-surface-2) 60%, transparent); padding: 12px 14px; }
.ms-subtable { margin: 0; background: var(--ms-surface); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-sm); }
.ms-edit-box { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.ms-btn-danger { color: var(--ms-danger, #c0341d); border-color: color-mix(in srgb, var(--ms-danger, #c0341d) 40%, var(--ms-outline)); }
.ms-btn-danger:hover { background: color-mix(in srgb, var(--ms-danger, #c0341d) 10%, transparent); }
.ms-subhead { margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--ms-text); }
.ms-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; max-width: 680px; }
.ms-lang { display: flex; gap: 4px; align-items: center; font-size: 14px; color: var(--ms-text-muted); }
.ms-lang a { color: var(--ms-text-muted); text-decoration: none; padding: 6px 8px; border-radius: 4px; min-width: 32px; text-align: center; }
.ms-lang a[aria-current="true"] { color: var(--ms-primary); font-weight: 600; }
.ms-lang a:hover { color: var(--ms-primary); background: var(--ms-surface-2); }
.ms-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 560px) { .ms-field-grid { grid-template-columns: 1fr; } }
.ms-swatches { display: inline-flex; gap: 5px; align-items: center; }
.ms-sw-fill { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); display: inline-block; }
.ms-sw-line { width: 22px; border-radius: 2px; display: inline-block; }
.ms-sw-pt { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); display: inline-block; }
.ms-preview-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 6px 0 12px;
    background: var(--ms-surface-2); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-sm); }

/* ---- Connect wizard ---------------------------------------------------- */
.ms-wizard-steps { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ms-wstep { padding: 6px 12px; border-radius: 9999px; font-size: 14px; background: var(--ms-surface-2); color: var(--ms-text-muted); border: 1px solid var(--ms-outline); }
.ms-wstep.done { background: color-mix(in srgb, var(--ms-primary) 14%, transparent); color: var(--ms-primary); border-color: var(--ms-primary); font-weight: 600; }

.ms-kind-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; background: var(--ms-surface); border: 1px solid var(--ms-outline-strong); border-radius: var(--ms-radius-md); cursor: pointer; text-align: left; }
.ms-kind-card:hover { border-color: var(--ms-primary); }
.ms-kind-card.selected { border-color: var(--ms-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-primary) 20%, transparent); }
.ms-kind-ico { font-size: 28px; }
.ms-kind-name { font-weight: 600; color: var(--ms-text); }

.ms-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ms-field > span { font-size: 14px; color: var(--ms-text-muted); }
.ms-input-wide { width: 100%; font-family: var(--ms-mono); font-size: 14px; }

.ms-inline-msg { margin-top: 12px; padding: 10px 14px; border-radius: var(--ms-radius); font-size: 15px; }
.ms-inline-msg.ok { background: var(--ms-ok-bg); color: var(--ms-ok-fg); }
.ms-inline-msg.err { background: var(--ms-err-bg); color: var(--ms-err-fg); }

.ms-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Buttons, badges and chips must never be squeezed into a one-character-per-line
   column. Text stays on one line and the cell scrolls/wraps instead. */
.ms-btn, .ms-btn-sm, .ms-badge, .ms-chip, .ms-row-actions > * { white-space: nowrap; }
.ms-table td .ms-row-actions { min-width: max-content; }

/* One cached pyramid per line. A GRID (not a flex row) so that format, grid set, zoom range,
   tile count and size line up in columns down the list instead of wrapping into a ragged block —
   the cache list is read by scanning a column, not by reading sentences. */
.ms-pyr {
    display: grid;
    grid-template-columns: 44px minmax(120px, 1fr) 62px 92px 68px auto;
    align-items: center; column-gap: 8px; row-gap: 2px; padding: 3px 0;
    border-bottom: 1px dashed var(--ms-outline);
}
.ms-pyr:last-child { border-bottom: 0; }
.ms-pyr > * { min-width: 0; }
.ms-pyr-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ms-pyr .ms-input, .ms-pyr select { width: auto; max-width: 160px; padding: 3px 8px; font-size: 13px; }
.ms-pyr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Narrow screens: drop to two lines rather than squeezing six columns into nothing. */
@media (max-width: 1180px) {
    .ms-pyr { grid-template-columns: 44px 1fr auto; }
    .ms-pyr-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Cache table: the pyramid column carries the most content, so it gets the room, and every cell
   starts at the top — otherwise a tall pyramid list floats the layer name into the middle. */
.ms-cache-table td, .ms-cache-table th { vertical-align: top; }
.ms-cache-table .ms-col-pyramids { width: 42%; }
.ms-btn-sm { padding: 4px 10px; font-size: 14px; }

/* ---- Assignment matrix --------------------------------------------------- */
/* Both selectors carry the table qualifier on purpose: `.ms-table td` (0,1,1) beats a bare
   `.ms-matrix-cell` (0,1,0), which is what made the dots sit left of their column header while
   the headers themselves were centred — the columns looked shifted by half a cell. */
.ms-matrix th.ms-matrix-node { text-align: center; min-width: 90px; }
.ms-matrix td.ms-matrix-cell { text-align: center; cursor: pointer; user-select: none; }
.ms-matrix-cell:hover { background: color-mix(in srgb, var(--ms-primary) 10%, transparent); }
.ms-matrix-cell.pinned { background: color-mix(in srgb, var(--ms-primary) 16%, transparent); }
.ms-matrix tr[draggable="true"] { cursor: grab; }

/* ---- Login ---------------------------------------------------------------- */
.ms-login-screen { min-height: 100vh; display: grid; place-items: center; background: var(--ms-bg); padding: 24px; }
.ms-login-card { width: 100%; max-width: 380px; background: var(--ms-surface); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-lg); padding: 32px 28px; box-shadow: 0 12px 24px rgba(0,0,0,.06); }

/* ---- Settings gauges ----------------------------------------------------- */
.ms-gauge-row { display: flex; gap: 16px; margin-bottom: 18px; }
.ms-gauge { flex: 1; background: var(--ms-surface-2); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ms-over { color: var(--ms-err-fg) !important; }

/* ---- 3D viewer ---------------------------------------------------------- */
.ms3d-popup {
    position: absolute; z-index: 20; max-width: 280px;
    background: var(--ms-surface); border: 1px solid var(--ms-outline-strong);
    border-radius: var(--ms-radius); padding: 10px 12px;
    font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
    pointer-events: none;
}
.ms3d-popup b { color: var(--ms-text); }
.ms-map-panel-actions { padding: 10px 14px; border-top: 1px solid var(--ms-outline); }

/* ---- Style editor ------------------------------------------------------ */
.ms-editor { display: grid; grid-template-columns: 380px 1fr; gap: 16px; height: calc(100vh - var(--ms-topbar-h) - 48px); }
.ms-editor-side { overflow: auto; }
.ms-editor-preview { border: 1px solid var(--ms-outline); border-radius: var(--ms-radius-md); overflow: hidden; position: relative; }
.ms-editor-preview .ms-map { position: absolute; inset: 0; }
.ms-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ms-text); margin-bottom: 8px; }
@media (max-width: 900px) { .ms-editor { grid-template-columns: 1fr; height: auto; } .ms-editor-preview { height: 360px; } }

/* ==========================================================================
   LAYOUT HARDENING — the rules that keep pages from drifting sideways.
   Three causes were behind the misalignment reports: fixed-width inputs inside
   narrow cells, unbreakable long strings (URLs, file paths, EPSG lists) in
   tables, and absolutely positioned pickers landing under other elements.
   ========================================================================== */

/* Every flex/grid child may shrink below its content width — without this a
   single long word inside a panel widens the whole page. */
.ms-content, .ms-main, .ms-panel, .ms-field, .ms-metric, .ms-gauge { min-width: 0; }
.ms-content { flex: 1 1 auto; min-height: 0; }

/* ---- Status helpers used across the pages ------------------------------ */
.ms-badge {
    display: inline-block; padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 600;
    background: var(--ms-surface-3); color: var(--ms-text-muted); white-space: nowrap;
}
.ms-badge-ok { background: var(--ms-ok-bg); color: var(--ms-ok-fg); }
.ms-badge-warn { background: var(--ms-warn-bg); color: var(--ms-warn-fg); }
.ms-badge-err { background: var(--ms-err-bg); color: var(--ms-err-fg); }

.ms-alert { padding: 10px 14px; border-radius: var(--ms-radius); font-size: 15px; border: 1px solid transparent; }
.ms-alert-ok { background: var(--ms-ok-bg); color: var(--ms-ok-fg); border-color: color-mix(in srgb, var(--ms-ok-fg) 25%, transparent); }
.ms-alert-warn { background: var(--ms-warn-bg); color: var(--ms-warn-fg); border-color: color-mix(in srgb, var(--ms-warn-fg) 25%, transparent); }
.ms-alert-error { background: var(--ms-err-bg); color: var(--ms-err-fg); border-color: color-mix(in srgb, var(--ms-err-fg) 25%, transparent); }

.ms-hint { font-size: 13px; color: var(--ms-text-muted); }
.ms-error { font-size: 13px; color: var(--ms-err-fg); }

/* ---- Shared grids (were page-local, so half the pages never got them) --- */
.ms-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ms-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.ms-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
.ms-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 13px; }

/* Long technical strings wrap instead of pushing the layout. */
/* Long ids/URLs in CELLS may break anywhere, but HEADINGS must not: "ÖNBELLEKLENECEK FORMAT"
   was being split mid-word ("ÖNBELLEKLENECE / K FORMAT"), which reads like a typo. */
.ms-table td, .ms-panel, .ms-empty { overflow-wrap: anywhere; }
.ms-table th { overflow-wrap: break-word; word-break: normal; hyphens: none; }
code, .ms-mono, .ms-endpoint-list li { overflow-wrap: anywhere; word-break: break-word; }

/* Inputs fill the field they belong to, so labels and controls line up in a column. */
.ms-field > .ms-input,
.ms-field > input, .ms-field > select, .ms-field > textarea,
.ms-field > input[type="range"] { width: 100%; }
.ms-field > input[type="color"] { width: 48px; height: 32px; padding: 2px; flex: none; }
.ms-field > input[type="checkbox"], .ms-field > input[type="radio"] { width: auto; }

/* Table cells: controls and action buttons stay inside their column. */
.ms-table .ms-input { width: 100%; }
.ms-row-actions { flex-wrap: wrap; }

/* Wide, un-wrappable tables (matrices, endpoint lists) scroll on their own
   instead of stretching the page. */
.ms-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pop-over pickers (CRS / grid set / user menu) must sit above Leaflet panes
   (z-index up to ~1000) and above sticky headers. */
.ms-gs-pop, .ms-crs-pop { z-index: 1200; max-width: min(420px, calc(100vw - 32px)); }
.ms-crs-pop {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; min-width: 260px; padding: 6px;
    background: var(--ms-surface); border: 1px solid var(--ms-outline); border-radius: var(--ms-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Endpoint rows (Services): chip · URL · copy button on one baseline, URL takes
   the slack and wraps inside its own column instead of stretching the row. */
.ms-endpoint-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-endpoint-list li > .ms-chip { flex: none; }
.ms-endpoint-list li > code { flex: 1 1 320px; min-width: 0; }

/* Panel headers keep their action button on the right but wrap when the title is long. */
.ms-panel-head { gap: 10px; flex-wrap: wrap; }

/* Key/value rows (storage info, summaries): label left, value right, both able to wrap. */
.ms-kv { align-items: baseline; }
.ms-kv > :first-child { flex: none; color: var(--ms-text-muted); }
.ms-kv > :last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* Rows of controls line up on one baseline and wrap as a block, not per control. */
.ms-actions-row .ms-inline-msg { margin-top: 0; }
.ms-seed-form .ms-field, .ms-sd-top .ms-field { margin-bottom: 0; }

/* Map screen: fill what is left of the viewport but never collapse on a laptop. */
.ms-map-screen { min-height: 420px; }
.ms-map-panel { width: min(340px, calc(100% - 32px)); }

/* Gauges wrap instead of squeezing four readouts into one row. */
.ms-gauge-row { flex-wrap: wrap; }
.ms-gauge { flex: 1 1 160px; }

/* Brand text truncates rather than pushing the sidebar wider. */
.ms-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Page titles carry chips/badges next to them. */
.ms-page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Media never overflows its container — but NEVER inside a map. Leaflet positions its tiles and
   our vector canvas absolutely inside zero-size panes, so a percentage max-width collapses them to
   nothing (the map goes blank while the server is still serving perfectly good tiles). */
img, svg { max-width: 100%; }
.leaflet-container img, .leaflet-container svg, .leaflet-container canvas,
.leaflet-pane img, .leaflet-pane svg, .leaflet-pane canvas, canvas.leaflet-layer {
    max-width: none !important; max-height: none !important;
}

/* Two-column blocks collapse before they get cramped. */
@media (max-width: 760px) {
    .ms-grid-2, .ms-grid-3, .ms-grid-4, .ms-field-grid, .ms-rule-zoom, .ms-zoom-row { grid-template-columns: 1fr !important; }
    .ms-content { padding: 16px; }
    .ms-page-title { font-size: 23px; }
}
@media (max-width: 1024px) {
    .ms-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Responsive: sidebar becomes a drawer ------------------------------ */
.ms-only-mobile { display: none; }
@media (max-width: 900px) {
    /* The drawer must sit above the map panel (1100) and the user menu (1200), otherwise those
       float on top of the open navigation. */
    .ms-sidebar { position: fixed; top: 0; left: 0; z-index: 1300; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; }
    .ms-sidebar.open { transform: translateX(0); }
    .ms-only-mobile { display: inline-block; }
    .ms-search { display: none; }
}

/* ---- Phones: tables become cards -----------------------------------------
   A 4–6 column table squeezed into 330px breaks words letter by letter. Below 640px each row is
   laid out as a card instead: one line per cell, captioned with its column header (ms-ui.js
   copies the <th> text into data-label). Tables that are genuinely two-dimensional (the cluster
   assignment matrix) opt out with .ms-matrix / .ms-table-keep and scroll horizontally. */
@media (max-width: 640px) {
    .ms-table:not(.ms-matrix):not(.ms-table-keep) { display: block; width: 100%; }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > thead { display: none; }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody { display: block; }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr {
        display: block; padding: 8px 0; border-bottom: 1px solid var(--ms-outline);
    }
    /* Caption in a fixed left column (absolutely placed), content flows normally on the right —
       so a cell holding a name plus a small id/badge wraps like text instead of splitting into
       squeezed flex items. */
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td {
        display: block; position: relative; min-width: 0; min-height: 1.6em;
        padding: 5px 4px 5px calc(34% + 10px); border-bottom: 0;
        overflow-wrap: break-word; word-break: normal;
    }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td:not([data-label]) { padding-left: 4px; }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td:empty { display: none; }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td[data-label]::before {
        content: attr(data-label); position: absolute; left: 4px; top: 7px; width: 34%;
        font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ms-text-muted); font-weight: 600;
        overflow-wrap: break-word;
    }
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td > .ms-input,
    .ms-table:not(.ms-matrix):not(.ms-table-keep) > tbody > tr > td > select { width: 100%; }
    .ms-table td .ms-row-actions { min-width: 0; }
    .ms-col-opt { display: none !important; }
    .ms-table tbody tr.ms-detail > td { display: block; }
}

/* Touch screens: small buttons and inline links get a finger-sized hit area (WCAG 2.5.8). */
@media (pointer: coarse) {
    .ms-btn-sm { min-height: 36px; }
    .ms-lang a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}

/* FocusOnNavigate moves focus to the page <h1> for screen readers; it is not an interactive
   element, so no focus ring (the black box around every page title). */
h1:focus, h1:focus-visible { outline: none; }

/* Copy icon drawn in CSS (mask + currentColor) — the ⧉ glyph is missing from many system fonts
   and rendered as an empty box. */
.ms-ico-copy {
    display: inline-block; width: 14px; height: 14px; vertical-align: -2px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobile drawer backdrop (rendered only while the drawer is open). */
.ms-drawer-backdrop { display: none; }
@media (max-width: 900px) {
    .ms-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 1250; background: rgba(15, 23, 42, .35); }
}