:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --accent: #5b8cff;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.35);

  --radius: 18px;

  /* Backgrounds */
  --bg-landing: radial-gradient(1200px 500px at 20% 20%, rgba(91,140,255,.22), transparent 60%),
               radial-gradient(900px 450px at 80% 30%, rgba(120,255,225,.12), transparent 55%),
               linear-gradient(180deg, #070b14, #0b1220);
  --bg-app: linear-gradient(180deg, #070b14, #0b1220);
  --bg-auth: radial-gradient(1000px 450px at 30% 20%, rgba(91,140,255,.22), transparent 55%),
            linear-gradient(180deg, #070b14, #0b1220);

  /* SIDEBAR VARIABLES (DEFAULT/DARK) */
  --sidebar-bg: var(--panel);
  --sidebar-link: rgba(255,255,255,.82);
  --sidebar-link-hover-bg: rgba(255,255,255,.08);
  --sidebar-link-active-bg: rgba(91,140,255,.18);
  --sidebar-link-active: rgba(255,255,255,.95);
  --sidebar-sub-dot: rgba(255,255,255,.35);
}

/* LIGHT THEME */
html[data-theme="light"]{
  --text: rgba(11,18,32,.92);
  --muted: rgba(11,18,32,.68);
  --accent: #2f6bff;

  --panel: rgba(0,0,0,.04);
  --panel2: rgba(0,0,0,.06);
  --border: rgba(0,0,0,.08);
  --shadow: 0 18px 45px rgba(0,0,0,.10);

  --bg-landing: radial-gradient(1200px 500px at 20% 20%, rgba(47,107,255,.18), transparent 60%),
               radial-gradient(900px 450px at 80% 30%, rgba(0,180,140,.10), transparent 55%),
               linear-gradient(180deg, #f7f9ff, #eef3ff);
  --bg-app: linear-gradient(180deg, #f7f9ff, #eef3ff);
  --bg-auth: radial-gradient(1000px 450px at 30% 20%, rgba(47,107,255,.16), transparent 55%),
            linear-gradient(180deg, #f7f9ff, #eef3ff);

  /* SIDEBAR VARIABLES (LIGHT) */
  --sidebar-bg: rgba(255,255,255,.65);
  --sidebar-link: rgba(11,18,32,.82);
  --sidebar-link-hover-bg: rgba(0,0,0,.05);
  --sidebar-link-active-bg: rgba(47,107,255,.14);
  --sidebar-link-active: rgba(11,18,32,.95);
  --sidebar-sub-dot: rgba(11,18,32,.35);
}

*{ box-sizing:border-box; }
html, body{ width:100%; }
body{ color: var(--text); overflow-x:hidden; }
body{ -webkit-overflow-scrolling: touch; }

/* Prevent horizontal scroll caused by wide content inside flex containers */
.app-shell, .app-main, .app-content{ overflow-x:hidden; }
.app-main, .app-content{ min-width:0; }

/* Media elements should never force horizontal scrolling */
img, svg, video, canvas{ max-width:100%; height:auto; }

/* Helper: allow long strings (receipt numbers, tokens, URLs) to wrap */
.text-break, .break-word{ word-break: break-word; overflow-wrap: anywhere; }

.bg-landing{ background: var(--bg-landing); min-height:100vh; }
.bg-app{ background: var(--bg-app); min-height:100vh; }
.bg-auth{ background: var(--bg-auth); min-height:100vh; }

.shadow-soft{ box-shadow: var(--shadow); border: 1px solid var(--border); border-radius: var(--radius); }
.btn-soft{ background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
.btn-soft:hover{ background: var(--panel); color: var(--text); }
.btn-icon{ width:42px; height:42px; border-radius: 14px; background: var(--panel2); border:1px solid var(--border); color: var(--text); }
.btn-icon:hover{ background: var(--panel); }
.brand-dot{ width:12px; height:12px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px rgba(91,140,255,.18); display:inline-block; }
/* Brand logo sizing (force small icon everywhere) */
.brand-logo{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain;
  border-radius:6px;
  display:inline-block;
}
.app-footer .brand-logo,
.sidebar-header .brand-logo,
.topbar .brand-logo,
.navbar .brand-logo{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
}

.landing-nav{ background: transparent; padding: 16px 0; }
.hero{ padding: 72px 0 28px; }
.badge-pill{ display:inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: var(--muted); }
.glass-card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(10px); }

.icon-bubble{ width:44px; height:44px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: rgba(91,140,255,.18); border: 1px solid rgba(91,140,255,.26); }
.icon-bubble.bg-soft{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

.feature-card{
  padding: 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border);
  transition: transform .25s ease, background .25s ease;
}
.feature-card:hover{ transform: translateY(-4px); background: var(--panel2); }
.feature-card i{ font-size: 22px; color: var(--accent); }

.hero-animate{
  animation: floatIn .65s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes floatIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* AUTH */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 22px; }
.auth-card{ width: 100%; max-width: 520px; background: rgba(255,255,255,.07); border-radius: var(--radius); }

/* APP LAYOUT */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width: 290px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
  display:flex; flex-direction:column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1);
}
.sidebar-header{ padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-body{ padding: 10px; overflow:auto; }
.sidebar-footer{ padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }

.sidebar-nav .nav-link{
  color: var(--sidebar-link);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex; align-items:center;
  gap: 8px;
  transition: background .2s ease, transform .2s ease;
}
.sidebar-nav .nav-link:hover{
  background: var(--sidebar-link-hover-bg);
  transform: translateX(2px);
}
.sidebar-parent{ width:100%; text-align:left; background: transparent; border:0; }

.submenu{
  list-style:none;
  margin: 6px 0 10px 0;
  padding: 0 0 0 10px;
  max-height: 0;
  overflow:hidden;
  transition: max-height .32s cubic-bezier(.2,.8,.2,1);
}
.submenu.open{ max-height: 420px; }
.submenu .nav-link{ padding: 8px 12px; font-size: .95rem; }
.submenu .dot{
  width:6px;
  height:6px;
  border-radius: 99px;
  background: var(--sidebar-sub-dot);
  display:inline-block;
  margin-right: 8px;
}
.chevron{ transition: transform .25s ease; }
.sidebar-parent.open .chevron{ transform: rotate(180deg); }

/* ACTIVE STATE */
.sidebar-nav .nav-link.active{
  background: var(--sidebar-link-active-bg);
  color: var(--sidebar-link-active);
  border: 1px solid var(--border);
}

.app-main{ flex:1; display:flex; flex-direction:column; }
.app-navbar{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.app-content{ padding: 18px; }

/* Center content and keep it readable on wide screens */
.app-content > .container-fluid,
.app-content > .container,
.app-content > .container-lg,
.app-content > .container-md{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.app-footer{
  padding: 14px 0;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.page-hero{
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

/* Responsive layout tweaks */
@media (max-width: 991.98px){
  .page-hero{ flex-direction:column; align-items:flex-start; }
  .page-hero .btn{ width:100%; }
}

/* Tables: avoid horizontal scroll by allowing wrap and fixed layout on small screens */
table{ max-width:100%; }
@media (max-width: 767.98px){
  .table, table.table{
    width:100% !important;
    table-layout: fixed;
  }
  .table th, .table td{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .table td .btn{ margin-top:4px; }
}

/* DataTables: prevent wrapper from pushing page sideways */
.dataTables_wrapper{ width:100% !important; overflow-x:hidden; }
table.dataTable{ width:100% !important; }

/* Form controls: ensure no overflow */
input, select, textarea{ max-width:100%; }

/* Embedded videos: keep within container */
.ratio, .ratio > iframe{ max-width:100%; }
.card-anim{ transition: transform .25s ease; }
.card-anim:hover{ transform: translateY(-3px); }

/* Quick fix: mode terang teks navbar/brand agar lebih kontras */
html[data-theme="light"] .app-navbar .navbar-brand,
html[data-theme="light"] .app-navbar .btn-soft,
html[data-theme="light"] .app-navbar .btn-icon{
  color: var(--text);
}

/* Sidebar collapsed (desktop) */
.app-shell.sidebar-collapsed .app-sidebar{
  width: 86px;
}
.app-shell.sidebar-collapsed .app-sidebar .sidebar-header small,
.app-shell.sidebar-collapsed .app-sidebar .sidebar-nav span,
.app-shell.sidebar-collapsed .app-sidebar .sidebar-footer{
  display:none;
}
.app-shell.sidebar-collapsed .submenu{ display:none; }

/* Mobile sidebar overlay mode */
@media (max-width: 991.98px){
  .app-sidebar{
    position: fixed; top:0; left:0; height:100vh;
    transform: translateX(-110%);
    z-index: 1040;
  }
  .sidebar-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 1030;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .app-shell.sidebar-open .app-sidebar{
    transform: translateX(0);
  }
  .app-shell.sidebar-open .sidebar-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
  body.no-scroll{ overflow: hidden !important; }
  .app-content{ padding: 14px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* YOUTUBE CARD */
.yt-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, background .25s ease;
  color: var(--text);
}
.yt-card:hover{ transform: translateY(-4px); background: var(--panel2); }

.yt-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.yt-play i{
  font-size: 56px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  background: rgba(0,0,0,.28);
  width: 78px;
  height: 78px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.25);
}
html[data-theme="light"] .yt-play i{
  color: rgba(255,255,255,.95);
}
.receipt-paper{
  border-radius: var(--radius);
}

@media print{
  .app-sidebar, .app-navbar, .app-footer, .page-hero, .btn, .submenu, .sidebar-nav { display:none !important; }
  body{ background:#fff !important; }
  .receipt-paper{ border: 0 !important; box-shadow:none !important; }
}

/* Print header (kwitansi, kartu QR, dll) */
.print-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #e5e7eb;
  padding:8px 0;
  margin-bottom:12px;
}
.print-header .ph-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.print-header .ph-logo{
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:10px;
  display:inline-block;
}
.print-header .ph-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  background:#4c8dff;
  box-shadow:0 0 0 6px rgba(76,141,255,0.15);
}
.print-header .ph-text{ line-height:1.15; min-width:0; }
.print-header .ph-app{ font-weight:800; font-size:14px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.print-header .ph-subtitle{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.print-header .ph-right{ text-align:right; line-height:1.15; }
.print-header .ph-title{ font-weight:800; font-size:13px; }
.print-header .ph-year{ font-size:12px; opacity:.75; }


/* Logo preview (admin settings) */
.logo-preview{
  width:100px !important;
  height:100px !important;
  max-width:100px !important;
  max-height:100px !important;
  object-fit:contain;
  border-radius:8px;
  display:inline-block;
}


/* Sidebar collapsed: sembunyikan teks brand (nama aplikasi + Menu ROLE) */
#appShell.sidebar-collapsed .sidebar-header .brand-text{
  display:none !important;
}
#appShell.sidebar-collapsed .sidebar-header .d-flex{
  justify-content:center;
}