/* =========================================================
   SUNSHINE INN RESORT MATABUNGKAY - FINAL SUPER PREMIUM RESPONSIVE UI
   Global polish only: no PHP/database logic changed.
========================================================= */
:root{
  --sinn-primary:#123C69;
  --sinn-primary-dark:#123C69;
  --sinn-navy:#123C69;
  --sinn-dark:#123C69;
  --sinn-slate:#123C69;
  --sinn-blue:#38BDF8;
  --sinn-cream:#F8FAFC;
  --sinn-gold:#8ABF69;
  --sinn-white:#FFFFFF;
  --sinn-muted:#000000;
  --sinn-soft:#F8FAFC;
  --sinn-border:rgba(18, 60, 105,.13);
  --sinn-glass:rgba(255,255,255,.78);
  --sinn-shadow:0 22px 65px rgba(18, 60, 105,.13);
  --sinn-shadow-sm:0 12px 30px rgba(18, 60, 105,.10);
  --sinn-radius-xl:28px;
  --sinn-radius-lg:22px;
  --sinn-radius-md:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  color:var(--sinn-dark);
  background:
    !important;
  background-attachment:fixed;
}
img,video{max-width:100%;height:auto;}
a{text-decoration:none;}

/* ---------- Universal premium cards ---------- */
.card,
.premium-card,
.login-card,
.register-card,
.booking-card,
.room-card,
.activity-card,
.value-card,
.experience-card,
.profile-card,
.filter-card,
.payment-card,
.summary-card,
.report-card,
.table-card,
.modal-content{
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:var(--sinn-radius-xl) !important;
  background:#FFFFFF !important;
  box-shadow:var(--sinn-shadow) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.card-header,
.modal-header{
  border-bottom:1px solid var(--sinn-border) !important;
  background:#123C69 !important;
  border-radius:var(--sinn-radius-xl) var(--sinn-radius-xl) 0 0 !important;
}
.card-title,
.modal-title,
.section-title,
.pagetitle h1,
.page-title,
h1,h2,h3,h4,h5{
  color:var(--sinn-navy);
  letter-spacing:-.02em;
}
.text-muted,.muted,small{color:var(--sinn-muted) !important;}

/* ---------- Buttons ---------- */
.btn,
button,
.action-btn,
.btn-premium,
.swal2-confirm,
.swal2-cancel{
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.btn:hover,
.action-btn:hover,
.btn-premium:hover,
button:not(.btn-close):hover{
  transform:translateY(-1px);
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
.btn-premium,
button[type="submit"].btn,
input[type="submit"].btn{
  color:#FFFFFF !important;
  border:0 !important;
  background:#2563EB !important;
  box-shadow:0 14px 30px rgba(37, 99, 235,.28) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-premium:hover{
  background:#2563EB !important;
  box-shadow:0 18px 38px rgba(37, 99, 235,.34) !important;
}
.btn-danger{
  color:#FFFFFF !important;
  border:0 !important;
  background:#000000 !important;
  box-shadow:0 14px 30px rgba(0,0,0,.22) !important;
}
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary{
  color:var(--sinn-navy) !important;
  border:1px solid var(--sinn-border) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 12px 26px rgba(18, 60, 105,.08) !important;
}
.btn-sm{padding:.42rem .72rem !important;font-size:.78rem !important;}
.btn i{line-height:1;}

/* ---------- Forms ---------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
textarea,
select{
  border-radius:16px !important;
  border:1px solid rgba(18, 60, 105,.18) !important;
  background:rgba(255,255,255,.86) !important;
  color:var(--sinn-dark) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 10px 24px rgba(18, 60, 105,.04) !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(37, 99, 235,.55) !important;
  box-shadow:0 0 0 .22rem rgba(37, 99, 235,.12), 0 12px 28px rgba(18, 60, 105,.06) !important;
  outline:none !important;
}
label,.form-label{font-weight:800;color:var(--sinn-navy);font-size:.92rem;}
.input-group-text{
  border-radius:16px !important;
  border:1px solid rgba(18, 60, 105,.18) !important;
  background:rgba(248, 250, 252,.90) !important;
  color:var(--sinn-primary);
  font-weight:900;
}

/* ---------- Tables ---------- */
.sinn-table-scroll,
.table-responsive,
.datatable-wrapper,
.dataTables_wrapper{
  width:100%;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  border-radius:20px;
}
table,
.table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 9px !important;
  min-width:760px;
  margin-bottom:0 !important;
}
.table thead th,
table thead th{
  background:#123C69 !important;
  color:#FFFFFF !important;
  border:0 !important;
  padding:14px 16px !important;
  font-size:.78rem !important;
  text-transform:uppercase;
  letter-spacing:.07em;
  white-space:nowrap;
}
.table thead th:first-child{border-radius:16px 0 0 16px;}
.table thead th:last-child{border-radius:0 16px 16px 0;}
.table tbody tr,
table tbody tr{
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 8px 24px rgba(18, 60, 105,.06);
}
.table tbody td,
table tbody td{
  border-top:1px solid rgba(18, 60, 105,.08) !important;
  border-bottom:1px solid rgba(18, 60, 105,.08) !important;
  padding:13px 16px !important;
  vertical-align:middle !important;
  color:var(--sinn-dark);
}
.table tbody td:first-child{border-left:1px solid rgba(18, 60, 105,.08) !important;border-radius:16px 0 0 16px;}
.table tbody td:last-child{border-right:1px solid rgba(18, 60, 105,.08) !important;border-radius:0 16px 16px 0;}
.table .btn,.table button{white-space:nowrap;}
.badge,
.status-badge{
  border-radius:999px !important;
  padding:.48rem .72rem !important;
  font-weight:900 !important;
  letter-spacing:.02em;
}

/* ---------- Header / admin / staff ---------- */
.header,
#header{
  height:72px !important;
  background:rgba(248, 250, 252,.92) !important;
  border-bottom:1px solid rgba(18, 60, 105,.12) !important;
  box-shadow:0 16px 38px rgba(18, 60, 105,.09) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header .toggle-sidebar-btn,
#header .toggle-sidebar-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--sinn-navy) !important;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(18, 60, 105,.12);
  box-shadow:0 10px 22px rgba(18, 60, 105,.08);
  cursor:pointer !important;
}
.header .logo span,
.header-brand-title{color:var(--sinn-navy) !important;}
.header-brand-subtitle{color:rgba(18, 60, 105,.72) !important;}
.header-nav .nav-icon,
.header-nav .nav-link,
.header-nav .bi,
.header-nav a{color:var(--sinn-navy) !important;}

.sidebar,
#sidebar{
  top:72px !important;
  background:#FFFFFF !important;
  border-right:1px solid rgba(18, 60, 105,.12) !important;
  box-shadow:16px 0 44px rgba(18, 60, 105,.08) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.sidebar-nav .nav-link,
.sidebar-nav .nav-content a{
  border-radius:16px !important;
  color:var(--sinn-slate) !important;
  font-weight:850 !important;
  transition:.18s ease;
}
.sidebar-nav .nav-link i,
.sidebar-nav .nav-content a i{color:var(--sinn-primary) !important;}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:not(.collapsed),
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active{
  color:var(--sinn-primary-dark) !important;
  background:#F8FAFC !important;
  box-shadow:0 10px 22px rgba(37, 99, 235,.08);
}
#main,
.main{
  padding-top:92px !important;
  background:transparent !important;
}
.pagetitle,
.page-title-wrap{
  margin-bottom:14px !important;
}
.breadcrumb{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(18, 60, 105,.10);
  border-radius:999px;
  display:inline-flex;
  padding:8px 14px !important;
}

/* ---------- Public navbar/footer ---------- */
.premium-navbar,
.navbar{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.footer,
footer{
  background:#123C69 !important;
  color:rgba(255,255,255,.82) !important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer a{color:#FFFFFF !important;}
footer p,footer li,footer span{color:rgba(255,255,255,.76) !important;}

/* ---------- Modals / dialogs ---------- */
.modal-backdrop.show{opacity:.55 !important;backdrop-filter:blur(6px);}
.modal-content{overflow:hidden;}
.modal-header .btn-close{
  border-radius:50% !important;
  background-color:rgba(255,255,255,.72) !important;
  box-shadow:0 8px 18px rgba(18, 60, 105,.10);
}
.swal2-popup{
  border-radius:30px !important;
  background:#FFFFFF !important;
  box-shadow:0 30px 90px rgba(18, 60, 105,.20) !important;
}

/* ---------- Images / carousel / QR ---------- */
.room-card img,
.activity-card img,
.carousel img,
.hero-slider img,
.payment-qr-img,
.qr-image,
.current-carousel-image img{
  object-fit:cover;
}
.payment-qr-img,
.qr-image,
.selected-payment-qr img{
  object-fit:contain !important;
  background:#FFFFFF;
  border-radius:22px;
  border:1px solid rgba(18, 60, 105,.12);
  box-shadow:0 16px 40px rgba(18, 60, 105,.10);
}

/* ---------- Better mobile responsiveness ---------- */
@media (max-width:1199.98px){
  #main,.main{padding-left:18px !important;padding-right:18px !important;}
}
@media (max-width:991.98px){
  .sidebar,#sidebar{left:-310px;transition:left .22s ease;width:292px !important;z-index:1045;}
  body.toggle-sidebar .sidebar,
  body.toggle-sidebar #sidebar{left:0 !important;}
  #main,.main{margin-left:0 !important;padding-top:86px !important;}
  .card,.premium-card,.modal-content{border-radius:22px !important;}
  .row{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
}
@media (max-width:767.98px){
  body{background-attachment:scroll;}
  .container,.container-fluid{padding-left:14px !important;padding-right:14px !important;}
  #main,.main{padding-left:12px !important;padding-right:12px !important;padding-top:82px !important;}
  .header,#header{height:66px !important;}
  .sidebar,#sidebar{top:66px !important;}
  h1{font-size:clamp(1.55rem,6vw,2.2rem) !important;}
  h2{font-size:clamp(1.35rem,5.4vw,1.9rem) !important;}
  h3{font-size:clamp(1.12rem,4.8vw,1.55rem) !important;}
  .card-body{padding:18px !important;}
  .modal-dialog{margin:10px !important;}
  .modal-body{padding:18px !important;}
  .btn,.form-control,.form-select{min-height:42px;}
  .btn-group,.button-group,.actions,.table-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
  }
  .table thead th,table thead th{font-size:.72rem !important;padding:12px !important;}
  .table tbody td,table tbody td{font-size:.82rem !important;padding:12px !important;}
  table,.table{min-width:700px;}
  .datatable-top,.datatable-bottom,
  .dataTables_length,.dataTables_filter,
  .dataTables_info,.dataTables_paginate{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:space-between;
  }
  .dataTables_filter input,
  .datatable-input{width:100% !important;max-width:100% !important;}
  .login-shell,.register-shell{border-radius:26px !important;}
  .login-card,.register-card{padding:22px 16px !important;}
  .payment-qr-img,.qr-image,.selected-payment-qr img{max-width:100% !important;height:auto !important;}
}
@media (max-width:575.98px){
  .header-brand-logo{max-width:48px !important;}
  .header .logo,.header-brand-text{min-width:0;}
  .pagetitle h1{font-size:1.35rem !important;}
  .breadcrumb{font-size:.76rem;padding:6px 10px !important;}
  .card-body{padding:15px !important;}
  .table .btn,table .btn{font-size:.72rem !important;padding:.38rem .62rem !important;}
  .modal-title{font-size:1.05rem !important;}
  .summary-card,.report-card{padding:14px !important;}
  .form-label,label{font-size:.84rem;}
}

/* ---------- Print safety ---------- */
@media print{
  body{background:#FFFFFF !important;}
  .header,.sidebar,.btn,.no-print,.filter-card,nav,footer{display:none !important;}
  #main,.main{margin:0 !important;padding:0 !important;}
  .card,.table-card,.report-card{box-shadow:none !important;border:1px solid #F8FAFC !important;}
  table,.table{min-width:0 !important;border-spacing:0 !important;}
  .table tbody tr,table tbody tr{box-shadow:none !important;}
}


/* SUNSHINE INN FINAL SIDEBAR LINE FIX
   Removes the broken blue/gray scrollbar line shown at the right edge of the admin/staff sidebar.
   Scrolling still works with mouse wheel/touch. */
#sidebar.sidebar,
.sidebar{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
#sidebar.sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}
#sidebar.sidebar::-webkit-scrollbar-track,
#sidebar.sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-thumb{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* Requested solid palette enforcement: #123C69, #2563EB, #38BDF8, #F8FAFC, #8ABF69, #0F6B4A, black, white. */
:root{
  --bs-primary:#2563EB;
  --bs-primary-rgb:37, 99, 235;
  --bs-info:#38BDF8;
  --bs-info-rgb:56, 189, 248;
  --bs-success:#0F6B4A;
  --bs-success-rgb:15, 107, 74;
  --bs-warning:#8ABF69;
  --bs-warning-rgb:138, 191, 105;
  --bs-danger:#000000;
  --bs-danger-rgb:0,0,0;
  --bs-dark:#000000;
  --bs-dark-rgb:0,0,0;
  --bs-light:#F8FAFC;
  --bs-light-rgb:248, 250, 252;
  --bs-gradient:none;
}
.btn-primary,.btn-warning,.btn-info,.bg-primary,.bg-warning,.bg-info{
  background:#2563EB !important;
  background-image:none !important;
  border-color:#2563EB !important;
  color:#FFFFFF !important;
}
.btn-success,.bg-success{
  background:#0F6B4A !important;
  background-image:none !important;
  border-color:#0F6B4A !important;
  color:#FFFFFF !important;
}
.btn-danger,.bg-danger{
  background:#000000 !important;
  background-image:none !important;
  border-color:#000000 !important;
  color:#FFFFFF !important;
}
.btn-secondary,.bg-secondary{
  background:#123C69 !important;
  background-image:none !important;
  border-color:#123C69 !important;
  color:#FFFFFF !important;
}
.btn-light,.bg-light{background:#F8FAFC !important;background-image:none !important;color:#000000 !important;}
.text-primary{color:#2563EB !important;}.text-info{color:#38BDF8 !important;}.text-success{color:#0F6B4A !important;}.text-warning{color:#8ABF69 !important;}.text-danger{color:#000000 !important;}