/* ============================================================
   CUSTOM ADMIN CSS - Absensi Barcode Modern Theme
   Override AdminLTE skin-blue with modern vibrant design
   ============================================================ */

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

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --primary:        #4f46e5;
  --primary-light:  #6366f1;
  --primary-dark:   #3730a3;
  --accent:         #06b6d4;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #3b82f6;
  --sidebar-bg:     #1e1b4b;
  --sidebar-hover:  #312e81;
  --sidebar-active: #4f46e5;
  --header-bg:      #4f46e5;
  --body-bg:        #f1f5f9;
  --card-bg:        #ffffff;
  --text-main:      #1e293b;
  --text-muted:     #64748b;
  --border-color:   #e2e8f0;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow:         0 4px 24px rgba(79,70,229,0.10);
  --shadow-hover:   0 8px 32px rgba(79,70,229,0.18);
  --transition:     all 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Global Reset & Font ───────────────────────────────── */
body,
.skin-blue .content-wrapper,
.skin-blue .main-footer {
  font-family: 'Inter', 'Source Sans Pro', Arial, sans-serif !important;
  background: var(--body-bg) !important;
  color: var(--text-main) !important;
}

/* ── HEADER / NAVBAR ───────────────────────────────────── */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background: var(--primary) !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 16px rgba(79,70,229,0.25) !important;
}

.skin-blue .main-header .logo {
  background: var(--primary-dark) !important;
  letter-spacing: 0.5px;
}

.skin-blue .main-header .logo .logo-lg {
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
}

.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav .open > a {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 500;
  transition: var(--transition);
}

.skin-blue .main-header .navbar .nav > li > a:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.skin-blue .main-header li.user-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
}

.main-header .time a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}

.skin-blue .main-header .navbar .user-menu .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.skin-blue .main-header .navbar .user-menu .dropdown-toggle span {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.skin-blue .main-header li.user-header p {
  font-size: 14px !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

/* ── SIDEBAR ───────────────────────────────────────────── */
.skin-blue .main-sidebar {
  background: var(--sidebar-bg) !important;
  box-shadow: 3px 0 20px rgba(30,27,75,0.35) !important;
  border-right: none !important;
}

.skin-blue .main-sidebar .user-panel {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  white-space: normal !important;
}

.skin-blue .main-sidebar .user-panel .image {
  flex-shrink: 0 !important;
  float: none !important;
}

.skin-blue .main-sidebar .user-panel .image img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.skin-blue .main-sidebar .user-panel .info {
  position: static !important;
  float: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.skin-blue .main-sidebar .user-panel .info > p {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.skin-blue .main-sidebar .user-panel .info a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.skin-blue .sidebar-menu > li.header {
  color: rgba(255,255,255,0.35) !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  padding: 14px 16px 6px !important;
  text-transform: uppercase;
}

.skin-blue .sidebar-menu > li > a {
  color: rgba(255,255,255,0.70) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  border-left: 3px solid transparent !important;
  padding: 11px 16px !important;
  transition: var(--transition) !important;
}

.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li:hover > a {
  color: #fff !important;
  background: var(--sidebar-hover) !important;
  border-left-color: var(--accent) !important;
}

.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active:hover > a {
  color: #fff !important;
  background: var(--sidebar-active) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(79,70,229,0.30) !important;
}

.skin-blue .sidebar-menu > li > a > .fa {
  color: rgba(255,255,255,0.55) !important;
  width: 20px;
  text-align: center;
  margin-right: 6px;
  font-size: 14px;
  transition: var(--transition);
}

.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li > a:hover > .fa {
  color: var(--accent) !important;
}

.skin-blue .treeview-menu {
  background: rgba(0,0,0,0.18) !important;
  padding: 4px 0 !important;
}

.skin-blue .treeview-menu > li > a {
  color: rgba(255,255,255,0.60) !important;
  font-size: 13px !important;
  padding: 8px 16px 8px 38px !important;
  transition: var(--transition) !important;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* ── CONTENT AREA ──────────────────────────────────────── */
.content-wrapper {
  background: var(--body-bg) !important;
  min-height: calc(100vh - 50px) !important;
}

.content {
  padding: 16px 20px !important;
}

.content-header {
  background: transparent !important;
  padding: 18px 20px 0 !important;
}

.content-header > h1,
section.content-header h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.3px;
}

.breadcrumb {
  background: transparent !important;
  font-size: 12.5px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
}

.breadcrumb > li + li::before { color: var(--text-muted) !important; }
.breadcrumb > .active { color: var(--primary) !important; font-weight: 600 !important; }

/* ── BOXES / CARDS ─────────────────────────────────────── */
.box {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border-top: none !important;
  transition: var(--transition) !important;
  overflow: hidden;
}

.box:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px);
}

.box.box-solid {
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
}

.box-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 18px !important;
}

.box-header .box-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.box-body {
  padding: 16px 18px !important;
}

.box-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 10px 18px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
}

/* ── INFO BOXES (Dashboard Stats) ─────────────────────── */
.info-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--card-bg) !important;
  transition: var(--transition) !important;
  min-height: 72px !important;
  overflow: hidden;
}

.info-box:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

