/* Mobile theme overrides for login.php homepage colors and branding
   Palette variables mirror desktop: applied for mobile only to avoid layout changes.
*/
:root {
  --mc-primary: #2E7D32;
  --mc-secondary: #039BE5;
  --mc-accent: #F9A825;
  --mc-bg: #F5F7FA;
  --mc-text: #212121;
  --mc-text-2: #616161;
}

@media (max-width: 991.98px) {
  body {
    background: linear-gradient(180deg, #F7F9FC 0%, var(--mc-bg) 120%);
    color: var(--mc-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  }
  
  /* Tambahkan margin kanan dan kiri pada container utama */
  body {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  .main-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Tambahkan margin pada grid menu */
  .grid-menu {
    margin: 8px 20px !important;
    width: calc(100% - 40px) !important;
  }
  /* Header as small hero */
  .dashboard-header {
    background: #ffffff;
    color: inherit;
    border-bottom: 1px solid #E0E0E0 !important;
  }
  .dashboard-header .profile-icon a { color: inherit; }
  .dashboard-header .search-bar input {
    background: #F1F5F9; border-color:#E2E8F0; color: var(--mc-text);
  }

  /* Statistik singkat colors */
  .main-container > .combo-block:first-of-type { 
    background: linear-gradient(135deg, #E8F5FE 0%, #C8E6C9 100%) !important;
    margin: 10px 20px !important;
    width: calc(100% - 40px) !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    padding: 15px !important;
  }
  .main-container > .combo-block:first-of-type .fw-bold { 
    color: var(--mc-primary); 
    font-weight: 700 !important;
  }
  .main-container > .combo-block:first-of-type .small { 
    color: var(--mc-text-2); 
    font-weight: 500 !important;
  }

  /* Grid menu brand colors */
  .grid-item.menu-1, .grid-item.menu-6 { background:#CDE8D0 !important; color:#1b4332 !important; }
  .grid-item.menu-2, .grid-item.menu-7 { background:#B3E5FC !important; color:#01579B !important; }
  .grid-item.menu-3, .grid-item.menu-8 { background:#FFE082 !important; color:#6d4c00 !important; }
  
  /* Modifikasi ukuran tile icon */
  .grid-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    margin-top: 8px !important;
  }
  
  .grid-item {
    border-radius: 10px !important;
    padding: 12px 6px 8px 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  }
  
  .grid-item .icon {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }

  /* Cards and buttons */
  .combo-block { background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
  .text-primary { color: var(--mc-primary) !important; }
  .btn-primary, .btn.btn-primary.gradient { background: var(--mc-primary) !important; border-color: var(--mc-primary) !important; }
  .btn-primary:hover, .btn.btn-primary.gradient:hover { filter: brightness(.95); }
  .btn-outline-primary { color: var(--mc-secondary) !important; border-color: var(--mc-secondary) !important; }
  .btn-outline-primary:hover { background: var(--mc-secondary) !important; color: #fff !important; }
  .btn-success { background: var(--mc-primary) !important; border-color: var(--mc-primary) !important; }

  /* Badges for status */
  .badge.bg-success { background-color: var(--mc-primary) !important; }
  .badge.bg-warning { background-color: var(--mc-accent) !important; color: #1b1b1b !important; }
  .badge.bg-danger { background-color: #E53935 !important; }
}