/* Home page visual refinements without touching logic */

/* Summary panel (date, schedule, in/out) */
.home-summary {
  background: #a38852; /* warm brown/gold tone */
  border-radius: 14px;
}
.home-summary .card-body {
  color: #ffffff;
}
.home-summary hr {
  display: none;
}

/* Row that holds IN/OUT boxes */
.home-summary .inout-row {
  margin-top: 6px;
}

/* IN/OUT boxes */
.home-summary .inout-box {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.home-summary .inout-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/* Soft corner glow */
.home-summary .inout-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 0 0, rgba(0,0,0,.03), transparent);
  pointer-events: none;
}
/* Colored accent bar like the mock */
.home-summary .inout-box.in { border-left: 10px solid #22c55e; }
.home-summary .inout-box.out { border-left: 10px solid #f59e0b; }

.home-summary .inout-box .card-body {
  color: #334155; /* slate-700 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
}
.home-summary .inout-box .card-body .material-icons {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 22px;
}
.home-summary .inout-box.in .card-body .material-icons {
  background: #dcfce7; /* green-100 */
  color: #16a34a;     /* green-600 */
}
.home-summary .inout-box.out .card-body .material-icons {
  background: #fff7ed; /* orange-50 */
  color: #d97706;      /* orange-600 */
}
.home-summary .inout-box .card-body p { margin-bottom: 0; }
/* Label (IN | OUT) */
.home-summary .inout-box .card-body p:first-of-type {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b; /* slate-500 */
  font-weight: 600;
}
/* Secondary line (time or status) */
.home-summary .inout-box p.small {
  margin-top: 2px;
  color: #94a3b8; /* slate-400 */
}

/* Actions grid container */
.home-actions {
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.home-actions .icon {
  background: #f1f5f9; /* soft light bg for circular icons */
}

/* Improve overall section spacing */
.home-header-name {
  margin-top: 18px;
  margin-bottom: 22px;
}

/* Header avatar alignment and sizing */
.header .avatar.avatar-40 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .avatar.avatar-36 {
  height: 36px;
  width: 36px;
  line-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .avatar .background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom nav improvements and active state */
.appBottomMenu .item:before { display: none !important; }
.appBottomMenu .item:after { display: none !important; }
.appBottomMenu .item .col:before,
.appBottomMenu .item .col:after { display: none !important; content: none !important; }
.appBottomMenu .item, .appBottomMenu .item .col { border: 0 !important; box-shadow: none !important; background: transparent; }

/* Filter Periode (Laporan Absen) */
.filter-card{ border:1px solid #e9eef5; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.filter-card .card-body{ padding:20px; }
.filter-title{ display:flex; align-items:center; gap:10px; color:#0f3b2e; margin-bottom:12px; }
.filter-title i{ color:#0f3b2e; }
.filter-title h6{ font-weight:800; color:#0f3b2e; }
.filter-label{ display:flex; align-items:center; gap:8px; color:#0f3b2e; font-weight:500; margin-bottom:6px; }
.filter-label i{ font-size:18px; color:#0f3b2e; }
.date-control{ display:flex; align-items:center; gap:10px; }
.date-control .form-control{ height:46px; border-radius:10px; flex:1; min-width:0; }
.calendar-btn{ width:44px; height:44px; border-radius:10px; border:0; background:#2f6b4a; color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(15,23,42,.12); }
.calendar-btn i{ font-size:20px; }
.filter-card .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 22px; }
@media (max-width: 768px){
  .filter-card .row{ grid-template-columns: 1fr; }
}

/* Home menu more toggle */
#menu-more{ display:none; }
#menu-more.open{ display:grid; }

/* Izin list styling */
.izin-item{ border:1px solid #e9eef5; box-shadow:0 4px 14px rgba(15,23,42,.06); }
.izin-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.izin-range{ display:flex; align-items:center; gap:8px; color:#0f172a; font-weight:600; }
.izin-range i{ font-size:18px; color:#0f3b2e; }
.izin-status .badge{ vertical-align:middle; }
.izin-status .badge{ border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.izin-status .badge-warning{ background:linear-gradient(135deg,#22c55e,#16a34a) !important; color:#fff; }
.izin-status .badge-danger{ background:linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff; }
.izin-status .badge-primary{ background:linear-gradient(135deg,#94a3b8,#64748b) !important; color:#fff; }
.izin-main{ display:flex; align-items:center; justify-content:space-between; }
.izin-type{ display:flex; align-items:center; gap:8px; color:#475569; font-weight:600; }
.izin-type i{ font-size:18px; color:#64748b; }
.izin-actions a{ margin-left:8px; }
.izin-ket{ color:#64748b; margin:0; }
.appBottomMenu .item .material-icons,
.appBottomMenu .item strong { color: #64748b; }
.appBottomMenu .item.active .material-icons,
.appBottomMenu .item.active strong { color: #0f3b2e !important; font-weight:700; }
.appBottomMenu .item:hover .material-icons,
.appBottomMenu .item:hover strong { color: #334155; }
.appBottomMenu .item .col { border: 0 !important; }