/* BNK-DB theme layer : loaded AFTER app-saas.min.css. Safe to remove (one <link> in mainview/login). */

/* ---------- 1) Thai font (self-hosted, Noto Sans Thai variable) ---------- */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../fonts/noto-sans-thai.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --ct-font-sans-serif: "Nunito", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
    --ct-body-font-family: var(--ct-font-sans-serif);
    --ct-body-line-height: 1.6;
    --bnk-radius: .6rem;
    --bnk-shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 4px 14px rgba(20, 30, 60, .05);
    --bnk-surface: #ffffff;
    --bnk-surface-2: #f1f3fa;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.table,
.dropdown-menu,
.modal,
.offcanvas {
    font-family: var(--ct-font-sans-serif);
}

/* Thai glyphs sit lower/tighter than Latin: give headings room */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.4; }

/* ---------- 2) Cards / buttons / forms ---------- */
.card {
    border: 0;
    border-radius: var(--bnk-radius);
    box-shadow: var(--bnk-shadow);
}

.page-title-box .page-title {
    font-weight: 700;
    letter-spacing: .1px;
}

.btn { border-radius: .5rem; font-weight: 600; }
.btn-sm { border-radius: .4rem; }

.form-control,
.form-select {
    border-radius: .5rem;
    min-height: 2.35rem;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--ct-primary-rgb), .15);
}

.form-label { font-weight: 600; }

.modal-content { border: 0; border-radius: var(--bnk-radius); }

/* KPI cards on Home */
.widget-flat .widget-icon {
    border-radius: .75rem;
}

.widget-flat h3 { font-weight: 700; }

/* ---------- 3) Tables ---------- */
.table > :not(caption) > * > * { vertical-align: middle; }

.table thead.table-light th,
.table > thead th {
    font-weight: 700;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(var(--ct-primary-rgb), .07);
}

/* row highlights (event list) */
.table > tbody > tr.bnk-row-today > * { --bs-table-bg: rgba(255, 188, 0, .16); }
.table > tbody > tr.bnk-row-overdue > * { --bs-table-bg: rgba(250, 92, 124, .08); }

/* scroll container with sticky header (added by bnk-ui.js around list tables) */
.bnk-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 250px);
    min-height: 120px;
    border: 1px solid var(--ct-border-color, #e5e7eb);
    border-radius: .5rem;
    -webkit-overflow-scrolling: touch;
}

.bnk-table-wrap > table { margin-bottom: 0; }

.bnk-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ct-tertiary-bg, #f1f3fa);
    box-shadow: inset 0 -1px 0 var(--ct-border-color, #dee2e6);
}

/* pagination: bigger touch targets */
.pagination .page-link { min-width: 2.2rem; text-align: center; }

