/* Minato theme variables (no preprocessor) */
:root {
    --page-bg: #f7fbff;
    --page-overlay: rgba(255, 255, 255, 0);
    --surface-bg: #ffffff;
    --surface-alt: #f3f6ff;
    --surface-muted: #e9efff;
    --surface-strong: #e2e9ff;
    --text-color: #182230;
    --muted-text: #526073;
    --heading-color: #0f1726;
    --inverse-text: #ffffff;
    --border-color: #c7d2e8;
    --border-strong: #9fb5da;
    --border-contrast: #2a3b56;
    --accent-color: #ffcc33; /* Minato yellow */
    --accent-strong: #ffdb66;
    --nav-link-color: #2a3b56;
    --nav-hover-bg: #fff4cc;
    --nav-hover-color: #1e2b3f;
    --input-bg: #ffffff;
    --input-border: #c7d2e8;
    --badge-bg: #fff6d6;
    --badge-border: #ffeaa3;
    --badge-text: #704b00;
    --tiny-badge-bg: #7087b7;
    --tiny-badge-hot-bg: #c45d5d;
    --tiny-badge-border: #9fb5da;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #000;
        --page-overlay: rgba(0, 0, 0, 0.4);
        --surface-bg: #12161f;
        --surface-alt: #182131;
        --surface-muted: #1d2a3f;
        --surface-strong: #1a2538;
        --text-color: #d7dfeb;
        --muted-text: #bac7e0;
        --heading-color: #2e2e2e;
        --inverse-text: #ffffff;
        --border-color: #3a4b66;
        --border-strong: #2a3b56;
        --border-contrast: #d7dfeb;
        --accent-color: #ffd057;
        --accent-strong: #ffdf80;
        --nav-link-color: #d7dfeb;
        --nav-hover-bg: #24344f;
        --nav-hover-color: #ffffff;
        --input-bg: #0c111a;
        --input-border: #3a4b66;
        --badge-bg: rgba(255, 208, 87, 0.18);
        --badge-border: rgba(255, 208, 87, 0.35);
        --badge-text: #ffd057;
        --tiny-badge-bg: #7b8fb6;
        --tiny-badge-hot-bg: #7a3b3b;
        --tiny-badge-border: #d7dfeb;
    }
}

