/* =========================================================================
   ARCS WMS Portal
   Modern, enterprise-grade UI. Scoped under .wms-portal to avoid collisions
   with the global Triton theme. Built on the existing brand palette:
     --triton-base : #ab4c9d   (brand magenta)
     --triton-black: #0D2252   (deep navy)
   ========================================================================= */

.wms-standalone,
.wms-portal {
    /* Scoped design tokens (light theme defaults) */
    --wms-brand: var(--triton-base, #ab4c9d);
    --wms-brand-600: #98418b;
    --wms-brand-050: #f7ecf5;
    --wms-navy: var(--triton-black, #0D2252);
    --wms-ink: #1c2440;
    --wms-muted: #6b7280;
    --wms-line: #e6e8f0;
    --wms-surface: #ffffff;
    --wms-surface-2: #f7f8fb;
    --wms-surface-3: #eef1f7;
    --wms-success: #1f9d55;
    --wms-danger: #d64545;
    --wms-radius: 8px;
    --wms-radius-sm: 10px;
    --wms-shadow-sm: 0 1px 2px rgba(13, 34, 82, .06), 0 1px 3px rgba(13, 34, 82, .05);
    --wms-shadow-md: 0 6px 20px rgba(13, 34, 82, .08);
    --wms-shadow-lg: 0 20px 45px rgba(13, 34, 82, .12);
    --wms-ring: 0 0 0 4px rgba(171, 76, 157, .16);
    --wms-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------- Standalone page scaffold */
.wms-standalone {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Force light rendering of native controls/scrollbars even if the OS is
       in dark mode — this portal is light-theme only. */
    color-scheme: light;
    font-family: "Poppins", var(--triton-font, sans-serif);
    color: var(--wms-ink);
    background: var(--wms-surface-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wms-standalone .list-unstyled {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.wms-topbar .wms-container {
        max-width: none;
}

.wms-container {
    width: 100%;
     max-width: 1240px; 
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}

/* Slim top bar */
.wms-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--wms-surface);
    border-bottom: 1px solid var(--wms-line);
    box-shadow: var(--wms-shadow-sm);
}

.wms-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    flex-wrap: wrap;
}

.wms-topbar__brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.wms-topbar__brand img {
    height: 40px;
    width: auto;
}

.wms-topbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.wms-topbar__contact {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wms-topbar__contact li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--wms-muted);
}

.wms-topbar__contact i {
    color: var(--wms-brand);
    font-size: 13px;
}

.wms-topbar__contact a {
    color: var(--wms-ink);
    text-decoration: none;
    transition: color .2s var(--wms-ease);
}

.wms-topbar__contact a:hover {
    color: var(--wms-brand);
}

.wms-topbar__badges {
    align-items: center;
    gap: 10px;
}

.wms-topbar__badges:not([hidden]) {
    display: flex;
}

.wms-topbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--wms-brand) 0%, var(--wms-brand-600) 100%);
    box-shadow: 0 6px 16px rgba(171, 76, 157, .28);
}

.wms-topbar__badge--btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter .2s var(--wms-ease), transform .2s var(--wms-ease),
        background .2s var(--wms-ease), color .2s var(--wms-ease);
}

.wms-topbar__badge--btn.is-active:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Inactive tab: outline style so the active tab visually stands out. */
.wms-topbar__badge--btn:not(.is-active) {
    color: var(--wms-brand);
    background: #fff;
    border: 1.5px solid var(--wms-brand);
    box-shadow: none;
}

.wms-topbar__badge--btn:not(.is-active):hover {
    background: rgba(171, 76, 157, .08);
    transform: translateY(-1px);
}

.wms-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wms-navy);
    text-decoration: none;
    transition: color .2s var(--wms-ease);
}

.wms-topbar__back:hover {
    color: var(--wms-brand);
}

/* Login two-column layout (bootstrap-free) */
.wms-login-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 26px;
    align-items: stretch;
}

/* Slim footer */
.wms-foot {
    flex-shrink: 0;
    background: var(--wms-navy);
    color: rgba(255, 255, 255, .8);
    padding: 0;
}

.wms-foot__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.wms-foot__copy {
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
}

.wms-foot__sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, .3);
}

.wms-foot__links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wms-foot__links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    transition: color .2s var(--wms-ease);
}

.wms-foot__links a:hover {
    color: #fff;
}

.wms-portal {
    flex: 1 0 auto;
    position: relative;
    /* Centre the content vertically in the space between the top bar and the
       footer. `safe center` falls back to top-alignment when the content is
       taller than the viewport (e.g. the results view) so nothing is clipped. */
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: 24px 0 22px;
    background:
        radial-gradient(760px 420px at 16% 4%, rgba(171, 76, 157, .12), transparent 55%),
        radial-gradient(820px 460px at 88% 2%, rgba(116, 78, 190, .12), transparent 55%),
        linear-gradient(180deg, #f4eefb 0%, var(--wms-surface-2) 42%);
    color: var(--wms-ink);
    font-family: "Poppins", var(--triton-font, sans-serif);
    overflow: hidden;
}

/* Keep foreground content above the decorative layer */
.wms-portal>.wms-container {
    position: relative;
    z-index: 1;
}

.wms-standalone *,
.wms-standalone *::before,
.wms-standalone *::after,
.wms-portal *,
.wms-portal *::before,
.wms-portal *::after {
    box-sizing: border-box;
}

/* Belt-and-braces: never allow the standalone page to scroll horizontally */
.wms-standalone {
    overflow-x: hidden;
}

/* Normalise input width only. Heights are set per-component (login fields,
   search box); do NOT force height here — a class+element selector like this
   outranks single-class rules such as .wms-search__input and would collapse
   their height. */
.wms-portal input,
.wms-portal select,
.wms-portal textarea {
    width: 100%;
}

/* ------------------------------------------------------------------ Intro */
.wms-intro {
    max-width: 720px;
    margin: 0 auto 18px;
    text-align: center;
}

.wms-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--wms-brand-050);
    color: var(--wms-brand-600);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 18px;
}

.wms-intro__title {
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.18;
    font-weight: 700;
    color: var(--wms-navy);
    margin-bottom: 0px !important;
    margin-top: 0;
}

.wms-intro__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--wms-ink);
}

/* ---- Compact sign-in view so it fits in the viewport without scrolling.
   (id + class = higher specificity, wins over the base component rules) ---- */
#wmsLoginView .wms-login-card,
#wmsLoginView .wms-info-panel {
    padding: 22px 28px;
}

#wmsLoginView .wms-login-card__head {
    margin-bottom: 20px;
}

#wmsLoginView .wms-login-card__badge {
    width: 54px;
    height: 54px;
    font-size: 22px;
    margin-bottom: 10px;
    border-radius: 50%;
}

#wmsLoginView .wms-login-card__title {
    font-size: 21px;
    margin-bottom: 0;
    margin-top: 0;
}

/* The login form is a flex column (.wms-form sets `gap`), so the fields must
   NOT also carry a bottom margin — otherwise every gap is doubled (flex gap +
   margin) and the form looks loosely spaced. Spacing is owned by the form gap
   alone; the header keeps its own margin below. */
#wmsLoginView .wms-form {
    gap: 16px;
}

#wmsLoginView .wms-field {
    margin-bottom: 0;
}

#wmsLoginView .wms-login-card__subtitle {
    margin-bottom: 0;
}

#wmsLoginView .wms-info-panel__lead {
    margin-bottom: 14px;
}

#wmsLoginView .wms-info-panel__divider {
    margin: 12px 0 16px;
}

#wmsLoginView .wms-info-panel__list {
    gap: 10px;
}

/* ------------------------------------------------------------- Login view */
.wms-info-panel {
    height: 100%;
    padding: 42px 40px;
    border-radius: var(--wms-radius);
    color: #fff;
    background:
        linear-gradient(150deg, var(--wms-navy) 0%, #14295c 45%, #3a1f52 100%);
    position: relative;
    overflow: hidden;
    box-shadow: var(--wms-shadow-md);
}

.wms-info-panel::after {
    content: "";
    position: absolute;
    inset: auto -60px -80px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 76, 157, .55), transparent 62%);
    pointer-events: none;
}

.wms-info-panel__title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 12px;
    position: relative;
}

.wms-info-panel__lead {
    color: var(--wms-surface);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
    position: relative;
}

.wms-info-panel__list {
    position: relative;
    display: grid;
    gap: 18px;
}

.wms-info-panel__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.wms-info-panel__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
}

