/* -------------------------
       Variables & base styles
       ------------------------- */
    :root{
      --sidebar-width: 270px;
      --bg: #f6f7fb;
      --card-radius: .5rem;
      --muted: #6c757d;
      --accent: #0d6efd;
      --shadow: 0 6px 18px rgba(13,110,253,0.06);
    }
    html,body{height:100%}
    body{
      min-height:100vh;
      background:var(--bg);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* -------------------------
       Layout
       ------------------------- */
    .sidebar{
      width:var(--sidebar-width);
      min-height:100vh;
      background:#fff;
      border-right:1px solid rgba(0,0,0,.04);
      padding:1rem;
      position:fixed;
      left:0;
      top:0;
      bottom:0;
      overflow:auto;
      transition:transform .22s ease;
      z-index:1045;
    }
    .sidebar .brand{display:flex;gap:.5rem;align-items:center}
    .sidebar .nav-link{color:var(--muted);border-radius:.375rem}
    .sidebar .nav-link.active{background:rgba(13,110,253,0.08);color:var(--accent)}
    main{
      margin-left:var(--sidebar-width);
      padding:1.25rem;
      transition:margin-left .22s ease;
    }

    /* -------------------------
       Mobile behaviour
       ------------------------- */
    .mobile-hide{display:none}
    .content-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1040;display:none;
    }
    @media (max-width:991px){
      .sidebar{transform:translateX(-110%);position:fixed}
      .sidebar.show{transform:translateX(0)}
      main{margin-left:0;padding-top:1rem}
      .mobile-hide{display:inline-block}
      .content-overlay.show{display:block}
    }

    /* -------------------------
       Cards & visuals
       ------------------------- */
    .card-action{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
    .card-action:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .card{border-radius:var(--card-radius)}
    #map{height:360px;border-radius:.5rem}

    /* Tables */
    .table-responsive{--bs-table-responsive-max-height:520px}
    table.data-table th, table.data-table td{vertical-align:middle}
    .small-muted{font-size:.85rem;color:var(--muted)}

    /* Footer */
    footer{padding:1rem 0;color:var(--muted);font-size:.9rem}

    /* Utility tweaks */
    .btn-icon{width:38px;height:38px;padding:0;border-radius:8px}
    .txt-muted-sm{font-size:.85rem;color:var(--muted)}
    
    .sidebar .nav-link {
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
/* -------------------------
   Sidebar hover
------------------------- */
.sidebar .nav-link {
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.sidebar .nav-link:hover {
  background-color: #0d6efd;
  color: #fff !important;
  padding-left: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* -------------------------
   Action Buttons
------------------------- */
.action-btn {
  font-size: 0.85rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.action-btn:hover {
  transform: translateY(-4px) scale(1.05);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.btn-outline-primary.action-btn:hover { background-color:#0d6efd; border-color:#0d6efd;}
.btn-outline-success.action-btn:hover { background-color:#198754; border-color:#198754;}
.btn-outline-info.action-btn:hover { background-color:#0dcaf0; border-color:#0dcaf0;}
.btn-outline-secondary.action-btn:hover { background-color:#6c757d; border-color:#6c757d;}
 
/* -------------------------
   Card hover
------------------------- */
.card.card-action {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 1rem;
}
.card.card-action:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.forecast-positive {
  color: green;
  font-weight: 600;
}

.forecast-negative {
  color: red;
  font-weight: 600;
}

/* Tabel Bahan Baku */
#tableBahan {
  font-size: 0.85rem; /* ukuran default desktop */
}

/* Layar kecil - smartphone */
@media (max-width: 576px) {
  #tableBahan {
    font-size: 0.7rem; /* lebih kecil agar muat */
  }

  /* Opsi: padding kolom juga bisa dikurangi */
  #tableBahan th,
  #tableBahan td {
    padding: 0.25rem 0.4rem;
  }
}
/* Tombol Aksi Bahan Baku */
#tableBahan .edit-bahan,
#tableBahan .delete-bahan {
  font-size: 0.85rem; /* normal desktop */
  padding: 0.25rem 0.5rem;
}

/* Layar kecil - smartphone */
@media (max-width: 576px) {
  #tableBahan .edit-bahan,
  #tableBahan .delete-bahan {
    font-size: 0.65rem; /* lebih kecil di HP */
    padding: 0.15rem 0.3rem;
  }
}
/* Tabel Produksi - desktop normal */
#tableProduksi td,
#tableProduksi th {
  font-size: 0.9rem;
}

/* Tombol aksi di tabel produksi */
#tableProduksi .btn {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
}

/* Layar kecil / smartphone */
@media (max-width: 576px) {
  #tableProduksi td,
  #tableProduksi th {
    font-size: 0.7rem;  /* font mengecil di HP */
  }

  #tableProduksi .btn {
    font-size: 0.65rem; /* tombol lebih kecil di HP */
    padding: 0.15rem 0.3rem;
  }

  /* Opsional: agar kolom Aksi tidak terlalu lebar di HP */
  #tableProduksi th:last-child,
  #tableProduksi td:last-child {
    width: 80px;
  }
}
/* Dashboard - font normal */
#section-dashboard h5,
#section-dashboard h6,
#section-dashboard h5,
#section-dashboard p,
#section-dashboard .small-muted-sm,
#section-dashboard .txt-muted-sm {
  margin: 0;
}

/* Default font desktop */
#section-dashboard h5 { font-size: 1.25rem; }
#section-dashboard h6 { font-size: 1rem; }
#section-dashboard .small-muted-sm { font-size: 0.85rem; }
#section-dashboard .txt-muted-sm { font-size: 0.85rem; }

/* Responsive smartphone */
@media (max-width: 576px) {
  #section-dashboard h5 { font-size: 1rem; }
  #section-dashboard h6 { font-size: 0.85rem; }
  #section-dashboard .small-muted-sm { font-size: 0.75rem; }
  #section-dashboard .txt-muted-sm { font-size: 0.75rem; }

  /* Tabel aktivitas responsive font */
  #tableActivity td,
  #tableActivity th {
    font-size: 0.7rem;
  }

  /* Quick stats number */
  #statToday,
  #statSales {
    font-size: 1.2rem;
  }
}
@media (max-width: 576px) {
  #section-stok table th,
  #section-stok table td {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  #section-stok h5 {
    font-size: 1rem;
  }
  #section-stok .small-muted-sm {
    font-size: 0.7rem;
  }
}
#mapSalesman {
    width: 100%;
    height: 450px;      /* WAJIB, boleh diganti */
    border-radius: 6px;
}