:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#182c40;background:#f2f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:#0b629b}a:hover{text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.skip{position:absolute;left:-999px;z-index:99;background:#fff;padding:10px}.skip:focus{left:12px;top:12px}.app-shell{min-height:100vh;display:flex}.sidebar{width:258px;flex:0 0 258px;background:#102d4b;color:#e9f3fc;padding:25px 15px 18px;display:flex;flex-direction:column;min-height:100vh}.identity{text-decoration:none;color:white;display:flex;align-items:center;gap:12px;padding:0 11px 28px}.identity-mark{display:grid;place-items:center;font-size:23px;font-weight:850;border-radius:12px;background:linear-gradient(145deg,#26b7b3,#2580d5);width:44px;height:44px}.identity strong,.identity small{display:block}.identity strong{letter-spacing:-.5px;font-size:17px}.identity small{font-size:11px;color:#b9ccde;margin-top:2px}.nav-heading{padding:20px 13px 8px;text-transform:uppercase;color:#89a7c1;font-size:10px;letter-spacing:1.2px;font-weight:800}.nav-link{color:#cfdfed;display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:9px;text-decoration:none;font-size:13px;font-weight:600;margin:1px 0}.nav-link span{font-size:18px;width:22px;text-align:center}.nav-link:hover,.nav-link.active{background:#214d73;color:#fff}.nav-link.active{box-shadow:inset 3px 0 #38c8bd}.sidebar-bottom{margin-top:auto;border-top:1px solid #30506d;padding:18px 12px 3px;color:#a9c5d7;font-size:11px}.status-dot{display:inline-block;width:8px;height:8px;background:#35c4b2;border-radius:50%;margin-right:6px}.main-column{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{background:white;border-bottom:1px solid #e2e9f0;min-height:70px;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}.portal-link{font-size:13px;text-decoration:none;font-weight:700;color:#41627f}.account-label{font-size:12px;color:#738396}.account-label strong{color:#203d55}.logout-form{margin:0}.content{width:min(100%,1480px);padding:32px;margin:0 auto;flex:1}.content-auth{display:flex;flex-direction:column;justify-content:center;max-width:530px}.app-footer{display:flex;justify-content:space-between;gap:15px;padding:22px 32px;border-top:1px solid #e0e8ef;color:#7d8da0;font-size:11px;background:#f8fafc}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}.eyebrow{color:#159e9b;text-transform:uppercase;letter-spacing:1.4px;font-size:11px;font-weight:850;margin:0 0 7px}.page-header h1{font-size:clamp(24px,3vw,32px);letter-spacing:-1px;margin:0;color:#102e4b}.subtext{margin:8px 0 0;color:#77899b;font-size:13px;line-height:1.6}.page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.card,.panel{background:white;border:1px solid #e4ebf2;border-radius:15px;padding:22px;box-shadow:0 6px 24px rgba(16,45,75,.035);margin-bottom:20px}.panel h2,.panel h3{color:#163755;margin:0 0 14px;font-size:17px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.metric{position:relative;overflow:hidden;padding:22px}.metric:before{content:"";position:absolute;width:66px;height:66px;border-radius:50%;right:-24px;top:-24px;background:#e6f5f5}.metric .label{font-size:12px;color:#6d8094;font-weight:650}.metric .value{display:block;font-size:clamp(19px,2vw,27px);font-weight:800;color:#143854;letter-spacing:-.7px;margin-top:13px;overflow-wrap:anywhere}.metric .hint{font-size:11px;color:#93a3b1;margin-top:10px}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:14px 13px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:middle}th{color:#71849a;background:#f6f9fc;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.55px}tbody tr:hover{background:#f9fbfd}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td a{font-weight:700;text-decoration:none}.btn,button.btn,main button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#0a658e;color:white;border:1px solid #0a658e;padding:10px 16px;border-radius:9px;text-decoration:none;font-size:12px;font-weight:750;white-space:nowrap}button:hover,.btn:hover{filter:brightness(.96)}.btn-quiet,button.btn-quiet{background:#f3f7fa;color:#254d69;border-color:#e0eaf1}.btn-danger,button.btn-danger{background:#fff1f0;color:#ac3a35;border-color:#f5d8d5}.btn-small,button.btn-small{font-size:11px;padding:7px 11px}.inline-form{display:inline-flex;margin:2px 4px 2px 0}.filter-form{display:flex;align-items:end;gap:10px}.filter-form input{margin:0}input,select,textarea{width:100%;display:block;padding:11px 13px;border-radius:9px;border:1px solid #d6e1eb;background:#fff;color:#20374b;margin:6px 0 15px;min-height:40px}input:focus,select:focus,textarea:focus{outline:3px solid #d7f1ee;border-color:#119a95}input[type=file]{padding:13px}label{display:block;font-size:12px;font-weight:700;color:#37546d}p.helptext,.helptext,ul.helptext{font-size:12px;color:#8696a4;line-height:1.5}.errorlist{color:#bb3e42;background:#fff1f1;border-radius:7px;padding:12px 22px;font-size:12px}.alert{border:1px solid #bce7e1;background:#e7f8f4;color:#176f67;border-radius:9px;margin-bottom:20px;padding:12px 16px;font-size:13px}.note{padding:14px 16px;border-radius:10px;background:#f1f7fb;color:#587187;font-size:12px;line-height:1.65;margin-top:16px}.badge-status{display:inline-block;padding:5px 9px;border-radius:999px;background:#edf4f9;color:#3d657e;font-size:10px;font-weight:800;letter-spacing:.3px}.status-APPROVED{color:#11785a;background:#e5f7ec}.status-REJECTED{color:#ad4e40;background:#ffedeb}.status-PENDING{color:#92650c;background:#fff5da}.status-DRAFT{color:#456783;background:#eaf2f9}.empty{padding:30px 14px!important;color:#8898a6;text-align:center!important}.login-panel{width:100%;margin:auto;padding:32px}.login-heading{text-align:center;margin-bottom:24px}.login-heading h1{color:#102e4b;margin:0;font-size:28px}.login-heading p{color:#7d8fa1;font-size:13px}.auth-foot{text-align:center;color:#8294a6;font-size:12px}.stack{display:grid;gap:17px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.menu-toggle{display:none!important}.section-title{font-size:15px;color:#183950;font-weight:800;margin:0 0 14px}.small-muted{font-size:12px;color:#8293a4}.action-row{display:flex;gap:8px;flex-wrap:wrap}.records-list{display:grid;gap:10px}.record-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;border:1px solid #edf1f5;border-radius:10px}.record-row strong{color:#1c435c;font-size:13px}.record-row .details{color:#73879a;font-size:12px;margin-top:5px}.record-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.record-meta .amount{font-weight:800;color:#24425c;font-size:13px}.form-panel{max-width:760px}.form-panel form>p{margin:0 0 10px}@media(max-width:1150px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:230px;flex-basis:230px}.content{padding:24px}.topbar{padding:12px 24px}}@media(max-width:760px){.sidebar{position:fixed;z-index:20;top:0;bottom:0;left:0;transform:translateX(-100%);transition:transform .2s;overflow-y:auto;width:270px}.nav-open .sidebar{transform:translateX(0);box-shadow:12px 0 60px #061d3077}.menu-toggle{display:inline-flex!important;background:#eef4f8!important;color:#204a69!important;border-color:#d6e3ed!important}.topbar{min-height:62px;padding:10px 16px}.account-label{display:none}.content{padding:19px 14px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card,.panel{padding:17px}.metric .value{font-size:20px}.page-header{margin-bottom:18px}.app-footer{padding:16px;flex-wrap:wrap}.record-row{align-items:flex-start;flex-direction:column}.two-col{grid-template-columns:1fr}}@media(max-width:450px){.cards{grid-template-columns:1fr}.portal-link{font-size:11px}.page-header h1{font-size:24px}}

