:root{--sidebar-width:270px;--sidebar-collapsed:82px;--brand:#2563eb;--navy:#0f172a;--muted:#64748b;--surface:#fff;--bg:#f3f6fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#1e293b;font-family:"Segoe UI",Tahoma,sans-serif}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);z-index:1040;background:linear-gradient(180deg,#101827,#172033);color:#cbd5e1;transition:.25s;overflow-y:auto}.sidebar-brand{height:76px;padding:16px 22px;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--brand);font-size:1.3rem}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy small{color:#94a3b8;font-size:.72rem;margin-top:3px}.sidebar-nav{padding:18px 12px}.nav-group{margin:4px 0}.sidebar .nav-link,.nav-group-toggle{width:100%;border:0;background:transparent;color:#aebbcf;text-decoration:none;display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:10px;font-size:.94rem;transition:.18s}.sidebar .nav-link:hover,.nav-group-toggle:hover{background:rgba(255,255,255,.07);color:#fff}.sidebar .nav-link.active{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.25)}.sidebar .collapse .nav-link{padding-left:42px}.nav-group-toggle{justify-content:space-between}.nav-group-toggle>span{display:flex;gap:13px}.nav-chevron{font-size:.75rem;transition:.2s}.nav-group-toggle:not(.collapsed) .nav-chevron{transform:rotate(180deg)}.main-wrapper{min-height:100vh;margin-left:var(--sidebar-width);display:flex;flex-direction:column;transition:.25s}.topbar{height:76px;position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid #e5eaf1;display:flex;align-items:center;padding:0 24px}.icon-button{font-size:1.4rem;color:#475569}.user-menu{display:flex;align-items:center;gap:10px;border:0}.user-menu small,.user-menu strong{display:block}.user-menu small{color:var(--muted);font-size:.72rem}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#dbeafe;color:#1d4ed8;font-weight:700}.main-content{flex:1}.page-title{font-size:1.55rem;font-weight:700}.breadcrumb{font-size:.84rem}.breadcrumb a{text-decoration:none}.app-footer{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;border-top:1px solid #e2e8f0;background:#fff}.card{border:0;border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.055)}.stat-card .card-body{display:flex;align-items:center;gap:16px}.stat-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem}.stat-value{font-size:1.65rem;font-weight:750;line-height:1.1}.stat-label{font-size:.86rem;color:var(--muted)}.table>:not(caption)>*>*{padding:.9rem .8rem}.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:#f8fafc;border-bottom:0}.badge{font-weight:600;padding:.45em .7em}.form-control,.form-select{border-radius:10px;padding:.65rem .8rem;border-color:#dbe2ea}.form-control:focus,.form-select:focus{border-color:#93b4f7;box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}.btn{border-radius:9px}.login-page{min-height:100vh;background:radial-gradient(circle at top left,#dbeafe 0,transparent 35%),linear-gradient(145deg,#f8fafc,#edf3fb);display:grid;place-items:center;padding:20px}.login-card{width:min(100%,440px)}.login-logo{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin:auto;background:var(--brand);color:#fff;font-size:1.8rem}.sidebar-backdrop{display:none}.permission-table th,.permission-table td{text-align:center;vertical-align:middle}.permission-table th:first-child,.permission-table td:first-child{text-align:left;min-width:220px}body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}body.sidebar-collapsed .main-wrapper{margin-left:var(--sidebar-collapsed)}body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-chevron{display:none}body.sidebar-collapsed .sidebar .nav-link,body.sidebar-collapsed .nav-group-toggle{justify-content:center}body.sidebar-collapsed .sidebar .collapse .nav-link{padding-left:14px}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.main-wrapper,body.sidebar-collapsed .main-wrapper{margin-left:0}body.sidebar-open .sidebar{transform:translateX(0);width:var(--sidebar-width)}body.sidebar-open .brand-copy,body.sidebar-open .nav-label,body.sidebar-open .nav-chevron{display:flex}body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1035}.topbar{padding:0 14px}.app-footer{flex-direction:column;gap:4px}}

/* Application theme: #339AF0 */
:root { font-size: 100%; }
:root {
    --bs-body-font-family: "Noto Sans Thai Looped", "Leelawadee UI", Tahoma, sans-serif;
    --brand: #339AF0;
    --brand-dark: #1971C2;
    --brand-darker: #1971C2;
    --brand-soft: #E3F2FD;
    --bg: #F1F7FC;
    --navy: #102A43;
    --muted: #627D98;
}

body,
button,
input,
select,
textarea,
.tooltip,
.popover { font-family: "Noto Sans Thai Looped", "Leelawadee UI", Tahoma, sans-serif; }
body { color: #243B53; }
h1, h2, h3, h4, h5, h6, .page-title { color: #102A43; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.sidebar { background: linear-gradient(180deg, #003B66 0%, #002B4A 100%); }
.sidebar-brand { border-bottom-color: rgba(255,255,255,.12); }
.brand-copy small { color: #A8D6F3; }
.sidebar .nav-link, .nav-group-toggle { color: #C6E3F5; }
.sidebar .nav-link:hover, .nav-group-toggle:hover { background: rgba(51,154,240,.18); }
.sidebar .nav-link.active { background: var(--brand); box-shadow: 0 8px 20px rgba(51,154,240,.26); }
.topbar { border-bottom-color: #D9E8F2; }
.avatar { background: var(--brand-soft); color: var(--brand-dark); }
.breadcrumb-item a { color: var(--brand); }
.card { background: #FFFFFF; box-shadow: 0 4px 18px rgba(0,69,117,.075); }
.table { --bs-table-border-color: #DCE6ED; }
.table thead th { color: #365B76; background: #EAF5FD; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F5FAFE; }
.form-control:focus, .form-select:focus { border-color: #339AF0; box-shadow: 0 0 0 3px rgba(51,154,240,.12); }
html:not([data-bs-theme="dark"]) .form-control[readonly],
html:not([data-bs-theme="dark"]) .form-control:disabled { background-color: #E7F5FF; opacity: 1; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: #339AF0; --bs-btn-border-color: #339AF0; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #228BE6; --bs-btn-hover-border-color: #228BE6; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #1C7ED6; --bs-btn-active-border-color: #1C7ED6; --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #339AF0; --bs-btn-disabled-border-color: #339AF0; }
.btn-outline-primary { --bs-btn-color: #228BE6; --bs-btn-border-color: #339AF0; --bs-btn-bg: #FFFFFF; --bs-btn-hover-color: #228BE6; --bs-btn-hover-bg: #E7F5FF; --bs-btn-hover-border-color: #339AF0; --bs-btn-active-color: #1971C2; --bs-btn-active-bg: #E3F2FD; --bs-btn-active-border-color: #228BE6; }
.btn-outline-danger { --bs-btn-color: #EF4444; --bs-btn-border-color: #EF4444; --bs-btn-bg: #FFFFFF; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #EF4444; --bs-btn-hover-border-color: #EF4444; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #DC2626; --bs-btn-active-border-color: #DC2626; }
.action-icon-button,
.btn:has(.bi-pencil),
.btn:has(.bi-pencil-square),
.btn:has(.bi-trash),
.btn:has(.bi-trash3),
.btn:has(.bi-printer) { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; line-height: 1; font-size: 0; vertical-align: middle; }
.action-icon-button > .bi,
.btn:has(.bi-pencil) .bi,
.btn:has(.bi-pencil-square) .bi,
.btn:has(.bi-trash) .bi,
.btn:has(.bi-trash3) .bi,
.btn:has(.bi-printer) .bi { margin: 0 !important; font-size: 1rem; }
form:has(input[name="id"]:not([value=""]):not([value="0"])) button.btn-primary:not([type="button"]),
form:has(input[name="id"]:not([value=""]):not([value="0"])) input.btn-primary[type="submit"],
form[action*="update-"] button.btn-primary:not([type="button"]),
form[action*="edit-"] button.btn-primary:not([type="button"]) { min-width: 126px; }
.status-active { background: #DCFCE7 !important; color: #15803D !important; }
.status-resign { background: #F1F5F9 !important; color: #64748B !important; }
html:not([data-bs-theme="dark"]) .badge.text-bg-success { background: #DCFCE7 !important; color: #15803D !important; }
html:not([data-bs-theme="dark"]) .badge.text-bg-secondary { background: #F1F5F9 !important; color: #64748B !important; }
html:not([data-bs-theme="dark"]) input.form-control[placeholder*="ค้นหา"] { border-color: #339AF0; box-shadow: 0 0 0 3px rgba(51,154,240,.12); }
.text-primary { color: var(--brand) !important; }
.bg-primary, .text-bg-primary { background-color: var(--brand) !important; }
.login-page { background: radial-gradient(circle at top left, #D6EDFC 0, transparent 38%), linear-gradient(145deg, #F8FCFF, #EAF4FB); }

.theme-toggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #C9DCE8;
    border-radius: 50%;
    background: #F3FAFE;
    color: var(--brand-dark);
    font-size: 1.12rem;
    transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.theme-toggle:hover { background: var(--brand-soft); border-color: #8CC5E8; color: var(--brand-darker); transform: translateY(-1px); }

html[data-bs-theme="dark"] {
    --bg: #0B1720;
    --surface: #122430;
    --muted: #93A9B8;
}
html[data-bs-theme="dark"] body { color: #DCE9F2; }
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .page-title { color: #E7F1F7; }
html[data-bs-theme="dark"] .topbar { background: rgba(14,31,42,.95); border-bottom-color: #263F4F; }
html[data-bs-theme="dark"] .icon-button { color: #B7CBD8; }
html[data-bs-theme="dark"] .theme-toggle { background: #123247; border-color: #28536D; color: #79C8F5; }
html[data-bs-theme="dark"] .theme-toggle:hover { background: #19445E; border-color: #3D7697; color: #B6E4FF; }
html[data-bs-theme="dark"] .avatar { background: #123B57; color: #83CFFF; }
html[data-bs-theme="dark"] .card { background: #122430; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
html[data-bs-theme="dark"] .card-header.bg-white,
html[data-bs-theme="dark"] .card-footer.bg-white { background-color: #122430 !important; }
html[data-bs-theme="dark"] .table { --bs-table-bg: #122430; --bs-table-color: #DCE9F2; --bs-table-border-color: #29404E; }
html[data-bs-theme="dark"] .table thead th { color: #A9BFCC; background: #183140; }
html[data-bs-theme="dark"] .table { --bs-table-border-color: #365160; }
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: #183545; }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select { background-color: #0E1F2A; border-color: #365160; color: #E7F1F7; }

.searchable-select { position: relative; width: 100%; }
.searchable-select-native { position: absolute!important; width: 1px!important; height: 1px!important; opacity: 0!important; pointer-events: none!important; }
.searchable-select-input { padding-right: 2.7rem; }
.searchable-select-toggle { position: absolute; z-index: 2; top: 1px; right: 1px; bottom: 1px; width: 2.6rem; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: #64748b; }
.searchable-select-toggle:hover { color: #228BE6; background: rgba(51,154,240,.08); }
.searchable-select-menu { display: none; position: absolute; z-index: 1090; top: calc(100% + 5px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 5px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.16); }
.searchable-select.open .searchable-select-menu { display: block; }
.searchable-select.open .searchable-select-toggle i { display: inline-block; transform: rotate(180deg); }
.searchable-select-option { display: block; width: 100%; border: 0; border-radius: 7px; padding: .55rem .7rem; background: transparent; color: #1e293b; text-align: left; }
.searchable-select-option:hover,.searchable-select-option:focus,.searchable-select-option[aria-selected="true"] { outline: 0; background: #E7F5FF; color: #1971C2; }
.searchable-select-empty { padding: .7rem; color: #64748b; text-align: center; }
html[data-bs-theme="dark"] .searchable-select-menu { border-color: #365160; background: #0E1F2A; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
html[data-bs-theme="dark"] .searchable-select-option { color: #E7F1F7; }
html[data-bs-theme="dark"] .searchable-select-option:hover,html[data-bs-theme="dark"] .searchable-select-option:focus,html[data-bs-theme="dark"] .searchable-select-option[aria-selected="true"] { background: rgba(101,181,233,.18); color: #9bd6fa; }
html[data-bs-theme="dark"] .form-control::placeholder { color: #78909F; }
html[data-bs-theme="dark"] .app-footer { background: #0E1F2A; border-top-color: #263F4F; }
html[data-bs-theme="dark"] .dropdown-menu { background: #122430; border-color: #29404E; }
html[data-bs-theme="dark"] .dropdown-item { color: #DCE9F2; }
html[data-bs-theme="dark"] .dropdown-item:hover { background: #193747; }
html[data-bs-theme="dark"] .login-page { background: radial-gradient(circle at top left, #123B57 0, transparent 38%), linear-gradient(145deg, #08131B, #102633); }

/* Light, searchable navigation */
.sidebar { background: #FFFFFF; color: #263B4A; border-right: 1px solid #DCE5EB; }
.sidebar-brand { color: #16384F; border-bottom-color: #DCE5EB; }
.sidebar-brand:hover { color: var(--brand); }
.brand-mark { background: var(--brand-soft); color: var(--brand); }
.brand-copy small { color: #728896; }
.sidebar-search { padding: 20px 16px 8px; }
.sidebar-search label { display: block; margin: 0 0 10px 2px; color: #586D7A; font-size: .82rem; font-weight: 600; }
.sidebar-search-box { height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid #CBD7DF; border-radius: 11px; background: #FFF; color: #5B7180; transition: border-color .18s, box-shadow .18s; }
.sidebar-search-box:focus-within { border-color: #339AF0; box-shadow: 0 0 0 3px rgba(51,154,240,.12); }
.sidebar-search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #213746; font-size: .92rem; }
.sidebar-search-box input::placeholder { color: #7A8C98; }
.sidebar-nav { padding: 10px 12px 22px; }
.nav-group { margin: 18px 0 4px; }
.sidebar .nav-link, .nav-group-toggle { color: #2E4351; }
.sidebar-nav > .nav-link, .nav-group-toggle { font-size: .94rem; font-weight: 700; }
.sidebar .nav-link { gap: 11px; margin: 3px 0; padding: 7px 10px; }
.sidebar .nav-link > i { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: #EDF2F5; color: #526B7B; font-size: 1rem; }
body:not(.sidebar-collapsed) .sidebar .nav-link > i { display: none; }
body:not(.sidebar-collapsed) .sidebar .nav-link { padding-top: 10px; padding-bottom: 10px; }
.sidebar .nav-link:hover, .nav-group-toggle:hover { background: #EDF4F8; color: #17394F; }
.sidebar .nav-link.active { background: #E3F2FD; color: #1971C2; box-shadow: none; font-weight: 600; }
.sidebar .nav-link.active > i { background: var(--brand); color: #FFF; }
.nav-group-toggle { padding: 8px 10px; color: #5B6E7A; }
.nav-group-toggle > span { align-items: center; }
.nav-group-toggle .group-icon { display: none; }
.sidebar .collapse .nav-link { padding-left: 34px; font-size: .9rem; font-weight: 400; }
body.sidebar-collapsed .sidebar .collapse .nav-link { padding-left: 14px; }
.sidebar .nav-group.nav-level-1 { margin: 3px 0; }
.sidebar .nav-group.nav-level-1 > .nav-group-toggle { padding-left: 28px; font-size: .9rem; font-weight: 600; }
.sidebar .nav-link.nav-level-2 { padding-left: 48px; }
body.sidebar-collapsed .sidebar .nav-group.nav-level-1 > .nav-group-toggle,
body.sidebar-collapsed .sidebar .nav-link.nav-level-2 { padding-left: 14px; }
.nav-chevron { color: #506978; }
.sidebar .nav-link[hidden], .nav-group[hidden] { display: none !important; }
body.sidebar-collapsed .sidebar-search { display: none; }
body.sidebar-collapsed .nav-group-toggle .group-icon { display: inline-block; }

html[data-bs-theme="dark"] .sidebar { background: #0E1F2A; color: #D7E5ED; border-right-color: #263F4F; }
html[data-bs-theme="dark"] .sidebar-brand { color: #E6F2F8; border-bottom-color: #263F4F; }
html[data-bs-theme="dark"] .brand-mark { background: #123B57; color: #83CFFF; }
html[data-bs-theme="dark"] .brand-copy small { color: #8EA6B5; }
html[data-bs-theme="dark"] .sidebar-search label { color: #A5BAC7; }
html[data-bs-theme="dark"] .sidebar-search-box { background: #122A38; border-color: #365160; color: #A8BFCC; }
html[data-bs-theme="dark"] .sidebar-search-box input { color: #E5F0F6; }
html[data-bs-theme="dark"] .sidebar-search-box input::placeholder { color: #78909F; }
html[data-bs-theme="dark"] .sidebar .nav-link,
html[data-bs-theme="dark"] .nav-group-toggle { color: #C5D7E1; }
html[data-bs-theme="dark"] .sidebar .nav-link > i { background: #172F3D; color: #AAC3D1; }
html[data-bs-theme="dark"] .sidebar .nav-link:hover,
html[data-bs-theme="dark"] .nav-group-toggle:hover { background: #183545; color: #FFF; }
html[data-bs-theme="dark"] .sidebar .nav-link.active { background: #123E5A; color: #8DD2FA; }
html[data-bs-theme="dark"] .sidebar .nav-link.active > i { background: var(--brand); color: #FFF; }

@media(max-width:991.98px) {
    body.sidebar-open .sidebar-search { display: block; }
    body.sidebar-open .nav-group-toggle .group-icon { display: none; }
    body.sidebar-open .sidebar .nav-link > i { display: none; }
}

.creditor-detail-list dt { color: var(--muted); font-weight: 500; }
.creditor-detail-list dd { font-weight: 500; padding-bottom: .7rem; overflow-wrap: anywhere; }
.creditor-detail-list dt:not(:first-of-type),
.creditor-detail-list dd:not(:first-of-type) { padding-top: .7rem; border-top: 1px solid #E7EEF3; }
html[data-bs-theme="dark"] .creditor-detail-list dt:not(:first-of-type),
html[data-bs-theme="dark"] .creditor-detail-list dd:not(:first-of-type) { border-top-color: #29404E; }
.account-level-name { display: inline-block; padding-left: calc(var(--account-level) * 1.15rem); }
.document-reservation-table { min-width: 1450px; }
.table:not(.statement-table) { width: 100%; table-layout: fixed; }
.table:not(.statement-table) th, .table:not(.statement-table) td { white-space: normal; overflow-wrap: anywhere; }
.table:not(.statement-table) tbody { font-size: 80%; }
.table:not(.statement-table) thead th { font-size: .749rem; }
.statement-table { width: 30cm; min-width: 30cm; max-width: 30cm; table-layout: fixed; }
.statement-table tbody { font-size: 80%; }
.statement-table thead th { font-size: .749rem; }
.statement-table th:nth-child(1), .statement-table td:nth-child(1) { width: 1.5cm; }
.statement-table th:nth-child(2), .statement-table td:nth-child(2) { width: 3.5cm; }
.statement-table th:nth-child(3), .statement-table td:nth-child(3) { width: 2.5cm; }
.statement-table th:nth-child(4), .statement-table td:nth-child(4) { width: 2.5cm; }
.statement-table th:nth-child(5), .statement-table td:nth-child(5) { width: 2cm; }
.statement-table .statement-transfer-column { width: 2cm; min-width: 2cm; max-width: 2cm; white-space: normal; overflow-wrap: anywhere; }
.statement-table th:nth-child(7), .statement-table td:nth-child(7) { width: 2.5cm; }
.statement-table th:nth-child(8), .statement-table td:nth-child(8) { width: 2.5cm; }
.statement-table th:nth-child(9), .statement-table td:nth-child(9) { width: 3cm; }
.statement-table .statement-customer-detail-column { width: 3cm; min-width: 3cm; max-width: 3cm; white-space: normal; overflow-wrap: anywhere; }
.statement-table .statement-additional-column { width: 5cm; min-width: 5cm; max-width: 5cm; white-space: normal; overflow-wrap: anywhere; }
.statement-table .statement-deposit-column { background-color: #FFFDE5; }
html[data-bs-theme="dark"] .statement-table .statement-deposit-column { background-color: #34320E; }
.statement-top-scroll { overflow-x: auto; overflow-y: hidden; height: 18px; border-bottom: 1px solid var(--bs-border-color); }
.statement-top-scroll > div { height: 1px; }
.statement-table-scroll { max-height: calc(100vh - 245px); min-height: 320px; overflow: auto; }
.statement-table-scroll .statement-table thead th { position: sticky; top: 0; z-index: 5; box-shadow: inset 0 -1px 0 var(--bs-border-color); }
.statement-table-scroll .statement-table thead .statement-deposit-column { z-index: 6; }
@media (max-width: 767.98px) { .statement-table-scroll { max-height: calc(100vh - 290px); } }
.statement-preview-table { min-width: 1200px; }

/* Modern system notifications */
.modern-toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1090; display: grid; gap: .75rem; width: min(410px, calc(100vw - 2rem)); }
.modern-toast { width: 100%; overflow: hidden; border: 1px solid #DCE6ED; border-radius: 16px; background: #FFF; color: #243B53; box-shadow: 0 18px 48px rgba(16,42,67,.16); }
.modern-toast-body { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1rem .85rem; }
.modern-toast-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem; }
.modern-toast-copy { flex: 1; min-width: 0; line-height: 1.45; }
.modern-toast-copy strong { display: block; margin-bottom: .15rem; color: #102A43; }
.modern-toast-copy div { color: #627D98; font-size: .92rem; overflow-wrap: anywhere; }
.modern-toast .btn-close { flex: 0 0 auto; margin-top: .15rem; font-size: .75rem; }
.modern-toast-success .modern-toast-icon { color: #15803D; background: #DCFCE7; }
.modern-toast-danger .modern-toast-icon { color: #DC2626; background: #FEE2E2; }
.modern-toast-warning .modern-toast-icon { color: #B45309; background: #FEF3C7; }
.modern-toast-info .modern-toast-icon { color: #1971C2; background: #E7F5FF; }
.modern-toast-progress { height: 3px; background: #339AF0; transform-origin: left; animation: modern-toast-progress 5.2s linear forwards; }
.modern-toast-danger .modern-toast-progress { background: #EF4444; }
.modern-toast-warning .modern-toast-progress { background: #F59F00; }
@keyframes modern-toast-progress { to { transform: scaleX(0); } }
.modern-dialog-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; background: rgba(16,42,67,.36); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.modern-dialog-backdrop.show { opacity: 1; }
.modern-dialog { width: min(450px, 100%); padding: 1.6rem; border-radius: 20px; background: #FFF; color: #243B53; box-shadow: 0 28px 80px rgba(16,42,67,.25); transform: translateY(12px) scale(.98); transition: transform .18s ease; }
.modern-dialog-backdrop.show .modern-dialog { transform: none; }
.modern-dialog-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 15px; background: #E7F5FF; color: #1971C2; font-size: 1.35rem; }
.modern-dialog-icon-danger { color: #DC2626; background: #FEE2E2; }
.modern-dialog-icon-warning { color: #B45309; background: #FEF3C7; }
.modern-dialog h2 { margin: 0 0 .5rem; color: #102A43; font-size: 1.2rem; font-weight: 700; }
.modern-dialog p { margin: 0 0 1.2rem; color: #627D98; line-height: 1.6; }
.modern-dialog-input { min-height: 92px; resize: vertical; }
.modern-dialog-error { min-height: 1.35rem; padding-top: .35rem; color: #DC2626; font-size: .85rem; }
.modern-dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.2rem; }
html[data-bs-theme="dark"] .modern-toast, html[data-bs-theme="dark"] .modern-dialog { background: #162B38; color: #DCE8EF; border-color: #29404E; }
html[data-bs-theme="dark"] .modern-toast-copy strong, html[data-bs-theme="dark"] .modern-dialog h2 { color: #F2F7FA; }
html[data-bs-theme="dark"] .modern-toast-copy div, html[data-bs-theme="dark"] .modern-dialog p { color: #AAC0CC; }
@media (max-width: 575.98px) { .modern-toast-container { top: .75rem; right: .75rem; width: calc(100vw - 1.5rem); } .modern-dialog-actions { flex-direction: column-reverse; } .modern-dialog-actions .btn { width: 100%; } }
.employee-date-control { position: relative; }
.employee-date-control > .form-control { padding-right: 3rem; }
.employee-date-picker { position: absolute; inset: 0 0 0 auto; z-index: 2; width: 3rem; height: 100%; opacity: 0; cursor: pointer; }
.employee-date-icon { position: absolute; right: 1rem; top: 50%; z-index: 1; transform: translateY(-50%); color: #365B76; pointer-events: none; }
.system-date-control { position: relative; }
.system-date-display { padding-right: 3rem; }
.system-date-native { position: absolute; inset: 0 0 0 auto; z-index: 3; width: 3rem; height: 100%; opacity: 0; cursor: pointer; }
.system-date-native:disabled, .system-date-native[readonly] { pointer-events: none; }
.system-date-icon { position: absolute; right: 1rem; top: 50%; z-index: 2; transform: translateY(-50%); color: #365B76; pointer-events: none; }
.system-create-modal .modal-dialog { width: min(1200px, calc(100vw - 2rem)); max-width: none; height: calc(100vh - 2rem); margin: 1rem auto; }
.system-create-modal .modal-content { height: 100%; overflow: hidden; }
.system-create-modal .modal-body { min-height: 0; }
.system-create-frame { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; background: #F1F7FC; }
.audit-change-value { min-width: 240px; line-height: 1.7; vertical-align: top; }
.system-table-sort { padding: .7rem 1rem; border-bottom: 1px solid #DCE6ED; background: #F8FBFD; }
.system-table-sort.system-table-sort-inline { padding: 0; border: 0; background: transparent; justify-content: flex-start !important; }
.system-table-sort .searchable-select { width: min(220px, 42vw); }
.system-table-sort .searchable-select:nth-child(2) { width: min(125px, 30vw); }
html[data-bs-theme="dark"] .system-table-sort { background: #102633; border-bottom-color: #29404E; }
body.embedded-create-form .sidebar,
body.embedded-create-form .topbar,
body.embedded-create-form .app-footer,
body.embedded-create-form .sidebar-backdrop,
body.embedded-create-form .page-title,
body.embedded-create-form .breadcrumb,
body.embedded-create-form .system-back-button,
body.embedded-create-form .system-export-actions { display: none !important; }
body.embedded-create-form .main-wrapper { margin-left: 0 !important; min-height: auto; }
body.embedded-create-form .main-content > .container-fluid { padding-top: 1rem !important; }
body.embedded-create-form .main-content > .container-fluid > .d-flex:first-child { display: none !important; }
@media (max-width: 575.98px) { .system-create-modal .modal-dialog { width: 100%; height: 100%; margin: 0; } .system-create-modal .modal-content { border-radius: 0; } }
.contents { display: contents; }
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/* Unified clean interface — based on the Credit Sales screen */
.main-content > .container-fluid { padding: 1.5rem 1.25rem 2rem !important; }
.main-content .page-title { font-size: 1.55rem; font-weight: 750; letter-spacing: -.015em; }
.main-content .breadcrumb { margin-bottom: 0; color: #7A8794; }
.main-content .card {
    border: 1px solid #E6EBF1;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.035);
    overflow: hidden;
}
.main-content .card-header,
.main-content .card-footer {
    min-height: 58px;
    padding: .9rem 1.25rem;
    border-color: #EDF0F4;
    background: #FFF;
}
.main-content .card-body { padding: 1.25rem; }
.main-content .card-body.p-0 { padding: 0 !important; }
.main-content .card > .card-body:first-child:has(> form),
.main-content .card > .card-body:first-child:has(> .d-flex > form) {
    border-bottom: 1px solid #EDF0F4;
    background: #FFF;
}
.main-content .table-responsive { scrollbar-color: #C9D5DF transparent; scrollbar-width: thin; }
.main-content .table { margin-bottom: 0; }
.main-content .table thead th {
    padding: 15px 14px;
    border-bottom: 1px solid #E8ECF1;
    background: #FAFBFC;
    color: #5A6270;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    vertical-align: middle;
}
.main-content .table tbody td {
    padding: 17px 14px;
    border-color: #EDF0F4;
    vertical-align: middle;
}
.main-content .table-hover > tbody > tr:hover > * { --bs-table-bg-state: #FAFCFF; }
.main-content .form-label { margin-bottom: .45rem; color: #34495E; font-size: .9rem; font-weight: 500; }
.main-content .form-control,
.main-content .form-select,
.main-content .input-group-text {
    min-height: 46px;
    border-color: #DBE2EA;
    border-radius: 9px;
    background-color: #FFF;
}
.main-content textarea.form-control { min-height: auto; }
.main-content .input-group > .input-group-text { border-radius: 9px 0 0 9px; }
.main-content .input-group > .form-control:not(:first-child) { border-radius: 0 9px 9px 0; }
.main-content .form-control:focus,
.main-content .form-select:focus {
    border-color: #91C8F4;
    box-shadow: 0 0 0 3px rgba(51,154,240,.10);
}
.main-content input.form-control[placeholder*="ค้นหา"] { border-color: #DBE2EA; box-shadow: none; }
.main-content input.form-control[placeholder*="ค้นหา"]:focus { border-color: #91C8F4; box-shadow: 0 0 0 3px rgba(51,154,240,.10); }
.main-content .btn { min-height: 40px; border-radius: 9px; font-weight: 500; }
.main-content .btn-sm { min-height: 34px; }
.main-content .btn-primary { box-shadow: 0 2px 5px rgba(51,154,240,.16); }
.main-content .modal-content { border: 0; border-radius: 16px; box-shadow: 0 22px 60px rgba(15,23,42,.18); overflow: hidden; }
.main-content .modal-header { min-height: 64px; padding: 1rem 1.25rem; border-color: #EDF0F4; }
.main-content .modal-body { padding: 1.25rem; }
.main-content .modal-footer { padding: .9rem 1.25rem; border-color: #EDF0F4; background: #FFF; }
.main-content .nav-tabs { border-bottom-color: #DCE4EB; }
.main-content .nav-tabs .nav-link { min-height: 44px; padding: .7rem 1rem; border-radius: 9px 9px 0 0; white-space: nowrap; }
.main-content .nav-tabs .nav-link.active { color: #102A43; font-weight: 600; }
.main-content .badge { border-radius: 999px; padding: .42em .7em; }
.main-content .alert { border: 0; border-radius: 12px; }
.main-content .pagination .page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-color: #DDE5EC; }
@media (max-width: 767.98px) {
    .main-content > .container-fluid { padding: 1rem .75rem 1.5rem !important; }
    .main-content .card-body { padding: 1rem; }
    .main-content .table thead th { padding: 12px 10px; }
    .main-content .table tbody td { padding: 13px 10px; }
}
html[data-bs-theme="dark"] .main-content .card,
html[data-bs-theme="dark"] .main-content .card-header,
html[data-bs-theme="dark"] .main-content .card-footer,
html[data-bs-theme="dark"] .main-content .modal-footer { background: #122430; border-color: #29404E; }
html[data-bs-theme="dark"] .main-content .table thead th { background: #183140; color: #A9BFCC; border-color: #29404E; }
html[data-bs-theme="dark"] .main-content .table tbody td { border-color: #29404E; }
html[data-bs-theme="dark"] .main-content .form-control,
html[data-bs-theme="dark"] .main-content .form-select,
html[data-bs-theme="dark"] .main-content .input-group-text { background-color: #0E1F2A; border-color: #365160; color: #E7F1F7; }