/* ================================================================
   PRESENSI — Custom Theme
   Color identity: #7b0000 → #b71c1c → #c0392b → #e53935
   ================================================================ */

/* Topbar z-index — below modal backdrop */
#page-topbar {
  z-index: 1100 !important;
}

/* ── CSS Variables ───────────────────────────────────────────── */
:root {
  --p1: #7b0000;
  --p2: #b71c1c;
  --p3: #c0392b;
  --p4: #e53935;
  --p5: #ef5350;
  --success: #34c38f;
  --sidebar-w: 250px;
  --topbar-h: 64px;
  --bg-page: #fdf4f4;
  --bg-card: #ffffff;
  --text-main: #1a1f36;
  --text-muted: #8792a2;
  --radius-card: 14px;
  --radius-btn: 10px;
  --shadow-card: 0 2px 16px rgba(192,57,43,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-hover: 0 8px 28px rgba(192,57,43,.15);
}

/* ── Global ──────────────────────────────────────────────────── */
body {
  background: var(--bg-page) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.vertical-menu {
  width: var(--sidebar-w) !important;
  background: linear-gradient(170deg, var(--p1) 0%, var(--p2) 35%, var(--p3) 70%, #c0392b 100%) !important;
  box-shadow: 4px 0 24px rgba(123,0,0,.25) !important;
  border-right: none !important;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1099 !important;
  display: flex;
  flex-direction: column;
  transition: width .32s cubic-bezier(.4,0,.2,1) !important;
  overflow: hidden;
}

/* Scrollbar */
.vertical-menu .simplebar-scrollbar::before { background: rgba(255,255,255,.25) !important; }

/* ── Sidebar brand / logo ────────────────────────────────────── */
.sidebar-brand {
  height: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  overflow: hidden;
  transition: padding .32s cubic-bezier(.4,0,.2,1);
}
.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-logo-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo-img {
  width: 22px; height: 22px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}
.sidebar-brand-text {
  line-height: 1.2;
  overflow: hidden;
  max-width: 180px;
  opacity: 1;
  transition:
    max-width .32s cubic-bezier(.4,0,.2,1),
    opacity .22s ease;
}
.sidebar-brand-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
}
.sidebar-brand-sub {
  display: block;
  font-size: 9.5px;
  color: rgba(255,255,255,.5);
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
}
.sidebar-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sidebar-scroll-area .simplebar-content-wrapper { padding-bottom: 24px !important; }

/* ── Menu section titles ─────────────────────────────────────── */
#sidebar-menu .menu-title {
  color: rgba(255,255,255,.4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 18px 24px 6px !important;
  white-space: nowrap;
  overflow: hidden;
  /* transition for smooth collapse */
  max-height: 50px;
  opacity: 1;
  transition:
    max-height .32s cubic-bezier(.4,0,.2,1),
    opacity .22s ease,
    padding .32s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Menu items ──────────────────────────────────────────────── */
#sidebar-menu ul li a {
  color: rgba(255,255,255,.72) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 11px 20px !important;
  border-radius: 10px !important;
  margin: 2px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
  white-space: nowrap;
  transition:
    background .2s ease,
    color .2s ease,
    padding .32s cubic-bezier(.4,0,.2,1),
    margin .32s cubic-bezier(.4,0,.2,1),
    justify-content .32s ease !important;
}

/* Text label inside menu items — the key to smooth animation */
#sidebar-menu ul li > a > span {
  flex: 1;
  overflow: hidden;
  max-width: 180px;
  opacity: 1;
  transition:
    max-width .32s cubic-bezier(.4,0,.2,1),
    opacity .22s ease !important;
}

#sidebar-menu ul li a i {
  font-size: 18px !important;
  opacity: .8;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: transform .22s ease, opacity .22s ease, font-size .22s ease !important;
}
#sidebar-menu ul li a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}
#sidebar-menu ul li a:hover i { opacity: 1; transform: translateX(2px); }

/* Active state */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
  color: #fff !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i { opacity: 1; }

