/* =========================================================
   INTERNAL DASHBOARD RESPONSIVE FINAL
   Untuk sidebar/dashboard guru, siswa, pembeli, superadmin.
   Tidak mengubah logic, hanya memperbaiki UI/UX.
   ========================================================= */
:root{
  --ir-navy:#08213f;
  --ir-sidebar:#082b49;
  --ir-sidebar-2:#061d35;
  --ir-blue:#1677ff;
  --ir-sky:#0ea5e9;
  --ir-green:#10b981;
  --ir-soft:#eef5fb;
  --ir-line:#d9e8f7;
  --ir-muted:#64748b;
  --ir-shadow:0 18px 48px rgba(8,33,63,.10);
  --ir-sidebar-width:300px;
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:#eef5fb !important;
  color:var(--ir-navy);
}

/* ====== DETEKSI SIDEBAR UMUM ====== */
.sidebar,
.app-sidebar,
.side-menu,
.sidenav,
.left-sidebar,
aside.sidebar,
#sidebar,
#sidebarMenu{
  width:var(--ir-sidebar-width) !important;
  min-width:var(--ir-sidebar-width) !important;
  max-width:var(--ir-sidebar-width) !important;
  background:linear-gradient(180deg,var(--ir-sidebar) 0%,var(--ir-sidebar-2) 100%) !important;
  color:#fff !important;
  border-right:0 !important;
  box-shadow:10px 0 35px rgba(8,33,63,.12) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
}

.sidebar *,
.app-sidebar *,
.side-menu *,
.sidenav *,
.left-sidebar *,
aside.sidebar *,
#sidebar *,
#sidebarMenu *{
  box-sizing:border-box;
}

/* brand sidebar */
.sidebar .brand,
.app-sidebar .brand,
.logo-area,
.sidebar-brand,
.sidebar-header{
  padding:22px 18px 18px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  margin-bottom:10px !important;
}

.sidebar img,
.app-sidebar img,
.logo-area img,
.sidebar-brand img{
  max-width:58px !important;
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  border-radius:18px !important;
}

/* menu section labels */
.sidebar h1,.sidebar h2,.sidebar h3,.sidebar h4,
.app-sidebar h1,.app-sidebar h2,.app-sidebar h3,.app-sidebar h4,
.side-menu h1,.side-menu h2,.side-menu h3,.side-menu h4{
  color:#fff !important;
  word-break:normal !important;
}

.sidebar small,
.app-sidebar small,
.side-menu small{
  color:rgba(255,255,255,.70) !important;
}

/* menu item umum */
.sidebar a,
.app-sidebar a,
.side-menu a,
.sidenav a,
.left-sidebar a,
aside.sidebar a,
#sidebar a,
#sidebarMenu a{
  color:rgba(255,255,255,.88) !important;
  text-decoration:none !important;
  border-radius:16px !important;
  transition:.18s ease !important;
  word-break:normal !important;
  white-space:normal !important;
}

/* kalau menu berupa grid icon-title-desc */
.sidebar nav a,
.app-sidebar nav a,
.side-menu nav a,
.sidenav nav a,
.left-sidebar nav a,
aside.sidebar nav a,
#sidebar nav a,
#sidebarMenu nav a{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:10px 12px !important;
  align-items:start !important;
  padding:12px 13px !important;
  margin:4px 12px !important;
  min-height:58px !important;
}

/* text menu */
.sidebar nav a b,
.app-sidebar nav a b,
.side-menu nav a b,
.sidenav nav a b,
.left-sidebar nav a b,
aside.sidebar nav a b,
#sidebar nav a b,
#sidebarMenu nav a b,
.sidebar nav a strong,
.app-sidebar nav a strong,
.side-menu nav a strong{
  display:block !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:950 !important;
  color:#fff !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.sidebar nav a small,
.app-sidebar nav a small,
.side-menu nav a small,
.sidenav nav a small,
.left-sidebar nav a small,
aside.sidebar nav a small,
#sidebar nav a small,
#sidebarMenu nav a small,
.sidebar nav a span + span,
.app-sidebar nav a span + span{
  display:block !important;
  grid-column:2 !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:700 !important;
  margin-top:2px !important;
}

/* icon menu */
.sidebar nav a > span:first-child,
.app-sidebar nav a > span:first-child,
.side-menu nav a > span:first-child,
.sidenav nav a > span:first-child,
.left-sidebar nav a > span:first-child,
aside.sidebar nav a > span:first-child,
#sidebar nav a > span:first-child,
#sidebarMenu nav a > span:first-child{
  width:32px !important;
  height:32px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.10) !important;
  font-size:17px !important;
}

/* active/hover */
.sidebar a:hover,
.sidebar a.active,
.app-sidebar a:hover,
.app-sidebar a.active,
.side-menu a:hover,
.side-menu a.active,
.sidenav a:hover,
.sidenav a.active,
.left-sidebar a:hover,
.left-sidebar a.active,
#sidebar a:hover,
#sidebar a.active{
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
  transform:translateX(2px);
}

/* section title in sidebar */
.sidebar .menu-title,
.app-sidebar .menu-title,
.side-menu .menu-title,
.nav-section-title{
  display:block !important;
  padding:13px 14px 6px !important;
  color:rgba(255,255,255,.92) !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
}

