@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap');

:root {
  --sans-serif: "Sarabun", sans-serif;
  --serif: "Tinos", serif;

  --primary:#3b82f6;
  --primary-dark:#2563eb;

  --border:#eef0f3;
  --text-muted:#6c757d;
}

body{
  font-family:var(--sans-serif);
  font-size:.875rem;
  background:#f5f7fb;
  color:#333;
}

/* =========================
   ICON
========================= */

.feather{
  width:16px;
  height:16px;
  vertical-align:text-bottom;
}


/* =========================
   SIDEBAR
========================= */

.sidebar{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:100;
  padding:48px 0 0;
  background:#ffffff;

  box-shadow:inset -1px 0 0 rgba(0,0,0,.05);
}

@media (max-width:767.98px){
  .sidebar{
    top:5rem;
  }
}

.sidebar-sticky{
  position:relative;
  top:0;
  height:calc(100vh - 48px);
  padding-top:.5rem;
  overflow-x:hidden;
  overflow-y:auto;
}

.sidebar .nav-link{

  font-weight:500;
  color:#444;

  border-radius:8px;
  margin:2px 10px;
  padding:8px 12px;

  transition:all .15s ease;
}

.sidebar .nav-link:hover{

  background:#f1f5ff;
  color:var(--primary);
}

.sidebar .nav-link.active{

  background:#e8f0ff;
  color:var(--primary);
}

.sidebar .nav-link .feather{
  margin-right:4px;
  color:#727272;
}

.sidebar-heading{
  font-size:.75rem;
  text-transform:uppercase;
}


/* =========================
   NAVBAR
========================= */

.navbar-brand{
  padding-top:.75rem;
  padding-bottom:.75rem;
  font-size:1rem;

  background:rgba(0,0,0,.25);

  box-shadow:inset -1px 0 0 rgba(0,0,0,.25);
}

.navbar{
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.navbar .navbar-toggler{
  top:.25rem;
  right:1rem;
}

.navbar .form-control{
  padding:.75rem 1rem;
  border-width:0;
  border-radius:0;
}


/* =========================
   DARK SEARCH
========================= */

.form-control-dark{

  color:#fff;
  background-color:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.1);

}

.form-control-dark:focus{

  border-color:transparent;

  box-shadow:0 0 0 3px rgba(255,255,255,.25);

}


/* =========================
   FILTER BOX
========================= */

.filter-box{

  background:#ffffff;

  border-radius:10px;

  padding:16px 18px;

  border:1px solid var(--border);

  box-shadow:0 2px 10px rgba(0,0,0,.06);

  display:flex;
  gap:14px;
  align-items:end;
  flex-wrap:wrap;
  justify-content:center;

  margin-top:10px;
}


/* form group */

.filter-box .form-group{

  display:flex;
  flex-direction:column;
  min-width:160px;

}

/* label */

.filter-box label{

  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:4px;

}

/* select */

.filter-box .form-control{

  height:38px;

  border-radius:8px;

  border:1px solid #dfe3e8;

  padding:6px 10px;

  font-size:14px;

  background:#fff;

  transition:all .2s ease;

}

/* focus */

.filter-box .form-control:focus{

  border-color:var(--primary);

  box-shadow:0 0 0 3px rgba(59,130,246,.15);

  outline:none;

}


/* button */

.filter-box .btn{

  height:38px;

  border-radius:8px;

  padding:0 16px;

  font-size:14px;

  font-weight:600;

  display:flex;
  align-items:center;

}

/* load button */

.btn-load{

  background:var(--primary);
  border:none;
  color:white;

  transition:.2s;

}

.btn-load:hover{

  background:var(--primary-dark);

}


/* =========================
   DASHBOARD CARD
========================= */

.card-dashboard{

  background:#ffffff;

  border-radius:12px;

  padding:18px 20px;

  margin-top:16px;

  border:1px solid var(--border);

  box-shadow:0 4px 14px rgba(0,0,0,.05);

  transition:.2s;

}

.card-dashboard:hover{

  transform:translateY(-2px);

  box-shadow:0 8px 20px rgba(0,0,0,.08);

}


/* title */

.card-title{

  font-size:16px;

  font-weight:700;

  color:#344054;

  margin-bottom:12px;

}


/* =========================
   CHART BOX
========================= */

.chart-box{

  width:100%;

  max-width:1000px;

  margin:auto;

  background:#ffffff;

  border-radius:12px;

  padding:20px;

  border:1px solid var(--border);

  box-shadow:0 4px 14px rgba(0,0,0,.05);

}


/* =========================
   DATATABLE
========================= */

.dataTables_wrapper .dataTables_filter input{

  border-radius:8px;

  border:1px solid #dfe3e8;

  padding:6px 10px;

}

.dataTables_wrapper .dataTables_length select{

  border-radius:8px;

  border:1px solid #dfe3e8;

}

table.dataTable tbody tr:hover{

  background:#f5f9ff;

}


/* =========================
   TEMPERATURE COLOR
========================= */

.temp-normal{

  color:#16a34a;

  font-weight:600;

}

.temp-warning{

  color:#f59e0b;

  font-weight:600;

}

.temp-danger{

  color:#ef4444;

  font-weight:700;

}


/* =========================
   PLACEHOLDER IMG
========================= */

.bd-placeholder-img{

  font-size:1.125rem;

  text-anchor:middle;

  user-select:none;

}

@media (min-width:768px){

  .bd-placeholder-img-lg{

    font-size:3.5rem;

  }

}


/* =========================
   MOBILE OPTIMIZE
========================= */

@media (max-width:768px){

  body{
    font-size:14px;
  }

  /* ===== Sidebar ===== */

  .sidebar{
    position:fixed;
    left:-260px;
    width:260px;
    transition:all .3s ease;
    z-index:1050;
  }

  .sidebar.show{
    left:0;
  }

  /* overlay */

  .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.3);
    z-index:1040;
    display:none;
  }

  .sidebar-overlay.show{
    display:block;
  }


  /* ===== Filter Box ===== */

  .filter-box{

    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px;

  }

  .filter-box .form-group{

    width:100%;
    min-width:unset;

  }

  .filter-box .btn{

    width:100%;
    justify-content:center;

  }


  /* ===== Chart ===== */

  .chart-box{

    padding:12px;
    border-radius:10px;

  }


  /* ===== Card ===== */

  .card-dashboard{

    padding:14px;
  }


  /* ===== Table Scroll ===== */

  .table-responsive{

    overflow-x:auto;

  }

  table{
    min-width:600px;
  }

}