.wms-info-panel__list li span:last-child {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 1);
}

.wms-info-panel__list li strong {
    display: block;
    color: #fff;
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 15px;
}

/* -------------------------------------------------------------- Card base */
.wms-card {
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    box-shadow: var(--wms-shadow-md);
}

.wms-login-card {
    height: 100%;
    padding: 40px;
}

.wms-login-card__head {
    text-align: center;
    margin-bottom: 28px;
}

.wms-login-card__badge {
    display: inline-grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    font-size: 27px;
    color: #fff;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--wms-brand) 0%, var(--wms-brand-600) 100%);
    box-shadow: 0 12px 26px rgba(171, 76, 157, .38);
}

.wms-login-card__title {
    font-size: 23px;
    font-weight: 700;
    color: var(--wms-navy);
    margin-bottom: 6px;
}

.wms-login-card__subtitle {
    font-size: 14px;
    color: var(--wms-ink);
    margin-top: 0;
    margin-bottom: 20px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}


/* ------------------------------------------------------------------ Form */
.wms-field {
    margin-bottom: 20px;
}

.wms-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wms-navy);
    margin-bottom: 8px;
}

.wms-req {
    color: var(--wms-brand);
}

.wms-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wms-input-icon {
    position: absolute;
    left: 15px;
    font-size: 15px;
    color: var(--wms-brand-600);
    pointer-events: none;
    transition: color .2s var(--wms-ease);
}

.wms-input {
    width: 100%;
    height: 52px !important;
    padding: 0 46px 0 44px;
    font-size: 15px;
    color: var(--wms-ink);
    background: var(--wms-surface-2);
    border: 1.5px solid var(--wms-line);
    border-radius: var(--wms-radius-sm) !important;
    transition: border-color .2s var(--wms-ease), box-shadow .2s var(--wms-ease), background .2s var(--wms-ease);
    -webkit-appearance: none;
    appearance: none;
}

.wms-input::placeholder {
    color: #9aa1b2;
    opacity: 1;
}

.wms-input:hover {
    border-color: #cfd3e0;
}

.wms-input:focus {
    outline: none;
    background: var(--wms-surface);
    border-color: var(--wms-brand);
    box-shadow: var(--wms-ring);
}

.wms-input:focus+.wms-input-icon,
.wms-input-wrap:focus-within .wms-input-icon {
    color: var(--wms-brand);
}

/* Validation states */
.wms-field.is-invalid .wms-input {
    border-color: var(--wms-danger);
    background: #fdf3f3;
}

.wms-field.is-invalid .wms-input:focus {
    box-shadow: 0 0 0 4px rgba(214, 69, 69, .14);
}

.wms-field.is-valid .wms-input {
    border-color: #bfe3cc;
}

.wms-help {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--wms-muted);
}

/* An empty help line (the default state) must not reserve vertical space,
   otherwise the field it sits under grows taller than its siblings and the
   form rhythm goes uneven. It reappears automatically once JS fills it. */
.wms-help:empty {
    display: none;
}

.wms-error {
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--wms-danger);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: wms-shake .32s var(--wms-ease);
}

.wms-error::before {
    content: "\f06a";
    /* fa exclamation-circle */
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    font-size: 12px;
}

.wms-field.is-invalid .wms-help {
    display: none;
}

/* Password toggle */
.wms-pass-toggle {
    position: absolute;
    right: 6px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--wms-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color .2s var(--wms-ease), background .2s var(--wms-ease);
}

.wms-pass-toggle:hover {
    color: var(--wms-brand);
    background: var(--wms-brand-050);
}

.wms-pass-toggle:focus-visible {
    outline: none;
    box-shadow: var(--wms-ring);
}

/* --------------------------------------------------------------- Buttons */
.wms-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height:50px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s var(--wms-ease), box-shadow .2s var(--wms-ease),
        background .2s var(--wms-ease), color .2s var(--wms-ease), border-color .2s var(--wms-ease), opacity .2s;
    -webkit-tap-highlight-color: transparent;
}

.wms-btn:focus-visible {
    outline: none;
    box-shadow: var(--wms-ring);
}

.wms-btn--primary {
    width: 100%;
    color: #fff;
    background: var(--wms-brand);
    /* box-shadow: 0 10px 22px rgba(122, 62, 168, .3); */
}

/* .wms-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(122, 62, 168, .42);
} */

.wms-btn--primary:active:not(:disabled) {
    transform: translateY(0);
}

.wms-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.wms-btn--ghost {
    background: var(--wms-surface);
    color: var(--wms-navy);
    border-color: var(--wms-line);
    height: 46px;
}

.wms-btn--ghost:hover {
    border-color: var(--wms-brand);
    color: var(--wms-brand);
}

.wms-btn--outline {
    background: transparent;
    color: var(--wms-danger);
    border-color: #ecd2d2;
    height: 46px;
}

.wms-btn--outline:hover {
    background: #fbf0f0;
    border-color: var(--wms-danger);
}

/* Neutral "Cancel"/"Close" treatment for modal footers — matches the
   reference's .btn-cancel (no red/danger tint, since dismissing a modal
   isn't a destructive action). */
.wms-btn--cancel {
    background: none;
    color: rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .1);
}

.wms-btn--cancel:hover {
    background: #f6f6f6;
    color: rgba(0, 0, 0, 1);
    border-color: rgba(0, 0, 0, .3);
}

/* Button loading state */
.wms-btn.is-loading .wms-btn__label {
    opacity: .85;
}

.wms-btn.is-loading {
    pointer-events: none;
}

.wms-form__note {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wms-ink);
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.wms-form__note i {
    color: var(--wms-brand);
    margin-top: 2px;
}

/* --------------------------------------------------------------- Toolbar */
.wms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 26px;
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    box-shadow: var(--wms-shadow-sm);
}

.wms-toolbar__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--wms-navy);
    margin-bottom: 8px;
    margin-top: 0;
}

.wms-toolbar__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wms-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--wms-brand-050);
    color: var(--wms-brand-600);
    font-size: 13px;
    font-weight: 500;
}

.wms-stat strong {
    font-weight: 700;
}

.wms-toolbar__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------------------------------------------------------------- Search */
.wms-search {
    position: relative;
    display: flex;
    align-items: center;
}

.wms-search>i {
    position: absolute;
    left: 15px;
    font-size: 14px;
    color: var(--wms-muted);
    pointer-events: none;
}

.wms-search__input {
    height: 46px;
    padding: 0 16px 0 40px;
    min-width: 265px;
    font-size: 14px;
    color: var(--wms-ink);
    background: var(--wms-surface-2);
    border: 1.5px solid var(--wms-line);
    border-radius: var(--wms-radius-sm) !important;
    transition: border-color .2s var(--wms-ease), box-shadow .2s var(--wms-ease), background .2s var(--wms-ease);
}

.wms-search__input:focus {
    outline: none;
    background: var(--wms-surface);
    border-color: var(--wms-brand);
    box-shadow: var(--wms-ring);
}

/* ----------------------------------------------------- Workspace grid/card */
.wms-ws-grid {
    display: grid;
    /* auto-fit collapses empty tracks so cards always fill the row width */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 24px;
}

/* When there is exactly one workspace, keep the toolbar and the lone card
   at a comfortable, centered width instead of stretching full-bleed. */
.wms-results-view--single .wms-toolbar,
.wms-results-view--single .wms-ws-grid {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.wms-results-view--single .wms-ws-grid {
    grid-template-columns: 1fr;
}

.wms-ws-card {
    display: flex;
    flex-direction: column;
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    box-shadow: var(--wms-shadow-sm);
    /* overflow: hidden; */
    opacity: 0;
    transform: translateY(14px);
    animation: wms-card-in .45s var(--wms-ease) forwards;
    transition: box-shadow .25s var(--wms-ease), transform .25s var(--wms-ease), border-color .25s var(--wms-ease);
}

.wms-ws-card:hover {
    box-shadow: var(--wms-shadow-lg);
    border-color: #dcdfea;
    transform: translateY(-3px);
}

.wms-ws-card:focus-visible {
    outline: none;
    box-shadow: var(--wms-ring), var(--wms-shadow-md);
}

.wms-ws-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    background: linear-gradient(180deg, var(--wms-surface) 0%, var(--wms-surface-2) 100%);
    border-bottom: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.swal2-popup {
    border-radius: 20px !important;
    box-shadow: 0 0 5px 5px #00000038;
}

.wms-ws-card__title-box {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.wms-ws-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--wms-brand) 0%, var(--wms-brand-600) 100%);
    box-shadow: 0 6px 14px rgba(171, 76, 157, .28);
}

