/* Shared design system for the public portal. */
:root {
    --colorPrimary: #699822;
    --colorOnPrimary: #ffffff;
    --colorBackground: #d9e4d7;
    --colorText: #000000;
    --colorTextMuted: #000000;
    --colorCard: #ffffff;
    --colorSoft: #f7faf3;
    --colorSoftStrong: #edf4e4;
    --colorBorder: #dfe8d4;
    --fontDisplay: "Varela Round", "Trebuchet MS", Arial, sans-serif;
    --fontHeading: Roboto, "Segoe UI", Arial, sans-serif;
    --fontBody: "Varela Round", "Trebuchet MS", Arial, sans-serif;
    --space1: 8px;
    --space2: 16px;
    --space3: 24px;
    --space4: 48px;
    --radiusSm: 10px;
    --radiusMd: 14px;
    --radiusPill: 9999px;
    --shadowCard: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadowElevated: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --motionFast: 150ms;
    --motionEase: cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body {
    background:
        linear-gradient(180deg, rgba(197, 214, 197, 0.96) 0, rgba(217, 228, 215, 0) 420px),
        var(--colorBackground);
    color: var(--colorText);
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--fontBody);
    font-size: 12px;
    line-height: 1.33;
}

* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--colorText);
    font-family: var(--fontHeading);
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.33;
}

a,
.link {
    color: var(--colorPrimary);
    font-weight: 700;
    text-decoration: none;
}

a:hover,
.link:hover {
    color: #4e7418;
    text-decoration: underline;
}

#container {
    margin: 0 auto;
    max-width: 1280px;
    padding: var(--space3);
    width: 100%;
}

#header {
    align-items: center;
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    box-shadow: var(--shadowCard);
    display: flex;
    gap: var(--space2);
    justify-content: space-between;
    min-height: 80px;
    padding: var(--space2) var(--space3);
}

#header #logo {
    align-items: center;
    display: flex;
    max-width: 48%;
}

#header #logo img {
    height: auto;
    max-height: 56px;
    max-width: 100%;
}

#header .pull-right {
    align-items: center;
    display: flex;
    gap: var(--space1);
    float: none;
    max-width: 52%;
}

#header p {
    background: var(--colorPrimary);
    border-radius: var(--radiusPill);
    color: var(--colorOnPrimary);
    margin: 0;
    padding: 10px var(--space2);
}

#header p a {
    color: inherit;
}

#nav {
    align-items: center;
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    box-shadow: var(--shadowCard);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space2);
    padding: var(--space1);
}

#nav li,
#nav li a {
    border-radius: var(--radiusPill);
}

#nav li a {
    color: var(--colorText);
    display: block;
    font-weight: 700;
    padding: 11px var(--space2);
}

#nav li a.active,
#nav li a:hover {
    background: var(--colorPrimary);
    color: var(--colorOnPrimary);
    text-decoration: none;
}

#content {
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusMd);
    box-shadow: var(--shadowCard);
    margin-top: var(--space2);
    min-width: 0;
    padding: var(--space3);
}

#footer {
    color: var(--colorTextMuted);
    font-size: 11px;
    padding: var(--space3) 0;
    text-align: center;
}

.button,
.button:visited,
.green.button,
.green.button:visited,
.blue.button,
.blue.button:visited,
input[type=submit],
input[type=button],
button {
    background: var(--colorPrimary);
    border: 1px solid var(--colorPrimary);
    border-radius: var(--radiusSm);
    box-shadow: var(--shadowCard);
    color: var(--colorOnPrimary);
    font-family: var(--fontBody);
    font-size: 12px;
    font-weight: 700;
    min-height: 40px;
    padding: 10px var(--space2);
    text-shadow: none;
    transition: background var(--motionFast) var(--motionEase), transform var(--motionFast) var(--motionEase);
}

.button:hover,
.green.button:hover,
.blue.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
button:hover {
    background: #4e7418;
    border-color: #4e7418;
    color: var(--colorOnPrimary);
    text-decoration: none;
    transform: translateY(-1px);
}

input,
select,
textarea {
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    color: var(--colorText);
    font-family: var(--fontBody);
    font-size: 12px;
    min-height: 40px;
    max-width: 100%;
    padding: 9px 10px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--colorPrimary);
    box-shadow: 0 0 0 3px rgba(105, 152, 34, 0.2);
    outline: none;
}

