/* ======================================================================
   GLOBAL STYLE (Compact Header + Safe Full-Width + Modal Priority)
   Dimensi Printing - 2025-08-09
   ====================================================================== */

html, body { margin: 0; padding: 0; background: #f9f9f9; }
* { box-sizing: border-box; }

/* Lebar konten maksimum disamakan dengan layout halaman besar */
:root{ --content-max: 1360px; }

/* ===== Header compact ===== */
.header-bg-custom{
  width:100%;
  background:linear-gradient(90deg,#c32420 0%, #fd7b2a 100%);
  box-shadow:0 1px 7px #e6e9ef33;
  border-bottom-left-radius:.7rem;
  border-bottom-right-radius:.7rem;
  margin-bottom:12px;
}
.header-flex-center{
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:10px; padding:8px 14px; text-align:left;
  max-width:var(--content-max); margin:0 auto;
}
.header-logo-modern{
  width:38px; height:38px; border-radius:10px; background:#fff; margin:0;
  box-shadow:0 2px 10px #0001; object-fit:contain; display:block; border:2px solid #fff;
}
.header-title-modern{
  color:#fff; font-size:1.15rem; font-weight:800; letter-spacing:.3px; line-height:1.1; margin:0;
  text-shadow:0 2px 12px #c3242024, 0 1px 4px #fff3;
}
@media (max-width:600px){
  .header-flex-center{ padding:7px 12px; }
  .header-logo-modern{ width:32px; height:32px; }
  .header-title-modern{ font-size:1rem; letter-spacing:.2px; }
}

/* ===== Warning/Marquee ===== */
.warning-fullwidth{ width:100% !important; min-width:100% !important; margin-left:0 !important; border-radius:0 !important; position:relative; left:0; padding:0 !important; z-index:1001; }
.warning-bar{ font-weight:600; font-size:13.2px; line-height:1.17; white-space:nowrap; overflow:hidden; border-radius:0 !important; }
.due-warning-bar{ background:#f36f20; color:#fff; }
.stock-warning-bar{ background:#ffd700; color:#a33; }
.warning-bar marquee{ font:inherit !important; padding:0 !important; margin:0 !important; }

/* ===== Menu bar (desktop/tablet) ===== */
.menu-bar-custom{
  display:flex; align-items:center; background:#fff; border-bottom:1.5px solid #eee;
  box-shadow:0 1.5px 7px #0001; padding:0 6px; min-height:48px; width:100%;
  position:sticky; top:0; z-index:100; overflow:visible !important;
}
.menu-group-custom{
  display:flex; align-items:center; gap:.1rem; flex-wrap:nowrap;
  overflow-x:visible !important; scrollbar-width:none; -ms-overflow-style:none;
  position:static !important; margin:0 auto; max-width:var(--content-max); width:100%; padding:0 8px;
}
.menu-group-custom::-webkit-scrollbar{ display:none; }

.menu-item-custom{ position:relative; }
.menu-link-custom, .submenu-link-custom{
  display:block; padding:9px 10px; font-size:1.01rem; font-weight:600; color:#222;
  border-radius:8px 8px 0 0; text-decoration:none; transition:.17s; background:none; white-space:nowrap;
  letter-spacing:0; margin:0 1px; text-align:center; min-width:0;
  /* Kunci: cegah menyusut agar teks tidak saling menindih */
  flex: 0 0 auto;
}
.menu-link-custom:hover, .menu-link-custom.active,
.submenu-link-custom:hover, .submenu-link-custom.active{
  background:#fd5800; color:#fff !important; box-shadow:0 3px 11px #fd58001b;
}
.menu-link-custom[title="Logout"], .menu-link-custom.logout-icon-link{ color:#b92622 !important; padding:0 11px; }
.menu-link-custom[title="Logout"]:hover, .menu-link-custom.logout-icon-link:hover{ background:#fd5800; color:#fff !important; }
.menu-link-custom i{ font-size:1.12em; }

/* Submenu (desktop) */
.submenu-custom{
  display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee;
  box-shadow:0 4px 12px #0001; border-radius:0 0 8px 8px; min-width:165px; z-index:1999 !important;
}
@media (min-width:821px){
  .menu-item-custom:hover > .submenu-custom,
  .menu-item-custom.open  > .submenu-custom{ display:block; animation:fadeIn .18s; }
}

/* Kompresi khusus agar tetap satu baris tanpa tumpang tindih */
@media (max-width:1440px){
  .menu-link-custom, .submenu-link-custom{ font-size:.98rem; padding:8px 8px; }
}
@media (max-width:1280px){
  .menu-link-custom, .submenu-link-custom{ font-size:.95rem; padding:7px 6px; }
}
@media (max-width:1140px){
  .menu-link-custom, .submenu-link-custom{ font-size:.92rem; padding:7px 5px; }
}

/* ===== Mobile menu ===== */
@media (max-width:820px){
  .menu-group-custom{
    display:none; position:absolute; left:0; width:100%; background:#fff; box-shadow:0 5px 32px #2221;
    flex-direction:column; gap:0; padding:0 0 9px 0; z-index:1999; overflow-x:hidden !important;
  }
  .menu-group-custom.open{ display:flex; }
  .menu-item-custom{ width:100%; }
  .menu-link-custom{ border-radius:0 !important; width:100%; text-align:left; padding:12px 15px; }
  .submenu-custom{ position:static; box-shadow:none; border:none; min-width:0; z-index:2 !important; }
  .submenu-link-custom{ padding:10px 22px; width:100%; border-bottom:1px solid #eee; }

  /* Mobile: submenu via class .open (bukan hover) */
  .menu-item-custom:hover > .submenu-custom{ display:none !important; }
  .menu-item-custom.open  > .submenu-custom{ display:block !important; animation:fadeIn .18s ease-out; }
}

@keyframes fadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

/* ===== Hamburger ===== */
.hamburger{ display:none; flex-direction:column; justify-content:center; cursor:pointer; width:34px; height:34px; margin-left:7px; }
.hamburger span{ height:4px; width:24px; background:#c32420; margin:3px 0; border-radius:2px; display:block; transition:.23s; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:820px){ .hamburger{ display:flex; } }

/* Layering */
.header-bg-custom, .header-flex-center{ z-index:10 !important; }
.menu-bar-custom, .menu-group-custom{ z-index:1999 !important; }

/* ===== Modal priority ===== */
.modal-backdrop.show{ z-index:5000 !important; }
.modal{ z-index:5010 !important; }
body.modal-open .menu-bar-custom,
body.modal-open .warning-fullwidth,
body.modal-open .submenu-custom{ z-index:1 !important; }

/* ===== Kompatibilitas: alias kelas lama ke baru ===== */
.menu-bar, .menu-bar-custom{ display:flex; align-items:center; background:#fff; border-bottom:1.5px solid #eee; box-shadow:0 1.5px 7px #0001; padding:0 6px; min-height:48px; width:100%; position:sticky; top:0; z-index:100; overflow:visible !important; }
.menu-group, .menu-group-custom{ display:flex; gap:.1rem; align-items:center; flex-wrap:nowrap; overflow-x:visible !important; scrollbar-width:none; -ms-overflow-style:none; position:static !important; margin:0 auto; max-width:var(--content-max); width:100%; padding:0 8px; }
.menu-link, .menu-link-custom, .submenu-link, .submenu-link-custom{ display:block; padding:9px 10px; font-size:1.01rem; font-weight:600; color:#222; border-radius:8px 8px 0 0; text-decoration:none; transition:.17s; white-space:nowrap; letter-spacing:0; margin:0 1px; text-align:center; min-width:0; flex:0 0 auto; }
.menu-link:hover, .menu-link.active, .menu-link-custom:hover, .menu-link-custom.active, .submenu-link:hover, .submenu-link.active, .submenu-link-custom:hover, .submenu-link-custom.active{ background:#fd5800; color:#fff !important; box-shadow:0 3px 11px #fd58001b; }
.menu-item, .menu-item-custom{ position:relative; }
.submenu, .submenu-custom{ display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee; box-shadow:0 4px 12px #0001; border-radius:0 0 8px 8px; min-width:165px; z-index:1999 !important; }
@media (min-width:821px){
  .menu-item:hover > .submenu, .menu-item.open > .submenu, .menu-item-custom:hover > .submenu-custom, .menu-item-custom.open > .submenu-custom{ display:block; animation:fadeIn .18s; }
}
@media (max-width:820px){
  .menu-group, .menu-group-custom{ display:none; position:absolute; left:0; width:100%; background:#fff; box-shadow:0 5px 32px #2221; flex-direction:column; gap:0; padding:0 0 9px 0; z-index:1999; overflow-x:hidden !important; }
  .menu-group.open, .menu-group-custom.open{ display:flex; }
  .menu-item, .menu-item-custom{ width:100%; }
  .menu-link, .menu-link-custom{ border-radius:0 !important; width:100%; text-align:left; padding:12px 15px; }
  .submenu, .submenu-custom{ position:static; box-shadow:none; border:none; min-width:0; z-index:2 !important; }
  .menu-item:hover > .submenu, .menu-item-custom:hover > .submenu-custom{ display:none !important; }
  .menu-item.open  > .submenu, .menu-item-custom.open  > .submenu-custom{ display:block !important; animation:fadeIn .18s ease-out; }
}
/* ===== Tablet landscape fix (821–1200px): allow wrap, compact spacing ===== */
@media (min-width: 821px) and (max-width: 1200px) {
  .menu-bar-custom {
    padding-top: 2px;          /* beri ruang bila jadi 2 baris */
    padding-bottom: 4px;
  }
  .menu-group-custom {
    flex-wrap: wrap;           /* kunci: izinkan jadi 2 baris */
    row-gap: 4px;              /* jarak antar baris */
    justify-content: flex-start;
    max-width: 96vw;           /* sedikit longgar agar tidak “keluar” konten */
  }
  .menu-link-custom,
  .submenu-link-custom {
    padding: 6px 8px;          /* lebih rapat dari desktop */
    font-size: 0.90rem;        /* kompresi ringan */
    line-height: 1.1;
  }
  .menu-item-custom {
    flex: 0 0 auto;            /* tetap tidak menyusut, tapi bisa pindah baris */
  }
}

/* ===== Jika ada marquee di atas, beri offset sticky agar tidak menimpa ===== */
:root { --menu-top: 0px; }             /* default */
.menu-bar-custom { top: var(--menu-top); }