/* Active indicator bar */
#sidebar-menu ul li a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #fff;
  border-radius: 0 3px 3px 0;
  transition: opacity .2s ease;
}

/* Arrow for has-arrow */
#sidebar-menu ul li a.has-arrow::after {
  border-color: rgba(255,255,255,.5) !important;
  transition: transform .22s ease, opacity .22s ease !important;
}
#sidebar-menu ul li.mm-active > a.has-arrow::after { border-color: rgba(255,255,255,.85) !important; }

/* ── Submenu ─────────────────────────────────────────────────── */
#sidebar-menu ul ul {
  background: rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
  margin: 2px 12px !important;
  padding: 4px 0 !important;
}
#sidebar-menu ul ul li a {
  font-size: 13px !important;
  padding: 9px 14px 9px 36px !important;
  margin: 1px 4px !important;
  color: rgba(255,255,255,.65) !important;
}
#sidebar-menu ul ul li a::before { display: none !important; }
#sidebar-menu ul ul li a:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
#sidebar-menu ul ul li a.active { color: #fff !important; background: rgba(255,255,255,.15) !important; }

/* ================================================================
   SIDEBAR — COLLAPSED STATE
   Uses :not(:hover) so hover-expand is automatic & DRY
   ================================================================ */

/* ── COLLAPSED STATE ─────────────────────────────────────────── */

/* Sidebar: icon-only, starts below topbar */
body.vertical-collpsed .vertical-menu {
  width: 70px !important;
  top: 64px !important;
  overflow: visible !important;
}
/* Scroll area must also be visible so fly-out submenu can escape */
body.vertical-collpsed .vertical-menu .sidebar-scroll-area {
  overflow: visible !important;
}
body.vertical-collpsed .vertical-menu .simplebar-mask,
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
  overflow: visible !important;
}

/* Hide brand entirely when collapsed — no overlap with topbar */
body.vertical-collpsed .sidebar-brand { display: none !important; }

/* Topbar stays at left:0 when collapsed (explicit override) */
body.vertical-collpsed #page-topbar  { left: 0 !important; }

/* Content + footer shift */
body.vertical-collpsed .main-content { margin-left: 70px !important; }
body.vertical-collpsed .footer       { left: 70px !important; }

/* Menu titles hidden */
body.vertical-collpsed .vertical-menu #sidebar-menu .menu-title {
  display: none !important;
}

/* Links: icon centered */
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a {
  justify-content: center !important;
  padding: 14px 0 !important;
  margin: 3px 8px !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.85) !important;
  background: transparent !important;
}

/* Hide text + arrow */
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a > span {
  display: none !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a.has-arrow::after {
  display: none !important;
}

/* Icon size */
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a i {
  font-size: 20px !important;
  min-width: unset !important;
  color: rgba(255,255,255,.85) !important;
}

/* Icon hover glow */
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a:hover i {
  color: #fff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
  opacity: 1 !important;
}

/* Active state */
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a.active,
body.vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active > a {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu ul li a.active::before {
  display: none !important;
}

/* Submenus: template native fly-out — restyle colors */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li {
  position: relative !important;
}

/* Invisible bridge: covers the gap between sidebar edge and fly-out submenu
   so cursor can travel diagonally without losing hover */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;       /* starts at right edge of sidebar (70px) */
  width: 20px;      /* bridges any gap before submenu */
  height: 100%;
  background: transparent;
  z-index: 1;
}

body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  width: auto !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #fff !important;
}

