/* PCCARE_LP3I/public/assets/css/responsive.css */

/* Large tablets / small laptops */
@media (max-width: 1024px) {
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr))}
  .tech-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .hero-title{font-size:1.9rem}
  .table{min-width: 640px}
}

/* Tablets */
@media (max-width: 900px) {
  .topbar-inner{flex-wrap:wrap; height:auto; padding: 12px 0}
  .nav-toggle{display:inline-flex}
  .nav{width:100%}
  .nav-right{width:100%; justify-content:flex-start}
  .hero-sub{max-width: 100%}
  .section-head{align-items:flex-start}
  .section-actions{width:100%}
}

/* Phones & iPhone sizes */
@media (max-width: 700px) {
  .topbar-inner{height:auto; padding: 12px 0}
  .nav{width:100%; flex-direction:column; align-items:flex-start; display:none}
  .nav-link{width:100%}
  .nav-right{width:100%; justify-content:flex-start; flex-wrap:wrap; display:none}
  .user-chip{width:100%; justify-content:flex-start}
  .topbar.nav-open .nav,
  .topbar.nav-open .nav-right{display:flex}
  .grid-2, .grid-3, .grid-4{grid-template-columns: 1fr}
  .tech-grid{grid-template-columns: 1fr}
  .hero-title{font-size:1.7rem}
  .hero-card{padding: 18px}
  .hero-mark{width:120px; right:12px; top:10px; opacity:.14}
  .card{padding: 16px}
  .section{padding-top:6px}
  .kv-row{flex-direction:column; align-items:flex-start}
  .kv-v{text-align:left; max-width:100%}
  .table{min-width: 520px}
  .dropdown-menu{min-width: 280px}
}

/* Small phones */
@media (max-width: 520px) {
  .table{min-width: 460px}
  .btn{width:100%}
  .btn.btn-ghost, .btn.btn-primary{width:100%}
  .section-actions .btn, .section-actions .select{width:100%}
}

/* Small phones */
@media (max-width: 420px) {
  .container{width: calc(100% - 22px)}
  .brand-text{display:none}
  .btn{padding:10px 12px}
  .brand-logo{width:56px; height:56px}
  .hero-card{padding: 14px}
  .card{padding: 12px}
  .table{min-width: 420px}
}