/* ==== KF PAN Find - mobile layer (applies below 768px only) ==== */
:root{--m-navy:#002a5c;--m-navy-2:#013a7a;--m-yellow:#ffc928;--m-bg:#f4f6fb;--m-card:#fff;--m-text:#1d2433;--m-muted:#6b7385}
@media (max-width: 767.98px){
  html,body{background:var(--m-bg);overflow-x:hidden;font-family:'Poppins','Segoe UI',Arial,sans-serif;color:var(--m-text)}
  body{padding-bottom:84px}
  /* hide desktop sidebar & wide header parts */
  .app-aside,.aside-backdrop,.hamburger[data-toggle="aside-menu"],.account-summary,.top-bar-item-right .header-nav{display:none!important}
  .app{padding:0}
  .app-main,.app-content,.main-content{padding:0 16px!important;margin:0!important;width:100%!important;max-width:100%!important;flex:none!important}
  .app-header,.app-header-dark{position:sticky;top:0;z-index:1030;background:var(--m-navy)!important;box-shadow:0 2px 10px rgba(0,0,0,.15)}
  .top-bar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
  .top-bar-brand .logo{height:36px!important}
  .top-bar-item-right .btn-dark{background:var(--m-yellow)!important;color:var(--m-navy)!important;border:0;border-radius:20px;font-weight:700}
  .btn-account .tile{background:var(--m-yellow)!important;color:var(--m-navy)}
  .page-title-bar{background:var(--m-navy);color:#fff;border-radius:0 0 22px 22px;padding:14px 16px;margin:0 -16px 16px;text-align:center;font-weight:700}
  .page-title-bar h1,.page-title-bar h2,.page-title-bar h3,.page-title-bar .page-title{color:#fff;font-size:1.05rem;margin:0}
  .page-title-bar .breadcrumb{display:none}
  /* cards */
  .card{border:0!important;border-radius:18px!important;box-shadow:0 6px 18px rgba(0,42,92,.08)!important;margin-bottom:16px;overflow:hidden}
  .card-header{background:var(--m-navy)!important;color:#fff!important;border-radius:0!important;font-weight:600}
  .card-header .btn{display:none}
  .row{margin-left:-8px;margin-right:-8px}
  .row>[class*="col-"]{padding-left:8px;padding-right:8px;width:100%;max-width:100%;flex:0 0 100%}
  .row>[class*="col-"].mb-4{margin-bottom:0!important}
  /* forms */
  .form-control{height:52px;border-radius:14px!important;background:#fff;border:1.5px solid #dfe5f0!important;font-size:16px;padding:0 16px}
  .form-control:focus{border-color:var(--m-navy-2)!important;box-shadow:0 0 0 3px rgba(1,58,122,.12)!important}
  label{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--m-muted)}
  .btn{border-radius:14px!important;min-height:50px;font-weight:700}
  .btn-primary,button[type=submit].btn-primary{background:var(--m-navy)!important;border-color:var(--m-navy)!important;color:#fff!important}
  .btn-block,.btn-lg{width:100%}
  .alert{border-radius:14px;border:0;font-size:14px}
  .table{font-size:14px}
  /* bottom nav */
  .m-bottom-nav{position:fixed;left:12px;right:12px;bottom:12px;height:64px;background:var(--m-navy);border-radius:22px;display:flex;justify-content:space-around;align-items:center;z-index:1040;box-shadow:0 10px 24px rgba(0,42,92,.35)}
  .m-bottom-nav a{color:#b8c7e0;text-decoration:none;font-size:11px;text-align:center;flex:1;padding:6px 0}
  .m-bottom-nav a i{display:block;font-size:19px;margin-bottom:3px}
  .m-bottom-nav a.active{color:var(--m-yellow)}
  /* auth (login) */
  .auth{background:var(--m-navy)}
  .auth-header{border-radius:0 0 40px 40px;background-color:#fff!important}
}
/* dark-blue login screen similar to design */
@media (max-width:767.98px){
  .auth-form .form-control{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)!important}
  .auth-form label,.auth-form .form-text{color:#c7d3e8}
  .auth-form .btn-primary{background:var(--m-yellow)!important;color:var(--m-navy)!important;border-color:var(--m-yellow)!important}
}