.wms-ws-card__title-text {
    min-width: 0;
}

.wms-ws-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--wms-navy);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

.wms-ws-card__meta {
    font-size: 12.5px;
    color: var(--wms-ink);
    margin: 0;
}

.wms-ws-card__count {
    font-weight: 700;
    color: var(--wms-brand-600);
}

/* Copy button */
.wms-copy-btn {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 15px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wms-brand-600);
    background: var(--wms-brand-050);
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s var(--wms-ease), color .2s var(--wms-ease),
        border-color .2s var(--wms-ease), transform .12s var(--wms-ease);
}

.wms-copy-btn:hover {
    background: var(--wms-brand);
    color: #fff;
}

.wms-copy-btn:focus-visible {
    outline: none;
    box-shadow: var(--wms-ring);
}

.wms-copy-btn:active {
    transform: scale(.96);
}

.wms-copy-btn.is-copied {
    background: var(--wms-success);
    color: #fff;
    border-color: var(--wms-success);
    animation: wms-pop .3s var(--wms-ease);
}

.wms-copy-btn.is-copied .wms-copy-btn__text::after {
    content: "Copied!";
}

.wms-copy-btn.is-copied .wms-copy-btn__text {
    font-size: 0;
}

.wms-copy-btn.is-copied .wms-copy-btn__text::after {
    font-size: 13.5px;
}

/* Tooltip */
.wms-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    background: var(--wms-navy);
    border-radius: 7px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s var(--wms-ease), transform .2s var(--wms-ease), visibility .2s;
    pointer-events: none;
    z-index: 5;
    box-shadow: var(--wms-shadow-md);
}

.wms-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 18px;
    border: 5px solid transparent;
    border-top-color: var(--wms-navy);
}

.wms-copy-btn:hover .wms-tooltip,
.wms-copy-btn:focus-visible .wms-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wms-copy-btn.is-copied .wms-tooltip {
    opacity: 0;
    visibility: hidden;
}

/* Per-card search */
.wms-ws-card__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 22px 0;
}

.wms-ws-card__search>i {
    position: absolute;
    left: 36px;
    font-size: 13px;
    color: var(--wms-muted);
    pointer-events: none;
}

.wms-ws-search {
    height: 42px;
    padding: 0 14px 0 36px;
    font-size: 13.5px;
    color: var(--wms-ink);
    background: var(--wms-surface-2);
    border: 1.5px solid var(--wms-line);
    border-radius: 9px !important;
    transition: border-color .2s var(--wms-ease), box-shadow .2s var(--wms-ease), background .2s var(--wms-ease);
}

.wms-ws-search:focus {
    outline: none;
    background: var(--wms-surface);
    border-color: var(--wms-brand);
    box-shadow: var(--wms-ring);
}

/* Table */
.wms-table-wrap {
    margin: 14px 22px 0;
    max-height: 430px;
    overflow: auto;
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    scrollbar-width: thin;
    scrollbar-color: #c9cede transparent;
}

.wms-table-wrap:focus-visible {
    outline: none;
    box-shadow: var(--wms-ring);
}

.wms-table-wrap::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.wms-table-wrap::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
    border: 2px solid var(--wms-surface);
}

.wms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wms-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    padding: 12px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wms-muted);
    background: var(--wms-surface-3);
    border-bottom: 1px solid var(--wms-line);
}

.wms-table__id {
    width: 30%;
    white-space: nowrap;
}

.wms-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f7;
    color: var(--wms-ink);
    vertical-align: middle;
}

.wms-table tbody tr:last-child td {
    border-bottom: none;
}

.wms-table tbody tr {
    transition: background .15s var(--wms-ease);
}

.wms-table tbody tr:hover {
    background: var(--wms-brand-050);
}

.wms-chart-id {
    display: inline-block;
    font-family: "SFMono-Regular", ui-monospace, "Consolas", monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--wms-brand-600);
    letter-spacing: .01em;
}

.wms-chart-name {
    font-weight: 500;
}

.wms-table__scale {
    width: 16%;
    white-space: nowrap;
}

.wms-chart-scale {
    font-family: "SFMono-Regular", ui-monospace, "Consolas", monospace;
    font-size: 12.5px;
    color: var(--wms-muted);
    white-space: nowrap;
}

.wms-table mark {
    background: rgba(171, 76, 157, .18);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Per-card empty state */
.wms-ws-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 22px;
    color: var(--wms-muted);
    font-size: 13.5px;
    text-align: center;
}

.wms-ws-empty i {
    font-size: 26px;
    color: #c3c8d6;
}

/* Pagination */
.wms-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 22px 20px;
}

.wms-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wms-navy);
    background: var(--wms-surface);
    border: 1.5px solid var(--wms-line);
    border-radius: 9px;
    cursor: pointer;
    transition: all .18s var(--wms-ease);
}

.wms-page-btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--wms-brand);
    color: var(--wms-brand);
}

.wms-page-btn.is-active {
    color: #fff;
    background: var(--wms-brand);
    border-color: var(--wms-brand);
    cursor: default;
}

.wms-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.wms-page-ellipsis {
    padding: 0 4px;
    color: var(--wms-muted);
}

/* --------------------------------------------------- Empty / error states */
.wms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    background: var(--wms-surface);
    border: 1px dashed var(--wms-line);
    border-radius: var(--wms-radius);
}

.wms-empty__icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: var(--wms-brand);
    background: var(--wms-brand-050);
    border-radius: 50%;
    margin-bottom: 20px;
}

.wms-empty--error .wms-empty__icon {
    color: var(--wms-danger);
    background: #fbecec;
}

.wms-empty__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--wms-navy);
    margin-bottom: 8px;
}

.wms-empty__text {
    font-size: 14.5px;
    color: var(--wms-muted);
    max-width: 420px;
    margin-bottom: 22px;
    margin-top: 0;
}

.wms-empty__text:last-child {
    margin-bottom: 0;
}

/* The action button in an empty/error state must not stretch full-width like
   the login button — keep it a compact, centered pill. */
.wms-empty .wms-btn {
    width: auto;
    min-width: 150px;
    padding-left: 26px;
    padding-right: 26px;
}

/* -------------------------------------------------------- Loaders/spinner */
.wms-inline-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: var(--wms-muted);
    font-size: 14.5px;
}

.wms-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--wms-brand-050);
    border-top-color: var(--wms-brand);
    animation: wms-spin .7s linear infinite;
}

/* Determinate 0% -> 100% progress loader */
.wms-progress {
    display: flex;
    justify-content: center;
    padding: 56px 20px 48px;
}

.wms-progress__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    animation: wms-fade-up .25s var(--wms-ease);
}

.wms-progress__ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.wms-progress__svg {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
    /* start the arc at 12 o'clock */
}

.wms-progress__track {
    fill: none;
    stroke: var(--wms-brand-050);
    stroke-width: 9;
}

.wms-progress__meter {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 326.726;
    stroke-dashoffset: 326.726;
    transition: stroke-dashoffset .12s var(--wms-ease);
}

.wms-progress__pct {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--wms-navy);
    font-variant-numeric: tabular-nums;
}

.wms-progress__label {
    font-size: 15px;
    font-weight: 500;
    color: var(--wms-muted);
}

/* Skeleton loaders */
.wms-skel-card {
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    padding: 20px 22px;
    overflow: hidden;
}

.wms-skel {
    position: relative;
    border-radius: 8px;
    background: var(--wms-surface-3);
    overflow: hidden;
}

.wms-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: wms-shimmer 1.3s infinite;
}

.wms-skel-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.wms-skel-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.wms-skel-line {
    height: 12px;
}

.wms-skel-row {
    height: 40px;
    margin-bottom: 8px;
    border-radius: 8px;
}

/* ---------------------------------------------------------- Utility bits */
.wms-portal [hidden] {
    display: none !important;
}

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

/* =============================================================== Animations */
@keyframes wms-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wms-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes wms-card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wms-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

@keyframes wms-pop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* Self-contained entrance. The element's NATURAL state is fully visible
   (opacity:1); the keyframe only plays the intro, so content can never get
   stuck hidden — unlike scroll-triggered libraries that hold opacity:0. */
.wms-fade-up {
    animation: wms-fade-up .6s var(--wms-ease);
}

