/* brn-asset design kit: AWA "B-AMS" look on Bootstrap 4.6 CSS (assets/vendor).
 *
 * Reproduces the AWA customer web (awa-new-asset-web-register: styles.css,
 * layout.component.css, login/create-company/introduction/profile css, the
 * components/buttons, modal and DataTables bs4 look) without jQuery,
 * DataTables, ngx-toastr or ngx-bootstrap. Colours, radii and paddings are
 * AWA's own values. How a screen uses it: docs/UI-KIT.md.
 *
 * Sections: fonts - tokens - base - buttons - cards and forms - tables and
 * pager - badges - modals, confirm, toasts, loading - shell (sidebar, top bar,
 * breadcrumb, footer) - signed-out screens (sign-in, sign-up) - welcome -
 * profile (USER area) - phone width.
 */
@import url("lg-chart.css");   /* lgUi.chart styles, one copy for the web and the B-AMS screens */

/* ------------------------------------------------------------------ fonts */
/* Anuphan (SIL OFL 1.1, assets/fonts/Anuphan/OFL.txt), vendored from the AWA
   mobile app's assets: AWA's web loaded it from Google Fonts. */
@font-face { font-family: 'Anuphan'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Anuphan/Anuphan-Light.ttf') format('truetype'); }
@font-face { font-family: 'Anuphan'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Anuphan/Anuphan-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Anuphan'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Anuphan/Anuphan-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Anuphan'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Anuphan/Anuphan-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Anuphan'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Anuphan/Anuphan-Bold.ttf') format('truetype'); }

/* ----------------------------------------------------------------- tokens */
:root {
    --awa-brand: #455C8E;          /* btn-primary, sidebar hover, login buttons */
    --awa-bg: #dde0e9;             /* wrapper / content */
    --awa-body: #cccccc;
    --awa-navy: #053661;           /* hamburger, caret, card labels */
    --awa-link: #345fbe;           /* breadcrumb last item, pager */
    --awa-label: #626566;          /* field labels */
    --awa-input: #495057;
    --awa-th: #fafafa;             /* table header */
    --awa-search: #3776ff;
    --awa-add: green;
    --awa-orange: linear-gradient(90deg, rgba(255, 165, 0, 1), rgba(255, 165, 0, .86), rgb(255, 165, 0));
    --awa-print: linear-gradient(90deg, rgba(41, 169, 233, 1), rgba(40, 162, 236, 1));
    --awa-delete: rgba(199, 73, 73, 1);
    --awa-grey: rgba(128, 128, 128, 1);
    --awa-sidebar-w: 250px;
    --awa-radius: 6px;
}