/* Combined release: advanced finance components in the ChatGPT design language. */
.filters-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 15px;padding:20px;margin-bottom:20px}
.filters-grid label{min-width:0}.filters-grid input,.filters-grid select{margin:6px 0 0}
.filter-actions{display:flex;align-items:end;gap:9px;grid-column:1/-1;flex-wrap:wrap}.filter-actions .btn{margin:0}
.htmx-indicator{opacity:0;transition:opacity .2s}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.filter-note{margin:0 0 16px}.compact-header{align-items:center;margin-bottom:15px}.compact-header h2{margin-bottom:3px}
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.insights-grid .panel{min-width:0}
.insights-grid .panel h2{font-size:14px;margin-bottom:8px}.mini-split{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #edf1f5;font-size:12px;color:#60768a}.mini-split strong{color:#19384f;font-size:16px}
.metric-mini{font-size:25px;font-weight:850;color:#13435f;margin:10px 0}.progress-track{background:#e8f0f5;overflow:hidden;border-radius:12px;height:10px;margin-bottom:10px}.progress-track span{display:block;background:linear-gradient(90deg,#1388ad,#1abc9c);height:100%;border-radius:12px}
.danger-value{color:#b43e43!important}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.chart-panel{min-width:0}.chart-panel h2{font-size:14px}.chart-canvas{height:245px;position:relative}.chart-canvas canvas{display:block;max-width:100%;width:100%;height:100%}
.aging-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.aging-grid .value{font-size:19px}.aging-grid .metric{padding:17px}
.receivable-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.receivable-filters .filter-actions{align-items:end}
.table-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.upload-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.upload-form input[type=file]{width:130px;max-width:100%;font-size:11px;padding:4px;margin:0;min-height:30px}.file-link{display:inline-block;margin-right:8px}
.approval-row{align-items:flex-start}.approval-desc{flex:1;min-width:220px}.approval-actions{width:290px;max-width:100%;flex-shrink:0}.approval-actions input{margin:6px 0 8px}.evidence{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px}.approval-actions button{min-width:95px}
.alert-error{background:#fff0f0;border-color:#f4cece;color:#9c3139}.alert-error ul{margin:10px 0 0;padding-left:18px}.services-summary{grid-column:span 2}.plain-list{list-style:none;padding:0;margin:12px 0 0}.plain-list li{padding:9px 0;border-bottom:1px solid #edf2f6;font-size:13px;color:#465e74}
.card.metric .value{font-variant-numeric:tabular-nums}table tfoot td,table tfoot th{font-weight:800;background:#edf6fa;border-top:2px solid #daeaf3}.data-table{min-width:780px}button:focus-visible,a:focus-visible{outline:3px solid #19b8aa;outline-offset:2px}
@media(max-width:1200px){.filters-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.aging-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.insights-grid{grid-template-columns:1fr 1fr}.chart-grid{grid-template-columns:1fr}}
@media(max-width:760px){.filters-grid,.receivable-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}.insights-grid{grid-template-columns:1fr}.aging-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.filters-grid,.receivable-filters,.aging-grid{grid-template-columns:1fr}.approval-actions{width:100%}.filter-actions{grid-column:1}.chart-canvas{height:215px}}


/* bt365-footer-v110: BSCPLC footer and page-view display */
.app-footer.bt365-footer-v110 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.55rem;
    text-align: center;
    line-height: 1.7;
}
.bt365-footer-v110 a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bt365-footer-v110 a:hover {
    opacity: 0.75;
}
@media (max-width: 640px) {
    .app-footer.bt365-footer-v110 {
        padding: 16px;
        gap: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
}

/* BillTrack365 footer/login compact refinement v1.3.0004 START */
.content-auth {
  padding-top: 22px;
  padding-bottom: 10px;
  min-height: auto;
}

.login-panel {
  margin-bottom: 8px;
}

.content-auth .auth-foot {
  margin-top: 10px;
  margin-bottom: 6px;
}

.content-auth > .auth-foot:last-child {
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: #6b7b8c;
}

.app-footer {
  margin-top: 10px;
  padding: 9px 16px;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #5d6c7d;
  background: #f7f9fc;
  border-top: 1px solid #d8e2eb;
}

.app-footer span,
.app-footer a {
  display: inline-flex;
  align-items: center;
}

.app-footer a {
  color: #2c5b84;
  text-decoration: none;
  font-weight: 600;
}

.app-footer a:hover,
.app-footer a:focus {
  color: #173f67;
  text-decoration: underline;
}

.app-footer .footer-sep {
  color: #a3afbb;
}

@media (max-width: 767px) {
  .content-auth {
    padding-top: 18px;
    padding-bottom: 8px;
  }

  .content-auth > .auth-foot:last-child {
    font-size: 14px;
    text-align: center;
  }

  .app-footer {
    padding: 8px 12px;
    gap: 3px 9px;
    font-size: 13px;
    line-height: 1.45;
  }
}
/* BillTrack365 footer/login compact refinement v1.3.0004 END */

/* bt365-linkedin-footer-final */
.app-footer.bt365-footer-v110 .bt365-developer {
    display: inline-flex;
    align-items: center;
    column-gap: 0.28em;
}

.app-footer.bt365-footer-v110 .bt365-developer a,
.app-footer.bt365-footer-v110 .bt365-developer a:hover,
.app-footer.bt365-footer-v110 .bt365-developer a:focus {
    color: inherit;
    font: inherit;
    text-decoration: none;
    background: transparent;
}


/* bt365-mobile-login-top-alignment-v1 */

/* Place public authentication forms near the top on mobile. */
@media screen and (max-width: 767px) {

    .content.content-auth {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-top: 18px;
        padding-bottom: 6px;
    }

    .content.content-auth .login-panel {
        margin: 0 auto 8px;
        max-width: 100%;
    }

    .content.content-auth > .auth-foot:last-child {
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .main-column .app-footer.bt365-footer-v110 {
        margin-top: 6px;
    }
}


/* bt365-mobile-login-centered-v2 */

/* Vertically center the authentication form on mobile,
   while keeping the footer at the bottom. */
@media screen and (max-width: 767px) {

    .main-column {
        min-height: 100vh;
        min-height: 100svh;
    }

    .main-column > main.content.content-auth {
        flex: 1 1 auto;
        justify-content: center;
        padding-top: 16px;
        padding-bottom: 12px;
    }

    .main-column > main.content.content-auth .login-panel {
        margin: 0 auto 8px;
        max-width: 100%;
    }

    .main-column > main.content.content-auth > .auth-foot:last-child {
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .main-column > .app-footer.bt365-footer-v110 {
        flex-shrink: 0;
        margin-top: 0;
    }
}


/* bt365-layout-step15-v1 */

/* Topbar: Bangladesh clock and quick navigation */
.bt-bd-clock {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #365772;
    background: #f1f6fa;
    border: 1px solid #dce8f0;
    border-radius: 9px;
    padding: 9px 12px;
}

.bt-dashboard-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: #176a95;
    border-radius: 9px;
    padding: 10px 14px;
    transition: background .2s ease;
}

.bt-dashboard-shortcut:hover,
.bt-dashboard-shortcut:focus-visible {
    background: #105476;
    color: #ffffff;
    text-decoration: none;
}

/* Desktop sidebar collapse button */
.bt-sidebar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 10px;
    width: 100%;
    padding: 9px;
    border: 1px solid #365a78;
    background: #193b59;
    color: #e8f3fb;
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.bt-sidebar-collapse:hover,
.bt-sidebar-collapse:focus-visible {
    background: #245478;
    color: #ffffff;
}

.bt-collapse-symbol {
    font-size: 13px;
}

/* Compact icon-only sidebar, desktop only */
@media screen and (min-width: 768px) {

    .sidebar {
        transition: width .22s ease, flex-basis .22s ease;
    }

    body.bt-sidebar-collapsed .sidebar {
        width: 76px;
        flex: 0 0 76px;
        padding-left: 9px;
        padding-right: 9px;
    }

    body.bt-sidebar-collapsed .sidebar .identity {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    body.bt-sidebar-collapsed .sidebar .identity > span:last-child {
        display: none;
    }

    body.bt-sidebar-collapsed .sidebar .nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0;
        min-height: 44px;
    }

    body.bt-sidebar-collapsed .sidebar .nav-link > span {
        font-size: 19px;
        width: 26px;
        flex: 0 0 26px;
        text-align: center;
    }

    body.bt-sidebar-collapsed .sidebar .nav-heading {
        font-size: 0;
        padding: 12px 4px 5px;
        min-height: 19px;
    }

    body.bt-sidebar-collapsed .sidebar .nav-heading::after {
        content: "";
        display: block;
        height: 1px;
        background: #355875;
    }

    body.bt-sidebar-collapsed .sidebar .sidebar-bottom {
        font-size: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    body.bt-sidebar-collapsed .sidebar .bt-collapse-label {
        display: none;
    }

    body.bt-sidebar-collapsed .sidebar .bt-sidebar-collapse {
        min-height: 42px;
    }
}

/* Mobile: preserve slide-out menu and keep clock legible */
@media screen and (max-width: 767px) {

    .bt-sidebar-collapse {
        display: none !important;
    }

    .topbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .topbar-left {
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    .bt-bd-clock {
        font-size: 11px;
        padding: 7px 9px;
    }

    .bt-dashboard-shortcut {
        font-size: 11px;
        padding: 8px 10px;
    }
}