body.bg{background:#f5f7fb;}
.auth-card{max-width:420px;margin:10vh auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.08);}
.auth-card input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;margin-bottom:10px;}
.btn.primary{background:#1b4dff;color:#fff;border:none;border-radius:10px;padding:10px 12px;width:100%;}

aside .nav-link{
  padding-top: .25rem;
  padding-bottom: .25rem;
  margin-bottom: 0;
}

aside .nav .text-uppercase{
  margin-top: .5rem !important;
  margin-bottom: .25rem;
}

@media (max-width: 992px){
  .app-layout{
    position: relative;
  }
  .app-sidebar{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 82vw !important;
    max-width: 320px;
    min-width: 0 !important;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1050;
    overflow-y: auto !important;
  }
  .app-layout.sidebar-open .app-sidebar{
    transform: translateX(0);
  }
  .app-sidebar-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
  }
  .app-layout.sidebar-open .app-sidebar-backdrop{
    display: block;
  }
  .app-layout main{
    padding: .75rem !important;
  }
  .app-header{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .5rem;
  }
}

@media (max-width: 768px){
  .os-view-header{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .75rem;
  }
  .os-view-actions{
    width: 100%;
    text-align: left !important;
  }
  .os-view-action-bar{
    justify-content: flex-start !important;
  }
  .os-view-action-bar .btn,
  .os-view-action-bar .btn-group,
  .os-view-action-bar form,
  .os-view-action-bar .dropdown{
    width: 100%;
  }
  .os-view-action-bar .btn-group > .btn{
    width: 100%;
  }
  .table{
    font-size: .85rem;
  }
  .table td, .table th{
    padding: .35rem;
  }
  .os-form .table{
    min-width: 860px;
  }
  .os-form .btn{
    width: 100%;
  }
  .os-form .btn.btn-sm{
    width: auto;
  }
  .navbar-portal .container,
  .navbar-portal .container-fluid{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .5rem;
  }
  .navbar-portal .navbar-brand{
    white-space: normal;
  }
  .order-card .row,
  .order-header .d-flex,
  .info-card .d-flex{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .5rem;
  }
  .order-card .text-end,
  .order-header .text-end{
    text-align: left !important;
  }
  .stat-card{
    padding: 18px;
  }
  .stat-card h3{
    font-size: 1.8rem;
  }
  .alert-approval{
    padding: 18px !important;
  }
  .alert-approval h2{
    font-size: 1.3rem !important;
  }
  .status-timeline{
    padding-left: 20px;
  }
  .timeline-item::before{
    left: -20px;
  }
  .list-group-item .d-flex{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .5rem;
  }
}