/* SmartPay360 V3 — Bochat UX Design System
   Blueprint Blue #0075D8 | Safety Gold #FDDC01
   2026-08-17
*/
:root{
  --bo-blue:#0075D8;
  --bo-blue-700:#005EAE;
  --bo-blue-800:#004C90;
  --bo-blue-050:#EEF7FF;
  --bo-gold:#FDDC01;
  --bo-gold-700:#C9AA00;
  --bo-ink:#132238;
  --bo-text:#26364D;
  --bo-muted:#718096;
  --bo-bg:#F3F7FB;
  --bo-card:#FFFFFF;
  --bo-line:#DDE7F1;
  --bo-line-soft:#EAF0F6;
  --bo-green:#12805C;
  --bo-red:#C63B42;
  --bo-orange:#C46A14;
  --bo-purple:#6E56CF;
  --bo-radius-xs:8px;
  --bo-radius-sm:12px;
  --bo-radius:16px;
  --bo-radius-lg:22px;
  --bo-shadow:0 10px 30px rgba(19,34,56,.075);
  --bo-shadow-lg:0 18px 55px rgba(19,34,56,.14);
  --bo-nav-h:68px;
  --bo-side-w:268px;
  --bo-side-rail:84px;
}
html{background:var(--bo-bg);scroll-behavior:smooth}
body{
  background:var(--bo-bg)!important;color:var(--bo-text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body,button,input,select,textarea{letter-spacing:-.008em}
a{color:var(--bo-blue)} a:hover{color:var(--bo-blue-700)}
::selection{background:rgba(0,117,216,.18)}

/* Shell */
.navbar.fixed-top{
  min-height:var(--bo-nav-h)!important;height:var(--bo-nav-h)!important;
  background:var(--bo-blue)!important;box-shadow:0 5px 22px rgba(0,66,126,.22)!important;
  border:0!important;padding:0 12px!important;
}
.navbar>.container-fluid{gap:10px;flex-wrap:nowrap!important}
.navbar-brand{font-weight:900!important;font-size:1.08rem!important;letter-spacing:-.035em!important;white-space:nowrap}
.navbar-brand img{border-radius:10px!important;box-shadow:0 2px 10px rgba(0,0,0,.13)}
.sp-branch-chip{
  background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.22)!important;
  font-weight:800!important;font-size:.72rem!important;max-width:190px!important
}
/* top menu belongs in sidebar in Bochat layout */
@media(min-width:992px){
  #navbarCollapse>.navbar-nav.me-auto{display:none!important}
  #navbarCollapse{display:flex!important;justify-content:flex-end;gap:10px;min-width:0}
  #navbarCollapse>form[role="search"]{margin:0 auto!important;position:absolute;left:50%;transform:translateX(-50%);width:min(38vw,560px);z-index:2}
  #navbarCollapse>form[role="search"] .form-control{
    height:42px!important;border:0!important;background:rgba(255,255,255,.96)!important;
    box-shadow:0 3px 14px rgba(0,40,80,.12)!important;padding-left:16px!important;font-size:.9rem!important
  }
  #navbarCollapse>form[role="search"] .btn{height:42px!important;min-height:42px!important;border:0!important;background:var(--bo-gold)!important;color:#1F2937!important}
}
.navbar .nav-link{font-weight:750!important;border-radius:12px!important}
.navbar .dropdown-menu{background:#fff!important;border:1px solid var(--bo-line)!important;box-shadow:var(--bo-shadow-lg)!important}
.navbar .dropdown-item{color:var(--bo-text)!important;font-weight:650!important}
.navbar .dropdown-item:hover{background:var(--bo-blue-050)!important;color:var(--bo-blue)!important}
#sidebarPin{border:1px solid rgba(255,255,255,.35)!important;border-radius:11px!important;width:42px;height:42px;padding:0!important}
#sidebarPin:hover{background:rgba(255,255,255,.14)!important}

/* Desktop sidebar: visible workspace rail */
@media(min-width:992px){
  .sidebar-peek-zone{display:none!important}
  .sidebar-desktop{
    display:block!important;transform:none!important;top:var(--bo-nav-h)!important;
    height:calc(100vh - var(--bo-nav-h))!important;width:var(--bo-side-w)!important;
    background:#fff!important;border-right:1px solid var(--bo-line)!important;
    box-shadow:4px 0 20px rgba(23,46,79,.035)!important;padding:14px 12px 34px!important;
    transition:width .2s ease!important
  }
  .content-wrapper{
    margin-left:var(--bo-side-w)!important;padding:calc(var(--bo-nav-h) + 14px) 18px 48px!important;
    background:var(--bo-bg)!important;transition:margin-left .2s ease!important
  }
  body:not(.sidebar-pinned) .sidebar-desktop{width:var(--bo-side-rail)!important}
  body:not(.sidebar-pinned) .content-wrapper{margin-left:var(--bo-side-rail)!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link{justify-content:center!important;padding:12px 10px!important;gap:0!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link>span{font-size:0!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link>span>i{font-size:1rem!important;margin:0!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link:not([data-bs-toggle]){font-size:0!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link:not([data-bs-toggle]) i{font-size:1rem!important;margin:0!important}
  body:not(.sidebar-pinned) .sidebar-desktop .nav-link>.fa-chevron-down{display:none!important}
  body:not(.sidebar-pinned) .sidebar-desktop .collapse{display:none!important}
}
.sidebar-desktop .nav{gap:3px}
.sidebar-desktop .nav-link{
  min-height:45px!important;border-radius:12px!important;padding:10px 12px!important;
  color:#45566F!important;font-size:.87rem!important;font-weight:760!important;gap:10px!important;
  transition:background .14s ease,color .14s ease,transform .14s ease!important
}
.sidebar-desktop .nav-link i:first-child{width:21px;text-align:center;color:#7790AB}
.sidebar-desktop .nav-link:hover{background:var(--bo-blue-050)!important;color:var(--bo-blue)!important;transform:none!important}
.sidebar-desktop .nav-link:hover i:first-child{color:var(--bo-blue)!important}
.sidebar-desktop .nav-link.active,.sidebar-desktop .nav-link[aria-current="page"]{
  background:var(--bo-blue)!important;color:#fff!important;box-shadow:0 7px 18px rgba(0,117,216,.21)!important
}
.sidebar-desktop .nav-link.active i,.sidebar-desktop .nav-link[aria-current="page"] i{color:#fff!important}
.sidebar-desktop .collapse{margin:2px 0 6px 22px;padding-left:12px;border-left:2px solid #E5EDF5}
.sidebar-desktop .collapse .nav-link{min-height:36px!important;padding:7px 9px!important;font-size:.79rem!important;font-weight:670!important}
.sidebar-desktop hr{border-color:var(--bo-line)!important;opacity:1}

/* Workspace / containers */
.content-wrapper{min-height:100vh!important;background:var(--bo-bg)!important}
.main-content{padding-top:0!important;padding-bottom:50px!important}
.container,.container-fluid{max-width:1720px}
.page-header,.page-hero,.hero-card,.sp-page-header{
  border:1px solid var(--bo-line-soft)!important;border-radius:var(--bo-radius-lg)!important;background:#fff!important;
  box-shadow:var(--bo-shadow)!important;padding:20px!important
}
.page-title,h1,h2,h3,h4,h5,h6{color:var(--bo-ink);font-weight:850;letter-spacing:-.025em}
.text-muted{color:var(--bo-muted)!important}.small{font-weight:550}

/* Cards */
.card{
  border:1px solid var(--bo-line-soft)!important;border-radius:var(--bo-radius)!important;background:var(--bo-card)!important;
  box-shadow:var(--bo-shadow)!important;overflow:hidden;transition:box-shadow .15s ease,transform .15s ease
}
a .card:hover,.card.sp-clickable:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(19,34,56,.105)!important}
.card-header{background:#fff!important;border-bottom:1px solid var(--bo-line-soft)!important;font-weight:850!important;padding:15px 18px!important}
.card-body{padding:18px!important}.card-footer{background:#FBFCFE!important;border-top:1px solid var(--bo-line-soft)!important}
.sp-kpi-card{position:relative;min-height:126px}
.sp-kpi-card:after{content:"";position:absolute;right:-28px;top:-42px;width:120px;height:120px;border-radius:50%;background:rgba(0,117,216,.055)}
.sp-kpi-value{font-size:clamp(1.24rem,2vw,1.8rem);font-weight:900;letter-spacing:-.04em;color:var(--bo-ink)}
.sp-kpi-label{text-transform:uppercase;letter-spacing:.055em;color:var(--bo-muted);font-size:.69rem;font-weight:850}
.sp-icon-tile{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--bo-blue-050);color:var(--bo-blue);flex:0 0 auto}

/* Buttons */
.btn{border-radius:11px!important;font-weight:800!important;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:none!important}
.btn-primary{background:var(--bo-blue)!important;border-color:var(--bo-blue)!important;color:#fff!important}
.btn-primary:hover{background:var(--bo-blue-700)!important;border-color:var(--bo-blue-700)!important}
.btn-warning,.sp-primary-action,.btn-bochat-action{
  background:var(--bo-gold)!important;border-color:var(--bo-gold)!important;color:#172033!important;font-weight:900!important
}
.btn-warning:hover,.sp-primary-action:hover,.btn-bochat-action:hover{background:#EBCB00!important;border-color:#EBCB00!important;color:#172033!important}
.btn-light{background:#fff!important;border-color:var(--bo-line)!important;color:var(--bo-text)!important}
.btn-outline-primary{border-color:#A9D0F4!important;color:var(--bo-blue)!important}.btn-outline-primary:hover{background:var(--bo-blue-050)!important;color:var(--bo-blue)!important}
.btn-sm{min-height:34px!important;border-radius:9px!important;font-size:.78rem!important}

/* Inputs */
.form-label{font-size:.77rem;font-weight:850;color:#4A5D76;margin-bottom:6px}
.form-control,.form-select,.input-group-text{
  min-height:45px;border:1px solid #D4E0EB!important;border-radius:11px!important;background:#fff!important;color:var(--bo-ink)!important;font-weight:590
}
.form-control::placeholder{color:#9AABBD}.form-control:focus,.form-select:focus{border-color:#68AFE9!important;box-shadow:0 0 0 .22rem rgba(0,117,216,.11)!important}
.input-group>.form-control:not(:last-child),.input-group>.form-select:not(:last-child){border-radius:11px 0 0 11px!important}
.input-group>.btn:last-child,.input-group>.input-group-text:last-child{border-radius:0 11px 11px 0!important}
.form-check-input:checked{background-color:var(--bo-blue);border-color:var(--bo-blue)}

/* Tables */
.table-responsive{border:1px solid var(--bo-line)!important;border-radius:14px!important;background:#fff;box-shadow:0 5px 20px rgba(20,44,75,.035);overflow:auto}
.table{margin:0!important;font-size:.86rem!important;color:var(--bo-text)!important}
.table>:not(caption)>*>*{padding:.76rem .82rem!important;border-bottom-color:#EAF0F6!important;vertical-align:middle!important}
.table thead th{
  position:relative;background:#F5F8FC!important;color:#5F7187!important;text-transform:uppercase;letter-spacing:.052em;
  font-size:.69rem!important;font-weight:900!important;white-space:nowrap;border-bottom:1px solid #DBE5EF!important
}
.table tbody td{font-weight:590}.table tbody tr:last-child td{border-bottom:0}.table-hover>tbody>tr:hover>*{background:#F6FAFE!important}
.table .btn{white-space:nowrap}

/* Badges / alerts */
.badge{border-radius:999px!important;padding:.46em .74em!important;font-weight:850!important;letter-spacing:.01em}
.bg-success,.text-bg-success{background-color:#E6F6F0!important;color:#08714D!important}.bg-warning,.text-bg-warning{background-color:#FFF7C8!important;color:#7D6500!important}.bg-danger,.text-bg-danger{background-color:#FBEAEB!important;color:#A82E35!important}.bg-info,.text-bg-info{background-color:#E9F5FD!important;color:#12658F!important}.bg-secondary,.text-bg-secondary{background:#EDF1F5!important;color:#526276!important}
.alert{border-radius:14px!important;border-width:1px!important;font-weight:620}

/* Dropdowns */
.dropdown-menu{border:1px solid var(--bo-line)!important;border-radius:14px!important;box-shadow:var(--bo-shadow-lg)!important;padding:7px!important}
.dropdown-item{border-radius:9px!important;padding:9px 11px!important;font-weight:650!important}.dropdown-item:hover{background:var(--bo-blue-050)!important;color:var(--bo-blue)!important}

/* Modals / quick previews */
.modal-backdrop.show{opacity:.38!important}.modal-dialog{display:flex;align-items:center;min-height:calc(100% - 2rem)}
.modal-content{border:1px solid rgba(221,231,241,.75)!important;border-radius:20px!important;box-shadow:0 30px 90px rgba(14,35,62,.24)!important;overflow:hidden}
.modal-header{background:#fff;border-bottom:1px solid var(--bo-line-soft)!important;padding:16px 18px!important}.modal-title{font-weight:900!important;color:var(--bo-ink)!important}
.modal-body{padding:18px!important}.modal-footer{background:#FBFCFE;border-top:1px solid var(--bo-line-soft)!important;padding:12px 18px!important}

/* Mobile drawer */
#mobileMenu{width:min(92vw,390px)!important;border:0!important;background:#fff!important}
#mobileMenu .offcanvas-header{background:var(--bo-blue)!important;color:#fff!important;min-height:74px;padding:16px 18px!important}
#mobileMenu .offcanvas-title{font-size:1.05rem;font-weight:900!important;color:#fff!important}
#mobileMenu .btn-close{filter:brightness(0) invert(1);opacity:.9}
#mobileMenu .offcanvas-body{padding:14px!important;background:#F8FBFE!important}
#mobileMenu form[role="search"]{background:#fff;border:1px solid var(--bo-line);border-radius:13px;padding:6px;box-shadow:0 6px 18px rgba(19,34,56,.05)}
#mobileMenu form[role="search"] .form-control{border:0!important;box-shadow:none!important;background:transparent!important}
#mobileMenu .list-group{border-radius:14px;overflow:hidden;border:1px solid var(--bo-line);background:#fff}
#mobileMenu .list-group-item{padding:12px 13px!important;font-weight:750!important;color:#40546D!important;background:#fff!important;border-bottom:1px solid #EEF2F6!important}
#mobileMenu .list-group-item i{width:22px;color:var(--bo-blue)}
#mobileMenu .accordion{border:1px solid var(--bo-line);border-radius:14px;overflow:hidden;background:#fff}
#mobileMenu .accordion-item{border-color:#EDF2F7!important}.accordion-button{font-weight:800!important;color:#3D5067!important}.accordion-button:not(.collapsed){background:var(--bo-blue-050)!important;color:var(--bo-blue)!important;box-shadow:none!important}.accordion-button:focus{box-shadow:none!important}

/* Bottom navigation */
.mobile-bottom-bar{
  height:66px!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0))!important;background:rgba(255,255,255,.97)!important;
  border-top:1px solid var(--bo-line)!important;box-shadow:0 -8px 25px rgba(19,34,56,.09)!important;backdrop-filter:blur(14px)
}
.mobile-bottom-bar .btn{height:54px!important;min-height:54px!important;border-radius:13px!important;color:#64768C!important;font-weight:800!important;flex-direction:column;gap:1px!important}
.mobile-bottom-bar .btn i{font-size:1.05rem}.mobile-bottom-bar .label{font-size:.65rem!important;font-weight:800!important;color:inherit!important}.mobile-bottom-bar .btn:active,.mobile-bottom-bar .btn:hover{background:var(--bo-blue-050)!important;color:var(--bo-blue)!important}

/* Generic command / floating quick action */
.sp-command-hint{font-size:.68rem;font-weight:850;color:#718096;background:#EDF3F8;border:1px solid #DDE6EF;border-radius:7px;padding:2px 6px}
.sp-fab{position:fixed;right:22px;bottom:24px;width:54px;height:54px;border-radius:17px!important;background:var(--bo-gold)!important;color:#172033!important;border:0!important;box-shadow:0 15px 35px rgba(173,145,0,.28)!important;z-index:1030}

/* Mobile record cards for safe simple tables. JS adds .sp-mobile-card-table */
@media(max-width:767.98px){
  :root{--bo-nav-h:60px}
  body{font-size:14px!important}
  .navbar.fixed-top{height:var(--bo-nav-h)!important;min-height:var(--bo-nav-h)!important;padding:0 8px!important}
  .navbar-brand{font-size:.93rem!important}.navbar-brand img{width:25px!important;height:25px!important}.sp-branch-chip{display:none!important}
  .navbar-toggler{display:none!important}
  .content-wrapper{margin-left:0!important;padding:calc(var(--bo-nav-h) + 9px) 9px calc(80px + env(safe-area-inset-bottom,0))!important;background:var(--bo-bg)!important}
  .main-content,.container,.container-fluid{padding-left:0!important;padding-right:0!important}
  .row{--bs-gutter-x:.8rem}.card{border-radius:14px!important}.card-body{padding:14px!important}.card-header{padding:13px 14px!important}
  h1{font-size:1.55rem!important}h2{font-size:1.35rem!important}h3{font-size:1.18rem!important}h4,h5{font-size:1rem!important}
  .btn{min-height:43px}.form-control,.form-select{font-size:16px!important;min-height:46px!important}
  .table-responsive{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  table.sp-mobile-card-table{display:block!important;background:transparent!important}
  table.sp-mobile-card-table thead{display:none!important}
  table.sp-mobile-card-table tbody{display:grid!important;gap:10px!important}
  table.sp-mobile-card-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0!important;background:#fff!important;border:1px solid var(--bo-line)!important;border-radius:14px!important;box-shadow:0 7px 22px rgba(19,34,56,.055)!important;overflow:hidden}
  table.sp-mobile-card-table td{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-width:0!important;padding:10px 12px!important;border-bottom:1px solid #EDF2F7!important;font-size:.82rem!important;word-break:break-word}
  table.sp-mobile-card-table td::before{content:attr(data-label);font-size:.62rem;line-height:1.2;text-transform:uppercase;letter-spacing:.055em;color:#8292A5;font-weight:900;margin-bottom:3px}
  table.sp-mobile-card-table td:last-child{grid-column:1/-1!important;border-bottom:0!important;flex-direction:row!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
  table.sp-mobile-card-table td:last-child::before{width:100%}
  .modal-dialog{margin:0!important;align-items:flex-end!important;min-height:100%!important;max-width:none!important}
  .modal-content{border-radius:22px 22px 0 0!important;border-bottom:0!important;max-height:94dvh!important;overflow:auto!important}
  .modal-header{position:sticky;top:0;z-index:3}.modal-footer{position:sticky;bottom:0;z-index:3}
  .modal.sp-modal-full .modal-dialog{align-items:stretch!important}.modal.sp-modal-full .modal-content{border-radius:0!important;min-height:100dvh!important;max-height:100dvh!important}
  .sp-fab{right:14px;bottom:80px}
}

/* Print */
@media print{
  .navbar,.sidebar-desktop,.sidebar-peek-zone,.mobile-bottom-bar,.offcanvas,.sp-fab,.btn,.no-print{display:none!important}
  body,.content-wrapper,.main-content{background:#fff!important;padding:0!important;margin:0!important}
  .card{box-shadow:none!important;border:1px solid #D7DEE7!important;break-inside:avoid}
  .table-responsive{overflow:visible!important;box-shadow:none!important}.table thead th{background:#F3F5F8!important;color:#222!important}
}

/* Dashboard composition */
.sp-dashboard-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px;border-radius:22px;background:linear-gradient(125deg,var(--bo-blue) 0%,#005CA9 100%);color:#fff;box-shadow:0 15px 38px rgba(0,91,169,.18)}
.sp-dashboard-hero:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-110px;top:-170px;background:rgba(255,255,255,.08)}
.sp-dashboard-hero h1{color:#fff!important;font-size:clamp(1.5rem,3vw,2.25rem)!important}.sp-eyebrow,.sp-section-kicker{font-size:.64rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.sp-eyebrow{color:#CFE9FF;margin-bottom:6px}.sp-section-kicker{color:var(--bo-blue);margin-bottom:2px}.sp-hero-meta{display:flex;gap:16px;flex-wrap:wrap;color:#D9EEFF;font-size:.8rem;font-weight:700}.sp-hero-meta i{margin-right:5px}.sp-hero-actions{display:flex;gap:9px;position:relative;z-index:1;flex-wrap:wrap}.sp-dashboard-hero .btn-light{border:0!important;background:rgba(255,255,255,.14)!important;color:#fff!important}.sp-dashboard-hero .btn-light:hover{background:rgba(255,255,255,.22)!important}
.sp-quick-action{display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 12px;border:1px solid var(--bo-line);border-radius:13px;background:#fff;color:#33475F;font-weight:800;transition:.14s ease}.sp-quick-action:hover{background:var(--bo-blue-050);border-color:#B9D9F4;color:var(--bo-blue);transform:translateY(-1px)}.sp-quick-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:var(--bo-blue-050);color:var(--bo-blue);flex:0 0 auto}.sp-attention-card{border-top:3px solid var(--bo-gold)!important}.sp-attention-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--bo-line-soft);background:#FBFCFE;border-radius:12px;padding:12px 13px;color:#40536B;font-size:.82rem;font-weight:750}.sp-attention-row:hover{background:#FFFBE5;color:#514400;border-color:#F4E28D}.sp-attention-row span i{width:23px;color:var(--bo-blue)}.sp-attention-row strong{color:var(--bo-ink);font-size:.84rem}.sp-module-card .card-body{min-height:112px}.sp-activity-list .list-group-item{padding:13px 15px;border-color:var(--bo-line-soft);color:var(--bo-text)}.sp-activity-list .list-group-item:hover{background:#F8FBFE}.sp-activity-dot{width:9px;height:9px;border-radius:50%;background:var(--bo-blue);box-shadow:0 0 0 5px rgba(0,117,216,.08);margin-top:6px;flex:0 0 auto}.min-w-0{min-width:0}
@media(max-width:767.98px){.sp-dashboard-hero{padding:18px;align-items:flex-start;flex-direction:column}.sp-hero-actions{width:100%}.sp-hero-actions .btn{flex:1}.sp-hero-meta{gap:9px 13px}.sp-kpi-card{min-height:116px}.sp-kpi-card .sp-icon-tile{width:36px;height:36px}.sp-kpi-value{font-size:1.12rem}.sp-quick-action{min-height:62px;padding:9px}.sp-quick-action>.fa-arrow-right{display:none}}

/* Compatibility normalization for legacy pages nested inside the global shell. */
.content-wrapper .main-content{margin-left:0!important;padding-top:0!important}
.content-wrapper .main-content[style*="margin-left"]{margin-left:0!important}
.content-wrapper .main-content[style*="padding:80px"]{padding-top:0!important}