/* Fly-out submenu: overlap sidebar edge by 4px to eliminate gap */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
  left: 66px !important;   /* 70px - 4px overlap */
  background: linear-gradient(160deg, #c62828 0%, #7b0000 100%) !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 6px 4px 24px rgba(0,0,0,.35) !important;
  min-width: 200px !important;
  padding: 6px 0 !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  color: rgba(255,255,255,.88) !important;
  padding: 9px 18px 9px 20px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a.active {
  color: #fff !important;
  background: rgba(255,255,255,.2) !important;
}

/* ================================================================
   TOPBAR  (styled inline in topbar.blade.php — only overrides here)
   ================================================================ */

/* Dropdown menu (global) */
.dropdown-menu {
  border: 1px solid rgba(192,57,43,.12) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 10px 36px rgba(192,57,43,.15), 0 2px 8px rgba(0,0,0,.06) !important;
  padding: 8px !important;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  transition: all .15s;
}
.dropdown-item:hover { background: rgba(192,57,43,.08) !important; color: var(--p4) !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.08) !important; color: #ef4444 !important; }
.dropdown-divider { border-color: rgba(192,57,43,.1) !important; margin: 4px 0 !important; }

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */
.main-content {
  margin-left: var(--sidebar-w) !important;
  background: var(--bg-page) !important;
  transition: margin-left .32s cubic-bezier(.4,0,.2,1) !important;
}

.page-content {
  padding: 24px 24px 80px !important;
  min-height: calc(100vh - 64px);
  padding-top: calc(64px + 24px) !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.page-title-box {
  padding-bottom: 20px !important;
}
.page-title-box h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
}
.breadcrumb-item a { color: var(--p4) !important; font-weight: 500; }
.breadcrumb-item.active { color: var(--text-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
  border: none !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--bg-card) !important;
  transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: var(--shadow-hover) !important; }
.card-header {
  border-bottom: 1px solid rgba(192,57,43,.08) !important;
  background: #fff !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  padding: 16px 20px !important;
}
.card-header.bg-light { background: #f8f9fc !important; }
.card-body { padding: 20px !important; }
.card-title { font-weight: 700 !important; color: var(--text-main) !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--p4), var(--p3)) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(192,57,43,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(192,57,43,.45) !important;
  background: linear-gradient(135deg, #ef5350, var(--p4)) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

.btn-success {
  background: linear-gradient(135deg, var(--success), #20956b) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(52,195,143,.3) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.btn-success:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(52,195,143,.4) !important; }

.btn-warning, .btn-outline-warning {
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
}
.btn-danger, .btn-outline-danger {
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
}
.btn-secondary, .btn-outline-secondary {
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
}
.btn-info, .btn-outline-info {
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
}

/* ================================================================
   FORMS
   ================================================================ */
.form-control, .form-select {
  border-radius: 10px !important;
  border: 1.5px solid #e3e8ef !important;
  font-size: 13.5px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--p4) !important;
  box-shadow: 0 0 0 4px rgba(192,57,43,.1) !important;
}
.form-label { font-size: 13px !important; font-weight: 600 !important; color: #3c4257 !important; }

/* ================================================================
   TABLES
   ================================================================ */
.table thead th {
  background: var(--bg-page) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(192,57,43,.12) !important;
  padding: 12px 14px !important;
}
.table tbody td {
  font-size: 13.5px !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid rgba(192,57,43,.06) !important;
  padding: 13px 14px !important;
  vertical-align: middle !important;
}
.table tbody tr:hover td { background: rgba(192,57,43,.03) !important; }
.table-light thead th { background: rgba(192,57,43,.05) !important; }

/* ================================================================
   BADGES
   ================================================================ */
.badge { border-radius: 6px !important; font-weight: 600 !important; font-size: 11px !important; padding: 4px 9px !important; }
.bg-primary { background: var(--p4) !important; }
.bg-success { background: var(--success) !important; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-content {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(123,0,0,.18), 0 4px 16px rgba(0,0,0,.06) !important;
  overflow: hidden;
}
.modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(192,57,43,.1) !important;
}
.modal-header.bg-primary,
.modal-header.bg-gradient.bg-primary {
  background: linear-gradient(135deg, var(--p3), var(--p4)) !important;
}
.modal-header.bg-warning { background: linear-gradient(135deg, #f6a623, #f1b44c) !important; }
.modal-header.bg-success { background: linear-gradient(135deg, #20956b, var(--success)) !important; }
.modal-header.bg-danger  { background: linear-gradient(135deg, #7b0000, #c0392b) !important; }
.modal-header.bg-dark    { background: linear-gradient(135deg, #1a1f36, #3c4257) !important; }
.modal-title { font-weight: 700 !important; font-size: 16px !important; }
.modal-body { padding: 24px !important; }
.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid rgba(192,57,43,.1) !important;
  background: #f8f9fc !important;
}
.btn-close-white { filter: brightness(0) invert(1) !important; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: var(--bg-card) !important;
  border-top: 1px solid rgba(192,57,43,.1) !important;
  padding: 16px 24px !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  left: var(--sidebar-w) !important;
  position: relative;
  margin-left: 0 !important;
}

/* ================================================================
   SELECT2 OVERRIDES
   ================================================================ */
.select2-container--default .select2-selection--single {
  border: 1.5px solid #e3e8ef !important;
  border-radius: 10px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  font-size: 13.5px !important;
  color: var(--text-main) !important;
  padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--p4) !important;
  box-shadow: 0 0 0 4px rgba(192,57,43,.1) !important;
}
.select2-dropdown {
  border: 1.5px solid rgba(192,57,43,.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(192,57,43,.15) !important;
  overflow: hidden;
  z-index: 1031 !important;
}
.select2-container { z-index: 1031 !important; }

.select2-container--default .select2-results__option--highlighted {
  background: rgba(192,57,43,.1) !important;
  color: var(--p4) !important;
}
.select2-container--default .select2-results__option--selected {
  background: rgba(192,57,43,.08) !important;
  color: var(--p4) !important;
  font-weight: 600 !important;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.page-item .page-link {
  border-radius: 8px !important;
  border: 1.5px solid rgba(192,57,43,.15) !important;
  color: var(--p4) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 13px !important;
  margin: 0 2px !important;
  transition: all .2s;
}
.page-item .page-link:hover { background: var(--p4) !important; color: #fff !important; border-color: var(--p4) !important; }
.page-item.active .page-link { background: var(--p4) !important; border-color: var(--p4) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(192,57,43,.35) !important; }
.page-item.disabled .page-link { color: var(--text-muted) !important; }

/* ================================================================
   ALERTS
   ================================================================ */
.alert { border-radius: 12px !important; border: none !important; font-size: 13.5px !important; }
.alert-info  { background: rgba(192,57,43,.07) !important; color: var(--p3) !important; }
.alert-success { background: rgba(52,195,143,.1) !important; color: #1a7a57 !important; }
.alert-warning { background: rgba(241,180,76,.1) !important; color: #8a6204 !important; }
.alert-danger  { background: rgba(239,68,68,.08) !important; color: #c0392b !important; }

/* ================================================================
   SCROLLBAR (webkit)
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(192,57,43,.2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(192,57,43,.4); }

/* ================================================================
   MISC UTILITIES
   ================================================================ */
.input-group-text {
  border-radius: 10px 0 0 10px !important;
  border: 1.5px solid #e3e8ef !important;
  background: #f8f9fc !important;
}
.input-group .form-control { border-radius: 0 10px 10px 0 !important; }
.input-group .form-control:first-child:last-child { border-radius: 10px !important; }

/* Shadow levels */
.shadow-sm { box-shadow: 0 2px 10px rgba(192,57,43,.08) !important; }
.shadow    { box-shadow: var(--shadow-card) !important; }
.shadow-lg { box-shadow: var(--shadow-hover) !important; }

/* Text colors */
.text-primary { color: var(--p4) !important; }
.text-muted   { color: var(--text-muted) !important; }

/* Smooth transitions for all interactive elements */
a, button, .btn, input, select, textarea { transition: all .2s ease; }

/* ================================================================
   AVATAR UTILITIES
   ================================================================ */
.avatar-title {
  border-radius: inherit;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bg-primary-subtle { background: rgba(192,57,43,.1) !important; }
.bg-success-subtle { background: rgba(52,195,143,.1) !important; }
.bg-warning-subtle { background: rgba(241,180,76,.1) !important; }
.bg-danger-subtle  { background: rgba(239,68,68,.1) !important; }
.bg-info-subtle    { background: rgba(80,165,241,.1) !important; }
.bg-secondary-subtle { background: rgba(116,120,141,.1) !important; }