@keyframes wms-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ===================================================== Hero decorations */
.wms-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.wms-decor__shape {
    position: absolute;
    display: block;
    will-change: transform;
}

/* Purple glass shield badge (upper-left) */
.wms-decor__shield {
    --r: -8deg;
    top: 72px;
    left: 5%;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #fff;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(171, 76, 157, .9), rgba(120, 50, 140, .82));
    box-shadow: 0 22px 44px rgba(120, 50, 140, .34), inset 0 1px 1px rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: rotate(var(--r));
    animation: wms-float 7s ease-in-out infinite;
}

/* Translucent "map" card (lower-left) */
.wms-decor__map {
    --r: 7deg;
    top: 214px;
    left: 1.5%;
    width: 150px;
    height: 104px;
    border-radius: 16px;
    background:
        repeating-linear-gradient(118deg, rgba(171, 76, 157, .12) 0 2px, transparent 2px 17px),
        repeating-linear-gradient(28deg, rgba(116, 78, 190, .10) 0 2px, transparent 2px 20px),
        rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 18px 38px rgba(13, 34, 82, .12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transform: rotate(var(--r));
    animation: wms-float 9s ease-in-out infinite reverse;
}

/* Big translucent glass cube (upper-right) */
.wms-decor__cube {
    --r: 14deg;
    top: 78px;
    right: 4%;
    width: 172px;
    height: 172px;
    border-radius: 34px;
    background: linear-gradient(150deg, rgba(96, 178, 214, .30), rgba(171, 76, 157, .30));
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 34px 66px rgba(80, 120, 180, .24), inset 0 2px 4px rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    transform: rotate(var(--r));
    animation: wms-float 8.5s ease-in-out infinite;
}

/* Dot grid (upper-right) */
.wms-decor__dots {
    top: 42px;
    right: 15%;
    width: 132px;
    height: 92px;
    opacity: .5;
    background-image: radial-gradient(rgba(171, 76, 157, .4) 1.6px, transparent 1.6px);
    background-size: 16px 16px;
}

@keyframes wms-float {

    0%,
    100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-14px) rotate(var(--r, 0deg));
    }
}

/* ------------------------------------------- Info panel head / divider / globe */
.wms-info-panel__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.wms-info-panel__logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--wms-brand) 0%, var(--wms-brand-600) 100%);
    box-shadow: 0 10px 20px rgba(171, 76, 157, .4);
}

.wms-info-panel__head .wms-info-panel__title {
    margin-bottom: 0;
    margin-top: 0;
}

.wms-info-panel__lead {
    position: relative;
    z-index: 1;
}

.wms-info-panel__divider {
    position: relative;
    z-index: 1;
    display: block;
    height: 1px;
    margin: 22px 0 24px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .04));
}

/* Glowing dotted globe in the panel corner */
.wms-info-panel__globe {
    position: absolute;
    right: -46px;
    bottom: -58px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 34% 32%, rgba(171, 76, 157, .55), transparent 60%),
        radial-gradient(circle at 72% 74%, rgba(96, 66, 170, .45), transparent 58%);
    opacity: .85;
    /* Slow spinning-planet rotation + a gentle breathing glow */
    animation: wms-globe-spin 36s linear infinite, wms-globe-glow 7s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.wms-info-panel__globe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
    mask: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
}

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

@keyframes wms-globe-glow {

    0%,
    100% {
        opacity: .72;
    }

    50% {
        opacity: .95;
    }
}

/* Ensure the info panel list sits above the globe */
.wms-info-panel__list {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------- Login card corner accent */
.wms-login-card {
    position: relative;
    overflow: hidden;
}

.wms-login-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 200px;
    height: 140px;
    pointer-events: none;
    background: repeating-radial-gradient(circle at 100% 100%,
            transparent 0 15px, rgba(171, 76, 157, .06) 15px 16px);
}

.wms-login-card>* {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------- Trust bar */
.wms-trustbar {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    box-shadow: var(--wms-shadow-md);
    overflow: hidden;
}

.wms-trust {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px;
}

.wms-trust:not(:last-child) {
    border-right: 1px solid var(--wms-line);
}

.wms-trust__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--wms-brand);
    background: var(--wms-brand-050);
}

.wms-trust__text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wms-ink);
}

.wms-trust__text strong {
    display: block;
    color: var(--wms-navy);
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

@media (max-width: 991px) {
    .wms-trustbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .wms-trust:not(:last-child) {
        border-right: none;
    }

    .wms-trust:nth-child(odd) {
        border-right: 1px solid var(--wms-line);
    }

    .wms-trust:nth-child(-n+2) {
        border-bottom: 1px solid var(--wms-line);
    }

    .wms-foot__inner {
        justify-content: center;
        gap: 0;
    }
    .wms-foot__copy, .wms-foot__links{margin-bottom: 5px !important;}
}

@media (max-width: 575px) {
    .wms-trustbar {
        grid-template-columns: 1fr;
    }

    .wms-trust {
        border-right: none !important;
        border-bottom: 1px solid var(--wms-line);
    }

    .wms-trust:last-child {
        border-bottom: none;
    }
}

/* Hide floating decorations where they'd crowd the layout */
@media (max-width: 1199px) {
    .wms-decor {
        display: none;
    }
}

/* ================================================= Workspace tabs */
.wms-results-view {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* The view is programmatically focused (tabindex=-1) only to announce the
   context change to screen readers — it is not a keyboard control, so the
   default focus ring should not be drawn. */
.wms-results-view:focus {
    outline: none;
}

.wms-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.wms-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--wms-navy);
    background: var(--wms-surface);
    border: 1.5px solid var(--wms-line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s var(--wms-ease), background .18s var(--wms-ease),
        border-color .18s var(--wms-ease), box-shadow .18s var(--wms-ease);
}

.wms-tab:hover {
    color: var(--wms-brand);
    border-color: var(--wms-brand);
}

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

.wms-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--wms-brand) 0%, var(--wms-brand-600) 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(171, 76, 157, .3);
}

.wms-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    color: var(--wms-brand-600);
    background: var(--wms-brand-050);
}

.wms-tab.is-active .wms-tab__count {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

/* One workspace card (panel) visible at a time — no grid hover lift */
.wms-tabpanels .wms-ws-card {
    width: 100%;
}

.wms-tabpanels .wms-ws-card:hover {
    transform: none;
    box-shadow: var(--wms-shadow-md);
}

/* ============================================= DataTables theming */
.wms-ws-card__body {
    padding: 16px 20px 10px;
}

.wms-ws-card .dataTables_wrapper {
    position: relative;
    font-family: inherit;
    color: var(--wms-ink);
}

/* Search box (top of each table) */
.wms-ws-card .wms-dt-top {
    margin-bottom: 12px;
}

.wms-ws-card .dataTables_filter {
    float: none;
    margin: 0;
    text-align: left;
}

.wms-ws-card .dataTables_filter label {
    display: block;
    margin: 0;
    font-size: 0;
}

.wms-ws-card .dataTables_filter input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 40px;
    font-size: 13.5px;
    color: var(--wms-ink);
    background-color: var(--wms-surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.2-4.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    border: 1.5px solid var(--wms-line);
    border-radius: 10px;
    transition: border-color .2s var(--wms-ease), box-shadow .2s var(--wms-ease), background-color .2s var(--wms-ease);
}

.wms-ws-card .dataTables_filter input::placeholder {
    color: #9aa1b2;
}

.wms-ws-card .dataTables_filter input:focus {
    outline: none;
    background-color: var(--wms-surface);
    border-color: var(--wms-brand);
    box-shadow: var(--wms-ring);
}

/* Scroll header + body (scrollY) */
.wms-ws-card .dataTables_scrollHead {
    border: 1px solid var(--wms-line);
    border-bottom: none;
    border-radius: var(--wms-radius-sm) var(--wms-radius-sm) 0 0;
    overflow: hidden;
}

.wms-ws-card .dataTables_scrollBody {
    border: 1px solid var(--wms-line);
    border-top: none;
    border-radius: 0 0 var(--wms-radius-sm) var(--wms-radius-sm);
    scrollbar-width: thin;
    scrollbar-color: #c9cede transparent;
}

.wms-ws-card .dataTables_scrollBody::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.wms-ws-card .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
    border: 2px solid var(--wms-surface);
}

/* Table itself */
.wms-ws-card table.dataTable {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.wms-ws-card table.dataTable thead th {
    text-align: left;
    padding: 13px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wms-ink);
    background-color: var(--wms-surface-3);
    border-bottom: 1px solid var(--wms-line);
    cursor: pointer;
    white-space: nowrap;
}

