.login-page { position: relative; isolation: isolate; min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(390px,.88fr); overflow: hidden; background: radial-gradient(circle at 12% 12%, rgba(0,199,255,.14), transparent 31%), radial-gradient(circle at 82% 82%, rgba(126,61,255,.17), transparent 35%), linear-gradient(135deg,#020611 0%,#071126 48%,#080616 100%); }
.login-page::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .34; background-image: linear-gradient(rgba(73,174,255,.08) 1px, transparent 1px), linear-gradient(90deg,rgba(73,174,255,.08) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg,#000,transparent 82%); transform: perspective(600px) rotateX(56deg) scale(1.45) translateY(15%); transform-origin: bottom; }
.login-page::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 0 48%,rgba(5,8,22,.2) 54%,rgba(5,8,22,.92) 100%); }
.login-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.login-orb { position: absolute; width: 38vw; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .2; animation: login-orb-drift 9s ease-in-out infinite alternate; }
.login-orb-cyan { left: -12vw; top: -16vw; background: #00c8ff; }
.login-orb-purple { right: -13vw; bottom: -16vw; background: #8b3dff; animation-delay: -4s; }
.login-scanline { position: absolute; left: 0; right: 0; top: -12%; height: 2px; opacity: .45; background: linear-gradient(90deg,transparent,#22d3ee 35%,#a855f7 65%,transparent); box-shadow: 0 0 24px #22d3ee; animation: login-scan 7s linear infinite; }
.login-watermark { position: absolute; left: 2.5vw; bottom: -1.5vw; color: rgba(164,206,255,.028); font-size: clamp(4rem,9vw,10rem); font-weight: 950; letter-spacing: -.08em; white-space: nowrap; }
.login-visual { position: relative; display: flex; align-items: center; overflow: hidden; padding: clamp(2rem,6vw,6rem); border-right: 1px solid rgba(116,176,255,.13); }
.login-visual::before { content: ""; position: absolute; width: 420px; height: 420px; left: 13%; top: 14%; border: 1px solid rgba(34,211,238,.13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(34,211,238,.025),0 0 0 90px rgba(139,92,246,.018); animation: login-ring 14s linear infinite; }
.login-visual-content { position: relative; z-index: 2; width: min(760px,100%); }
.login-brand-lockup { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2rem,5vw,4.5rem); }
.login-brand-lockup img { width: 82px; height: 82px; object-fit: contain; border: 1px solid rgba(86,194,255,.22); border-radius: 22px; filter: drop-shadow(0 0 24px rgba(34,211,238,.28)); }
.login-wordmark { font-size: clamp(1.55rem,3.1vw,3.15rem); font-weight: 950; font-style: italic; line-height: .93; letter-spacing: -.055em; }
.login-wordmark span { color: #f8fbff; }
.login-wordmark strong { color: #55dcff; text-shadow: 0 0 22px rgba(34,211,238,.42); }
.login-service-label { margin-top: .62rem; color: #9f7cff; font-size: clamp(.68rem,1.2vw,.92rem); font-weight: 850; letter-spacing: .46em; }
.login-command-chip { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.15rem; padding: .45rem .72rem; border: 1px solid rgba(34,211,238,.2); border-radius: 999px; color: #8eeaff; background: rgba(34,211,238,.065); font-size: .71rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.login-command-chip i,.login-floating-status i { width: 7px; height: 7px; border-radius: 50%; background: #2df4a4; box-shadow: 0 0 13px #2df4a4; animation: login-pulse 1.8s ease-in-out infinite; }
.login-visual h1 { max-width: 760px; margin: 0 0 1.15rem; font-size: clamp(2.6rem,5.7vw,6rem); line-height: .94; letter-spacing: -.065em; background: linear-gradient(115deg,#fff 4%,#bdefff 47%,#af8cff 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-visual p { max-width: 650px; margin: 0; color: #93a9cc; font-size: clamp(.92rem,1.4vw,1.08rem); line-height: 1.75; }
.login-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .72rem; max-width: 640px; margin-top: 1.75rem; }
.login-feature-grid article { display: grid; gap: .22rem; padding: .82rem .9rem; border: 1px solid rgba(118,174,255,.13); border-radius: 15px; background: linear-gradient(135deg,rgba(18,39,75,.52),rgba(10,15,37,.45)); backdrop-filter: blur(10px); }
.login-feature-grid b { color: #e9f8ff; font-size: .85rem; letter-spacing: .05em; }
.login-feature-grid span { color: #7188ad; font-size: .68rem; }
.security-list { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1.35rem; color: #7188ad; font-size: .72rem; }
.security-list span::before { content: "✓"; margin-right: .42rem; color: #36e8bd; }
.login-floating-card { position: absolute; z-index: 3; display: grid; gap: .18rem; padding: .72rem .9rem; border: 1px solid rgba(122,194,255,.18); border-radius: 14px; color: #d9ecff; background: rgba(6,14,36,.7); box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(12px); animation: login-float 4s ease-in-out infinite; }
.login-floating-card span { color: #67dfff; font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.login-floating-card strong { font-size: .78rem; }
.login-floating-orders { right: 5%; top: 16%; }
.login-floating-status { right: 8%; bottom: 14%; display: flex; align-items: center; gap: .5rem; animation-delay: -1.7s; }
.login-floating-status span { color: #9ff4d2; }
.login-card-wrap { position: relative; z-index: 5; display: grid; place-items: center; padding: clamp(1.2rem,4vw,4rem); background: linear-gradient(155deg,rgba(9,15,35,.45),rgba(6,8,22,.86)); }
.login-card { position: relative; width: min(500px,100%); overflow: hidden; padding: clamp(1.35rem,4vw,2.25rem); border-color: rgba(116,172,255,.2); background: linear-gradient(155deg,rgba(19,30,58,.92),rgba(7,11,27,.96)); box-shadow: 0 35px 100px rgba(0,0,0,.45),0 0 60px rgba(79,70,229,.09); backdrop-filter: blur(24px); }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,transparent,#22d3ee,#9b5cff,transparent); }
.login-card-glow { position: absolute; width: 180px; height: 180px; right: -95px; top: -95px; border-radius: 50%; background: #6535ff; filter: blur(52px); opacity: .18; pointer-events: none; }
.login-card .brand { position: relative; z-index: 1; width: max-content; margin-bottom: .65rem; }
.login-card-heading { position: relative; z-index: 1; }
.login-card h2 { margin: .4rem 0 .45rem; font-size: clamp(1.75rem,3vw,2.25rem); }
.login-card-heading p { margin: 0; color: #8094b7; }
.login-card .input { border-color: rgba(122,165,229,.18); background: rgba(3,8,22,.62); }
.login-card .input:focus { border-color: #44d9ff; box-shadow: 0 0 0 3px rgba(34,211,238,.1),0 0 24px rgba(34,211,238,.08); }
.login-card .button-primary { box-shadow: 0 12px 32px rgba(34,211,238,.16); }
.login-card-foot { display: flex; align-items: center; gap: .65rem; justify-content: center; color: #536786; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-card-foot span { width: 26px; height: 1px; background: linear-gradient(90deg,transparent,#536786); }
.login-card-foot span:last-child { transform: scaleX(-1); }
@keyframes login-orb-drift { to { transform: translate3d(8%,6%,0) scale(1.12); } }
@keyframes login-scan { to { transform: translateY(115vh); } }
@keyframes login-ring { to { transform: rotate(360deg); } }
@keyframes login-pulse { 50% { opacity: .42; transform: scale(.72); } }
@keyframes login-float { 50% { transform: translateY(-10px); } }

.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1rem; border-right: 1px solid var(--line); background: rgba(6,10,23,.96); }
.admin-sidebar .brand { padding: .35rem .25rem 1.1rem; }
.admin-nav { display: grid; gap: .25rem; margin-top: .5rem; }
.admin-nav button { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .72rem .8rem; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; font-weight: 650; }
.admin-nav button:hover, .admin-nav button.active { color: var(--text); background: rgba(34,211,238,.08); }
.admin-nav button.active { box-shadow: inset 3px 0 var(--cyan); }
.sidebar-foot { margin-top: auto; display: grid; gap: .55rem; }
.admin-main { min-width: 0; padding: 1.3rem clamp(.8rem, 3vw, 2.4rem) 3rem; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; margin-bottom: 1.25rem; }
.admin-topbar h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.admin-mobile-menu { display: none; }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.stat-card { position: relative; min-height: 135px; padding: 1rem; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -30px; top: -30px; border-radius: 50%; background: var(--gradient); filter: blur(24px); opacity: .16; }
.stat-label { color: var(--muted); font-size: .8rem; }
.stat-value { margin-top: .65rem; font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.04em; }
.stat-note { margin-top: .45rem; color: #6f82a5; font-size: .72rem; }

.admin-section { display: grid; gap: 1rem; }
.admin-panel { padding: 1rem; }
.admin-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.admin-panel-head h2 { margin: 0; font-size: 1.15rem; }
.admin-tabs { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.admin-tab { flex: 0 0 auto; padding: .57rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; font-weight: 720; }
.admin-tab.active { color: #03101a; border-color: transparent; background: var(--gradient); }

.data-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.data-table th { padding: .72rem .8rem; color: #7186ab; background: rgba(255,255,255,.025); font-size: .72rem; text-align: left; text-transform: uppercase; letter-spacing: .07em; }
.data-table td { padding: .75rem .8rem; border-top: 1px solid var(--line); color: #d7e1f4; font-size: .83rem; vertical-align: middle; }
.data-table tr:hover td { background: rgba(255,255,255,.018); }
.product-cell { display: flex; align-items: center; gap: .65rem; min-width: 210px; }
.product-cell img { width: 44px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.table-actions { display: flex; gap: .4rem; }
.status-select { min-height: 37px; min-width: 190px; padding: .48rem .58rem; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #0a1124; font-size: .78rem; }
.inline-update { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: .4rem; min-width: 310px; }
.inline-update .input { min-height: 37px; padding: .48rem .58rem; font-size: .78rem; }

.mobile-order-list { display: none; gap: .7rem; }
.order-card { padding: .9rem; }
.order-card-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.order-card-code { color: var(--cyan); font-family: ui-monospace, monospace; font-weight: 800; font-size: .83rem; }
.order-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .75rem; font-size: .78rem; }
.order-card-grid span { display: block; margin-bottom: .15rem; color: #7184a7; font-size: .68rem; text-transform: uppercase; }
.order-card .inline-update { grid-template-columns: 1fr auto; min-width: 0; }

.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: .55rem; }
.filter-grid .input, .filter-grid .select { min-height: 40px; padding: .55rem .65rem; font-size: .8rem; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-card { padding: 1rem; }
.settings-card h3 { font-size: 1rem; }
.upload-zone { display: grid; place-items: center; min-height: 145px; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; background: rgba(34,211,238,.025); }
.upload-zone input { max-width: 100%; }
.media-preview { width: min(260px, 100%); margin: .75rem auto; border-radius: 14px; }
.bulk-template { overflow-x: auto; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; color: #9de9f5; background: #070c1d; font: .76rem/1.6 ui-monospace, monospace; white-space: pre; }

.toggle { position: relative; width: 46px; height: 26px; display: inline-block; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #28334f; cursor: pointer; transition: .2s; }
.toggle span::after { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }
.toggle input:checked + span { background: var(--cyan); }
.toggle input:checked + span::after { transform: translateX(20px); background: #03101a; }

@media (max-width: 1000px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 90; width: 260px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-mobile-menu { display: inline-grid; place-items: center; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .login-page { grid-template-columns: 1fr; }
  .login-page::after { background: linear-gradient(180deg,transparent,rgba(5,8,22,.88) 48%,#050816 100%); }
  .login-visual { min-height: 360px; padding: 2rem 1.25rem 3rem; border-right: 0; border-bottom: 1px solid rgba(116,176,255,.13); }
  .login-brand-lockup { margin-bottom: 1.4rem; }
  .login-brand-lockup img { width: 58px; height: 58px; border-radius: 16px; }
  .login-visual h1 { font-size: clamp(2.35rem,12vw,4.25rem); }
  .login-feature-grid,.security-list,.login-floating-card { display: none; }
  .login-card-wrap { margin-top: -1.35rem; padding: 0 1rem 2rem; background: transparent; }
  .login-card { border-radius: 22px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-table-wrap { display: none; }
  .mobile-order-list { display: grid; }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .login-orb,.login-scanline,.login-visual::before,.login-command-chip i,.login-floating-card { animation: none; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .order-card-grid { grid-template-columns: 1fr; }
}

/* Centered, Indonesian login experience. */
.login-page { grid-template-columns: 1fr; place-items: center; overflow: auto; padding: clamp(1.25rem,4vw,3rem); }
.login-page::after { background: radial-gradient(circle at center,transparent 0 23%,rgba(5,8,22,.48) 70%,rgba(5,8,22,.88) 100%); }
.login-watermark { left: 50%; transform: translateX(-50%); }
.login-center { position: relative; z-index: 5; width: min(520px,100%); text-align: center; }
.login-center .login-brand-lockup { display: grid; justify-items: center; gap: .7rem; margin: 0 0 1.35rem; }
.login-center .login-brand-lockup img { width: 98px; height: 98px; border-radius: 25px; }
.login-center .login-service-label { margin-top: 0; }
.login-intro { margin-bottom: 1.2rem; }
.login-intro h1 { margin: .45rem 0 .5rem; font-size: clamp(2rem,5vw,3.15rem); line-height: 1; letter-spacing: -.05em; background: linear-gradient(115deg,#fff 4%,#bdefff 47%,#af8cff 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-intro p { max-width: 430px; margin: 0 auto; color: #93a9cc; font-size: .9rem; line-height: 1.6; }
.login-center .login-card { margin: 0 auto; text-align: left; }
.login-store-link { color: #7f93b5; font-size: .78rem; font-weight: 750; text-align: center; }
.login-store-link:hover { color: #7de5ff; }
@media (max-width: 760px) {
  .login-page { display: grid; grid-template-columns: 1fr; place-items: start center; min-height: 100vh; padding: 1.4rem 1rem 2rem; }
  .login-page::after { background: radial-gradient(circle at center,transparent,rgba(5,8,22,.88)); }
  .login-center .login-brand-lockup { margin-bottom: 1rem; }
  .login-center .login-brand-lockup img { width: 76px; height: 76px; border-radius: 19px; }
  .login-center .login-card { border-radius: 22px; }
}

/* Interactive sales overview */
.overview-shell { gap: 1rem; }
.overview-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; background: linear-gradient(125deg, rgba(34,211,238,.16), rgba(99,102,241,.12) 48%, rgba(251,113,133,.12)); }
.overview-hero-copy { position: relative; z-index: 2; max-width: 680px; }
.overview-hero h2 { margin: .25rem 0 .45rem; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.overview-hero p { margin: 0; color: var(--muted); }
.reset-note { display: inline-flex; margin-top: .8rem; padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--muted); font-size: .78rem; background: rgba(4,10,28,.32); }
.overview-reset { position: relative; z-index: 2; white-space: nowrap; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .48; pointer-events: none; }
.hero-orb-one { width: 150px; height: 150px; right: 7%; top: -82px; background: radial-gradient(circle, #22d3ee, transparent 68%); }
.hero-orb-two { width: 190px; height: 190px; right: 23%; bottom: -145px; background: radial-gradient(circle, #fb7185, transparent 68%); }
.stat-card { min-height: 150px; border: 1px solid rgba(148,163,184,.14); text-align: left; }
.stat-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--card-tone, #38bdf8); }
.stat-card[data-tone="violet"] { --card-tone: #a78bfa; }
.stat-card[data-tone="coral"] { --card-tone: #fb7185; }
.stat-card[data-tone="blue"] { --card-tone: #60a5fa; }
.stat-card[data-tone="amber"] { --card-tone: #fbbf24; }
.stat-card[data-tone="green"] { --card-tone: #34d399; }
.stat-card-icon { position: absolute; right: 1rem; top: 1rem; z-index: 1; display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .45rem; border-radius: .75rem; color: var(--card-tone, #38bdf8); background: rgba(34,211,238,.08); border: 1px solid rgba(148,163,184,.18); font-weight: 800; }
.stat-card-action { width: 100%; appearance: none; color: inherit; font: inherit; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.stat-card-action:hover, .stat-card-action.is-selected { transform: translateY(-3px); border-color: var(--card-tone, #38bdf8); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.sales-chart-panel { scroll-margin-top: 1rem; }
.sales-chart-panel.is-hidden { display: none; }
.chart-panel-head { align-items: flex-start; gap: 1rem; }
.chart-panel-head h2 { margin: .25rem 0 0; }
.chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
.chart-legend span { display: flex; align-items: center; gap: .4rem; }
.chart-legend i { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }
.legend-orders { background: #22d3ee; }
.legend-revenue { background: #fb7185; }
.chart-toolbar { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.chart-toolbar label { min-width: 170px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.chart-toolbar .input { margin-top: .35rem; }
.chart-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.chart-summary article { padding: .8rem 1rem; border: 1px solid rgba(148,163,184,.12); border-radius: .85rem; background: rgba(15,23,42,.38); }
.chart-summary span { display: block; color: var(--muted); font-size: .75rem; }
.chart-summary strong { display: block; margin-top: .2rem; font-size: 1.05rem; }
.sales-chart-scroll { overflow-x: auto; border-radius: 1rem; border: 1px solid rgba(148,163,184,.1); background: linear-gradient(180deg, rgba(15,23,42,.45), rgba(2,6,23,.12)); }
.sales-chart { display: block; width: 100%; min-width: 660px; height: auto; }
.chart-grid line { stroke: rgba(148,163,184,.12); stroke-width: 1; }
.sales-bar { fill: #22d3ee; opacity: .72; transition: opacity .2s ease; }
.sales-bar:hover { opacity: 1; }
.revenue-line { fill: none; stroke: #fb7185; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(251,113,133,.35)); }
.sales-dot { fill: #fb7185; stroke: #10182f; stroke-width: 2; }
.chart-labels text { fill: #94a3b8; font-size: 11px; }
.chart-empty { display: grid; place-items: center; min-height: 250px; padding: 2rem; text-align: center; color: var(--muted); }
.chart-empty span { font-size: 2rem; color: #22d3ee; }
.chart-empty strong { color: var(--text); margin: .45rem 0 .2rem; }
.chart-empty p { margin: 0; }
@media (max-width: 700px) {
  .overview-hero { align-items: flex-start; flex-direction: column; }
  .overview-reset { width: 100%; }
  .chart-summary { grid-template-columns: 1fr; }
  .chart-panel-head { flex-direction: column; }
}


/* Grouped admin navigation */
.admin-nav-group { display: grid; gap: .28rem; margin-bottom: 1rem; }
.admin-nav-heading { display: flex; align-items: center; gap: .55rem; padding: .25rem .7rem; color: #f5f8ff; font-size: .82rem; font-weight: 900; letter-spacing: .02em; }
.admin-nav-heading span { color: var(--cyan); }
.admin-nav-group button { margin-left: .55rem; width: calc(100% - .55rem); }

/* Product manager */
.product-manager { overflow: hidden; }
.product-manager-toolbar, .product-searchbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.15rem 0; }
.product-filter-tabs { display: flex; flex-wrap: wrap; gap: .55rem; }
.product-filter { border: 1px solid var(--line); border-radius: 999px; padding: .62rem .9rem; color: var(--muted); background: rgba(255,255,255,.025); font: inherit; font-weight: 800; cursor: pointer; }
.product-filter:hover, .product-filter.active { color: #061020; border-color: transparent; background: var(--gradient); box-shadow: 0 8px 26px rgba(34,211,238,.2); }
.product-page-size { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .82rem; }
.product-page-size .select { width: 82px; }
.product-searchbar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(170px,.35fr) auto; padding: .8rem; border-color: rgba(87,218,255,.16); background: rgba(7,13,31,.62); }
.product-list-head, .product-admin-row { display: grid; grid-template-columns: 40px minmax(300px,1fr) minmax(150px,.34fr) 120px minmax(150px,.28fr); align-items: center; gap: 1rem; }
.product-list-head { padding: .65rem 1rem; color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.product-list-head label { grid-column: 1 / span 2; display: flex; align-items: center; gap: .7rem; }
.product-admin-list { display: grid; gap: .72rem; }
.product-admin-row { min-width: 900px; padding: .8rem 1rem; border: 1px solid rgba(120,151,210,.2); border-radius: 17px; background: linear-gradient(135deg,rgba(17,28,55,.88),rgba(8,14,31,.96)); transition: border-color .18s, transform .18s, box-shadow .18s; }
.product-admin-row:hover { border-color: rgba(34,211,238,.5); box-shadow: 0 12px 32px rgba(3,9,26,.3); transform: translateY(-1px); }
.product-admin-row.out-of-stock { border-color: rgba(248,113,113,.3); }
.product-check { display: grid; place-items: center; }
.product-check input, #select-page-products { width: 18px; height: 18px; accent-color: var(--cyan); }
.product-admin-identity { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 0; border: 0; color: inherit; text-align: left; background: none; cursor: pointer; }
.product-admin-identity img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: 13px; }
.product-admin-identity span { min-width: 0; display: grid; gap: .2rem; }
.product-admin-identity strong { overflow: hidden; color: #f8fbff; text-overflow: ellipsis; white-space: nowrap; }
.product-admin-identity small { color: var(--muted); }
.product-admin-identity em { width: max-content; padding: .12rem .4rem; border: 1px solid #ef4444; border-radius: 5px; color: #f87171; font-size: .68rem; font-style: normal; }
.inline-money { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,8,23,.6); }
.inline-money span { padding-left: .7rem; color: var(--muted); font-size: .72rem; }
.inline-money input, .inline-stock { width: 100%; min-width: 0; border: 0; outline: 0; padding: .7rem; color: #fff; background: transparent; font: inherit; }
.inline-stock { border: 1px solid var(--line); border-radius: 10px; background: rgba(3,8,23,.6); }
.inline-money input:focus, .inline-stock:focus { box-shadow: inset 0 0 0 1px var(--cyan); }
.inline-money input.saved, .inline-stock.saved { background: rgba(34,197,94,.14); }
.product-admin-status { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.product-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; color: var(--muted); font-size: .8rem; }
.chart-period-picker { display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)); gap: .8rem; padding: 1rem; border: 1px solid rgba(96,210,255,.18); border-radius: 18px; background: linear-gradient(135deg,rgba(21,33,67,.72),rgba(11,18,39,.88)); }
.chart-period-picker label { display: grid; gap: .42rem; color: #c9d5ee; font-size: .76rem; font-weight: 800; }
.chart-period-picker .select { background-color: rgba(4,10,25,.88); }

@media (max-width: 980px) {
  .product-manager { overflow-x: auto; }
  .product-manager-toolbar, .product-searchbar { min-width: 900px; }
  .chart-period-picker { grid-template-columns: repeat(2,minmax(120px,1fr)); }
}
@media (max-width: 620px) {
  .chart-period-picker { grid-template-columns: 1fr 1fr; }
}


/* Product image picker */
.product-image-field { align-self: stretch; }
.product-image-dropzone {
  position: relative;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .45rem;
  overflow: hidden;
  border: 2px dashed rgba(175,190,215,.72);
  border-radius: 15px;
  color: #dce6f8;
  background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(5,12,29,.54));
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.product-image-dropzone:hover,
.product-image-dropzone.is-dragging {
  border-color: var(--cyan);
  background: rgba(34,211,238,.08);
  box-shadow: 0 12px 34px rgba(4,12,31,.32);
  transform: translateY(-1px);
}
.product-image-plus {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #606978;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
}
.product-image-dropzone strong,
.product-image-dropzone small { position: relative; z-index: 2; }
.product-image-dropzone small { color: var(--muted); }
.product-image-dropzone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
  opacity: .36;
}
.product-image-dropzone.has-image img { display: block; }
.product-image-dropzone.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(5,10,24,.2),rgba(5,10,24,.82));
}
.product-image-dropzone.has-image .product-image-plus { background: var(--gradient); color: #061020; }


/* Always replace the browser's native "Pilih File" control with the + tile. */
.product-image-input,
.product-image-input[hidden] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


.csv-file-dropzone { min-height: 140px; }
.csv-file-dropzone.has-file {
  border-color: rgba(34,211,238,.72);
  background: linear-gradient(145deg,rgba(34,211,238,.1),rgba(124,92,255,.08));
}
.csv-file-dropzone.has-file .product-image-plus {
  color: #061020;
  background: var(--gradient);
}
.csv-file-dropzone.has-file small { color: #bfeeff; }


/* Detailed incoming-order cards */
.order-inbox-shell { display: grid; gap: 1rem; }
.order-inbox-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden; padding: 1.2rem 1.35rem; background: linear-gradient(135deg,rgba(12,28,58,.98),rgba(16,17,43,.96)); }
.order-inbox-intro h2 { margin: .22rem 0; }
.order-inbox-intro p { margin: 0; color: var(--muted); }
.order-inbox-count { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(51,211,255,.34); border-radius: 15px; color: #061020; background: var(--gradient); font-size: 1.1rem; font-weight: 950; box-shadow: 0 12px 32px rgba(34,211,238,.16); }
.order-inbox-list { display: grid; gap: 1rem; }
.order-inbox-card { overflow: hidden; padding: 0; border-color: rgba(113,150,216,.25); }
.order-inbox-meta { display: grid; grid-template-columns: .9fr 1.4fr 1.15fr 1.15fr; gap: 1.2rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(31,46,79,.38),rgba(12,20,44,.22)); }
.order-inbox-meta > div,
.order-detail-grid > div,
.order-inbox-footer > div:first-child { display: grid; gap: .28rem; min-width: 0; }
.order-inbox-meta span,
.order-detail-grid span,
.order-customer-note span,
.order-inbox-footer span { color: var(--muted); font-size: .72rem; }
.order-inbox-meta strong { color: #f8fbff; font-size: .82rem; }
.order-status-attention { color: #facc15 !important; }
.order-copy-link { width: max-content; max-width: 100%; overflow: hidden; padding: 0; border: 0; color: #56a8ff; background: none; font: inherit; font-weight: 900; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.order-copy-link:hover { color: var(--cyan); text-decoration: underline; }
.order-copy-link small { font-size: .72rem; }
.order-inbox-body { display: grid; grid-template-columns: minmax(250px,.75fr) minmax(0,1.7fr); min-height: 250px; }
.order-product-summary { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.35rem; border-right: 1px solid var(--line); }
.order-product-summary h3 { margin: 0; color: #fff; font-size: 1.08rem; line-height: 1.35; }
.order-product-summary p { margin: 0; color: #a7b6d2; }
.order-product-summary > strong { margin-top: .45rem; color: #e9f1ff; }
.order-product-summary > span { color: #bdcbe3; font-weight: 800; }
.order-product-summary small { color: var(--muted); }
.order-customer-detail { display: grid; align-content: space-between; gap: 1.4rem; padding: 1.35rem; }
.order-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4rem; }
.order-detail-grid strong { overflow-wrap: anywhere; color: #fff; font-size: .88rem; }
.order-detail-grid a { width: max-content; color: #57a9ff; font-size: .8rem; font-weight: 900; text-decoration: none; }
.order-detail-grid a:hover { color: var(--cyan); text-decoration: underline; }
.order-detail-grid small { color: #8294b4; font-size: .7rem; line-height: 1.45; }
.order-customer-note { display: grid; gap: .35rem; }
.order-customer-note p { min-height: 46px; margin: 0; padding: .75rem; border: 1px solid rgba(117,150,207,.17); border-radius: 12px; color: #d8e3f7; background: rgba(4,10,25,.38); white-space: pre-wrap; }
.order-note-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .8rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.order-note-form label { display: grid; gap: .45rem; color: #55a9ff; font-size: .78rem; font-weight: 900; }
.order-note-form small { color: var(--muted); font-size: .72rem; font-weight: 600; }
.order-note-form .textarea { min-height: 74px; resize: vertical; }
.order-inbox-footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); background: rgba(4,10,25,.35); }
.order-inbox-footer > div:first-child strong { color: #ff8a3d; font-size: 1.05rem; }
.order-management-actions { display: grid; justify-items: end; gap: .7rem; }
.order-status-form { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.order-status-form label { display: grid; gap: .35rem; color: #aebdd8; font-size: .72rem; font-weight: 850; }
.order-inbox-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }

@media (max-width: 1000px) {
  .order-inbox-meta { grid-template-columns: 1fr 1fr; }
  .order-inbox-body { grid-template-columns: 1fr; }
  .order-product-summary { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .order-inbox-meta,
  .order-detail-grid { grid-template-columns: 1fr; }
  .order-note-form { grid-template-columns: 1fr; }
  .order-inbox-footer { align-items: stretch; flex-direction: column; }
  .order-management-actions { justify-items: stretch; }
  .order-status-form { display: grid; grid-template-columns: 1fr; }
  .order-status-form .status-select, .order-status-form .button { width: 100%; }
  .order-inbox-actions { display: grid; grid-template-columns: 1fr; }
  .order-inbox-actions .button { width: 100%; }
}