/* ===========================
   VSM CRM PRO - Global Responsive
   =========================== */

html{
    font-size:16px;
}

img{
    max-width:100%;
    height:auto;
}

table{
    width:100%;
}

.table-responsive{
    overflow-x:auto;
}

.card,
.modal-content,
.crm-card{
    border-radius:18px;
}

.btn{
    min-height:44px;
}

.form-control,
.form-select{
    min-height:44px;
}

textarea.form-control{
    min-height:120px;
}

/* Sidebar */

@media (max-width:991px){

.crm-shell{
    display:block;
}

.crm-sidebar{
    width:100%;
    position:relative;
    height:auto;
}

.crm-main{
    width:100%;
}

.crm-topbar{
    margin:10px;
    padding:15px;
}

.crm-content{
    padding:15px;
}

.crm-top-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.crm-global-search{
    width:100%;
}

}

/* Mobile */

@media (max-width:768px){

body{
    font-size:15px;
}

h1{
    font-size:1.6rem;
}

h2{
    font-size:1.35rem;
}

h3{
    font-size:1.15rem;
}

.crm-content{
    padding:12px;
}

.card{
    margin-bottom:15px;
}

.row>[class*="col"]{
    margin-bottom:15px;
}

.btn{
    width:100%;
}

.btn-group .btn{
    width:auto;
}

.table{
    font-size:14px;
}

.modal-dialog{
    margin:10px;
}

.crm-footer{
    text-align:center;
}

}

/* Small Mobile */

@media (max-width:576px){

html{
    font-size:14px;
}

.crm-topbar{
    border-radius:14px;
}

.card{
    border-radius:14px;
}

.modal-content{
    border-radius:14px;
}

.form-control,
.form-select{
    font-size:16px;
}

}

/* Ultra Small */

@media (max-width:400px){

body{
    font-size:14px;
}

h1{
    font-size:1.35rem;
}

.btn{
    font-size:.9rem;
}

}

@media (max-width: 768px) {
  .crm-shell,
  .crm-main,
  .crm-content,
  main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .crm-content {
    padding: 12px !important;
  }

  .crm-topbar {
    width: 100% !important;
    display: block !important;
  }

  .crm-top-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .crm-top-actions .btn,
  .crm-top-actions form,
  .crm-top-actions .dropdown {
    flex: 1 1 auto;
  }

  .crm-card,
  .card,
  .panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    min-width: 760px;
  }

  .table-responsive::after {
    content: "Swipe left/right to view full table";
    display: block;
    font-size: 11px;
    color: #64748b;
    padding: 8px 4px 2px;
    text-align: center;
  }
}