/* TalonPlus - Custom Styles */
@font-face { font-family: Sarabun; src: url('../fonts/Sarabun-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Sarabun; src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Sarabun; src: url('../fonts/Sarabun-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
    color-scheme: light;
    --tp-bg: #f5f7fa; --tp-ink: #253146; --tp-paper: #fff; --tp-blue: #255ac9; --tp-amber: #895a10;
    --tp-muted: color-mix(in srgb, var(--tp-ink) 77%, var(--tp-paper));
    --tp-border: color-mix(in srgb, var(--tp-ink) 13%, var(--tp-paper));
    --tp-input: color-mix(in srgb, var(--tp-ink) 34%, var(--tp-paper));
    --tp-soft: color-mix(in srgb, var(--tp-blue) 8%, var(--tp-paper));
    --tp-warn-soft: color-mix(in srgb, var(--tp-amber) 9%, var(--tp-paper));
    --bs-body-color: var(--tp-ink); --bs-body-bg: var(--tp-bg); --bs-border-color: var(--tp-border);
    --bs-body-font-family: Sarabun, Tahoma, sans-serif;
    --bs-secondary-color: var(--tp-muted);
}
html.tp-background, body { background: var(--tp-bg); color: var(--tp-ink); }
body, .font-sans { font-family: Sarabun, Tahoma, sans-serif; font-size: 1.125rem; line-height: 1.6; }
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.45; text-wrap: balance; }
h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3, h4 { font-size: 1.25rem; }
a { color: var(--tp-blue); text-underline-offset: .2em; }
small, .small, .form-text { font-size: 1rem !important; line-height: 1.6; }
code { font-family: inherit; color: var(--tp-ink); font-size: 1rem; overflow-wrap: anywhere; }
.text-muted, .text-secondary { color: var(--tp-muted) !important; }
.text-primary, .text-success, .text-info { color: var(--tp-blue) !important; }
.text-danger, .text-warning { color: var(--tp-amber) !important; }
:focus-visible { outline: 3px solid var(--tp-blue); outline-offset: 4px; }
[hidden] { display: none !important; }
.tp-skip { position: fixed; left: 1rem; top: -6rem; background: var(--tp-blue); color: var(--tp-paper); padding: .75rem; z-index: 2000; }
.tp-skip:focus { top: 1rem; }
.tp-shell { display: flex; min-height: 100vh; }
.tp-sidebar { width: 15.75rem !important; flex-shrink: 0; background: var(--tp-paper) !important; color: var(--tp-ink); border-right: 1px solid var(--tp-border); }
.tp-brand { display: flex; align-items: center; gap: .75rem; padding: 1.75rem 1.5rem; text-decoration: none; color: var(--tp-ink); }
.tp-brand-mark { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--tp-blue); color: var(--tp-paper); font-size: 1.6rem; font-weight: 700; }
.tp-brand strong { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.3; }
.tp-brand strong span { color: var(--tp-blue); }
.tp-brand small { font-size: .875rem !important; color: var(--tp-muted); display: block; margin-top: .3rem; }
.tp-nav { flex: 1; padding: 1rem .875rem; overflow-y: auto; }
.tp-nav-heading { margin: 1.75rem .75rem .75rem; color: var(--tp-muted); font-size: .875rem; }
.tp-nav-link { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .75rem .875rem; margin-bottom: .375rem; border: 0; border-radius: .625rem; width: 100%; background: transparent; color: var(--tp-muted); font-size: 1rem; text-decoration: none; text-align: left; }
.tp-nav-link:hover { background: var(--tp-bg); color: var(--tp-ink); }
.tp-nav-link[aria-current=page] { background: var(--tp-soft); color: var(--tp-blue); font-weight: 600; }
.tp-nav-link i { font-size: 1.2rem; }
.tp-sidebar-foot { padding: 1rem .875rem; border-top: 1px solid var(--tp-border); }
.tp-workspace { flex: 1; min-width: 0; }
.tp-topbar { min-height: 5.5rem; background: var(--tp-paper); border-bottom: 1px solid var(--tp-border); padding: 1rem 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tp-breadcrumb { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; }
.tp-breadcrumb > span:first-child { color: var(--tp-muted); }
.tp-topbar-tools { display: flex; align-items: center; gap: 1.5rem; }
.tp-font-control { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--tp-muted); }
.tp-font-control > div { display: flex; padding: .125rem; background: var(--tp-bg); border: 1px solid var(--tp-border); border-radius: .625rem; }
.tp-font-control button { min-width: 2.75rem; min-height: 2.75rem; border: none; border-radius: .375rem; background: transparent; color: var(--tp-muted); }
.tp-font-control button:nth-child(2) { font-size: 1.125rem; } .tp-font-control button:nth-child(3) { font-size: 1.25rem; }
.tp-font-control button[aria-pressed=true] { background: var(--tp-soft); color: var(--tp-blue); }
.tp-profile { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; padding-left: 1.25rem; border-left: 1px solid var(--tp-border); }
.tp-profile i { font-size: 2rem; color: var(--tp-blue); } .tp-profile small { display: block; color: var(--tp-muted); font-size: .875rem !important; }
.tp-main { padding: 2rem 2.25rem; max-width: 100rem; margin: auto; }
.tp-heading { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tp-heading h1 { margin: 0; } .tp-heading p { margin: .4rem 0 0; color: var(--tp-muted); font-size: 1rem; }
.tp-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 2.25rem; color: var(--tp-muted); font-size: .875rem; }
.card { border: 1px solid var(--tp-border); border-radius: .875rem; box-shadow: none; background: var(--tp-paper); color: var(--tp-ink); overflow: hidden; }
.card-header { background: var(--tp-paper) !important; color: var(--tp-ink) !important; border-bottom: 1px solid var(--tp-border); padding: 1.25rem 1.5rem; font-size: 1.1875rem; font-weight: 600; }
.card-body { padding: 1.5rem; }
.card .card { border: 0; border-radius: 0; background: transparent; }
.card .card .card-body { text-align: left; padding: .5rem; }
.btn { min-height: 3rem; border-radius: .5rem; padding: .625rem 1rem; font-size: 1rem !important; line-height: 1.6; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; white-space: normal; }
.btn-primary, .btn-success { --bs-btn-bg: var(--tp-blue); --bs-btn-border-color: var(--tp-blue); --bs-btn-color: var(--tp-paper); --bs-btn-hover-bg: color-mix(in srgb, var(--tp-blue) 90%, var(--tp-ink)); --bs-btn-hover-border-color: var(--tp-blue); --bs-btn-active-bg: var(--tp-blue); --bs-btn-active-border-color: var(--tp-blue); }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--tp-blue); --bs-btn-border-color: var(--tp-input); --bs-btn-hover-bg: var(--tp-soft); --bs-btn-hover-color: var(--tp-blue); --bs-btn-hover-border-color: var(--tp-blue); }
.btn-outline-secondary { --bs-btn-color: var(--tp-muted); --bs-btn-border-color: var(--tp-input); --bs-btn-hover-bg: var(--tp-bg); --bs-btn-hover-color: var(--tp-ink); }
.btn-danger, .btn-warning, .btn-outline-danger, .btn-outline-warning { --bs-btn-bg: var(--tp-warn-soft); --bs-btn-color: var(--tp-amber); --bs-btn-border-color: var(--tp-input); --bs-btn-hover-bg: var(--tp-warn-soft); --bs-btn-hover-color: var(--tp-amber); --bs-btn-hover-border-color: var(--tp-amber); }
.btn-secondary { --bs-btn-bg: var(--tp-muted); --bs-btn-border-color: var(--tp-muted); --bs-btn-color: var(--tp-paper); }
.btn-close { min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; background-size: 1rem; }
.btn-group { flex-wrap: wrap; gap: .5rem; } .btn-group > .btn { border-radius: .5rem !important; }
.form-control, .form-select { min-height: 3rem; padding: .625rem .875rem; font-size: 1.125rem !important; background-color: var(--tp-paper); color: var(--tp-ink); border-color: var(--tp-input); border-radius: .5rem; }
.form-control::placeholder { color: var(--tp-muted); }
.form-label { font-size: 1.0625rem; font-weight: 600; }
textarea.form-control { min-height: 7rem; }
.form-control:focus, .form-select:focus { border-color: var(--tp-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-blue) 25%, transparent); }
.form-check-input { min-width: 1.25rem; min-height: 1.25rem; }
.alert { font-size: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--tp-border); border-radius: .625rem; }
.alert-info, .alert-success { background: var(--tp-soft); color: var(--tp-blue); }
.alert-warning, .alert-danger { background: var(--tp-warn-soft); color: var(--tp-amber); }
.alert-secondary { background: var(--tp-bg); color: var(--tp-muted); }
.alert-dismissible { padding-right: 4rem; }
.badge { font-size: .9375rem; font-weight: 400; line-height: 1.6; white-space: normal; padding: .2rem .625rem; border-radius: .5rem; }
.badge.bg-success, .badge.bg-primary, .badge.bg-info { background: var(--tp-soft) !important; color: var(--tp-blue) !important; }
.badge.bg-danger, .badge.bg-warning { background: var(--tp-warn-soft) !important; color: var(--tp-amber) !important; }
.badge.bg-secondary, .badge.bg-light { background: var(--tp-bg) !important; color: var(--tp-muted) !important; }
.table { --bs-table-bg: var(--tp-paper); --bs-table-color: var(--tp-ink); --bs-table-hover-bg: var(--tp-bg); --bs-table-striped-bg: var(--tp-paper); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 1rem 1.25rem; border-color: var(--tp-border); }
.table th { font-size: 1rem; font-weight: 600; white-space: nowrap; background: var(--tp-bg); color: var(--tp-muted); }
.table td { font-size: 1.125rem; vertical-align: middle; }
.table-dark, .table-light { --bs-table-bg: var(--tp-bg); --bs-table-color: var(--tp-muted); }
.table-responsive { background: var(--tp-paper); border: 1px solid var(--tp-border); border-radius: .75rem; }
.card .table-responsive { border: 0; border-radius: 0; }
.tp-table-sub { display: block; color: var(--tp-muted); font-size: 1rem; margin-top: .25rem; }
.tp-status { display: inline-flex; align-items: center; gap: .375rem; padding: .3rem .625rem; border-radius: 2rem; font-size: .9375rem; white-space: nowrap; }
.tp-status-no { background: var(--tp-bg); color: var(--tp-muted); }
.tp-status-pending { background: var(--tp-warn-soft); color: var(--tp-amber); }
.tp-status-yes { background: var(--tp-soft); color: var(--tp-blue); }
.tp-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.tp-actions .btn { flex-shrink: 0; }
.tp-search { background: var(--tp-paper); padding: 1.5rem; border: 1px solid var(--tp-border); border-radius: .875rem; margin-bottom: 1.5rem; }
.tp-search-row { display: flex; gap: .75rem; align-items: center; }
.tp-search-row .form-control { flex: 1; min-width: 0; }
.tp-search p { color: var(--tp-muted); font-size: 1rem; margin: .875rem 0 0; }
mark.highlight { background: var(--tp-warn-soft); color: var(--tp-ink); padding: .05rem .15rem; border-radius: .2rem; font-weight: 600; }
.extra-match { font-size: 1rem; overflow-wrap: anywhere; padding: .3rem 0; }
.tp-search-label-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tp-search-label-row .form-label { margin: 0; }
.tp-advanced-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border: 1px solid var(--tp-border); border-radius: .5rem; font-size: .9375rem; font-weight: 500; color: var(--tp-muted); background: var(--tp-paper); transition: all .15s; }
.tp-advanced-toggle:hover { background: var(--tp-bg); color: var(--tp-ink); border-color: var(--tp-input); }
.tp-advanced-toggle.active { background: var(--tp-soft); color: var(--tp-blue); border-color: var(--tp-blue); }
.tp-advanced-count { font-size: .75rem; padding: .1rem .4rem; background: var(--tp-blue); color: var(--tp-paper); border-radius: .25rem; margin-left: .25rem; }
.tp-advanced-search { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--tp-border); border-radius: .625rem; background: var(--tp-bg); }
.tp-advanced-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tp-border); }
.tp-advanced-title { display: flex; align-items: flex-start; gap: .625rem; }
.tp-advanced-title i { margin-top: .2rem; color: var(--tp-blue); font-size: 1.25rem; }
.tp-advanced-title h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.tp-advanced-title p { font-size: .875rem; color: var(--tp-muted); margin: .2rem 0 0; }
.tp-advanced-bulk { display: flex; gap: .5rem; flex-wrap: wrap; }
.tp-advanced-bulk button { padding: .4rem .75rem; font-size: .875rem; border: 1px solid var(--tp-border); border-radius: .375rem; background: var(--tp-paper); color: var(--tp-muted); transition: all .15s; }
.tp-advanced-bulk button:hover { background: var(--tp-soft); color: var(--tp-blue); border-color: var(--tp-blue); }
.tp-advanced-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.tp-advanced-group { border: 1px solid var(--tp-border); border-radius: .5rem; background: var(--tp-paper); overflow: hidden; }
.tp-advanced-group-header { display: flex; align-items: center; justify-content: space-between; padding: .625rem .75rem; background: var(--tp-bg); border-bottom: 1px solid var(--tp-border); }
.tp-advanced-group-toggle { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--tp-ink); background: none; border: none; padding: 0; flex: 1; min-width: 0; text-align: left; }
.tp-advanced-group-toggle i { transition: transform .15s; flex-shrink: 0; }
.tp-advanced-group-toggle[aria-expanded=false] i { transform: rotate(-90deg); }
.tp-advanced-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-advanced-group-count { font-size: .75rem; padding: .1rem .4rem; flex-shrink: 0; }
.tp-advanced-group-select { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--tp-input); border-radius: .3rem; background: var(--tp-paper); transition: all .15s; flex-shrink: 0; }
.tp-advanced-group-select:hover { border-color: var(--tp-blue); }
.tp-advanced-group-select.all { background: var(--tp-blue); border-color: var(--tp-blue); color: var(--tp-paper); }
.tp-advanced-group-select.partial { background: var(--tp-blue); border-color: var(--tp-blue); }
.tp-advanced-group-select .tp-dash { width: .625rem; height: 2px; background: var(--tp-paper); border-radius: 1px; }
.tp-advanced-group-select i { font-size: .875rem; }
.tp-advanced-columns { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .75rem; max-height: 20rem; overflow-y: auto; }
.tp-advanced-columns[hidden] { display: none; }
.tp-advanced-column { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: .375rem; cursor: pointer; font-size: .9375rem; transition: background .1s; }
.tp-advanced-column:hover { background: var(--tp-bg); }
.tp-advanced-column input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.tp-checkbox-mark { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 1.5px solid var(--tp-input); border-radius: .25rem; flex-shrink: 0; transition: all .15s; }
.tp-advanced-column input[type=checkbox]:checked + .tp-checkbox-mark { background: var(--tp-blue); border-color: var(--tp-blue); color: var(--tp-paper); }
.tp-advanced-column input[type=checkbox]:focus-visible + .tp-checkbox-mark { outline: 3px solid color-mix(in srgb, var(--tp-blue) 30%, transparent); outline-offset: 1px; }
.tp-checkbox-mark i { font-size: .75rem; }
.tp-column-label { flex: 1; min-width: 0; }
.tp-advanced-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tp-border); flex-wrap: wrap; }
.tp-advanced-summary { font-size: .9375rem; color: var(--tp-muted); }
.tp-advanced-summary strong { color: var(--tp-blue); font-weight: 600; }
.tp-result-badge { font-size: .75rem; margin-left: .5rem; }
.tp-extra-matches { display: flex; flex-direction: column; gap: .25rem; }
.tp-extra-match { font-size: .9375rem; line-height: 1.5; display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.tp-extra-badge { font-size: .8125rem; font-weight: 500; padding: .1rem .4rem; white-space: nowrap; }
.tp-detail-section { padding: 1.25rem 1.5rem; border-top: 1px solid var(--tp-border); }
.tp-detail-section summary { font-size: 1.25rem; font-weight: 600; padding: .25rem 0; cursor: pointer; }
.tp-detail-section .row { margin-top: 1rem; }
.field-item { padding: .5rem 0; overflow-wrap: anywhere; }
.field-item small { display: block; color: var(--tp-muted); margin-bottom: .375rem; }
.tp-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: 90vh; overflow-y: auto; padding: 1.75rem; border: 1px solid var(--tp-border); border-radius: .875rem; background: var(--tp-paper); color: var(--tp-ink); }
.tp-dialog::backdrop { background: color-mix(in srgb, var(--tp-ink) 35%, transparent); }
.tp-dialog h2 { margin-bottom: 1rem; }
.tp-dialog .tp-actions { margin-top: 1.5rem; justify-content: flex-end; }
.tp-dialog ol { display: flex; flex-direction: column; gap: 1rem; }
.tp-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem 1rem; }
.tp-login .login-card { width: 100%; max-width: 30rem; }
.tp-login .tp-brand { justify-content: center; }
.tp-login .tp-font-control { margin: 1.5rem 0; }
.tp-login h1 { font-size: 1.625rem; }
.tp-steps { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tp-steps li { color: var(--tp-muted); font-size: 1rem; padding: .5rem .75rem; }
.tp-steps [aria-current=step] { background: var(--tp-soft); color: var(--tp-blue); border-radius: .5rem; font-weight: 600; }
.pagination { flex-wrap: wrap; gap: .375rem; } .page-link { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; color: var(--tp-blue); }
.page-item.active .page-link { background: var(--tp-blue); border-color: var(--tp-blue); }
@media (min-width: 992px) { .tp-sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } }
@media (max-width: 1199px) { .tp-font-control > span, .tp-profile > span { display: none; } .tp-main { padding: 1.5rem; } }
@media (max-width: 991px) { .tp-breadcrumb { display: none; } .tp-sidebar { --bs-offcanvas-width: 18rem; width: 18rem !important; } .tp-topbar { padding: 1rem; } .tp-topbar-tools { gap: .75rem; } .tp-main { padding: 1.5rem 1rem; } .tp-main > .row > [class*=col-lg] { width: 100%; } }
@media (max-width: 650px) {
    .tp-search { padding: 1rem; } .tp-search-row { flex-wrap: wrap; } .tp-search-row .form-control { flex-basis: 100%; } .tp-search-row .btn { flex: 1; }
    .tp-advanced-search { padding: 1rem; } .tp-advanced-groups { grid-template-columns: 1fr; } .tp-advanced-header { flex-direction: column; } .tp-advanced-bulk { width: 100%; } .tp-advanced-bulk button { flex: 1; }
    .tp-heading { align-items: flex-start; } .tp-heading h1 { font-size: 1.625rem; }
    .tp-customer-table thead { display: none; } .tp-customer-table tbody { display: flex; flex-direction: column; }
    .tp-customer-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; padding: 1rem; border-top: 1px solid var(--tp-border); }
    .tp-customer-table td { padding: 0; border: 0; overflow-wrap: anywhere; }
    .tp-customer-table td:first-child, .tp-customer-table td:last-child { grid-column: 1 / -1; }
    .tp-customer-table td[data-label]::before { content: attr(data-label); display: block; font-size: 1rem; color: var(--tp-muted); }
    .tp-customer-table td:nth-child(4), .tp-customer-table td:nth-child(5) { grid-column: 1 / -1; }
    .tp-main .d-flex { flex-wrap: wrap; gap: .75rem; } .card-body { padding: 1.125rem; }
    .tp-footer { padding: 1rem; } .tp-profile { display: none; } .tp-detail-section { padding: 1.25rem; }
    .tp-dialog { padding: 1.25rem; } .tp-actions { align-items: stretch; } .tp-actions > .btn { flex-grow: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }