/*
 * DIV-TRAV shared UI foundation (v1)
 *
 * This layer intentionally sits on top of the classic skin. Keep selectors
 * scoped to .ui-shell-v1 so old page-specific layouts remain stable while
 * shared accessibility, RTL, mobile and component fixes can evolve safely.
 */

:root {
    --ui-color-focus: #155eef;
    --ui-color-surface: #ffffff;
    --ui-color-surface-muted: #f3f4f6;
    --ui-color-text: #1f2937;
    --ui-color-danger: #b42318;
    --ui-color-primary: #176b2c;
    --ui-radius-sm: 6px;
    --ui-radius-md: 12px;
    --ui-shadow-dialog: 0 24px 60px rgba(15, 23, 42, 0.28);
    --ui-touch-target: 44px;
}

body.ui-shell-v1 {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.ui-shell-v1 [hidden] {
    display: none !important;
}

body.ui-shell-v1 :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--ui-color-focus);
    outline-offset: 2px;
}

body.ui-shell-v1 :where(button, input, select, textarea) {
    font: inherit;
}

/* Resource states and compact phone actions previously repeated in base.html. */
#res .bares.resWarn {
    filter: hue-rotate(-50deg) saturate(1.4);
}

#res .bares.resFull {
    filter: hue-rotate(-110deg) saturate(1.5);
}

@media (max-width: 640px) {
    body.ui-shell-v1 a.build,
    body.ui-shell-v1 .trav_buttons {
        padding: 8px 14px;
    }
}

.ui-skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 20000;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    background: #111827;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 120ms ease-out;
}

.ui-skip-link:focus {
    transform: translateY(0);
}

.ui-noscript {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 24px;
    background: #ffffff;
    color: #7a271a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

/* Valid replacement for the legacy duplicate #offers selector. */
a.offers-badge {
    position: relative;
}

a.offers-badge::after {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -3px;
    color: #b42318;
    content: attr(data-badge);
    font-size: 11px;
    line-height: 1;
}

a.offers-badge[data-badge="0"]::after,
a.offers-badge[data-badge=""]::after {
    content: none;
}

.ui-topbar__menu {
    border: 0;
    background: transparent;
    color: #000000;
    cursor: pointer;
}

.ui-topbar__menu svg {
    width: 20px;
    height: 20px;
    background: transparent;
}

.ui-topbar__link {
    color: #000000;
}

.ui-topbar__chat {
    color: #6e0115;
}

.ui-topbar__support {
    color: #155eef;
    font-weight: 700;
}

.ui-topbar__villages--alert {
    border-radius: var(--ui-radius-sm);
    color: var(--ui-color-danger);
    animation: shake 0.5s 8;
}

.ui-topbar__gold {
    top: 0;
    height: 20px;
}

.ui-topbar__gold img {
    margin-block-end: 10px;
}

.ui-topbar__logout {
    display: inline-flex;
    width: 25px;
}

/* Coordinate pairs like (-31 | 25) must render left-to-right even inside
   RTL text, or the minus sign visually flips to "31-". */
.aligned_coords,
.coord,
.coords {
    direction: ltr;
    unicode-bidi: isolate;
}

.ui-logout-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.ui-logout-button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.ui-side-logout-form {
    display: inline;
}

.ui-side-logout-form .ui-logout-button {
    color: inherit;
    text-decoration: underline;
}

.ui-topbar__logout img {
    width: 25px;
    height: 25px;
}

/* Shared side-navigation news; scoped so admin and standalone pages stay intact. */
body.ui-shell-v1 #side_navi p.deltimer.svc-news-wrap {
    width: auto !important;
    margin: 0 0 14px !important;
}

body.ui-shell-v1 #side_navi a.svc-news {
    display: block;
    padding: 0 12px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #000000 !important;
    font-weight: 400;
    line-height: 20px;
    text-align: right !important;
}

body.ui-shell-v1 #side_navi a.svc-news:hover {
    color: #00c000 !important;
}

body.ui-shell-v1 #side_navi a.svc-news .svc-lbl,
body.ui-shell-v1 #side_navi a.svc-news .svc-val,
body.ui-shell-v1 #side_navi a.svc-news .svc-val .timer {
    display: block;
    color: #ff8000;
    font-weight: 700;
}