.wms-ws-card table.dataTable thead th.sorting,
.wms-ws-card table.dataTable thead th.sorting_asc,
.wms-ws-card table.dataTable thead th.sorting_desc {
    background-position: right 12px center;
}

.wms-ws-card table.dataTable tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--wms-ink);
    border-bottom: 1px solid #f0f2f7;
}

.wms-ws-card table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

.wms-ws-card table.dataTable tbody tr:hover td {
    background: var(--wms-brand-050);
}

.wms-ws-card table.dataTable.no-footer {
    border-bottom: none;
}

.wms-ws-card .dataTables_empty {
    padding: 34px 16px;
    text-align: center;
    color: var(--wms-muted);
    font-size: 13.5px;
}

/* Footer: info + pagination */
.wms-ws-card .wms-dt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 2px 6px;
}

.wms-ws-card .dataTables_info {
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--wms-ink);
}

.wms-ws-card .dataTables_paginate {
    margin: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wms-ws-card .dataTables_paginate .paginate_button {
    min-width: 34px;
    height: 34px;
    margin: 0 1px !important;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1;
    color: var(--wms-navy) !important;
    background: var(--wms-surface) !important;
    border: 1.5px solid var(--wms-line) !important;
    border-radius: 8px !important;
    cursor: pointer;
}

/* The ‹ › arrows are single glyphs that render visually smaller than the
   page-number digits — bump their size so they read at the same weight. */
.wms-ws-card .dataTables_paginate .paginate_button.previous,
.wms-ws-card .dataTables_paginate .paginate_button.next {
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1;
}

.wms-ws-card .dataTables_paginate .paginate_button:hover {
    color: var(--wms-brand) !important;
    border-color: var(--wms-brand) !important;
    background: var(--wms-surface) !important;
}

.wms-ws-card .dataTables_paginate .paginate_button.current,
.wms-ws-card .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: var(--wms-brand) !important;
    border-color: var(--wms-brand) !important;
}

.wms-ws-card .dataTables_paginate .paginate_button.disabled,
.wms-ws-card .dataTables_paginate .paginate_button.disabled:hover {
    color: #b8bece !important;
    background: var(--wms-surface) !important;
    border-color: var(--wms-line) !important;
    cursor: not-allowed;
    opacity: .6;
}

/* =============================================================== Responsive */
@media (max-width: 991px) {
    .wms-portal {
        padding: 50px 0 50px;
    }

    .wms-login-grid {
        grid-template-columns: 1fr;
    }

    .wms-topbar__contact {
        display: none;
    }

    .wms-info-panel {
        padding: 34px 30px;
    }

    .wms-login-card {
        padding: 32px 26px;
    }

    .wms-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .wms-toolbar__right {
        justify-content: space-between;
    }

    .wms-search__input,
    .wms-search {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .wms-ws-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wms-ws-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .wms-copy-btn {
        width: 100%;
        justify-content: center;
    }

    .wms-tooltip {
        display: none;
    }

    .wms-toolbar__right {
        flex-direction: column;
        align-items: stretch;
    }

    .wms-btn--ghost,
    .wms-btn--outline {
        width: 100%;
    }

    .wms-topbar__inner {
        min-height: 60px;
    }

    .wms-topbar__right {
        gap: 12px;
    }

    .wms-topbar__inner{gap: 5px; padding: 12px;}

    .wms-foot__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .wms-login-card,
    .wms-info-panel {
        padding: 26px 20px;
    }

    .wms-table-wrap,
    .wms-ws-card__search {
        margin-left: 14px;
        margin-right: 14px;
    }

    .wms-ws-card__search {
        padding-left: 0;
        padding-right: 0;
    }

    .wms-ws-card__search>i {
        left: 14px;
    }
}

/* ============================================ Reduced motion / accessibility */
@media (prefers-reduced-motion: reduce) {

    .wms-portal *,
    .wms-portal *::before,
    .wms-portal *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .wms-ws-card {
        opacity: 1;
        transform: none;
    }
}

#toast-container>div{opacity: 1 !important;}

/* ===================================================== ARCS GIS Viewer */
.wms-gis {
    display: flex;
    flex-direction: column;
    height: 720px;
    max-height: calc(100vh - 260px);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius);
    overflow: hidden;
    background: var(--wms-surface);
}

/* Full-bleed GIS mode: header/footer stay, everything else (decor, intro
   copy, container padding/centering) drops out so the viewer fills the
   remaining viewport, matching the standalone ARCS for GIS Web app. */
.wms-portal--gis {
    justify-content: stretch;
    padding: 0;
}

.wms-portal--gis .wms-decor,
.wms-portal--gis .wms-intro {
    display: none;
}

.wms-portal--gis > .wms-container {
    max-width: none;
    padding: 0;
    display: flex;
    flex: 1;
    min-height: 0;
}

.wms-portal--gis .wms-results-view {
    max-width: none;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wms-portal--gis .wms-gis {
    flex: 1;
    min-height: 0;   /* let the viewer shrink to the viewport so inner lists scroll */
    height: auto;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.wms-gis-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--wms-line);
    background: var(--wms-surface-2);
}

.wms-gis-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wms-gis-tools__divider {
    width: 1px;
    height: 22px;
    background: var(--wms-line);
    margin: 0 4px;
}

.wms-gis-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    background: var(--wms-surface);
    color: var(--wms-ink);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s var(--wms-ease), color .15s var(--wms-ease), border-color .15s var(--wms-ease);
}

.wms-gis-tool svg,
.wms-gis-tool__img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.wms-gis-tool:hover {
    background: var(--wms-surface-3);
    border-color: var(--wms-brand);
}

/* Active state is identical for SVG and image icons: a light brand tint with
   a brand border. Solid-purple fill was avoided because the coloured PNG
   icons can't recolour to white and looked wrong on it. */
.wms-gis-tool.is-active {
    background: var(--wms-brand-050);
    border-color: var(--wms-brand);
    color: var(--wms-brand);
}

.wms-gis-tool.is-active svg {
    color: var(--wms-brand);
}

.wms-gis-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 330px;
    margin-left: auto;
}

/* Higher specificity than the global ".wms-portal input { width: 100% }"
   rule, which otherwise wins the cascade and collapses this input's width
   inside the flex layout. */
.wms-gis-search input.wms-gis-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 160px;
    height: 35px;
    padding: 0 12px;
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    font-size: 13.5px;
    color: var(--wms-ink);
    background: var(--wms-surface);
}

.wms-gis-search__input:focus {
    outline: none;
    border-color: var(--wms-brand);
}

.wms-gis-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.wms-gis-sidebar {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    /* The sidebar itself must NOT scroll — otherwise the whole column scrolls
       and pushes Base Layers off-screen. Keep it bounded so the Project Layers
       list scrolls internally (Base Layers stays pinned at the bottom). */
    overflow: hidden;
    border-right: 1px solid var(--wms-line);
    background: var(--wms-surface-2);
}

.wms-gis-card {
    background: var(--wms-surface);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    overflow: hidden;
}

.wms-gis-card--grow {
    flex: 1 1 0;          /* basis 0: size from the flex row, not from content */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wms-gis-card--grow .wms-gis-layers {
    flex: 1 1 0;          /* basis 0 so the list scrolls instead of growing */
    min-height: 0;        /* allow the list to shrink within the card */
    max-height: none;
    overflow-y: auto;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* The empty-state message is the only visible child when nothing is loaded —
   margin:auto centres it both vertically and horizontally in the card. */
.wms-gis-card--grow .wms-gis-layers__empty {
    margin: auto;
}

/* Layer rows keep their natural height (don't shrink) so the list scrolls. */
.wms-gis-card--grow .wms-gis-layers__item {
    flex: 0 0 auto;
}

.wms-gis-card--pinned-bottom {
    flex: 0 0 auto;
    margin-top: auto;
}

.wms-gis-card__title {
    margin: 0;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: var(--wms-brand);
}

.wms-gis-layers,
.wms-gis-baselayers {
    list-style: none;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cdd2e0 transparent;
}

.wms-gis-layers::-webkit-scrollbar,
.wms-gis-baselayers::-webkit-scrollbar {
    width: 8px;
}

.wms-gis-layers::-webkit-scrollbar-thumb,
.wms-gis-baselayers::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
}

.wms-gis-baselayers {
    padding: 6px;
}

.wms-gis-layers__empty {
    padding: 16px 10px;
    text-align: center;
    color: var(--wms-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.wms-gis-layers__empty i {
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    opacity: .6;
}

.wms-gis-layers__item {
    border-radius: 8px;
    font-size: 13.5px;
    overflow: hidden;
}

.wms-gis-layers__item + .wms-gis-layers__item {
    border-top: 1px solid var(--wms-line);
}

.wms-gis-layers__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 8px;
}

.wms-gis-layers__row:hover {
    background: var(--wms-surface-3);
}

.wms-gis-layers__item label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.wms-gis-layers__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wms-ink);
}