/* ------------------------------------------------------------------- base */
html, body { height: 100%; }
body { margin: 0; background: var(--awa-body); }
body, button, input, select, textarea, optgroup, .tooltip, .popover { font-family: 'Anuphan', sans-serif; }
label { font-weight: 500 !important; }
a { color: #000; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
hr { margin-top: .5rem; margin-bottom: .5rem; }
.form-group { margin-bottom: .8rem; }
.form-control { font-size: .9rem !important; height: 2rem; padding-top: .2rem; color: var(--awa-input); }
textarea.form-control { height: auto; }
select.form-control { padding-top: 0; padding-bottom: 0; }
.input-group-text { background-color: #fff; }
.text-required { color: #dc3545; }
.label-awa, .form-group > label { color: var(--awa-label); margin-bottom: 0; }

/* A screen's <main> stays hidden until shell.js has put the shell around it. */
body.lg-boot main { visibility: hidden; }

/* Feather icons from the local sprite: <svg class="feather"><use href="assets/img/feather-sprite.svg#home"/></svg>. */
.feather { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: middle; flex: none; }
.feather-sm { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- buttons */
.btn { margin-left: 2px; margin-right: 2px; border-radius: var(--awa-radius); }
.btn-primary { background-color: var(--awa-brand); border: 1px solid var(--awa-brand); }
.btn-primary:hover, .btn-primary:focus { background-color: #3a4e79; border-color: #3a4e79; }
.btn-success { background-color: #05d4a1; border-color: #05d4a1; color: #fff; }
.btn-success:hover, .btn-success:active, .btn-success:focus { background-color: #06c595 !important; border-color: #06c595; color: #fff; }
.btn-warning { background: var(--awa-orange); border: none; color: #fff; }
.btn-warning:hover, .btn-warning:active, .btn-warning:focus { background: #dfa506 !important; color: #fff; }
.btn-danger { background: rgba(231, 27, 27, .86); border: none; color: #fff; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus { background: #df6c5f; color: #fff; }
.btn-info { background: var(--awa-print); border: none; color: #fff; }
.btn-info:hover, .btn-info:active, .btn-info:focus { background: #247be6 !important; color: #fff; }
button:disabled, button[disabled], .btn:disabled, .btn.disabled { border: 1px solid #999 !important; background: #ccc !important; color: #666 !important; }

/* AWA's named buttons (components/buttons): always btn btn-sm + one of these, icon then wording. */
.b-add, .b-save, .b-search, .b-edit, .b-excel, .b-upload, .b-delete, .b-back, .b-close, .b-print, .b-confirm, .b-view, .b-detail {
    color: #fff !important; border-radius: var(--awa-radius); padding: 8px 15px; border: none; line-height: 1.5;
}
.b-add, .b-save { background: var(--awa-add); }
.b-search { background: var(--awa-search); }
.b-edit, .b-excel, .b-upload { background: var(--awa-orange); }
.b-edit { padding-left: 13.3px; padding-right: 13.3px; }
.b-delete { background: var(--awa-delete); }
.b-back, .b-view { background: var(--awa-grey); }
.b-close { background: var(--awa-grey); padding-top: 9px; padding-bottom: 9px; }
.b-print, .b-detail { background: var(--awa-print); }
.b-confirm { background: var(--awa-brand); }
.b-add:hover, .b-save:hover, .b-search:hover, .b-edit:hover, .b-excel:hover, .b-upload:hover, .b-delete:hover,
.b-back:hover, .b-close:hover, .b-print:hover, .b-confirm:hover, .b-view:hover, .b-detail:hover { filter: brightness(.93); }
/* The row buttons of a list (ButtonDatatable): icon only, btn-sm, radius 6. */
.b-row { padding: .25rem .5rem; line-height: 1.5; }

/* A control the user may not use (lgUi.lock / lgUi.gate): never hidden -- it stays, plainly blocked, with a
   padlock; its tooltip and a click say who may. The server refuses the action anyway. */
.lg-locked, .lg-locked:hover, .lg-locked:focus { opacity: .55; cursor: not-allowed; filter: grayscale(.65); text-decoration: none; }
.lg-locked::before { content: "\f023"; font-family: FontAwesome; font-weight: normal; margin-right: .35em; font-size: .9em; }
.lg-locked:focus-visible { outline: 2px solid #455C8E; outline-offset: 2px; }
/* an icon-only row button keeps its width: the padlock sits on its corner */
.b-row.lg-locked { position: relative; }
.b-row.lg-locked::before { position: absolute; top: -5px; right: -4px; margin: 0; font-size: 11px; line-height: 1; color: #333; }

/* --------------------------------------------------------- cards and forms */
.card { border: none !important; border-radius: var(--awa-radius) !important; }
.cardH { border-radius: var(--awa-radius); border: none !important; }
/* AWA's number-generator cards (contract เพิ่มสินทรัพย์) and the product header rows of its units table. */
.cardNO { box-shadow: 0 0 6px rgba(0, 0, 0, .15); }
.cardNO .card-header { background: #46a4da; color: #fff; }
.awa-table tr.colorH td { background: #e9f4fb; font-weight: 700; }
.awa-table td .form-control-sm { min-width: 140px; }
.card-body { position: relative; }
/* The search card of a list: fields in a row, the buttons right-aligned. */
.awa-search .awa-search-buttons { align-self: center; text-align: right; }
.awa-search .form-group { margin-bottom: .5rem; }
.awa-section { color: #707070; font-weight: 700; margin: 12px 0 6px; }
.awa-divider { border-top: 1px solid #ced4da; margin: 16px 0; }
.awa-field-row { display: flex; align-items: center; margin-bottom: .5rem; }
.awa-field-row > .awa-field-label { flex: 0 0 33.333%; text-align: right; padding-right: 15px; margin: 0; }
.awa-field-row > .awa-field-input { flex: 1 1 auto; min-width: 0; }
.is-invalid, .form-control.is-invalid { border: 1px solid red !important; border-radius: 7px; }
.invalid-feedback { font-size: 85%; }
/* AWA's password meter (appStrongPassword): คุณภาพรหัสผ่านของคุณ: high / medium / low. */
.awa-pw-meter { font-size: .9rem; margin-top: 2px; }
.awa-pw-meter .lvl { font-weight: 700; margin-left: 4px; }
.awa-pw-meter .high { color: green; }
.awa-pw-meter .medium { color: rgb(241, 157, 31); }
.awa-pw-meter .low { color: red; }
.awa-error-text { color: red; font-weight: 700; }

/* ------------------------------------------------------- tables and pager */
/* DataTables bs4 + AWA's componentTable: white, radius 6, header #fafafa 55 px, centred. */
.awa-table-wrap { overflow-x: auto; }
table.awa-table { width: 100%; background: #fff !important; border: none !important; border-collapse: collapse; border-radius: var(--awa-radius); overflow: hidden; margin-bottom: 0; }
table.awa-table > thead > tr { background: var(--awa-th); color: #000; height: 55px; font-weight: 600; }
table.awa-table > thead > th, table.awa-table > thead > tr > th { vertical-align: middle; text-align: center; border: 1px solid #dee2e6; border-top: none; border-bottom-width: 2px; position: relative; white-space: nowrap; }
table.awa-table > tbody > tr > td { vertical-align: middle; border: 1px solid #dee2e6; border-top: none; font-weight: 300; }
table.awa-table > thead > tr > th:first-child, table.awa-table > tbody > tr > td:first-child { border-left: none; }
table.awa-table > thead > tr > th:last-child, table.awa-table > tbody > tr > td:last-child { border-right: none; }
table.awa-table > tbody > tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .02); }
table.awa-table > tbody > tr:hover { background-color: rgba(69, 92, 142, .06); }
table.awa-table td.awa-manage { white-space: nowrap; text-align: center; }
/* A long text cell kept to one line at 1280: cut with …, the full text in its title. */
table.awa-table td.awa-1line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }   /* full text in the title */
table.awa-table td.no-data-available, table.awa-table td.awa-empty { text-align: center; color: #333; padding: 14px; }
/* Sortable headings: DataTables' arrows, the current one dark. */
table.awa-table th[data-sort] { cursor: pointer; padding-right: 30px; }
table.awa-table th[data-sort]::before, table.awa-table th[data-sort]::after { position: absolute; bottom: .9em; display: block; opacity: .3; font-size: .9em; }
table.awa-table th[data-sort]::before { right: 1em; content: "\2191"; }
table.awa-table th[data-sort]::after { right: .5em; content: "\2193"; }
table.awa-table th.sorting_asc::before, table.awa-table th.sorting_desc::after { opacity: 1; }
/* "แสดง [10] รายการ", "แสดง 1 ถึง 10 จาก 57 รายการ" and the pager (DataTables simple_numbers, Thai). */
.awa-length { margin-bottom: 8px; font-size: .9rem; }
.awa-length select { width: auto; display: inline-block; height: calc(1.5em + .5rem + 2px); padding: .25rem 1.75rem .25rem .5rem; font-size: .875rem; margin: 0 4px; }
.awa-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 4px; font-size: .9rem; }
.awa-foot .awa-info { padding-top: .5em; }
.pagination { margin: 11px 0 !important; border-radius: var(--awa-radius); }
.page-link { color: var(--awa-link); }
.page-item.active .page-link { color: #fff; background: var(--awa-link); border-color: var(--awa-link); }
.page-item.disabled .page-link { color: #6c757d; }
/* DataTables' "processing" box over a list while it loads. */
.awa-processing { position: relative; }
.awa-processing::after { content: 'กำลังโหลด...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px 24px; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); z-index: 3; }
/* The "สลับแบบ" card grid view of a list. */
.awa-cards { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.awa-cards > .card { width: calc(50% - 16px); margin: 8px; padding: 12px 16px; }
.awa-cards .awa-card-label { color: var(--awa-navy); }
/* AWA's master card (.cardStype): the big index, the title with the buttons, a rule, label : value lines. */
.awa-cards .awa-card-no { font-size: 2rem; font-weight: 700; line-height: 1; margin-right: 12px; }
.awa-cards .awa-card-title { font-size: 19px; font-weight: 700; }
/* AWA's tree tables (departments, places, repair services): rows indent by depth, a row with children toggles them. */
.awa-tree-toggle { cursor: pointer; }
.awa-table td.awa-tree-cell { text-align: left; }
.awa-nodata { text-align: center; padding: 24px; }
.awa-nodata img { width: 160px; max-width: 50%; }

/* ----------------------------------------------------------------- badges */
.awa-badge { display: inline-block; font-weight: 400; font-size: 13px; padding: 5px 10px; border-radius: 10rem; line-height: 1.2; white-space: nowrap; }
.awa-badge.tone-green { background: #d4edda; color: #155724; }
.awa-badge.tone-red { background: #f8d7da; color: #721c24; }
.awa-badge.tone-amber, .awa-badge.tone-orange { background: #fff3cd; color: #856404; }
.awa-badge.tone-blue { background: #dbe4f7; color: var(--awa-brand); }
.awa-badge.tone-gray { background: #e9ecef; color: #495057; }
.awa-badge.tone-navy { background: #f6f8ff; color: var(--awa-navy); }

/* ------------------------------------------- modals, confirm, toasts, loading */
/* Bootstrap's modal markup, driven by shell.js / lgUi (no Bootstrap JS). */
.lg-modal { overflow-y: auto; }
.lg-modal.show { display: block; background: rgba(0, 0, 0, .5); }
.modal-content { border-radius: var(--awa-radius) !important; border: none; }
.modal-header { padding: .5rem .5rem; border-radius: 6px 6px 0 0 !important; align-items: center; }
.modal-header p { margin: 0; padding-left: .5rem; }
.modal-header.alert-primary { background: #cce5ff; color: #004085; border-bottom: 1px solid #b8daff; }
.modal-header.alert-success { background: #d4edda; color: #155724; }
.modal-header.alert-danger { background: #f8d7da; color: #721c24; }
.modal-header .close { padding: .5rem 1rem; margin: -.5rem -.5rem -.5rem auto; }
/* modal-custom: the header carries the title (h4) and the save/close buttons. */
.awa-modal-custom .modal-header { padding: 1rem; }
.awa-modal-custom .modal-header h4 { margin: 0 0 0 1rem; font-size: 1.4rem; }
.awa-modal-custom .modal-body { padding: 1rem 1.5rem; }
.awa-modal-custom .modal-dialog { max-width: 900px; }
.lg-modal .modal-dialog { margin-top: 1.75rem; }
/* ngx-toastr (toast-top-right): success / error / warning / info. */
#awa-toasts { position: fixed; top: 12px; right: 12px; z-index: 1080; width: 300px; pointer-events: none; }
.awa-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; margin-bottom: 6px; padding: 15px 15px 15px 15px; width: 300px; border-radius: 3px;
             color: #fff; box-shadow: 0 0 12px #999; opacity: .9; cursor: pointer; font-size: .95rem; }
.awa-toast:hover { opacity: 1; box-shadow: 0 0 12px #000; }
.awa-toast .fa { font-size: 22px; margin-right: 12px; margin-top: 1px; }
.awa-toast.success { background: #51a351; }
.awa-toast.error { background: #bd362f; }
.awa-toast.warning { background: #f89406; }
.awa-toast.info { background: #2f96b4; }
/* blockUI: the whole page waits. */
#awa-loading { position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
#awa-loading img { width: 64px; height: 64px; }

/* ------------------------------------------------------------------ shell */
.wrapper { display: flex; width: 100%; align-items: stretch; background-color: var(--awa-bg); min-height: 100vh; }
#sidebar { background: #fff; transition: all .2s; position: relative; border-radius: var(--awa-radius); color: #000;
           margin-left: 10px; min-width: var(--awa-sidebar-w); max-width: var(--awa-sidebar-w); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); align-self: flex-start; min-height: calc(100vh - 16px); }
#sidebar.collapsed { margin-left: -260px; }
#sidebar .sidebar-card { opacity: .8; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#sidebar .sidebar-card.blank { min-height: 40px; }
#sidebar .sidebar-user { display: grid; padding: 16px; justify-content: center; justify-items: center; text-align: center; }
#sidebar .sidebar-user b { color: #000; margin-top: 10px; }
#sidebar .sidebar-user p { color: #000; margin: 0; }
.image--cover { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; object-position: center right; }
#sidebar ul.list-main { margin: 0; padding: 0; }
#sidebar ul.list-main a { display: block; padding: 17px; color: #000; text-decoration: none; }
#sidebar ul.list-main a:hover { color: #fff !important; background-color: var(--awa-brand); }
#sidebar ul.list-main a.lg-menu-group[aria-expanded="true"] { color: var(--awa-brand); }
#sidebar ul.list-main a.lg-menu-group[aria-expanded="true"]:hover { color: #fff !important; }
#sidebar ul.list-main .lg-menu-row { display: flex; justify-content: space-between; align-items: center; }
#sidebar ul.list-main .lg-menu-row .fa { margin-top: 4px; }
#sidebar ul.list-main .feather { margin-right: 1rem; }
#sidebar ul.list-main .lg-menu-badge { display: inline-block; min-width: 20px; margin-left: 8px; padding: 0 6px; border-radius: 10px; background: #dc3545; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
#sidebar ul.list-main ul a { padding: 10px 17px 10px 30px !important; }
#sidebar ul.list-main a.active { background-color: #f0f0f0; color: #333; font-weight: 700; }
/* The selected top-level entry: AWA's "alert alert-primary cardActiv". */
#sidebar ul.list-main > li.cardActiv { background: #cce5ff; border-radius: var(--awa-radius); margin: 0 0 0 5px; padding: 1px; }
#content { width: 100%; min-width: 0; background-color: var(--awa-bg); min-height: 100vh; display: flex; flex-direction: column; }
#content > .container-fluid { flex: 1 0 auto; }
.colorNav { background: #fff !important; margin-bottom: 17px; height: 65px; border-radius: var(--awa-radius); display: flex; align-items: center; flex-wrap: nowrap; padding: 0 12px 0 0; }
.colorNav .awa-burger { color: var(--awa-brand); cursor: pointer; margin: 0 10px; background: none; border: none; padding: 6px; font-size: 1.33em; line-height: 1; }
.colorNav .breadcrumb { margin: 0; box-shadow: none !important; background: #fff !important; flex: 1 1 auto; min-width: 0; padding: .75rem .5rem; }
.colorNav .breadcrumb-item a { color: #000; }
/* One line inside the 65 px bar: a long trail is cut with … (the full trail is the page title) instead of spilling out. */
.colorNav .breadcrumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.colorNav .breadcrumb-item { flex: 0 0 auto; }
.colorNav .breadcrumb-item:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.last-breadcrumb-item, .breadcrumb-item.active { color: var(--awa-link); }
.colorNav .awa-right { display: flex; align-items: center; flex: none; }
/* "⚠ จำนวนสินทรัพย์ที่ไม่มีเลขที่สัญญา N รายการ": hidden below 1300 px, as AWA's .hind. */
.awa-nocontract { display: flex; align-items: center; border: 1.5px solid var(--awa-brand); border-radius: 6px; padding: 6px 20px; margin-right: 30px; color: var(--awa-brand) !important; white-space: nowrap; }
.awa-nocontract h6 { margin: 0 0 0 4px; color: var(--awa-brand); }
/* Narrower than AWA's 1300 px it stays visible (the presenter shows it at 1280), just tighter; phones and tablets drop it. */
@media only screen and (max-width: 1300px) { .awa-nocontract { padding: 4px 10px; margin-right: 12px; } .awa-nocontract h6 { font-size: .8rem; } }
@media only screen and (max-width: 1023px) { .awa-nocontract { display: none !important; } }
.awa-user-menu { position: relative; margin-right: 14px; }
.awa-user-menu > button { background: none; border: none; color: var(--awa-navy); display: flex; align-items: center; padding: 4px 6px; border-radius: 6px; }
.awa-user-menu > button:hover { background: #f0f0f0; }
.awa-user-menu > button .awa-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 6px; }
.awa-user-menu .dropdown-menu { top: 100%; right: 0; left: auto; min-width: 240px; border-radius: 6px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); border: none; }
.awa-user-menu .dropdown-item { display: flex; align-items: center; padding: .5rem 1rem; }
.awa-user-menu .dropdown-item .feather { margin-right: 10px; color: var(--awa-brand); }
/* the ? button in the top bar (assets/js/shell.js shows it; the dot says this screen's tour is new) */
.awa-help { position: relative; color: var(--awa-navy); cursor: pointer; background: none; border: none; font-size: 1.5em; line-height: 1; padding: 4px; }
.awa-help[hidden], .lg-help-dot[hidden] { display: none; }
.awa-help[aria-expanded="true"] { color: var(--awa-brand); }
.lg-help-dot { position: absolute; top: 2px; right: 2px; width: .5rem; height: .5rem; border-radius: 999px; background: #dc2626; }
.awa-power { color: var(--awa-delete); cursor: pointer; background: none; border: none; font-size: 1.33em; padding: 4px; }
.awa-footer { color: #6c757d; font-size: .8rem; text-align: center; padding: 18px 0 12px; }
.lg-ended { position: fixed; right: 16px; bottom: 16px; z-index: 1060; max-width: 360px; }

/* ----------------------------------------------------- signed-out screens */
/* Sign-in (AWA login): 8/4 split, banner left, #ECF0F7 panel right. */
.awa-login { min-height: 100vh; margin: 0; }
.awa-login .awa-login-banner { padding: 0; background: url('../img/bg-banner2.jpg') center / cover no-repeat; }
.awa-login .logo-position { position: absolute; left: 20px; top: 16px; z-index: 999; }
.awa-login .logo-position img { width: 200px; }
.awa-login .awa-login-panel { display: grid; align-items: center; background-color: #ECF0F7; padding-top: 24px; padding-bottom: 24px; }
.awa-login .container-content { margin-left: 10%; margin-right: 10%; }
.awa-login h2 { color: #3B4454; text-align: center; font-size: 2rem; }
.awa-login h4 { color: #7D95C1; text-align: center; font-size: 1.5rem; }
.awa-login .awa-tabs { display: flex; justify-content: center; margin-top: 40px; }
.awa-login .awa-tabs .btn { width: 100%; border-radius: 10px; padding-top: 13px; padding-bottom: 13px; border: 2px solid var(--awa-brand); background: transparent; color: var(--awa-brand); }
.awa-login .awa-tabs .btn[aria-selected="true"] { background-color: var(--awa-brand); color: #fff; }
.awa-login .form-control, .awa-login .form-control:focus { background-color: #fff !important; border-radius: 10px; height: 51px; border: 1px solid #c9c3c3; color: #495057; box-shadow: none; outline: 0; font-size: 1rem !important; }
.awa-login .form-control.awa-code { font-size: 22px !important; letter-spacing: .5em; text-align: center; }
.awa-login label { color: #212529; margin-bottom: .3rem; }
.awa-login .button-login-submit { width: 100%; border-radius: 10px; border: none; padding-top: 13px; padding-bottom: 13px; color: #fff !important; background-color: var(--awa-brand); font-size: 1rem; }
.awa-login .button-login-submit:hover { background-color: #3a4e79; }
.awa-login .awa-outline { width: 100%; color: #95a9cc; font-weight: 500; border: 1px solid #95a9cc; background: transparent; border-radius: 10px; padding: 13px 15px; font-size: 1rem; }
.awa-login .awa-outline:hover { color: var(--awa-brand); border-color: var(--awa-brand); }
.awa-login .awa-link { color: #0252b3; }
.awa-login .awa-note { color: #95a9cc; font-size: .85rem; text-align: center; }
.awa-login .awa-two { display: flex; }
.awa-login .awa-two > div { width: 100%; }
.awa-login .awa-two > div:first-child { padding-right: 5px; }
.awa-login .awa-two > div:last-child { padding-left: 5px; }
.awa-login .awa-codes code { display: block; text-align: center; background: #fff; border: 1px solid #c9c3c3; border-radius: 6px; padding: 4px; color: #212529; font-size: 15px; }
.awa-login #qr { background: #fff; padding: 8px; border-radius: 6px; display: inline-flex; }
/* The phone sign-in (mobile_index.php): the same page stacked at every width: the logo on the
   panel colour, the photo as a band, then the panel. A short splash with the logo on top. */
.awa-login-stack { flex-direction: column; flex-wrap: nowrap; }
.awa-login-stack .logo-position { position: static; text-align: center; padding: 16px 0; background: #fff; }
.awa-login-stack .logo-position img { width: 220px; max-width: 70vw; }
.awa-login-stack .awa-login-banner { display: block; flex: 0 0 140px; max-width: 100%; width: 100%; }
.awa-login-stack .awa-login-panel { flex: 1 0 auto; max-width: 100%; width: 100%; align-items: start; }
.awa-login-stack .container-content { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; }
.awa-login-stack h2 { font-size: 1.5rem; }
.awa-login-stack h4 { font-size: 1.1rem; }
.awa-login-stack .awa-tabs { margin-top: 24px; gap: 8px; }
.awa-login-stack .awa-tabs[hidden] { display: none; }
.awa-login-stack .u-mt-40 { margin-top: 24px !important; }
.awa-splash { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; background: #ECF0F7; pointer-events: none; transition: opacity .3s; }
.awa-splash img { width: min(300px, 75vw); height: auto; }
.awa-splash.awa-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .awa-splash { transition: none; } }
/* Sign-up, company step (AWA create-company): a white card on the banner. */
.awa-company { min-height: 100vh; background: url('../img/bg-banner2-company.jpg') center / cover no-repeat; display: flex; justify-content: center; align-items: center; padding: 16px; position: relative; }
.awa-company .border-logo { position: absolute; top: 20px; left: 20px; width: 250px; }
.awa-company .page-main { display: flex; background-color: #fff; border-radius: 6px; min-height: 350px; width: 560px; max-width: 100%; justify-content: center; padding: 30px 0; }
.awa-company .page-main > div { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.awa-company .header-text-body { display: flex; justify-content: space-around; text-align: center; }
.awa-company .awa-company-body { margin-left: 13%; margin-right: 13%; }
.awa-company .form-control, .awa-company .form-control:focus { height: 48px; padding-top: 10px; color: #495057; background-color: rgba(241, 241, 241, 1); border: none; box-shadow: none; font-size: 1.1rem !important; }
.awa-company .back-gradient { width: 100%; border: none; padding-top: 13px; padding-bottom: 13px; color: #fff !important; background-color: var(--awa-brand); }
.awa-company .button-copy { height: 48px; width: 42px; color: #495057; background-color: rgba(241, 241, 241, 1); border: none; cursor: pointer; }
.awa-company .button-copy:hover { color: rgba(231, 27, 27, .86); }

/* ---------------------------------------------------------------- welcome */
/* AWA introduction: Arsha's #hero on white, the illustration floating. */
#hero { width: 100%; background: #fff; border-radius: 6px; }
#hero .container-content { padding: 28px 56px 28px 70px; }
#hero h2 { color: #79879f; margin-bottom: 20px; line-height: 1.4; font-size: 2rem; }
#hero h5 { color: #444; line-height: 1.6; font-weight: 400; }
#hero .hero-img img { max-width: 100%; }
#hero .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; }
@keyframes up-down { 0% { transform: translateY(10px); } 100% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { #hero .animated { animation: none; } }
@media (max-width: 991px) { #hero { text-align: center; } #hero .animated { animation: none; } #hero .hero-img img { width: 60%; } }

/* ---------------------------------------------------------- profile (USER) */
/* AWA จัดการโปรไฟล์: menu cards left (feather icon, name, description), a white panel right. */
.awa-profile-menu a { display: flex; align-items: center; background-color: #fff; border-radius: 6px; box-shadow: rgba(149, 157, 165, .2) 0 8px 24px; padding: 0 15px; margin-bottom: 1rem; color: #000; }
.awa-profile-menu a .feather { margin-right: 1rem; }
.awa-profile-menu a h5 { margin: 1rem 0 .3rem; font-size: 1.15rem; }
.awa-profile-menu a p { margin-bottom: 1rem; font-size: .9rem; }
.awa-profile-menu a.active, .awa-profile-menu a:hover { background: var(--awa-brand); color: #fff; }
.awa-panel { background-color: #fff; border-radius: 6px; box-shadow: rgba(149, 157, 165, .2) 0 8px 24px; padding: 3rem; }
.awa-panel h3 { font-size: 1.6rem; }
.awa-profile-head { display: flex; padding: 0 0 30px; align-items: center; }
.awa-profile-head img { width: 100px; height: 100px; object-fit: cover; border-radius: 6px; }
.awa-profile-head > div { margin-left: 3rem; }

/* ------------------------------------------------------------- phone width */
@media (max-width: 991.98px) {
    /* The menu floats over the content; closed until the hamburger opens it. */
    #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; margin: 0; border-radius: 0 6px 6px 0; overflow-y: auto; min-height: 0; }
    #sidebar.collapsed { margin-left: -270px; }
    .awa-cards > .card { width: 100%; }
    .awa-panel { padding: 1.5rem; }
}
@media (max-width: 767.98px) {
    .awa-login .awa-login-banner { display: none; }
    .awa-login .awa-login-panel { flex: 0 0 100%; max-width: 100%; }
    .awa-login .logo-position { position: static; text-align: center; padding: 16px 0 0; background: #ECF0F7; }
    .awa-login .container-content { margin-left: 16px; margin-right: 16px; }
    .awa-company .border-logo { position: static; width: 200px; margin-bottom: 16px; }
    .awa-company { flex-direction: column; }
    .awa-company .awa-company-body { margin-left: 16px; margin-right: 16px; }
    #content > .container-fluid { padding-left: 8px; padding-right: 8px; }
    .colorNav { height: auto; min-height: 56px; }
    .colorNav .breadcrumb { padding: .5rem .25rem; font-size: .85rem; }
    .awa-user-menu > button .awa-user-name { display: none; }
    .awa-field-row { display: block; }
    .awa-field-row > .awa-field-label { text-align: left; padding: 0; }
    .awa-search .awa-search-buttons { text-align: left; margin-top: 4px; }
    #hero .container-content { padding: 16px; }
    .awa-profile-head { flex-direction: column; align-items: flex-start; }
    .awa-profile-head > div { margin: 12px 0 0; }
}

/* --- B5 operations: dual-list picker (lgUi.pickList), detail info card, transfer tabs --- */
.awa-pick { padding: 1.25rem; height: 100%; }
.awa-pick .awa-table-wrap { max-height: 60vh; overflow: auto; }
.awa-pick-info { text-align: right; font-weight: 600; margin: 0 0 .5rem; white-space: pre; }
.awa-pick-more { color: var(--awa-label); font-size: .875rem; margin: .5rem 0 0; }
.awa-info .card-header { background: #fff; border-bottom: 1px solid #eee; }
.awa-info [data-field] { word-break: break-word; }
.nav-pills .nav-link { cursor: pointer; }
.nav-pills .nav-link.active { background-color: var(--awa-brand); }

/* --- B8 charts: assets/css/lg-chart.css (imported at the top; shared with the B-AMS screens) --- */

/* ------------------------------------------------------------ one-off rules
   Every style lives in a sheet (file structure baseline; the CSP is style-src
   'self', so a style="" attribute would not even apply). These took the place
   of the attributes the screens and scripts carried. */
/* sign-in: the live banner of จัดการโฆษณา over the picture (index.php, index.js) */
.awa-ad { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: 520px; background: rgba(255, 255, 255, .93);
          border-radius: 6px; padding: 16px; box-shadow: rgba(0, 0, 0, .15) 0 4px 16px; }
.awa-ad-image { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.awa-ad-title { color: #455C8E; font-weight: 700; margin-bottom: 6px; }
.awa-ad-body { white-space: pre-line; color: #3B4454; margin-bottom: 6px; }
.awa-ad-link { color: #345fbe; }
/* จัดการโฆษณา: the picture in the form, and in a row of the list */
.ads-preview { height: 200px; justify-content: center; }
.ads-preview-image { object-fit: cover; height: 180px; border-radius: 6px; max-width: 100%; }
.ads-thumb { height: 60px; max-width: 120px; object-fit: cover; border-radius: 6px; }
/* จัดการโปรไฟล์: this device in the list of signed-in devices; a recovery code */
.awa-row-current { background: #e6f7f2 !important; }
/* two-step sign-in: the secret to type by hand */
.mfa-secret { font-size: 14px; letter-spacing: .1em; }
/* ผู้สนใจทดลองใช้งาน / สร้างบัญชีผู้ทดลอง: the two-button switch in a row */
.btn.trial-switch { font-size: 13px !important; padding: 7px 9px !important; }
/* fr_side_cards (lgUi.sideCards): the caption's colour, 1 teal, 2 blue, 3 green, 4 grey */
.fr-foot-1 { background-color: #2582a0; }
.fr-foot-2 { background-color: #0070e8; }
.fr-foot-3 { background-color: #0c8e0c; }
.fr-foot-4 { background-color: #5a6268; }

/* ---------------------------------------------------------------- utilities
   One declaration each, named after it (u-<property>-<value>): a column's
   width, AWA's own one-off colours and sizes. !important as Bootstrap's own
   utilities, so they win over a component's rule the way the attribute did.
   Never put one on an element whose script sets the same property. */
.u-c-red { color: red !important; }
.u-fs-13 { font-size: 13px !important; }
.u-fs-15 { font-size: 15px !important; }
.u-bg-2694d3 { background: #2694D3 !important; }
.u-bg-29c275 { background: #29C275 !important; }
.u-bg-8d9796 { background: #8D9796 !important; }
.u-bg-d8d7d7 { background: #d8d7d7 !important; }
.u-bg-d9dcdd { background: #D9DCDD !important; }
.u-bg-dee3e3 { background: #DEE3E3 !important; }
.u-bg-e06a4d { background: #E06A4D !important; }
.u-bg-eb8870 { background: #eb8870 !important; }
.u-bg-ebf8fc { background: #EBF8FC !important; }
.u-bg-fafa8b { background: rgb(250,250,139) !important; }
.u-bg-fafafa { background: #fafafa !important; }
.u-bg-ffc300 { background: #FFC300 !important; }
.u-bl-00cdf1 { border-left-color: #00cdf1 !important; }
.u-bl-08f000 { border-left-color: #08f000 !important; }
.u-bl-103654 { border-left-color: #103654 !important; }
.u-bl-229954 { border-left-color: #229954 !important; }
.u-bl-f39c12 { border-left-color: #F39C12 !important; }
.u-bl-ffae00 { border-left-color: #ffae00 !important; }
.u-bl-ffe600 { border-left-color: #ffe600 !important; }
.u-border-e5e7eb { border:1px solid #e5e7eb !important; }
.u-c-000 { color: #000 !important; }
.u-c-05612e { color: #05612e !important; }
.u-c-141414 { color: #141414 !important; }
.u-c-455c8e { color: #455C8E !important; }
.u-c-626566 { color: #626566 !important; }
.u-c-676b6b { color: #676B6B !important; }
.u-c-6d6d6d { color: #6D6D6D !important; }
.u-c-757575 { color: #757575 !important; }
.u-c-7d95c1 { color: #7D95C1 !important; }
.u-c-a3a3a3 { color: #a3a3a3 !important; }
.u-c-c22626 { color: #C22626 !important; }
.u-c-c51717 { color: #c51717 !important; }
.u-c-fff { color: #fff !important; }
.u-fs-0_82rem { font-size: .82rem !important; }
.u-fs-11 { font-size: 11px !important; }
.u-fs-18 { font-size: 18px !important; }
.u-fs-19 { font-size: 19px !important; }
.u-fs-1_1rem { font-size: 1.1rem !important; }
.u-fs-20 { font-size: 20px !important; }
.u-fs-26 { font-size: 26px !important; }
.u-fs-2rem { font-size: 2rem !important; }
.u-fs-35 { font-size: 35px !important; }
.u-gap-6 { gap: 6px !important; }
.u-gap-8 { gap: 8px !important; }
.u-h-36 { height: 36px !important; }
.u-h-auto { height: auto !important; }
.u-lh-1 { line-height: 1 !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-n3 { margin-bottom: -3px !important; }
.u-minw-0 { min-width: 0 !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-radius-6 { border-radius: 6px !important; }
.u-tf-scale-1_5 { transform: scale(1.5) !important; }
.u-w-10p { width: 10% !important; }
.u-w-11p { width: 11% !important; }
.u-w-12p { width: 12% !important; }
.u-w-140 { width: 140px !important; }
.u-w-150 { width: 150px !important; }
.u-w-15p { width: 15% !important; }
.u-w-17p { width: 17% !important; }
.u-w-200 { width: 200px !important; }
.u-w-20p { width: 20% !important; }
.u-w-2p { width: 2% !important; }
.u-w-30p { width: 30% !important; }
.u-w-40p { width: 40% !important; }
.u-w-45p { width: 45% !important; }
.u-w-48 { width: 48px !important; }
.u-w-50p { width: 50% !important; }
.u-w-5p { width: 5% !important; }
.u-w-6p { width: 6% !important; }
.u-w-8p { width: 8% !important; }
.u-w-9p { width: 9% !important; }
.u-w-auto { width: auto !important; }
.u-ws-normal { white-space: normal !important; }
.u-ws-pre-line { white-space: pre-line !important; }