/* main content */
.main,
.app-main,
.content,
.main-content,
.page-content,
.dashboard-content,
#content,
.content-wrapper{
  background:#eef5fb !important;
  min-width:0 !important;
}

/* kalau layout lama pakai margin-left fixed */
.main:not(.no-auto-fix),
.app-main:not(.no-auto-fix),
.content-wrapper:not(.no-auto-fix){
  transition:.2s ease;
}

/* Header/card dashboard */
.topbar,
.app-topbar,
.header,
.page-header,
.content-header,
.dashboard-header{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(14px) !important;
  border:1px solid rgba(216,232,247,.92) !important;
  border-radius:26px !important;
  box-shadow:var(--ir-shadow) !important;
  padding:20px 22px !important;
  margin-bottom:18px !important;
}

/* cards/forms/tables */
.card,.box,.panel,.widget,.stat-card,.dashboard-card,.table-card,.form-card,
.buyer-hero,.buyer-card,.hotel-card-pro,.notif-card{
  border-radius:24px !important;
  border:1px solid var(--ir-line) !important;
  box-shadow:var(--ir-shadow) !important;
}

input,select,textarea,.form-control{
  border-radius:14px !important;
  border:1px solid #c9daf0 !important;
  min-height:46px;
  font-weight:800;
}

input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:#1677ff !important;
  box-shadow:0 0 0 4px rgba(22,119,255,.10) !important;
}

.table-responsive,
.buyer-table-wrap,
.notif-table-wrap{
  border-radius:20px !important;
  overflow:auto !important;
}

/* ====== MOBILE DRAWER SIDEBAR ====== */
.internal-mobile-menu-btn,
.internal-sidebar-backdrop{
  display:none;
}

@media(max-width: 992px){
  :root{--ir-sidebar-width:300px}

  .internal-mobile-menu-btn{
    display:grid !important;
    place-items:center !important;
    position:fixed !important;
    right:16px !important;
    bottom:18px !important;
    width:54px !important;
    height:54px !important;
    z-index:5000 !important;
    border:0 !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#06b6d4,#2563eb) !important;
    color:#fff !important;
    font-size:25px !important;
    font-weight:1000 !important;
    box-shadow:0 18px 35px rgba(37,99,235,.30) !important;
    cursor:pointer !important;
  }

  .internal-sidebar-backdrop{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    background:rgba(4,14,31,.66) !important;
    backdrop-filter:blur(4px) !important;
    z-index:4990 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:.22s ease !important;
  }

  body.internal-sidebar-open .internal-sidebar-backdrop{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .sidebar,
  .app-sidebar,
  .side-menu,
  .sidenav,
  .left-sidebar,
  aside.sidebar,
  #sidebar,
  #sidebarMenu{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(86vw,320px) !important;
    min-width:min(86vw,320px) !important;
    max-width:min(86vw,320px) !important;
    height:100dvh !important;
    z-index:5001 !important;
    transform:translateX(-105%) !important;
    transition:transform .26s cubic-bezier(.2,.8,.2,1) !important;
    border-radius:0 26px 26px 0 !important;
    box-shadow:28px 0 60px rgba(8,33,63,.28) !important;
  }

  body.internal-sidebar-open .sidebar,
  body.internal-sidebar-open .app-sidebar,
  body.internal-sidebar-open .side-menu,
  body.internal-sidebar-open .sidenav,
  body.internal-sidebar-open .left-sidebar,
  body.internal-sidebar-open aside.sidebar,
  body.internal-sidebar-open #sidebar,
  body.internal-sidebar-open #sidebarMenu{
    transform:translateX(0) !important;
  }

  body.internal-sidebar-open{
    overflow:hidden !important;
  }

  .main,
  .app-main,
  .content,
  .main-content,
  .page-content,
  .dashboard-content,
  #content,
  .content-wrapper{
    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
  }

  .topbar,.app-topbar,.header,.page-header,.content-header,.dashboard-header{
    border-radius:22px !important;
    padding:16px !important;
  }

  .buyer-hero,
  .hotel-hero-pro,
  .notif-hero{
    border-radius:24px !important;
    padding:22px !important;
  }

  .buyer-hero{
    grid-template-columns:1fr !important;
  }
}

@media(max-width: 640px){
  body{font-size:14px}

  .main,.app-main,.content,.main-content,.page-content,.dashboard-content,#content,.content-wrapper{
    padding:12px !important;
  }

  h1{font-size:26px !important}
  h2{font-size:22px !important}
  h3{font-size:19px !important}

  .card,.box,.panel,.widget,.stat-card,.dashboard-card,.table-card,.form-card,
  .buyer-card,.hotel-card-pro,.notif-card{
    border-radius:20px !important;
    padding:16px !important;
  }

  .buyer-grid,
  .hotel-grid-pro,
  .notif-grid,
  .role-home-grid,
  .role-dashboard-grid{
    grid-template-columns:1fr !important;
  }

  .btn,.buyer-btn,.hotel-btn,.notif-inline-form button,button,input[type="submit"]{
    width:100%;
    min-height:46px;
  }

  .action-buttons,
  .table-actions,
  .btn-group,
  .buyer-card-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .row{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  [class*="col-"]{
    padding-left:0 !important;
    padding-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
}