/* General */
caption {
    white-space: nowrap;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

td {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.trlight, .trdark { overflow-wrap: anywhere; }


table.dataTable > tbody > tr.trhead,
.trhead {
    background-color: var(--surface-strong);
    color: var(--heading-color);
}

table.dataTable > tbody > tr.trlight,
.trlight {
    background-color: var(--surface-alt);
    color: var(--text-color);
}

table.dataTable > tbody > tr.trdark,
.trdark {
    background-color: var(--surface-muted);
    color: var(--text-color);
}

table.dataTable > tbody > tr.trhighlight,
.trhilight {
    background-color: var(--nav-hover-bg);
    color: var(--nav-hover-color);
}

.trlight td,
.trdark td {
    background-color: inherit;
    color: inherit;
}

.main-body {
    /*background-image: linear-gradient(var(--page-overlay), var(--page-overlay)), url('page-bg-q80.webp'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-attachment: fixed;
    background-color: var(--page-bg);
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 968px) {
    .main-body { background-position: top 10% right 30%; }
    .pageheader-center > img { width: 50%; }
}

.popup-body { background-color: var(--surface-bg); color: var(--text-color); }

.offcanvas {
    /*background-image: linear-gradient(var(--page-overlay), var(--page-overlay)), url('page-bg-q80.webp'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-color: var(--surface-bg);
    color: var(--text-color);
}

/* Nav */
table.nav { border: 1px solid var(--border-strong); height: auto; width: 182px; }
.navhead {
    background-image: url('nav-top.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}
.navhead, .navheadsub {
    text-decoration: none; width: 100%; height: auto; padding: 1px; float: left;
    line-height: 33px; clear: none; color: var(--heading-color); cursor: default; text-align: center;
    font-family: Tahoma Small Cap; font-weight: bolder;
}
.navheadsub { width: 170px; margin-left: 10px; }


/* Charinfo */
td.charinfo {
    color: #FFFFFF;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #1d6110;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    cursor: default;
}
td.charhead {
    text-decoration: none;
    height: auto;
    padding: 1px;
    line-height: 33px;
    clear: none;
    background-image: url('nav-top.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    color: #000000;
    cursor: default;
    text-align: center;
}


a { color: var(--nav-link-color); text-decoration: none; }

.page-header { padding-bottom: 3px; }

.main-content {
    position: relative;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    align-content: start;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    /* Frame layers on top, tiled background beneath */
    background:
        url('page_top.png') repeat-x top center,
        url('page_bot.png') repeat-x bottom center,
        url('page_lt.png') repeat-y left center,
        url('page_rt.png') repeat-y right center,
        url('page-bg-q80.webp') repeat center center;
}

.sidebar-content { min-width: 160px; max-width: 208px; padding-left: 3px; padding-right: 3px; align-content: start; }

.pageheader-center, .pageheader-left, .pageheader-right { width: 33.3%; padding: 3px; text-align: center; }
.pageheader-left { text-align: left; }
.pageheader-right { text-align: right; }

.mail-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.mail-nav__link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; color: inherit; text-decoration: none; }
.mail-nav__link, .mail-nav__link a { color: inherit; text-decoration: none; }

/* Make vertical nav a column without changing HTML */
.nav-container { text-align: center; padding-top: 4px; padding-bottom: 4px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
a.nav { color: var(--nav-link-color); text-decoration: none; display: block; width: 100%; height: auto; padding: 1px; text-align: center; float: none; }
a:hover.nav { background-color: var(--nav-hover-bg); color: var(--nav-hover-color); }
.navhelp { color: var(--nav-link-color); }

.sidebar-content img.nav-bottom { margin-top: 15px; }

select, .select { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-color); }

table.vitalinfo { background-color: var(--surface-muted); border: 1px solid var(--border-strong); width: 182px; }

.pagetitle { font-family: "Arial Black", "Courier"; font-variant: small-caps; font-size: 14px; color: var(--heading-color); }
.navhi { color: var(--nav-link-color); text-decoration: underline; }

.button { font-family: "Segoe UI", Helvetica, Arial, sans-serif; }
.login-submit { text-align: center; }

/* Layout helpers */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.valign-top { vertical-align: top; }
.valign-bottom { vertical-align: bottom; }
.noborder { border: 0; }
.navad-wrapper { position: relative; top: -15px; text-align: center; }
.verticalad-wrapper { float: right; }
.layout-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.clear { clear: both; display: block; }
.nav-top, .nav-bottom { width: 100%; height: auto; }

/* Login hero */
.login-hero {
    background: url('login-hero.png') center/cover no-repeat;
    width: 100%; max-width: 321px; aspect-ratio: 420 / 470; height: auto;
    display: block; border-radius: 16px; overflow: hidden;
}

/* Focus styles */
:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
a:focus-visible { border-radius: 4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Minato-specific tweaks */
body, caption, td, .button { font-family: 'Segoe UI', Helvetica, Arial, sans-serif; }
.navhead, .navheadsub { font-family: 'Segoe UI', Helvetica, Arial, sans-serif; display: block; width: 100%; text-align: center; }
.popup-body { background-image: linear-gradient(135deg, var(--surface-alt), var(--surface-bg)); }
.login-message { border: 2px solid var(--badge-border); background-color: var(--badge-bg); color: var(--badge-text); padding: 0.75rem 1rem; margin-bottom: 0.75rem; font-size: 1.1em; border-radius: 4px; }
.background-flag { position: fixed; bottom: 0; right: 0; width: 200px; height: auto; opacity: 0.12; z-index: -1; pointer-events: none; }