.info-box-icon {
  border-radius: var(--radius) 0 0 var(--radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 72px !important;
  font-size: 26px !important;
  line-height: 72px !important;
}

.info-box-content { padding: 12px 14px !important; }

.info-box-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
}

.info-box-number {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.2 !important;
}

/* Info box icon color gradients */
.bg-aqua,  .info-box-icon.bg-aqua  { background: linear-gradient(135deg, #06b6d4, #0284c7) !important; }
.bg-green, .info-box-icon.bg-green { background: linear-gradient(135deg, #10b981, #059669) !important; }
.bg-yellow,.info-box-icon.bg-yellow{ background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.bg-red,   .info-box-icon.bg-red   { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.bg-blue,  .info-box-icon.bg-blue  { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }

/* ── TABLES ────────────────────────────────────────────── */
.table {
  font-size: 13.5px !important;
  color: var(--text-main) !important;
}

.table > thead > tr > th {
  background: #f8fafc !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--border-color) !important;
  padding: 10px 14px !important;
}

.table > tbody > tr > td {
  padding: 10px 14px !important;
  border-top: 1px solid var(--border-color) !important;
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-child(odd) { background-color: #f8fafc !important; }
.table-hover > tbody > tr:hover { background-color: #eff6ff !important; }

.table-bordered {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm);
}

.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid var(--border-color) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; font-size: 12.5px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; padding: 4px 10px !important; font-size: 13px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important; outline: none !important;
}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: var(--transition) !important;
  letter-spacing: 0.2px !important;
  border: none !important;
}

.btn-primary, .btn-info {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.25) !important;
}
.btn-primary:hover, .btn-info:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.35) !important;
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25) !important;
}
.btn-success:hover { box-shadow: 0 4px 14px rgba(16,185,129,0.35) !important; transform: translateY(-1px); }

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.25) !important;
}
.btn-warning:hover { box-shadow: 0 4px 14px rgba(245,158,11,0.35) !important; transform: translateY(-1px); }

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.25) !important;
}
.btn-danger:hover { box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important; transform: translateY(-1px); }

.btn-default {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
.btn-default:hover { background: #f8fafc !important; box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important; }
.btn-flat { box-shadow: none !important; }

/* ── FORM CONTROLS ─────────────────────────────────────── */
.form-control {
  border: 1.5px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  color: var(--text-main) !important;
  background: #fff !important;
  height: 36px !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important;
  outline: none !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 80px;
  vertical-align: top;
  -webkit-transition: height 0.2s !important;
  -moz-transition: height 0.2s !important;
  transition: height 0.2s !important;
}

.input-group-addon {
  background: #f1f5f9 !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

.form-group label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  margin-bottom: 5px !important;
}

/* ── ALERTS ────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow) !important;
}
.alert-success { background: #d1fae5 !important; color: #065f46 !important; }
.alert-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-info    { background: #dbeafe !important; color: #1e40af !important; }

.floatalert {
  position: fixed !important;
  top: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 340px !important;
  z-index: 9999 !important;
}

/* ── BADGES & LABELS ───────────────────────────────────── */
.label, .badge {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  letter-spacing: 0.3px !important;
}
.label-primary, .badge-primary { background: var(--primary) !important; }
.label-success, .badge-success { background: var(--success) !important; }
.label-warning, .badge-warning { background: var(--warning) !important; }
.label-danger,  .badge-danger  { background: var(--danger)  !important; }
.label-info,    .badge-info    { background: var(--info)    !important; }

/* ── FOOTER ────────────────────────────────────────────── */
.main-footer {
  background: #fff !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-size: 12.5px !important;
  padding: 12px 20px !important;
}

/* ── LOG ACTIVITY ──────────────────────────────────────── */
#logspace {
  height: 285px;
  overflow-y: auto;
  padding: 10px;
}
#logspace::-webkit-scrollbar { width: 4px; }
#logspace::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
.modal-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title { font-weight: 700 !important; font-size: 16px !important; color: #fff !important; }
.modal-header .close { color: rgba(255,255,255,0.8) !important; opacity: 1 !important; font-size: 22px !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-footer { background: #f8fafc !important; border-top: 1px solid var(--border-color) !important; }

/* ── NAV TABS ──────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--border-color) !important; }
.nav-tabs > li > a {
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  transition: var(--transition) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
  font-weight: 700 !important;
}

/* ── PAGINATION ────────────────────────────────────────── */
.pagination > li > a {
  color: var(--primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  transition: var(--transition) !important;
}
.pagination > .active > a {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.pagination > li > a:hover {
  background: #eff6ff !important;
  border-color: var(--primary) !important;
}

/* ── MISC ──────────────────────────────────────────────── */
.text-small { font-size: 85%; }
audio { width: 100%; }
.media-toolbar { background: rgba(0,0,0,0.3); padding: 3px 5px 7px 5px; color: #fff; font-weight: bold; }
.scroll-y { height: 500px !important; max-height: 500px; overflow-y: scroll; }
.scroll-x { overflow-x: scroll; }

/* ── GLOBAL SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── ANIMATION ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.box, .info-box { animation: fadeInUp 0.35s ease both; }
.info-box:nth-child(2) { animation-delay: 0.05s; }
.info-box:nth-child(3) { animation-delay: 0.10s; }
.info-box:nth-child(4) { animation-delay: 0.15s; }