@import url("/css/site-themes.css");
@import url("/css/lining-numbers.css");
:root {
    color-scheme: light;
    --forest: var(--site-color-28c61a1519, #123d21);
    --cream: var(--site-color-12e85b86f2, #faf5e8);
    --gold: var(--site-color-94830b8bd0, #c5a14d);
    --ink: var(--site-color-8bfa4cb421, #152b1c);
}
* { box-sizing: border-box; }
body.admin-contact-page {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font: 15px/1.45 system-ui, sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--forest); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--site-color-a901d9272c, #8d6b16);
    outline-offset: 3px;
}
h1, h2 { font-family: "KCSoni Digits",Georgia, serif; line-height: 1.15; margin: 0; }
input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--site-color-77707fa155, #a89d7e);
    border-radius: 7px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--site-color-849ce789be, #fffdf7);
}
.primary-button {
    border: 0;
    border-radius: 7px;
    background: var(--forest);
    color: var(--site-color-5652e88f37, #fff9e4);
    padding: 10px 16px;
    font-weight: 700;
}
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-shell {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    width: min(860px, 100%);
    overflow: hidden;
    border: 1px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 5px 18px var(--site-color-656967ea1e, #1b321d24);
    background: var(--site-color-3f2db1b29c, #fffbf1);
}
.login-brand {
    background: var(--site-color-376be134f2, #103b20) url('/media/admin/login-wetland.png') center bottom / cover no-repeat;
    color: var(--site-color-64dfbe1724, #fff4d3);
    padding: 35px 22px 180px;
    text-align: center;
}
.login-brand h1 { font-size: clamp(26px, 3.3vw, 40px); }
.brand-rule { display: block; width: 80%; height: 1px; background: var(--gold); margin: 18px auto 10px; }
.login-brand p { font: 24px/1.2 "KCSoni Digits",Georgia, serif; margin: 0; }
.login-form-panel { padding: 28px 32px; }
.login-form-panel h2 { font-size: 32px; text-align: center; }
.login-subtitle { margin: 7px 0 20px; text-align: center; font-size: 13px; }
.login-form-panel label { display: block; margin: 12px 0 4px; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field button {
    position: absolute; inset: 0 0 0 auto; width: 44px;
    border: 0; background: transparent; color: var(--forest); display: grid; place-items: center;
}
.password-field svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sign-in { display: block; width: 100%; margin-top: 20px; }
.back-link, .setup-link { display: block; text-align: center; margin-top: 13px; font-size: 13px; }
.form-errors:empty, .validation-summary-valid { display: none; }
.form-errors { color: var(--site-color-a55e3b06f3, #8b231c); font-size: 13px; }
.form-errors ul { padding-left: 18px; }
.notice { padding: 8px; border: 1px solid var(--gold); border-radius: 6px; }
.inbox-shell {
    width: min(1520px, calc(100% - 32px));
    margin: 24px auto;
    background: var(--site-color-9708eae181, #fffbf0);
    border: 1px solid var(--gold);
    border-radius: 14px;
    box-shadow: 0 4px 12px var(--site-color-bc877cce2b, #19301b1c);
    overflow: hidden;
}
.inbox-header {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--forest); color: var(--site-color-c22aedf712, #fff7df); padding: 16px 22px;
}
.inbox-brand { color: inherit; font: 700 25px/1.2 "KCSoni Digits",Georgia, serif; text-decoration: none; padding-right: 20px; border-right: 1px solid var(--gold); }
.inbox-header h1 { display: flex; gap: 12px; align-items: center; font-size: 26px; }
.inbox-header h1 svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.inbox-total { display: flex; align-items: center; gap: 8px; margin-left: auto; background: var(--site-color-66b680f809, #fff6dc); color: var(--forest); padding: 5px 12px; border: 1px solid var(--gold); border-radius: 10px; white-space: nowrap; }
.inbox-total > span { height: 17px; border-left: 1px solid var(--gold); margin: 0 5px; }
.admin-back { color: inherit; font-size: 12px; }
.inbox-workspace { padding: 18px; }
.inbox-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.search-label { flex: 1 1 260px; }
.message-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.message-filters button { border: 1px solid var(--site-color-457318fd28, #c8b677); border-radius: 8px; background: var(--site-color-e238da0bf1, #fff9e8); color: var(--forest); padding: 8px 14px; font-size: 13px; }
.message-filters button[aria-pressed="true"] { color: var(--site-color-e238da0bf1, #fff9e8); background: var(--forest); }
.inbox-notice:empty { display: none; }
.message-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.message-card {
    display: block; width: 100%; min-width: 0; color: var(--ink);
    background: var(--site-color-56c7e24071, #fffaf0); border: 1px solid var(--site-color-900cbcd044, #cab779); border-radius: 10px;
    box-shadow: 0 2px 5px var(--site-color-b2245fb52a, #263a1910); padding: 14px; text-align: left;
}
.message-card[hidden], [hidden] { display: none !important; }
.message-card:hover { border-color: var(--site-color-91f2b97955, #487246); box-shadow: 0 3px 9px var(--site-color-607da87713, #223e2224); }
.message-card.is-unread { background: var(--site-color-f7393126b2, #e9f8df); border-color: var(--site-color-2e84245aaf, #a6c48f); border-left: 6px solid var(--site-color-62f7c51292, #168539); padding-left: 9px; }
.message-card-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.sender { display: flex; gap: 7px; align-items: center; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.is-unread .sender, .is-unread .message-subject { font-weight: 750; }
.unread-dot { display: none; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--site-color-62f7c51292, #168539); }
.is-unread .unread-dot { display: inline-block; }
.message-card time { font-size: 11px; line-height: 1.5; text-align: right; flex: 0 0 110px; }
.sender-email { display: block; font-size: 12px; overflow-wrap: anywhere; margin-top: 3px; }
.subject-row { display: flex; align-items: start; gap: 8px; margin-top: 15px; }
.message-subject { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.status-badge { display: inline-block; font-size: 11px; line-height: 1.3; padding: 3px 8px; border: 1px solid var(--site-color-7f946d0cb0, #b69e56); border-radius: 7px; background: var(--site-color-1dffc5f842, #fff7d8); white-space: nowrap; }
.is-unread .status-badge { border-color: var(--site-color-62f7c51292, #168539); background: var(--site-color-62f7c51292, #168539); color: white; }
.message-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 8px; font-size: 13px; }
.empty-messages { text-align: center; padding: 30px 10px; }
.inbox-legend { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; border: 1px solid var(--site-color-2d0b213dd7, #d9cba0); border-radius: 7px; padding: 8px 10px; font-size: 12px; }
.legend-swatch { display: inline-block; width: 17px; height: 17px; border: 1px solid var(--site-color-62f7c51292, #168539); border-radius: 4px; background: var(--site-color-f7393126b2, #e9f8df); }
.message-dialog {
    position: fixed; inset: 0 18px 0 auto; margin: auto 0;
    width: min(560px, calc(100vw - 36px)); max-height: calc(100dvh - 36px);
    overflow: auto; border: 1px solid var(--gold); border-radius: 13px;
    background: var(--site-color-56c7e24071, #fffaf0); color: var(--ink); box-shadow: 0 12px 40px var(--site-color-faeffcaa91, #0004); padding: 18px;
}
.message-dialog::backdrop { background: var(--site-color-66f4dcd684, #17341b25); }
.message-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--gold); padding-bottom: 12px; }
.message-dialog h2 { font-size: 27px; }
.close-message { display: grid; place-items: center; background: transparent; color: var(--forest); border: 0; font-size: 29px; line-height: 1; width: 34px; height: 34px; }
.message-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--gold); font-size: 13px; }
.message-meta > div { min-width: 0; }
.message-meta > div > * { display: block; overflow-wrap: anywhere; }
.message-meta > div > span:first-child { font-size: 11px; margin-bottom: 3px; color: var(--site-color-7b5fac0ce5, #59634f); }
.message-meta .detail-subject { grid-column: 1 / -1; }
.message-meta .status-badge { display: inline-block; }
.detail-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; margin: 17px 0 3px; }
.detail-notice { font-size: 12px; color: var(--site-color-9f8aa031e6, #86382b); }
.detail-notice:empty { display: none; }
.retry-read { padding: 6px 9px; border: 1px solid var(--gold); border-radius: 6px; background: var(--site-color-ebb4a4fd32, #fff4d1); color: var(--forest); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
    .message-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .login-page { padding: 16px 12px; }
    .login-shell { grid-template-columns: minmax(0, 1fr); max-width: 430px; }
    .login-brand { padding: 20px 15px 80px; background-size: cover; }
    .login-brand h1 { font-size: 27px; }
    .login-brand p { font-size: 19px; }
    .brand-rule { margin: 10px auto; width: 65%; }
    .login-form-panel { padding: 20px; }
    .login-form-panel h2 { font-size: 27px; }
    .inbox-shell { width: calc(100% - 16px); margin: 8px auto; }
    .inbox-header { padding: 12px; gap: 9px; }
    .inbox-brand { font-size: 21px; border: 0; padding: 0; width: 100%; }
    .inbox-header h1 { font-size: 21px; }
    .inbox-header h1 svg { width: 23px; height: 23px; }
    .inbox-total { margin: 0; font-size: 12px; padding: 4px 7px; gap: 4px; }
    .inbox-total > span { margin: 0 2px; }
    .admin-back { margin-left: auto; }
    .inbox-workspace { padding: 10px; }
    .inbox-tools { gap: 8px; }
    .search-label { flex-basis: 100%; }
    .message-filters { gap: 6px; }
    .message-filters button { font-size: 12px; padding: 7px 10px; }
    .message-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
    .message-card { padding: 12px; }
    .message-card time { flex-basis: 100px; font-size: 10px; }
    .sender { font-size: 15px; }
    .message-dialog { inset: 0; margin: auto; width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 14px; }
    .message-dialog h2 { font-size: 24px; }
    .message-meta { gap: 10px; font-size: 12px; }
}
@media (min-width: 1280px) {
    body:has(.message-dialog[open]) .inbox-workspace { padding-right: 590px; }
    body:has(.message-dialog[open]) .message-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:has(.message-dialog[open]) .inbox-tools { gap: 10px; }
}
