@import url("base.css?v=20260618-invoice-no-date-final");
@import url("layout.css?v=20260618-invoice-no-date-final");
@import url("sidebar.css?v=20260618-invoice-no-date-final");
@import url("topbar.css?v=20260618-invoice-no-date-final");
@import url("forms.css?v=20260618-invoice-no-date-final");
@import url("cards.css?v=20260618-invoice-no-date-final");
@import url("tables.css?v=20260618-invoice-no-date-final");
@import url("modal.css?v=20260618-invoice-no-date-final");
@import url("customer.css?v=20260618-invoice-no-date-final");
@import url("responsive.css?v=20260625-admin-mobile-ui-v1");

/* Admin/customer mobile sidebar toggle fix */
@media (max-width: 760px) {
  #adminView.sidebar-collapsed .sidebar,
  #customerView.sidebar-collapsed .sidebar {
    display: none !important;
  }

  #adminView.sidebar-collapsed .main,
  #customerView.sidebar-collapsed .main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #adminView.sidebar-collapsed .topbar,
  #customerView.sidebar-collapsed .topbar {
    width: 100% !important;
  }
}

/* Mobile sidebar opened as overlay */
@media (max-width: 760px) {
  #adminView:not(.sidebar-collapsed) .sidebar,
  #customerView:not(.sidebar-collapsed) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    max-width: 82vw !important;
    height: 100vh !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
  }

  #adminView:not(.sidebar-collapsed) .main,
  #customerView:not(.sidebar-collapsed) .main {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Mobile header polish - Dewa Hotspot */
@media (max-width: 768px) {
  .topbar,
  .header,
  .main-header,
  .customer-header,
  .admin-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .topbar {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  .topbar .btn,
  .topbar button,
  .topbar a {
    min-width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .topbar .avatar,
  .topbar .user-avatar,
  .topbar .profile-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .topbar .badge {
    top: -4px !important;
    right: -4px !important;
  }
}

#pwaLoginInstallBtn {
  max-width: 100% !important;
}

/* Customer notification popup */
.account-popover {
  position: relative;
}

.account-popover .account-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  width: 280px;
  z-index: 9999;
}

.account-popover .account-menu.show {
  display: block;
}

.notification-popover .account-menu {
  max-height: 420px;
  overflow-y: auto;
}

#customerNotificationMenu {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  width: 280px;
  z-index: 99999;
}

/* Rapikan popup notifikasi pelanggan agar tidak menutup ikon akun */
.notification-popover {
  position: relative;
}

#customerNotificationMenu {
  right: 42px !important;
  top: 40px !important;
  width: 245px !important;
  max-width: calc(100vw - 80px);
  z-index: 9999;
}

#customerNotificationMenu .account-menu-header {
  padding: 10px 12px;
}

#customerNotificationMenu .account-menu-body {
  padding: 10px 12px;
}

/* FIX FINAL: popup notifikasi jangan menutup ikon akun */
.notification-popover #customerNotificationMenu {
  left: -205px !important;
  right: auto !important;
  top: 42px !important;
  width: 250px !important;
  max-width: 250px !important;
  z-index: 9000 !important;
}

#customerAccountMenu {
  z-index: 10000 !important;
}