/* ---------- 5) Breadcrumb under page title ---------- */
.bnk-breadcrumb {
    font-size: .8rem;
    color: var(--ct-secondary-color, #6c757d);
    margin-top: -.35rem;
    margin-bottom: .75rem;
}

.bnk-breadcrumb a { color: inherit; text-decoration: none; }
.bnk-breadcrumb a:hover { color: var(--ct-primary, #727cf5); }
.bnk-breadcrumb .sep { margin: 0 .35rem; opacity: .6; }

/* ---------- 6) Login ---------- */
.bnk-login-card { border-radius: 1rem; overflow: hidden; }
.bnk-login-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.bnk-login-brand img { width: 52px; height: 52px; border: 2px solid rgba(255, 255, 255, .7); }
.bnk-login-card .btn-login { width: 100%; padding: .6rem 1rem; font-size: 1rem; }

/* ---------- 7) Tablet / notebook ---------- */
/* when a list table scrolls sideways, keep the action column (edit / photo / share) on screen */
@media (min-width: 768px) {
    .bnk-table-wrap.bnk-sticky-last > table > tbody > tr > td:last-child,
    .bnk-table-wrap.bnk-sticky-last > table > thead > tr > th:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: var(--bnk-surface, #fff) !important;
        box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .25);
    }

    .bnk-table-wrap.bnk-sticky-last > table > thead > tr > th:last-child {
        z-index: 4;
        background-color: var(--bnk-surface-2, #f1f3fa) !important;
    }
}

/* phones : hint that the table scrolls sideways */
@media (max-width: 767.98px) {
    .bnk-table-wrap.bnk-scroll-x { box-shadow: inset -14px 0 10px -12px rgba(0, 0, 0, .22); }
}

/* bigger tap targets for touch screens */
@media (pointer: coarse) {
    .action-icon,
    .table-action a,
    .table-action .btn { padding: .35rem .5rem; }
    .btn-sm { padding: .4rem .75rem; }
}

/* ---------- 8) Mobile ---------- */
@media (max-width: 767.98px) {
    /* Hyper hides .page-title-right on phones : show it (month/year filter etc.) */
    .page-title-box .page-title-right {
        display: block !important;
        float: none !important;
        width: 100%;
        margin: .6rem 0;
    }

    .page-title-box .page-title-right form { flex-wrap: wrap; }

    /* Home month/year filter : month + year share one row, button below */
    .bnk-home-filter > div:nth-child(1),
    .bnk-home-filter > div:nth-child(2) { flex: 1 1 calc(50% - .5rem); }
    .bnk-home-filter > div:nth-child(1),
    .bnk-home-filter > div:nth-child(2) { min-width: 0; }
    .bnk-home-filter > div:nth-child(1) select,
    .bnk-home-filter > div:nth-child(2) select { flex: 1 1 0; width: 0 !important; min-width: 0; }
    .bnk-home-filter > div:nth-child(3) { flex: 1 1 100%; }
    .bnk-home-filter > div:nth-child(3) .btn { flex: 1 1 auto; }

    /* iOS zooms in on inputs smaller than 16px */
    .form-control,
    .form-select { font-size: 16px; }

    /* tab bars: show the text (icons are all identical) and let them scroll sideways */
    .nav-tabs .nav-link .d-md-none { display: none !important; }
    .nav-tabs .nav-link .d-none.d-md-block { display: block !important; }
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link { padding: .6rem .9rem; }

    /* list filter forms : full-width controls, month/year pairs share a row */
    form[id^="form_search"] .col-auto,
    form[id^="form_search"] .col-2 {
        flex: 1 1 calc(50% - .5rem);
        width: auto;
        min-width: 130px;
    }

    form[id^="form_search"] .col-auto:has(input:not([type="hidden"])) { flex-basis: 100%; }

    form[id^="form_search"] .form-control,
    form[id^="form_search"] .form-select { width: 100% !important; min-width: 0 !important; }

    /* KPI cards (Home) : 2 per row, more compact */
    .widget-flat .card-body { padding: .85rem; }
    .widget-flat h3 { font-size: 1.4rem; }
    .widget-flat h5 { font-size: .8rem; }
    .widget-flat .widget-icon { font-size: 1.15rem; height: 2.1rem; width: 2.1rem; line-height: 2.1rem; }

    /* tables use page scroll on phones */
    .bnk-table-wrap { max-height: none !important; }

    .card-body { padding: .9rem; }
    .container-fluid { padding-left: .75rem; padding-right: .75rem; }

    /* modals nearly full screen */
    .modal-dialog:not(.modal-full-width) { margin: .5rem; }
}

/* dark mode surfaces for pinned table cells */
[data-bs-theme="dark"] {
    --bnk-surface: #2f3946;
    --bnk-surface-2: #38444f;
}

/* =====================================================================
   9) TOP MENU / FULL PAGE LAYOUT (replaces the left sidebar, like DBOX)
   ===================================================================== */
.content-page,
.navbar-custom { margin-left: 0 !important; }

.bnk-topbar .topbar { gap: 1rem; flex-wrap: nowrap; }
.bnk-left { flex: 0 0 auto; }

.bnk-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ct-body-color, #343a40);
    text-decoration: none;
    white-space: nowrap;
}

.bnk-brand:hover { color: var(--ct-primary, #727cf5); }

.bnk-nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.7rem;
    line-height: 1;
    padding: .25rem .4rem;
    color: var(--ct-body-color, #343a40);
}

.bnk-topnav { flex: 1 1 auto; min-width: 0; }

.bnk-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bnk-nav-item { position: relative; }

.bnk-nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    border-radius: .55rem;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
    color: var(--ct-body-color, #343a40);
    text-decoration: none;
}

.bnk-nav-link i:first-child { font-size: 1.15rem; }
.bnk-caret { font-size: 1rem !important; margin-left: -.15rem; opacity: .6; }

.bnk-nav-link:hover,
.bnk-nav-item.active > .bnk-nav-link {
    background: rgba(var(--ct-primary-rgb), .1);
    color: var(--ct-primary, #727cf5);
}

.bnk-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: .4rem;
    list-style: none;
    background: var(--bnk-surface, #fff);
    border-radius: .7rem;
    box-shadow: 0 10px 30px rgba(20, 30, 60, .18);
    z-index: 1100;
}

.bnk-sub-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .8rem;
    border-radius: .5rem;
    color: var(--ct-body-color, #343a40);
    text-decoration: none;
    white-space: nowrap;
}

.bnk-sub-link i { font-size: 1.1rem; opacity: .75; }
.bnk-sub-link:hover,
.bnk-sub-link.active { background: rgba(var(--ct-primary-rgb), .1); color: var(--ct-primary, #727cf5); }
.bnk-sub-all { font-weight: 700; border-bottom: 1px solid var(--ct-border-color, #e5e7eb); border-radius: .5rem .5rem 0 0; margin-bottom: .2rem; }

/* desktop (mouse): open on hover / keyboard focus */
@media (hover: hover) and (min-width: 1200px) {
    .bnk-nav-item.has-sub:hover > .bnk-sub,
    .bnk-nav-item.has-sub:focus-within > .bnk-sub { display: block; }
}

/* medium notebooks : hide icons in the menu to save width */
@media (max-width: 1499.98px) {
    .bnk-nav-link i:first-child { display: none; }
}

/* tablet / phone / touch : hamburger + dropdown panel */
@media (max-width: 1199.98px), (hover: none) {
    .bnk-nav-toggle { display: inline-flex; }
    .bnk-nav-link i:first-child { display: inline-block !important; }

    .bnk-topnav {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding: .6rem;
        background: var(--bnk-surface, #fff);
        box-shadow: 0 14px 28px rgba(20, 30, 60, .2);
        z-index: 1090;
    }

    body.bnk-nav-open .bnk-topnav { display: block; }

    .bnk-nav { flex-direction: column; align-items: stretch; gap: .1rem; }
    .bnk-nav-link { padding: .75rem .9rem; }
    .bnk-caret { margin-left: auto; transition: transform .15s; }
    .bnk-nav-item.open > .bnk-nav-link .bnk-caret { transform: rotate(180deg); }

    .bnk-sub {
        position: static;
        min-width: 0;
        padding: 0 0 .3rem 1.4rem;
        box-shadow: none;
        background: transparent;
    }

    .bnk-nav-item.open > .bnk-sub { display: block; }
    .bnk-sub-link { padding: .65rem .8rem; }
}

@media (max-width: 575.98px) {
    .bnk-brand span { font-size: 1.05rem; }
    .bnk-topbar .topbar { gap: .25rem; }
}

/* user name only on wide screens (Hyper already hides it on small ones) */
@media (max-width: 1399.98px) {
    .bnk-topbar .nav-user .d-lg-flex { display: none !important; }
}

/* =====================================================================
   10) Hub page (menu groups) + group page
   ===================================================================== */
.bnk-hub-card {
    position: relative;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.bnk-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(20, 30, 60, .13);
    border-color: rgba(var(--ct-primary-rgb), .3);
}

.bnk-hub-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
    color: inherit;
    text-decoration: none;
}

/* whole card is clickable (the sub-links sit above it) */
.bnk-hub-head::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.bnk-hub-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex: 0 0 auto;
}

.bnk-hub-icon i { font-size: 1.7rem; line-height: 1; }
.bnk-hub-title { font-size: 1.1rem; font-weight: 700; }
.bnk-hub-desc { font-size: .85rem; min-height: 2.6em; }
.bnk-hub-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.bnk-hub-links .btn { position: relative; z-index: 2; }
#id_hub_search { min-width: 220px; }

/* =====================================================================
   11) Fit the top menu on notebooks + hub page shows Home only
   ===================================================================== */
@media (max-width: 1699.98px) and (min-width: 1200px) {
    .bnk-nav { gap: 0; }
    .bnk-nav-link { padding: .5rem .55rem; font-size: .88rem; }
    .bnk-caret { margin-left: -.3rem; }
    /* dark-mode / full-screen buttons are the first to go on narrower notebooks */
    .bnk-topbar .topbar-menu > li:has(#light-dark-mode),
    .bnk-topbar .topbar-menu > li:has([data-toggle="fullscreen"]) { display: none !important; }
}

/* /hub : only "Home" is shown in the top bar (no hamburger needed) */
.bnk-topbar-hub .bnk-nav-toggle { display: none !important; }

@media (max-width: 1199.98px), (hover: none) {
    .bnk-topbar-hub .bnk-topnav {
        display: block !important;
        position: static;
        max-height: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .bnk-topbar-hub .bnk-nav { flex-direction: row; }
}

/* phones : keep the hub top bar (brand + 2 buttons + logout + avatar) on one line */
@media (max-width: 575.98px) {
    .bnk-topbar-hub .bnk-brand span { display: none; }
    .bnk-topbar-hub .bnk-nav-link { padding: .4rem .5rem; font-size: .85rem; }
    .bnk-topbar-hub .bnk-nav-link i:first-child { display: none !important; }
    .bnk-topbar .topbar-menu { gap: .25rem !important; }
    .bnk-topbar .topbar-menu .nav-link { padding-left: .4rem; padding-right: .4rem; }
    .bnk-topbar .nav-user { padding-left: .25rem !important; padding-right: .25rem !important; }
}

/* ============================================================
   12) ข้อความแจ้งสั้นๆ (toast)
   ============================================================ */
.bnk-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 2000;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    padding: .55rem 1.1rem; border-radius: 2rem; background: #2c3445; color: #fff; font-size: .9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: opacity .25s, transform .25s;
}
.bnk-toast.show { opacity: 1; transform: translate(-50%, 0); }