.notice_bar,
.warning_bar,
.error_bar,
#msg_notice,
#msg_warning,
#msg_error,
#msg_info {
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusSm);
    height: auto;
    line-height: 1.5;
    min-height: 40px;
    padding: 10px 12px 10px 42px;
}

.notice_bar,
#msg_notice {
    background-color: #eef7e5;
    border-color: #c7dda8;
}

.warning_bar,
#msg_warning {
    background-color: #fff7df;
    border-color: #ecd18e;
}

.error_bar,
#msg_error {
    background-color: #fff0ee;
    border-color: #efbcb4;
}

.thread-entry .header {
    background: var(--colorSoft);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusSm) var(--radiusSm) 0 0;
    padding: 10px 12px;
}

.thread-entry .thread-body {
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-top: 0;
    border-radius: 0 0 var(--radiusSm) var(--radiusSm);
    overflow-wrap: anywhere;
    padding: var(--space2);
}

@media (max-width: 700px) {
    #container {
        padding: var(--space2);
    }

    #header {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space2);
    }

    #header #logo,
    #header .pull-right {
        max-width: 100%;
        width: 100%;
    }

    #header .pull-right {
        align-items: stretch;
        flex-direction: column;
    }

    #header p {
        text-align: center;
    }

    #nav li {
        flex: 1 1 calc(50% - 6px);
    }

    #nav li a {
        text-align: center;
    }

    #content {
        padding: var(--space2);
    }

    input,
    select,
    textarea,
    .button,
    input[type=submit],
    input[type=button],
    button {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 440px) {
    #container {
        padding: var(--space1);
    }

    #content {
        padding: var(--space1);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}
/* Keep portal navigation and icon buttons readable at every width. */
#nav li,
#nav li a,
.button,
button,
a.button,
.action-button {
    align-items: center;
    display: inline-flex;
    gap: 9px;
}

#nav li a {
    min-height: 42px;
    white-space: nowrap;
}

#nav li a i,
.button i,
button i,
a.button i,
.action-button i {
    flex: 0 0 auto;
    margin: 0 !important;
}

#nav li a[class*="icon-"] {
    background-repeat: no-repeat;
    background-position: 14px 50%;
    padding-left: 42px;
}

@media (max-width: 700px) {
    #nav li a {
        justify-content: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.buttons,
.button-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.buttons > .button,
.buttons > input[type=button],
.buttons > input[type=reset],
.buttons > input[type=submit],
.button-group > .button {
    margin: 0 !important;
}
/* Scale the shared interface without changing responsive layout widths. */
:root {
    --space1: 10.4px;
    --space2: 20.8px;
    --space3: 31.2px;
    --space4: 62.4px;
}

html,
body {
    font-size: 15.6px;
}

input,
select,
textarea,
button,
.button,
.action-button {
    font-size: inherit !important;
}
.ticket-history-page {
    margin: 0 auto;
    max-width: 1280px;
}

.ticket-history-notice {
    height: auto;
    line-height: 1.5;
    margin-bottom: var(--space3);
}

.ticket-history-email {
    color: var(--colorTextMuted);
    margin-bottom: var(--space3);
}

.ticket-history-table {
    background: var(--colorCard);
    border: 1px solid var(--colorBorder);
    border-collapse: separate;
    border-radius: var(--radiusMd);
    border-spacing: 0;
    margin: 0 0 var(--space4);
    overflow: hidden;
    width: 100%;
}

.ticket-history-table th,
.ticket-history-table td {
    border-bottom: 1px solid var(--colorBorder);
    padding: 12px 14px;
    text-align: left;
}

.ticket-history-table th {
    background: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.ticket-history-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 700px) {
    .ticket-history-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* Keep client ticket actions independent from the heading size. */
.client-ticket-action,
.client-ticket-action:visited {
    background: var(--colorPrimary);
    border: 1px solid var(--colorPrimary);
    border-radius: var(--radiusSm);
    box-shadow: var(--shadowCard);
    color: var(--colorOnPrimary) !important;
    font-size: 0.9rem !important;
    font-weight: 700;
    line-height: 1.2;
    margin-left: 8px;
    padding: 10px var(--space2);
}

.client-ticket-action:hover {
    background: #4e7418;
    border-color: #4e7418;
    color: var(--colorOnPrimary) !important;
    text-decoration: none;
}