/** GJPOS supplier settlement portal. @version 2026-08-22.1 */

:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
    color: #322a29;
    background: #f6f3f2;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f6f3f2; color: #322a29; }
a { color: #5e4444; }

.portal-header {
    border-bottom: 1px solid #ddd3d1;
    background: #fff;
}
.portal-header-inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.portal-brand { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: #3c3030; }
.portal-brand strong { font-size: 20px; }
.portal-brand span { color: #776968; font-size: 14px; }
.portal-user { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.portal-user form { margin: 0; }
.portal-user button {
    border: 0;
    padding: 0;
    background: none;
    color: #5e4444;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.portal-main { width: min(1180px, calc(100% - 32px)); min-height: calc(100vh - 150px); margin: 0 auto; padding: 28px 0 44px; }
.portal-page-title h1 { margin: 0 0 22px; font-size: clamp(24px, 4vw, 34px); }
.portal-footer { padding: 20px 16px 32px; text-align: center; color: #837675; font-size: 13px; }

.portal-card {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid #ded5d3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(58, 42, 42, .04);
}
.portal-card h2 { margin-top: 0; }
.portal-narrow-card { max-width: 780px; }
.portal-login-card { max-width: 480px; margin-inline: auto; }
.portal-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal-card-heading p { margin-bottom: 0; }

.portal-form { display: grid; gap: 16px; }
.portal-form label { display: grid; gap: 7px; font-weight: 600; }
.portal-form input,
.portal-form textarea,
.portal-form select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #bcaeac;
    border-radius: 7px;
    background: #fff;
    color: #282020;
    font: inherit;
}
.portal-form small { color: #736967; font-weight: 400; }

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #5e4444;
    border-radius: 7px;
    background: #fff;
    color: #5e4444;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.portal-button:hover, .portal-button:focus { background: #f5efee; }
.portal-button--primary { background: #5e4444; color: #fff; }
.portal-button--primary:hover, .portal-button--primary:focus { background: #493535; }

.portal-notice { padding: 12px 14px; border: 1px solid #d3c4c2; border-radius: 8px; background: #faf7f6; }
.portal-notice--warning { border-color: #e3c276; background: #fff8e7; }
.portal-notice--error { border-color: #d9a1a1; background: #fff0f0; color: #872727; }
.portal-notice--success { border-color: #a9cfad; background: #eef8ef; color: #285f31; }
.portal-empty { color: #776d6b; }

.portal-table-wrap { width: 100%; overflow-x: auto; }
.portal-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.portal-table th, .portal-table td { padding: 10px 11px; border-bottom: 1px solid #e9e2e0; text-align: left; vertical-align: top; }
.portal-table th { background: #f4efee; color: #463a39; font-size: 13px; white-space: nowrap; }
.portal-table--numbers td:not(:first-child), .portal-table--numbers th:not(:first-child) { white-space: nowrap; }
.portal-product-name { min-width: 250px; white-space: normal !important; }
.portal-money { white-space: nowrap; font-weight: 700; }
.portal-money--negative, .portal-negative { color: #982c2c; }

.portal-badge { display: inline-block; padding: 3px 7px; border-radius: 999px; background: #eee8e7; color: #584c4b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.portal-badge--ok { background: #e4f3e5; color: #296230; }
.portal-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin: 18px 0; }
.portal-summary-grid > div { padding: 14px; border: 1px solid #e0d7d5; border-radius: 9px; background: #faf8f7; }
.portal-summary-grid span, .portal-summary-grid strong { display: block; }
.portal-summary-grid span { margin-bottom: 6px; color: #776b69; font-size: 13px; }
.portal-summary-grid strong { font-size: 20px; }
.portal-toolbar { margin-bottom: 16px; }
.portal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.portal-actions form { margin: 0; }

@media (max-width: 700px) {
    .portal-header-inner { align-items: flex-start; flex-direction: column; padding: 14px 0; }
    .portal-user { width: 100%; gap: 10px 14px; }
    .portal-main { width: min(100% - 20px, 1180px); padding-top: 20px; }
    .portal-card { padding: 15px; }
    .portal-card-heading { align-items: stretch; flex-direction: column; }
    .portal-card-heading .portal-button { width: 100%; }
    .portal-actions { flex-direction: column-reverse; }
    .portal-actions .portal-button { width: 100%; }
}