/* ========== CUSTOM CSS DASHBOARD GUEST HOUSE ========== */

/* ===== Brand Sidebar ===== */
.brand-text {
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 14px;
  color: #fff;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
  line-height: 1.4;
  display: block;
}
.sidenav-header { padding-top: 14px; }
.sidenav-header .navbar-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.25; padding: 6px 10px; width: 100%;
}
.sidenav-header .navbar-brand > img {
  width: 90px !important; height: auto !important; max-width: 100% !important; max-height: none !important;
  display: block !important; object-fit: contain !important; margin-bottom: 10px !important;
}
@media (max-width: 576px) {
  .sidenav-header .navbar-brand > img { width: 150px !important; }
  .brand-text { font-size: 16px; }
}

/* ===== Kartu Metrik ===== */
.metric-card-md {
  border-radius: 18px; overflow: visible; box-shadow: 0 8px 22px rgba(0, 0, 0, .06); margin-bottom: 8px;
}
.metric-card-md .card-header { border-radius: 18px; padding: 1rem 1.25rem; }
.metric-card-md .text-end p.text-sm { color: #6b7280; font-weight: 700; margin-bottom: .25rem; }
.metric-card-md .text-end h4 { font-weight: 900; color: #111827; }

/* Kotak ikon */
.icon.icon-lg.icon-shape {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  border-radius: 18px; margin: 0 auto;
}
.icon.icon-lg.icon-shape i.material-icons { font-size: 34px; line-height: 1; margin: 0; color: #fff; }

/* Shadow lembut untuk ikon */
.shadow-primary { box-shadow: 0 8px 18px rgba(30, 136, 229, .35) !important; }
.shadow-success { box-shadow: 0 8px 18px rgba(67, 160, 71, .35) !important; }
.shadow-info    { box-shadow: 0 8px 18px rgba(33, 150, 243, .35) !important; }
.shadow-dark    { box-shadow: 0 8px 18px rgba(33, 33, 33, .4) !important; }

/* ===== Kartu Grafik Omzet ===== */
.chart-green-card {
  height: 240px; border-radius: 20px; background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16); padding: 14px 16px; margin-top: 16px;
}
.chart-green-card canvas { width: 100% !important; height: 100% !important; }
@media (min-width: 992px) { .chart-green-card { margin-top: 18px; } }

/* === Custom Admin/Umum === */
.form-container { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.card { margin-bottom: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }

/* Pink Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #ff4081 0%, #f50057 100%); border: none; color: #fff;
  box-shadow: 0 8px 18px rgba(245, 0, 87, .35);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #f50057 0%, #c51162 100%); color: #fff;
}
.btn-primary:active {
  background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%) !important; color: #fff !important;
}

.table th, .table td { text-align: center; vertical-align: middle; }
.btn-ico {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto; padding: 0; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.btn-ico:hover { background: linear-gradient(135deg, #ff4081 0%, #f50057 100%); color: #fff; border-color: #f06292; }

/* ====== Normalisasi Layout ====== */
body.g-sidenav-show { padding: 0 !important; font-family: "Roboto", sans-serif !important; }

/* ====== Toolbar Umum ====== */
.toolbar-card { border-radius: 15px; margin-bottom: 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }

/* ====== Form/Filter Keuangan ====== */
.form-container.financial {
  background: #fff; padding: 16px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); margin-top: 18px;
}
.form-container.financial select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: .5rem .75rem; font-weight: 600;
}

/* ====== Tabel rekap di keuangan ====== */
.finance-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.finance-table thead th { background: #f8f9fa; border: 1px solid #e9ecef; font-weight: 800; text-align: center; }
.finance-table tbody td { border: 1px solid #e9ecef; padding: 8px; text-align: center; }

/* =================== NAVBAR & PROFIL =================== */

/* Hindari aturan global yang memaksa lebar */
.navbar .d-flex { justify-content: initial !important; }

/* Container navbar bersih */
.gh-navbar-clean, .gh-navbar-clean .container-fluid{
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.gh-navbar-clean::before, .gh-navbar-clean::after{ content: none !important; display: none !important; }
.gh-navbar-clean .container-fluid{ display: flex; align-items: center; gap: 12px; }

/* Blok kanan: ikon + nama + logout */
.gh-rightwrap{
  margin-left: auto;               /* dorong ke kanan */
  display: flex; align-items: center;
  gap: var(--nav-gap, 16px);       /* atur jarak di sini */
}

/* Blok user (ikon + nama) */
.gh-userblock{ display:flex; align-items:center; gap:12px; }

/* Avatar berbasis ikon (tanpa ring putih) */
.gh-avatar-icon{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.gh-avatar-icon .material-icons{
  font-size: 26px; line-height: 1; display: block; color: #111; transform: translateY(-1px);
}
.gh-avatar-icon:hover{
  background: rgba(0,0,0,.08); color:#f50057; transform: translateY(-1px);
}

/* Nama admin sejajar tinggi ikon */
.admin-text{
  display:flex; align-items:center; height:38px; line-height:1;
  margin:0 8px 0 2px; font-weight:700; font-size:16px; color:#000;
}

/* Logout */
.logout-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  padding:0 !important; margin:0; border:none; background:transparent;
  color:#000; transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
.logout-btn .material-icons{ font-size:22px; line-height:1; display:block; transform:translateY(-1px); }
.logout-btn:hover{ background:rgba(0,0,0,.08); color:#f50057; transform: translateY(-1px); }

/* =================== FORM & MODAL =================== */

.form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .col-span-2{ grid-column: span 2; }
.input-group-clean .input-group-text{ background:#f3f4f6; border:1px solid #e5e7eb; border-right:none; color:#6b7280; }
.input-group-clean .form-control, .input-group-clean .form-select{ border-left:none; }
.input-group-clean .form-control:focus, .input-group-clean .form-select:focus{ box-shadow:none; border-color:#e5e7eb; }

@media (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-grid .col-span-2{ grid-column: auto; }
}

/* Nice form (modal) */
.nf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.nf-span-2{ grid-column:span 2; }
.nf-label{ font-weight:700; font-size:.925rem; color:#374151; margin-bottom:.35rem; display:block; }
.nf-control{
  width:100%; border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:.675rem .9rem;
  font-size:1rem; line-height:1.4; transition:border-color .2s, box-shadow .2s, transform .05s;
}
.nf-control:focus{ outline:0; border-color:#f06292; box-shadow:0 0 0 3px rgba(240,98,146,.18); }
.nf-control:hover{ border-color:#d1d5db; }
.nf-control::placeholder{ color:#9ca3af; }

/* Matikan outline modal bawaan */
.modal .input-group, .modal .input-group-outline, .modal .form-control{ box-shadow:none!important; }

/* =================== SIDEBAR & LAYOUT =================== */

/* MOBILE / TABLET */
@media (max-width: 991.98px) {
  #sidenav-main {
    transform: translateX(-270px); position: fixed; top: 0; left: 0; height: 100vh; z-index: 1050;
    width: 250px; background-color: #1a1a1a; transition: transform .3s ease-in-out; box-shadow: 0 0 15px rgba(0,0,0,.3);
  }
  #sidenav-main.sidebar-open { transform: translateX(0); }
  body.sidebar-overlay::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1040; transition: opacity 0.3s ease;
  }
  .main-content { margin-left: 0 !important; }
}

/* DESKTOP */
@media (min-width: 992px) {
  #sidenav-main { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 1040; }
  body.g-sidenav-show .main-content { margin-left: 260px !important; transition: margin-left .3s ease-in-out; }
}

/* Toggler MD dimatikan */
.navbar-toggler, #iconNavbarSidenav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* Scroll khusus di dalam sidebar; body tidak dipaksa scroll */
#sidenav-main{ overflow: hidden; }
#sidenav-main .navbar-collapse{
  height: calc(100vh - 120px);
  overflow-y: auto; overflow-x: hidden; padding-right: 8px; overscroll-behavior: contain;
}

/* Scrollbar stabil */
html { height: 100%; }
body.g-sidenav-show{
  min-height: 100%;
  overflow-y: auto;                 /* perbaikan: dulu scroll (selalu muncul) */
}

/* FIX PACK */
#sidenav-main::before, #sidenav-main::after { display: none !important; content: none !important; opacity: 1 !important; }
html { height: auto !important; }
body { min-height: 100vh; overflow-x: hidden !important; }
.main-content.max-height-vh-100, .main-content.h-100 { max-height: none !important; height: auto !important; }
.main-content { min-height: 100vh; }

/* Desktop sidebar */
@media (min-width: 992px) {
  #sidenav-main {
    position: fixed !important; top: 0; left: 0; width: 260px; height: 100vh; margin: 0 !important; z-index: 1040; transform: none !important;
    background: #111 !important; opacity: 1 !important; transition: none !important; pointer-events: auto !important;
  }
  body.g-sidenav-show .main-content {
    margin-left: 260px !important; transition: margin-left .2s ease-in-out; overflow: visible !important;
  }
  body.sidebar-overlay::after { display: none !important; }
}

/* Icon-only button + tooltip (match reservasi-detail) */
.btn-icon{
  width:40px;height:40px;border-radius:50%;
  border:1px solid #ddd;background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.25s;position:relative
}
.btn-icon:hover{background:#f0f0f0}
.btn-icon i{font-size:22px;color:#444}
.btn-icon[title]:hover::after{
  content:attr(title);
  position:absolute;top:-33px;right:0;white-space:nowrap;
  background:#333;color:#fff;padding:4px 8px;font-size:12px;
  border-radius:4px;z-index:10
}

/* Dropdown z-index fix */
.navbar .dropdown-menu, .dropdown-menu { z-index: 3000 !important; }

/* ================== TIGHT OVERRIDES ================== */
.dashboard-tight{ padding-top: 2px !important; padding-bottom: 10px !important; }
.dashboard-tight .metrics{ --bs-gutter-y: 0 !important; }
.dashboard-tight .metrics > *{ margin-top: 0 !important; }
.dashboard-tight .card{ margin-bottom: 8px !important; }
.dashboard-tight .chart-green-card{ margin-top: 2px !important; padding: 8px 10px !important; }
.dashboard-tight .card .card-body{ padding-top: .625rem !important; padding-bottom: .625rem !important; }
.dashboard-tight .breadcrumb{ margin-bottom: 0 !important; }
.main-content .container-fluid.dashboard-tight.page-tight{ padding-top: 0 !important; padding-bottom: 10px !important; }
.dashboard-tight.page-tight > *:first-child{ margin-top: 0 !important; }
.dashboard-tight.page-tight .row:first-of-type > *{ margin-top: 0 !important; }
.navbar-main{ margin-bottom: 0 !important; padding-top: 2px !important; padding-bottom: 4px !important; }
.navbar .breadcrumb{ margin-bottom: 0 !important; }
.dashboard-tight.page-tight .card{ margin-bottom: 8px !important; }
.dashboard-tight.page-tight .toolbar-card{ margin-top: 0 !important; }

/* Breadcrumb kiri default */
.navbar-main .container-fluid { position: relative; }
.navbar-main .breadcrumb { position: relative; left: 0; margin-bottom: 2px !important; padding-left: 0 !important; }
@media (max-width: 991.98px){ .navbar-main .breadcrumb { left: 0; } }

/* =================== FASILITAS ONLY: SIDEBAR NAV BLUE =================== */
body.app-fasilitas #sidenav-main .nav-link{
  border-radius: 12px;
}

/* ACTIVE = biru */
body.app-fasilitas #sidenav-main .nav-link.active,
body.app-fasilitas #sidenav-main .nav-link.active.bg-gradient-primary{
  background: #1e88e5 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(30,136,229,.28) !important;
}

/* HOVER = biru transparan */
body.app-fasilitas #sidenav-main .nav-link:hover{
  background: rgba(30,136,229,.18) !important;
  color: #fff !important;
}

/* icon ikut putih saat hover/active */
body.app-fasilitas #sidenav-main .nav-link.active i,
body.app-fasilitas #sidenav-main .nav-link:hover i{
  color: #fff !important;
  opacity: 1 !important;
}

/* ===========================
   FORCE PRIMARY -> BLUE (GLOBAL)
   taruh PALING BAWAH
   =========================== */
:root{
  --bs-primary: #2196f3 !important;
  --bs-primary-rgb: 33,150,243 !important;
  --bs-link-color: #2196f3 !important;
  --bs-link-hover-color: #1976d2 !important;
}

:root{
  --accent-blue: #2196f3;
}

/* border input saat focused/filled (ini sumber pink asli MD) */
.input-group.input-group-outline.is-focused .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-label + .form-control{
  border-color: var(--accent-blue) !important;
  border-top-color: transparent !important;
  box-shadow:
    inset 1px 0 var(--accent-blue),
    inset -1px 0 var(--accent-blue),
    inset 0 -1px var(--accent-blue) !important;
}

/* warna label saat focused/filled */
.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label{
  color: var(--accent-blue) !important;
}

/* garis kecil atas (pseudo element) yang juga dipink-kan */
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after{
  border-top-color: var(--accent-blue) !important;
  box-shadow: inset 0 1px var(--accent-blue) !important;
}