.wms-gis-layers__toggle {
    border: none;
    background: transparent;
    color: var(--wms-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    flex: 0 0 auto;
}

.wms-gis-layers__toggle:hover {
    background: var(--wms-surface-3);
    color: var(--wms-brand);
}

.wms-gis-layers__item.is-open .wms-gis-layers__toggle {
    color: var(--wms-brand);
}

.wms-gis-layers__submenu {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--wms-line);
    background: var(--wms-surface-2);
}

.wms-gis-layers__action {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--wms-ink);
    font-size: 13px;
    padding: 9px 16px;
    cursor: pointer;
}

.wms-gis-layers__action:hover {
    background: var(--wms-brand-050);
    color: var(--wms-brand-600);
}

.wms-gis-layers__action + .wms-gis-layers__action {
    border-top: 1px solid var(--wms-line);
}

/* Loaded sub-layer names listed under a group (e.g. ARCS ChartInfo). */
.wms-gis-layers__children {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid var(--wms-line);
}

.wms-gis-layers__child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 16px 6px 26px;
    font-size: 12.5px;
    color: var(--wms-ink);
    cursor: pointer;
}

.wms-gis-layers__child:hover {
    background: var(--wms-brand-050);
}

.wms-gis-baselayers li {
    padding: 6px 8px;
    font-size: 13px;
}

.wms-gis-baselayers label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wms-gis-map-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.wms-gis-map {
    position: absolute;
    inset: 0;
}

.wms-gis-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .55);
    z-index: 10;
}

.wms-gis-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--wms-brand-050);
    border-top-color: var(--wms-brand);
    border-radius: 50%;
    animation: wms-spin .8s linear infinite;
}

.wms-gis-measure-tooltip {
    padding: 3px 8px;
    background: var(--wms-navy);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}

/* ---- OpenLayers controls (zoom +/-, zoom slider, scale line) ---- */
.wms-gis-map .ol-zoom {
    top: 12px;
    left: auto;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wms-gis-map .ol-zoom .ol-zoom-in,
.wms-gis-map .ol-zoom .ol-zoom-out {
    width: 30px;
    height: 30px;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: var(--wms-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
}

.wms-gis-map .ol-zoom .ol-zoom-in:hover,
.wms-gis-map .ol-zoom .ol-zoom-out:hover {
    background: var(--wms-brand-600);
}

.wms-gis-map .ol-zoomslider {
    top: 92px;
    left: auto;
    right: 12px;
    width: 30px;
    height: 160px;
    border-radius: 15px;
    background: var(--wms-brand-050);
    box-shadow: 0 1px 4px rgba(13, 34, 82, .15);
}

.wms-gis-map .ol-zoomslider-thumb {
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--wms-brand);
    cursor: pointer;
}

.wms-gis-map .ol-scale-line {
    left: auto;
    right: 12px;
    bottom: 12px;
    position: absolute;
    background: transparent;
}

.wms-gis-map .ol-scale-line-inner {
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: var(--wms-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ===================================================== Lightweight modals */
/* Glass-morphism look ported from the reference ARCS for GIS Web app
   (.modal-overlay / .glass-modal in index.css) — blurred backdrop, frosted
   panel, rounded navy header — using this portal's own colour tokens. */
@keyframes wms-modal-fade-in {
    from { opacity: 0; }
}

@keyframes wms-modal-slide-in {
    from { opacity: 0; transform: translateY(-24px) scale(.98); }
}

.wms-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
    animation: wms-modal-fade-in .3s ease;
}

.wms-modal {
    width: 90%;
    max-width: 750px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--wms-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    overflow: hidden;
    position: relative;
    animation: wms-modal-slide-in .3s ease;
    scrollbar-width: thin;
    scrollbar-color: #9f4a94 rgba(117, 117, 117, .35);
}

.wms-modal::-webkit-scrollbar {
    width: 10px;
}

.wms-modal::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.wms-modal::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.wms-modal::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.wms-modal--sm {
    max-width: 575px;
}

/* Match the reference desktop dialog's system UI font (Segoe UI on Windows).
   Scoped to modals only — the rest of the portal keeps Poppins. Form controls
   don't inherit font-family by default, so they're listed explicitly. */
.wms-modal,
.wms-modal input,
.wms-modal button,
.wms-modal select,
.wms-modal textarea {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Decorative window drag-handle pill at the top centre, matching the
   reference desktop dialogs. */
.wms-modal__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--wms-surface);
    color: var(--wms-ink);
    border-bottom: 1px solid var(--wms-line);
    border-radius: var(--wms-radius) var(--wms-radius) 0 0;
}

/* .wms-modal__header::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: #2b2f3a;
    opacity: .85;
} */

.wms-modal__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wms-modal__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

.wms-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--wms-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-modal__close {
    border: none;
    background: none;
    color: var(--wms-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .9;
    transition: background .2s var(--wms-ease), color .2s var(--wms-ease), opacity .2s var(--wms-ease);
}

.wms-modal__close:hover {
    opacity: 1;
    color: var(--wms-ink);
    background: var(--wms-surface-3);
}

/* Triton wordmark shown at the footer-left of the chart dialogs. */
.wms-modal__footer-logo {
    height: 35px;
    width: auto;
    object-fit: contain;
    margin-right: auto;
}

.wms-modal__body {
    padding: 10px 18px 5px;
    margin-bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    color: #000;
    /* Thin, subtle scrollbar (default Windows one shows as an ugly wide grey
       band when the content overflows). */
    scrollbar-width: thin;
    scrollbar-color: #cdd2e0 transparent;
}

.wms-modal__body::-webkit-scrollbar {
    width: 8px;
}

.wms-modal__body::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
}

.wms-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.wms-modal__body .wms-search__input {
    margin-bottom: 10px;
}

.wms-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 15px 20px;
}

/* .wms-btn--primary defaults to width:100% (correct for the full-width
   login button), which otherwise makes "Load Selected Charts"/"Save
   Changes" swell to fill the whole footer row instead of sitting neatly
   beside Cancel. */
.wms-modal__footer .wms-btn {
    width: auto;
}

/* DataTables chrome inside a modal — length top-left, filter top-right
   (matching the reference's .modal-body float layout), but info/pagination
   are FULL-WIDTH CENTERED underneath — the reference's more specific
   ".glass-modal .dataTables_wrapper .dataTables_info/.dataTables_paginate"
   rule (with !important) overrides the generic float layout for those two
   elements specifically. */
.wms-modal__body .dataTables_wrapper .dataTables_length {
    float: left;
    text-align: center;
}

.wms-modal__body .dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: center;
    margin: 0 0 10px !important;
}

.wms-modal__body .dataTables_wrapper .dataTables_filter input,
.wms-modal__body .dataTables_wrapper .dataTables_length select {
    height: 40px;
    border-radius: 6px !important;
    border: 1px solid var(--wms-line);
    padding: 0 10px;
}

/* Clearfix so the floated length/filter row doesn't collapse the wrapper. */
.wms-modal__body .dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Info (left) + pagination (right) share one row via a flex wrapper injected
   through the DataTables `dom` string (<"wms-dt-footrow"ip>). flex-wrap keeps
   it graceful when the pagination gets wide on narrow screens. */
/* Footer bar: the Load button (relocated here by JS) sits on the left where
   the "Showing…" info used to be, with the pager on the right. The info line
   drops below this bar. */
.wms-modal__body .dataTables_wrapper .wms-dt-footbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 12px;
}