body.ui-shell-v1 #side_navi a.svc-news .svc-val .timer {
    display: inline;
}

body.ui-shell-v1 #side_navi .svc-sub-form {
    margin: 0;
}

body.ui-shell-v1 #side_navi a.svc-sub,
body.ui-shell-v1 #side_navi button.svc-sub {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 12px 0 0;
    color: #b91c1c !important;
    font-size: 11px;
    text-align: right;
    /* Button reset so the POST-form control matches the old <a> link. */
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

body.ui-shell-v1 #side_navi a.svc-sub:hover,
body.ui-shell-v1 #side_navi button.svc-sub:hover {
    text-decoration: underline;
}

.ui-side-extra {
    margin: 0 0 10px;
}

.ui-mobile-clock-icon {
    inset-block-start: 13px;
    inset-inline-end: 4px;
}

.ui-sidebar-clock-icon {
    inset-block-start: -74px;
    inset-inline-end: 13px;
}

.ui-inbox-message-link {
    position: relative;
}

.ui-gold-icon {
    margin-block-end: 10px;
}

#Screen.ui-screen-overlay {
    top: 100px;
    z-index: 10001;
    display: none;
}

.ui-unread-badge {
    padding: 2px;
    border-radius: 4px;
    background: #6e0115;
    color: #ffffff;
}

.ui-menu-gold {
    color: #ff8000;
}

.ui-menu-support {
    color: #0000ff;
    font-weight: 700;
}

/* Valid replacement for the four duplicate #Res nodes. */
div.resource-add {
    position: relative;
    inset-block-start: -2px;
    inset-inline-start: -3px;
    z-index: 11;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    line-height: 1.8;
}

div.resource-add img {
    width: 16px;
    height: 16px;
    margin-block-start: 3px;
}

.ui-mobile-nav {
    display: none !important;
}

.ui-mobile-nav__attack-count {
    margin: 0;
    padding-inline-end: 10px;
    color: var(--ui-color-danger);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.ui-mobile-nav__link,
.ui-mobile-nav__villages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ui-mobile-nav__link img,
.ui-mobile-nav__villages img {
    width: 25px;
    height: 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    zoom: 1;
}

.ui-mobile-nav__villages--alert {
    background: #b42318;
    animation: shake 0.5s 8;
}

/* Shared confirmation dialog. It keeps legacy class names for compatibility. */
.ui-confirm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.62);
}

.ui-confirm[aria-hidden="true"] {
    display: none;
}

.ui-confirm[aria-hidden="false"] {
    display: flex !important;
}

.ui-confirm__panel {
    width: min(92vw, 420px);
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-dialog);
    color: var(--ui-color-text);
    text-align: center;
}

.ui-confirm__message {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
}

.ui-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.ui-confirm__button {
    min-width: 104px;
    min-height: var(--ui-touch-target);
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
}

#confirmYes.ui-confirm__button {
    background: var(--ui-color-primary);
}

#confirmNo.ui-confirm__button {
    background: var(--ui-color-danger);
}

@media (max-width: 768px) {
    .ui-mobile-nav {
        display: flex !important;
        min-height: var(--ui-touch-target);
        align-items: center;
        gap: 4px;
        padding-inline: 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .ui-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .ui-mobile-nav__link,
    .ui-mobile-nav__villages {
        width: var(--ui-touch-target);
        min-width: var(--ui-touch-target);
        height: var(--ui-touch-target);
    }

    body.ui-shell-v1 #daym,
    body.ui-shell-v1 #loadingm {
        display: none !important;
    }

    body.ui-shell-v1 .show {
        display: block !important;
    }

    body.ui-shell-v1 :where(input, select, textarea) {
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    body.ui-shell-v1 #daym,
    body.ui-shell-v1 #loadingm {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-shell-v1 *,
    body.ui-shell-v1 *::before,
    body.ui-shell-v1 *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .ui-confirm__button,
    .ui-mobile-nav__link,
    .ui-mobile-nav__villages {
        border: 1px solid ButtonText;
    }
}