/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.btn-smartgarden {
    background: linear-gradient(90deg, #90D44D, #008037);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .btn-smartgarden:hover {
    background: linear-gradient(90deg, #007BFF, #4A90E2);
  }

  .main-menu.menu-light .navigation > li.active > a {
    background: -webkit-linear-gradient(332deg, #4A90E2, #007BFF);
    background: linear-gradient(118deg, #4A90E2, #007BFF);
    box-shadow: 0 0 10px 1px #4A90E2;
    color: #FFFFFF;
    font-weight: 400;
    border-radius: 4px;
  }

  .main-menu .navbar-header .navbar-brand .brand-text {
    color: #4A90E2;
    padding-left: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: 0.01rem;
    font-size: 1.45rem;
    -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
            animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
  }

  a {
    color : #4A90E2;
    text-decoration : none;
    background-color : transparent;
  }

  .btn-gd-success {
     background: linear-gradient(90deg, #4A90E2, #007BFF);
    color: white;
    border: none;
  }

.btn-gd-green {
    background: linear-gradient(90deg, #90D44D, #008037);
    color: white;
    border: none;
}
/* GRADIENT BUTTONS */

.btn-gd-warning {
    background: linear-gradient(90deg, #FFA726, #FB8C00); /* Oranye terang ke gelap */
    color: white;
    border: none;
  }

  .btn-gd-danger {
    background: linear-gradient(90deg, #FF6B6B, #C0392B); /* Merah ke merah gelap */
    color: white;
    border: none;
  }

  .btn-gd-primary {
    background: linear-gradient(90deg, #4A90E2, #007BFF); /* Biru cerah ke biru klasik */
    color: white;
    border: none;
  }

  .btn-gd-info {
    background: linear-gradient(90deg, #00cfe8, #39c2f5); /* Biru muda ke biru terang */
    color: white;
    border: none;
  }

  .btn-gd-dark {
    background: linear-gradient(90deg, #555555, #222222); /* Abu ke hitam */
    color: white;
    border: none;
  }

  /* COMMON BUTTON STYLE */
  .btn-gd-warning,
  .btn-gd-danger,
  .btn-gd-green,
  .btn-gd-primary,
  .btn-gd-info,
  .btn-gd-dark {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    text-decoration: none;
  }

  /* HOVER EFFECT */
  .btn-gd-warning:hover,
  .btn-gd-danger:hover,
  .btn-gd-primary:hover,
  .btn-gd-info:hover,
  .btn-gd-green:hover,
  .btn-gd-dark:hover {
    opacity: 0.9;
    transform: scale(1.02);
  }
.page-item.active .page-link {
    z-index: 3;
    border-radius: 5rem;
    background-color: #007BFF;
    color: #FFFFFF !important;
    font-weight: 600;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: #2878a7 !important; /* warna hijau Bootstrap (success) */
    box-shadow: 0 0 0 0.2rem rgba(40, 91, 167, 0.25); /* bayangan hijau */
}

.table-green th {
    background: #4A90E2 !important;
    color: #fff;
    border: none !important;
    border-bottom: 5px solid #007BFF !important;
    text-align: center;
    border-radius: 0;
}


body { background: #f9fafb; }

.mapel-item {
    padding: 10px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    cursor: grab;
    opacity: 0.8;
    text-align: center;
}

.hari-column {
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.jam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 6px 0;
}

.jam-label { width: 100px; font-weight: 500; }

.jam-slot {
    flex: 1;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 0;
    min-height: 50px;
    background: #fdfdfd;
    margin-left: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.jadwal-card {
    border-radius: 8px;
    color: white;
    padding: 8px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.jadwal-card span { flex: 1; text-align: left; padding-left: 8px; }

.btn-hapus {
    background: rgba(0,0,0,0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}

.tambah-slot { text-align: center; margin-top: 10px; }
.tambah-slot button {
    border: 1px dashed #aaa;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 6px 10px;
    width: 100%;
    color: #333;
    cursor: pointer;
}
.tambah-slot button:hover { background: #e9ecef; }

.hari-title { display: flex; justify-content: space-between; align-items: center; }
.count-badge { font-size: 13px; color: #555; }
.jadwal-card.istirahat {
    background: rgba(128, 128, 128, 0.25);
    color: #444;
    font-weight: bold;
    text-align: center;
    cursor: not-allowed;
    pointer-events: none;
    height: 48px;
}
.jadwal-card.kegiatan {
    background: #FFA726;
     color: #000000;
    font-weight: bold;
    text-align: center;
    cursor: not-allowed;
    pointer-events: none;
    height: 48px;
}
.mapel-item {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: grab;
    font-size: 13px;
}

.mapel-item.unused {
    background: #f3f4f6;
    color: #374151;
    border: 1px dashed #9ca3af;
}

.mapel-item.used {
    color: #fff;
}
.jam-slot.conflict {
    border: 2px solid #ef4444;
    background: repeating-linear-gradient(
        45deg,
        #fee2e2,
        #fee2e2 10px,
        #fecaca 10px,
        #fecaca 20px
    );
}

.conflict-focus {
    animation: pulse 1s ease-in-out 2;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); }
    100% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}