/* Compact pager: ◀  "3 of 54 (201–300 of 5336)"  ▶  */
.wms-modal__body .dataTables_wrapper .dataTables_paginate {
    width: auto !important;
    clear: none;
    float: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.wms-modal__body .dataTables_wrapper .wms-pageinfo {
    font-size: 13px;
    color: var(--wms-ink);
    white-space: nowrap;
}

/* The relocated Load button keeps its natural size (it isn't a full-width
   footer button any more). Order:0 keeps it left of the pager. */
.wms-dt-loadbtn {
    width: auto !important;
    flex: 0 0 auto;
    order: 0;
}

/* The action buttons sit on the left: a primary row (Load [+ Chart Details])
   with "Global ARCS Chart Info" stacked on the row below it. */
.wms-dt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.wms-dt-actions__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* All dialog action buttons share ONE design: white background, light grey
   border, dark text — regardless of their --primary/--cancel modifier, so the
   Full Chart List and Spatial modals look uniform. */
.wms-dt-actions .wms-btn {
    width: 200px !important;
    background: var(--wms-surface) !important;   /* white */
    color: var(--wms-ink) !important;
    border: 1px solid var(--wms-line) !important; /* light grey */
    box-shadow: none !important;
}

.wms-dt-actions .wms-btn:hover:not(:disabled) {
    background: var(--wms-surface-2) !important;  /* subtle grey on hover */
    border-color: #cfd3e0 !important;
    color: var(--wms-ink) !important;
}

/* Before JS relocates it, the button group sits at the end of the modal body —
   keep it from stretching full-width during that brief moment. */
.wms-modal__body > .wms-dt-loadbtn {
    margin: 12px 0 0 auto;
    justify-content: flex-end;
}

/* Prev / Next arrow buttons — small rounded squares either side of the label. */
.wms-modal__body .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--wms-line) !important;
    border-radius: 8px !important;
    background: var(--wms-surface) !important;
    color: var(--wms-ink) !important;
}

.wms-modal__body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: 1px solid var(--wms-brand) !important;
    background: transparent !important;
    color: var(--wms-brand) !important;
}

.wms-modal__body .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--wms-brand-050) !important;
    border-color: var(--wms-brand) !important;
    color: #aa4b9c !important;
}

.wms-modal__body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Matches the reference's .Table exactly — lavender header, centered
   cells, light purple row hover. */
.wms-gis-table {
    border-collapse: collapse;
    width: 100%;
}

.wms-gis-table th,
.wms-gis-table td,
table.dataTable.wms-gis-table thead th {
    font-size: 13px;
    padding: 12px 16px;
    text-align: center !important;
    border: 1px solid #dddddd6a;
}

.wms-gis-table th {
    background-color: #e7d8e7;
    color: #442443;
}

/* Zebra striping — even rows a light grey. */
.wms-gis-table tbody tr:nth-child(even) {
    background-color: #f4f4f7;
}

/* The whole row is clickable — clicking anywhere toggles its checkbox. */
.wms-gis-table tbody tr {
    cursor: pointer;
}

.wms-gis-table tbody tr:hover {
    background-color: rgba(218, 142, 218, .1);
}

/* Checkbox column (first) + S.No column: fixed width, fully centred. */
.wms-gis-table th:first-child,
.wms-gis-table td:first-child,
.wms-gis-table .wms-dt-sno {
    text-align: center !important;
    vertical-align: middle;
}

.wms-gis-table th:first-child,
.wms-gis-table td:first-child {
    width: 52px;
}

/* .wms-gis-table .wms-dt-sno {
    width: 66px;
    color: var(--wms-muted);
} */

.wms-gis-row-check {
    display: inline-block;
    vertical-align: middle;
}

/* Column sorting is disabled in the chart-selection dialogs (see the
   `ordering: false` note in arcs-wms-portal.js). DataTables therefore adds no
   .sorting classes; this rule is kept only in case ordering is re-enabled. */
.wms-gis-table thead th.sorting,
.wms-gis-table thead th.sorting_asc,
.wms-gis-table thead th.sorting_desc {
    cursor: pointer;
    padding-right: 26px !important;
}

/* scrollY splits the table into a fixed header + scrolling body inside the
   modal, so only the rows scroll — the modal header/footer stay put. */
.wms-modal__body .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: #c9cede transparent;
}

.wms-modal__body .dataTables_scrollBody::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.wms-modal__body .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
    border: 2px solid var(--wms-surface);
}

/* Remove the double border DataTables leaves between the split head/body. */
.wms-modal__body .dataTables_scrollHead {
    border-bottom: none;
}

/* Custom checkbox styling matching the reference's .form-check-input —
   brand-filled when checked, dimmed purple when disabled (already loaded).
   Applied to every checkbox in the GIS Viewer (modal tables, Base Layers,
   Project Layers) so they're all the same size/look, not a mix of custom
   and native browser checkboxes. */
.wms-gis-row-check,
.wms-gis-baselayers input[type="checkbox"],
.wms-gis-layers__item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* !important: the global ".wms-portal input { width: 100% }" rule
       (class+element, higher specificity than a plain class selector)
       otherwise wins and stretches these to fill their table cell —
       visibly worse wherever that cell happens to be wider (e.g. the Full
       Chart List's checkbox column vs the narrower one in Spatial Query
       Results), even though the underlying bug is the same in both. */
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all .2s ease;
}

.wms-gis-row-check:checked,
.wms-gis-baselayers input[type="checkbox"]:checked,
.wms-gis-layers__item input[type="checkbox"]:checked {
    background-color: var(--wms-brand);
    border-color: var(--wms-brand);
}

.wms-gis-row-check:checked::after,
.wms-gis-baselayers input[type="checkbox"]:checked::after,
.wms-gis-layers__item input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wms-gis-row-check:disabled {
    background-color: #9d4d9d;
    opacity: .5;
    cursor: not-allowed;
    border-color: rgba(107, 114, 128, .3);
}

.wms-gis-row-check:focus,
.wms-gis-baselayers input[type="checkbox"]:focus,
.wms-gis-layers__item input[type="checkbox"]:focus {
    box-shadow: none;
    outline: none;
}

/* Editable page-length spinner — ports the reference's makeLengthEditable()
   control (plain number + up/down arrows, no dropdown). */
.wms-gis-length-wrap {
    position: relative;
    display: inline-block;
    width: 80px;
}

.wms-gis-length-input {
    width: 80px;
    padding: 6px 26px 6px 10px;
    height: 40px;
    border: 1px solid var(--wms-line);
    border-radius: 6px;
    font-size: 14px;
    color: var(--wms-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide native browser spinners — only custom arrows are shown. */
.wms-gis-length-input::-webkit-outer-spin-button,
.wms-gis-length-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wms-gis-length-arrows {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wms-gis-length-arrow {
    width: 18px;
    height: 12px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 8px;
    line-height: 1;
    color: var(--wms-brand);
    border-radius: 2px;
}

.wms-gis-length-arrow:hover {
    background: var(--wms-brand-050);
}

/* Reference trick: the DataTables length <label> normally reads
   "Show [select] entries" — zeroing the label's font-size hides that
   surrounding text entirely while the custom input/arrows (which set their
   own explicit font-size above) stay fully visible. */
.wms-modal__body .dataTables_wrapper .dataTables_length label {
    font-size: 0;
}

/* Matches the reference's .about-top/.about-license/.about-title/
   .about-content/.about-left exactly — two space-between header rows
   (logo|license, title|version), then a left-aligned content block. */
.wms-gis-about {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Lavender banner: full triton wordmark left, licence details right. */
/* Two equal columns matching the Address / Contact grid below, so the licence
   block lines up vertically with the Contact Numbers column. Same 24px gap as
   .wms-gis-about__content — the banner's own padding cancels out of the column
   maths, so the right columns align exactly. */
.wms-gis-about__banner {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 16px 20px;
    background: var(--wms-brand-050);
    border-radius: var(--wms-radius-sm);
}

.wms-gis-about__brand {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Grey divider between the logo and the licence details. */
    border-right: 1px solid rgba(0, 0, 0, .16);
}

.wms-gis-about__logo {
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.wms-gis-about__license {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.wms-gis-about__license-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #000000;
}

.wms-gis-about__license-value {
    margin: 2px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--wms-ink);
}

.wms-gis-about__license-value:last-child {
    margin-bottom: 0;
}

/* Product row: title with a brand accent bar + version pill. */
.wms-gis-about__product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 12px;
    border-left: 4px solid var(--wms-brand);
}

.wms-gis-about__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--wms-navy);
}

.wms-gis-about__sub {
    font-weight: 500;
    color: var(--wms-muted);
    font-size: 14px;
}

.wms-gis-about__badge {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wms-brand-050);
    color: var(--wms-brand);
    font-size: 12px;
    font-weight: 700;
}

.wms-gis-about__content {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-top: 4px;
}

.wms-gis-about__col {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--wms-ink);
}

/* Grey divider between Address and Contact Numbers, aligned with the banner
   divider above. */
.wms-gis-about__col:first-child {
    border-right: 1px solid rgba(0, 0, 0, .16);
}

.wms-gis-about__col p {
    margin: 2px 0;
}

.wms-gis-about__heading {
    margin: 12px 0 6px !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--wms-ink);
}

.wms-gis-about__col a {
    color: var(--wms-brand);
    text-decoration: none;
}

.wms-gis-about__col a:hover {
    text-decoration: underline;
}

/* ---------- Chart Details dialog ---------- */
/* Scrollable Field/Value table with a sticky lavender header (mirrors the
   reference frmChartInfo grid). */
.wms-gis-details {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    scrollbar-width: thin;
    scrollbar-color: #cdd2e0 transparent;
}

.wms-gis-details::-webkit-scrollbar {
    width: 8px;
}

.wms-gis-details::-webkit-scrollbar-thumb {
    background: #cdd2e0;
    border-radius: 999px;
}

.wms-gis-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wms-gis-details-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 11px 14px;
    font-weight: 600;
    color: var(--wms-ink);
    background: #d19dc9;
    border-bottom: 1px solid var(--wms-line);
}

.wms-gis-details-table td {
    padding: 9px 14px;
    color: var(--wms-ink);
    border-top: 1px solid var(--wms-line);
    vertical-align: top;
    word-break: break-word;
}

.wms-gis-details-table td:first-child {
    width: 40%;
    font-weight: 600;
    background: var(--wms-surface-2);
}

.wms-gis-details-table tbody tr:hover td {
    background: var(--wms-brand-050);
}

/* Counter (left) + arrow-only nav (right). */
.wms-gis-details-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.wms-gis-details-counter {
    font-size: 13px;
    color: var(--wms-muted);
}

.wms-gis-details-arrows {
    display: flex;
    gap: 10px;
}

.wms-gis-details-arrows .wms-btn {
    width: 48px;
    padding: 0;
}

/* ---------- Settings form ---------- */
.wms-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 2px 0;
}

/* Label sits to the LEFT of its input on one row (reference layout). */
.wms-form__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.wms-form__label {
    flex: 0 0 120px;
    width: 120px;
    font-size: 13px;
    font-weight: 600;
    color: #000;   /* amber, matching the reference dialog's field labels */
}

.wms-form__row .wms-form__input,
.wms-form__row .wms-form__password {
    flex: 1 1 auto;
    min-width: 0;
}

.wms-form__input {
    height: 40px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    background: var(--wms-surface);
    color: var(--wms-ink);
    font-size: 13.5px;
}

.wms-form__input[readonly] {
    background: var(--wms-surface-2);
}

.wms-form__input:focus {
    outline: none;
    border-color: var(--wms-brand);
}

.wms-form__password {
    position: relative;
    display: flex;
    align-items: center;
}

.wms-form__password .wms-form__input {
    padding-right: 42px;
}

.wms-form__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--wms-muted);
    cursor: pointer;
    border-radius: 6px;
}

.wms-form__eye:hover {
    color: var(--wms-brand);
    background: var(--wms-surface-3);
}

/* Custom checkbox for the "Append scale" option. */
.wms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--wms-ink);
}

.wms-check__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wms-check__box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--wms-line);
    border-radius: 6px;
    background: var(--wms-surface);
    color: #fff;
    transition: background .15s var(--wms-ease), border-color .15s var(--wms-ease);
}

.wms-check__box svg {
    opacity: 0;
    transition: opacity .15s var(--wms-ease);
}

.wms-check__input:checked + .wms-check__box {
    background: var(--wms-brand);
    border-color: var(--wms-brand);
}

.wms-check__input:checked + .wms-check__box svg {
    opacity: 1;
}

.wms-check__input:focus-visible + .wms-check__box {
    box-shadow: var(--wms-ring);
}

/* Settings modal — read-only Concurrent / Active License fields, styled
   like the reference's disabled ConcurrentLicenses/LicensesAvailable inputs. */
.wms-gis-settings-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wms-gis-settings-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wms-gis-settings-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--wms-ink);
}

.wms-gis-settings-value {
    flex: 0 0 auto;
    width: 70px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--wms-surface-2);
    border: 1px solid var(--wms-line);
    border-radius: var(--wms-radius-sm);
    color: var(--wms-muted);
    font-size: 14px;
    cursor: not-allowed;
}

/* ============================================================= */
/*  Modal stacking fix                                            */
/*  The modals are `position: fixed` but live inside              */
/*  `.wms-portal > .wms-container`, which owns a stacking context */
/*  (z-index:1) that sits BELOW the sticky top bar (z-index:40).  */
/*  While a modal is open we lift that container above the bar so */
/*  the overlay/backdrop covers the header instead of slipping    */
/*  behind it. Scoped to the open state so normal page scrolling  */
/*  is unaffected. JS toggles `.wms-modal-open` on <body>.        */
/* ============================================================= */
.wms-standalone.wms-modal-open .wms-portal > .wms-container {
    z-index: 60;
}

/* ============================================================= */
/*  Bootstrap-style tooltips (scoped subset — we load only the    */
/*  Bootstrap JS bundle, not its full CSS, to avoid the reboot    */
/*  overriding this portal's custom styling).                     */
/* ============================================================= */
.tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: "Poppins", var(--triton-font, sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
    text-decoration: none;
    letter-spacing: normal;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 12px;
    height: 6px;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    top: -1px;
    border-width: 6px 6px 0;
    border-top-color: #22242b;
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
    top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 6px 6px;
    border-bottom-color: #22242b;
}

.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
    right: 0;
    width: 6px;
    height: 12px;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    left: -1px;
    border-width: 6px 0 6px 6px;
    border-left-color: #22242b;
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
    left: 0;
    width: 6px;
    height: 12px;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    right: -1px;
    border-width: 6px 6px 6px 0;
    border-right-color: #22242b;
}

.tooltip-inner {
    max-width: 220px;
    padding: 6px 10px;
    color: #fff;
    text-align: center;
    background-color: #22242b;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ============================================================= */
/*  Responsive — GIS viewer, top bar & modals (tablet / mobile)  */
/* ============================================================= */

/* Tablet & down: stack the sidebar above the map and let the whole
   viewer flow with the page instead of being locked to the viewport. */
@media (max-width: 991px) {
    .wms-portal--gis {
        overflow: visible;
    }

    .wms-portal--gis > .wms-container,
    .wms-portal--gis .wms-results-view {
        display: block;
        min-height: 0;
    }

    .wms-gis,
    .wms-portal--gis .wms-gis {
        height: auto;
        max-height: none;
    }

    .wms-gis-body {
        flex-direction: column;
    }

    .wms-gis-sidebar {
        width: 100%;
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;   /* stacked layout flows with the page on mobile */
        border-right: none;
        border-bottom: 1px solid var(--wms-line);
    }

    /* On mobile the list flows with the page rather than scrolling internally. */
    .wms-gis-card--grow .wms-gis-layers {
        max-height: 320px;
    }

    .wms-gis-map-wrap {
        flex: 1 1 auto;
        min-height: 60vh;
    }

    /* Search + Get Chart drop onto their own full-width row. */
    .wms-gis-search {
        margin-left: 0;
        flex: 1 1 100%;
    }

    /* Allow the top bar's right-hand controls to wrap. */
    .wms-topbar__inner {
        flex-wrap: wrap;
    }

    .wms-topbar__right {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .wms-topbar__badges {
        flex-wrap: wrap;
    }

    .wms-gis-toolbar {
        gap: 10px;
        padding: 10px 12px;
    }

    /* Stack the About / Settings modal columns. */
    .wms-gis-about__banner,
    .wms-gis-about__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .wms-gis-about__logo {
        max-width: 60%;
    }
}

@media (max-width: 575px) {
    .wms-gis-map-wrap {
        min-height: 55vh;
    }

    /* Modal footer wraps; buttons share the row, logo shrinks. */
    .wms-modal__footer {
        flex-wrap: wrap;
    }

    .wms-modal__footer-logo {
        height: 22px;
    }

    .wms-modal__footer .wms-btn {
        flex: 1 1 auto;
    }

    /* License-count fields stack. */
    .wms-gis-settings-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .wms-modal__title {
        font-size: 15px;
        white-space: normal;
    }
}

/* Light theme only — this portal does not support a dark theme. */