:root {
    --bg: #f4f7f6;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --border: #e4ebe7;
    --text: #14231c;
    --muted: #708078;
    --primary: #0d7a50;
    --primary-dark: #075d3d;
    --primary-soft: #e9f7f0;
    --danger: #c93e4b;
    --danger-soft: #fff0f1;
    --warning: #c27a12;
    --warning-soft: #fff7e8;
    --info: #2477b3;
    --info-soft: #eef7ff;
    --violet: #6e56cf;
    --violet-soft: #f2efff;
    --shadow: 0 16px 45px rgba(24, 54, 40, .08);
    --shadow-sm: 0 6px 20px rgba(24, 54, 40, .07);
    --radius: 22px;
    --sidebar: 282px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.hidden { display: none !important; }

/* Login */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: #06150f; }
.auth-brand {
    position: relative; overflow: hidden; padding: 58px; display: flex; flex-direction: column; justify-content: space-between;
    color: #fff; background: radial-gradient(circle at 15% 15%, rgba(55, 211, 139, .24), transparent 34%), radial-gradient(circle at 85% 78%, rgba(40, 190, 158, .24), transparent 31%), linear-gradient(145deg, #063d2a, #071c14 72%);
}
.auth-brand::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; top: 18%; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.brand-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #23b877, #0d7a50); color: #fff; font-weight: 900; font-size: 21px; box-shadow: 0 13px 28px rgba(0,0,0,.18); }
.brand-title { margin: 0; font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.brand-kicker { margin: 4px 0 0; font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: #8fe6bf; font-weight: 750; }
.auth-copy { position: relative; z-index: 1; max-width: 620px; margin: 90px 0 80px; }
.auth-copy .eyebrow { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #9ceac8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-copy h1 { margin: 22px 0 14px; font-size: clamp(38px, 4vw, 64px); line-height: 1.02; letter-spacing: -.055em; max-width: 680px; }
.auth-copy p { max-width: 580px; margin: 0; color: #a9beb4; font-size: 15px; line-height: 1.8; }
.auth-points { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.auth-point { display: inline-flex; gap: 7px; align-items: center; padding: 9px 12px; border-radius: 12px; color: #bed0c8; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); font-size: 11px; font-weight: 650; }
.auth-point i { width: 7px; height: 7px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 4px rgba(57,217,138,.11); }
.auth-panel { min-height: 100vh; display: grid; place-items: center; background: #f7faf8; padding: 42px; }
.login-card { width: min(100%, 480px); }
.mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 34px; }
.login-card h2 { margin: 0; font-size: 31px; letter-spacing: -.035em; }
.login-card .lead { margin: 9px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 780; color: #31483d; }
.form-control { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid #dbe5df; background: #fff; color: var(--text); outline: none; transition: .2s ease; box-shadow: 0 1px 2px rgba(14, 41, 27, .02); }
.form-control:focus { border-color: #54b48b; box-shadow: 0 0 0 4px rgba(13, 122, 80, .1); }
.input-wrap { position: relative; }
.input-wrap .form-control { padding-right: 92px; }
.input-action { position: absolute; right: 8px; top: 8px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 9px; background: #f1f6f3; color: #4f675b; font-size: 11px; font-weight: 760; }
.form-check-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 24px; }
.form-check { display: inline-flex; align-items: center; gap: 8px; color: #617269; font-size: 12px; }
.form-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.btn-primary { width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #0e8256, #086a46); color: #fff; font-weight: 800; box-shadow: 0 12px 24px rgba(13, 122, 80, .18); transition: .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(13, 122, 80, .24); }
.alert { border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; font-size: 12px; font-weight: 650; line-height: 1.55; }
.alert-danger { color: #a72c38; background: var(--danger-soft); border: 1px solid #ffd3d7; }
.alert-success { color: #08734a; background: var(--primary-soft); border: 1px solid #c9eedc; }
.login-footnote { margin-top: 24px; color: #93a098; font-size: 11px; line-height: 1.6; text-align: center; }

/* App */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar); display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--border); transition: transform .25s ease; }
.sidebar-head { min-height: 82px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf2ef; }
.sidebar .brand-mark { width: 44px; height: 44px; border-radius: 15px; font-size: 18px; }
.sidebar-close { display: none; width: 38px; height: 38px; place-items: center; border: 0; background: #f4f7f5; color: #66786f; border-radius: 11px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 18px 14px 24px; }
.nav-section { margin: 24px 12px 8px; color: #9aa69f; font-size: 9px; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 12px; margin: 3px 0; border-radius: 12px; color: #617269; font-size: 12px; font-weight: 680; transition: .18s ease; }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-item:hover { background: #f1f8f4; color: var(--primary); }
.nav-item.active { color: #08704a; background: #eaf7f0; box-shadow: inset 0 0 0 1px #d1efdf; }
.nav-item.disabled { cursor: default; color: #a8b2ad; }
.nav-item.disabled:hover { background: transparent; color: #a8b2ad; }
.nav-tag { margin-left: auto; padding: 4px 7px; border-radius: 999px; background: #f1f4f2; color: #9ba6a0; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-foot { padding: 14px; border-top: 1px solid #edf2ef; }
.version-box { padding: 13px 14px; border-radius: 15px; background: #f7faf8; border: 1px solid #eef3f0; }
.version-box strong { display: block; font-size: 11px; }
.version-box span { display: block; margin-top: 4px; color: #8b9992; font-size: 9px; }
.app-main { min-height: 100vh; padding-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.topbar-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.menu-button { display: none; width: 42px; height: 42px; place-items: center; border-radius: 13px; border: 1px solid var(--border); background: #fff; color: #50655b; box-shadow: var(--shadow-sm); }
.page-title { margin: 0; font-size: 14px; font-weight: 850; letter-spacing: -.01em; }
.page-subtitle { margin: 4px 0 0; color: #95a099; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; background: #fff; color: #63756c; box-shadow: 0 2px 10px rgba(24,54,40,.04); }
.icon-button svg { width: 18px; height: 18px; }
.notification-dot { position: absolute; width: 7px; height: 7px; right: 9px; top: 8px; border-radius: 50%; background: #e34c5a; box-shadow: 0 0 0 2px #fff; }
.user-area { position: relative; }
.user-button { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: inherit; box-shadow: 0 2px 10px rgba(24,54,40,.04); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #dff3e8; color: #08704a; font-size: 11px; font-weight: 900; }
.user-text { max-width: 140px; text-align: left; }
.user-text strong, .user-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-text strong { font-size: 10px; }
.user-text small { margin-top: 2px; color: #95a099; font-size: 8px; }
.user-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 220px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); }
.logout-button { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #c33d49; text-align: left; font-size: 11px; font-weight: 750; }
.logout-button:hover { background: #fff1f2; }
.page-content { padding: 28px 30px 38px; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hero-copy h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.045em; }
.hero-copy p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: #eaf7f0; color: #08704a; border: 1px solid #d1efdf; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.status-badge i { width: 7px; height: 7px; border-radius: 50%; background: #1eb873; box-shadow: 0 0 0 4px rgba(30,184,115,.11); }
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(24,54,40,.045); }
.stat-card { padding: 20px; }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.stat-label { color: #96a29b; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.stat-value { margin-top: 10px; font-size: 25px; font-weight: 900; letter-spacing: -.04em; }
.stat-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon.green { background: var(--primary-soft); color: var(--primary); }
.stat-icon.blue { background: var(--info-soft); color: var(--info); }
.stat-icon.amber { background: var(--warning-soft); color: var(--warning); }
.stat-icon.violet { background: var(--violet-soft); color: var(--violet); }
.stat-foot { margin-top: 16px; color: #a0aaa5; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(300px,1fr); gap: 15px; margin-top: 15px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 20px 0; }
.panel-head h2 { margin: 0; font-size: 13px; font-weight: 850; }
.panel-head p { margin: 5px 0 0; color: #96a29b; font-size: 9px; }
.panel-chip { padding: 6px 9px; border-radius: 8px; background: #f2f5f3; color: #89968f; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.chart-preview { height: 250px; margin: 22px 20px 20px; padding: 22px 18px 0; display: flex; align-items: flex-end; gap: 12px; border-radius: 17px; border: 1px dashed #dfe7e2; background: linear-gradient(180deg,#fafcfb,#f5f8f6); }
.chart-bar { flex: 1; min-width: 18px; border-radius: 9px 9px 0 0; background: linear-gradient(180deg,#9bdbbc,#d8efe2); }
.attention-list { padding: 16px 20px 20px; display: grid; gap: 10px; }
.attention-item { display: flex; gap: 11px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid; }
.attention-item .bubble { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 11px; background: #fff; box-shadow: 0 4px 12px rgba(24,54,40,.05); }
.attention-item .bubble svg { width: 16px; height: 16px; }
.attention-item strong { display: block; font-size: 10px; }
.attention-item span { display: block; margin-top: 3px; color: #7f8f87; font-size: 9px; line-height: 1.45; }
.attention-item.warning { background: #fffaf0; border-color: #f8e6be; color: #b36d0a; }
.attention-item.info { background: #f2f9ff; border-color: #d9ebf9; color: #2477b3; }
.attention-item.success { background: #eff9f4; border-color: #d5efdf; color: #0b7a51; }
.table-panel { margin-top: 15px; overflow: hidden; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 650px; }
.data-table th { padding: 12px 20px; background: #f8faf9; color: #98a39d; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.data-table td { padding: 18px 20px; border-top: 1px solid #edf2ef; font-size: 11px; }
.empty-state { padding: 42px 20px !important; text-align: center; color: #8c9992; }
.empty-icon { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 15px; background: #f1f5f3; color: #8c9992; }
.empty-icon svg { width: 20px; height: 20px; }
.empty-state strong { display: block; color: #52665c; font-size: 11px; }
.empty-state span { display: block; margin-top: 5px; font-size: 9px; }
.mobile-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(3,18,12,.48); backdrop-filter: blur(2px); }
.mobile-bottom { display: none; }

/* POS placeholder */
.placeholder-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, #e9f7f0, transparent 38%), var(--bg); }
.placeholder-card { width: min(100%, 620px); padding: 34px; text-align: center; }
.placeholder-card .brand-mark { margin: 0 auto 18px; }
.placeholder-card h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.placeholder-card p { margin: 12px auto 20px; max-width: 470px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.inline-form { display: inline; }
.secondary-button { min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid #dce5df; background: #fff; color: #41584c; font-size: 11px; font-weight: 750; }

@media (max-width: 1180px) {
    .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); box-shadow: 16px 0 45px rgba(10,30,20,.13); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .app-main { padding-left: 0; }
    .menu-button { display: grid; }
    .page-content { padding-bottom: 94px; }
    .mobile-bottom { position: fixed; display: grid; grid-template-columns: repeat(4,1fr); left: 12px; right: 12px; bottom: 10px; z-index: 35; padding: 7px; border-radius: 18px; background: rgba(255,255,255,.96); border: 1px solid var(--border); box-shadow: 0 16px 38px rgba(14,41,27,.16); backdrop-filter: blur(12px); }
    .bottom-item { min-height: 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 12px; background: transparent; color: #89958f; font-size: 8px; font-weight: 780; }
    .bottom-item svg { width: 18px; height: 18px; }
    .bottom-item.active { background: #eaf7f0; color: #08704a; }
}
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-panel { padding: 28px 20px; }
    .mobile-brand { display: flex; }
}
@media (max-width: 640px) {
    .topbar { min-height: 70px; padding: 0 14px; }
    .page-subtitle, .user-text { display: none; }
    .user-button { padding-right: 6px; }
    .page-content { padding: 20px 14px 92px; }
    .hero-row { align-items: flex-start; flex-direction: column; margin-bottom: 17px; }
    .hero-copy h1 { font-size: 26px; }
    .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 15px; border-radius: 17px; }
    .stat-value { font-size: 18px; }
    .stat-icon { width: 35px; height: 35px; border-radius: 11px; }
    .stat-icon svg { width: 15px; height: 15px; }
    .stat-foot { font-size: 8px; }
    .panel { border-radius: 18px; }
    .chart-preview { height: 210px; margin: 18px 14px 14px; padding: 18px 12px 0; gap: 7px; }
    .panel-head { padding: 17px 15px 0; }
    .attention-list { padding: 13px 15px 16px; }
    .login-card h2 { font-size: 27px; }
    .auth-panel { place-items: start center; padding-top: 34px; }
}
@media (max-width: 420px) {
    .cards-grid { grid-template-columns: 1fr; }
    .status-badge { font-size: 8px; }
}

/* =========================================================
   Dapur Teh M V2.2 — Dashboard Owner
   ========================================================= */
.dashboard-page { max-width: 1780px; margin: 0 auto; }
.dashboard-hero { align-items: center; }
.hero-kicker { margin-bottom: 8px; color: #1a8a60; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.filter-toggle { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: #53685e; font-size: 10px; font-weight: 780; box-shadow: 0 3px 12px rgba(24,54,40,.04); }
.filter-toggle:hover { border-color: #bfd8cc; color: var(--primary); background: #fbfdfc; }
.filter-toggle svg { width: 15px; height: 15px; }
.filter-panel { margin: -4px 0 14px; padding: 15px; }
.custom-filter-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.custom-filter-form label { min-width: 170px; }
.custom-filter-form label span { display: block; margin: 0 0 6px; color: #718078; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.custom-filter-form input { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #dfe7e2; border-radius: 10px; background: #fbfcfb; color: #263c31; outline: none; font-size: 11px; }
.custom-filter-form input:focus { border-color: #73bf9c; box-shadow: 0 0 0 3px rgba(13,122,80,.08); }
.filter-submit { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #0b7650; color: #fff; font-size: 10px; font-weight: 800; }
.filter-hint { align-self: center; color: #9aa59f; font-size: 9px; }
.period-tabs { display: flex; align-items: center; gap: 7px; margin: 0 0 15px; overflow-x: auto; padding-bottom: 1px; scrollbar-width: none; }
.period-tabs::-webkit-scrollbar { display: none; }
.period-tab { flex: 0 0 auto; min-height: 33px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; border: 1px solid #e1e8e4; background: #fff; color: #78877f; font-size: 9px; font-weight: 800; }
.period-tab:hover { color: #08704a; border-color: #cbe4d7; }
.period-tab.active { color: #08704a; background: #eaf7f0; border-color: #ccebdc; box-shadow: inset 0 0 0 1px rgba(8,112,74,.03); }
.dashboard-stats { gap: 13px; }
.v22-card { position: relative; overflow: hidden; min-height: 144px; }
.v22-card::after { content: ""; position: absolute; right: -34px; bottom: -50px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(13,122,80,.07), rgba(13,122,80,0) 70%); pointer-events: none; }
.stat-value.money { font-size: 23px; }
.stat-meta { margin-top: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #97a29c; font-size: 8.5px; }
.change-badge { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 8px; font-weight: 850; }
.change-badge.up { color: #08734a; background: #eaf7f0; }
.change-badge.down { color: #b43a46; background: #fff0f1; }
.change-badge.neutral { color: #66776f; background: #f1f4f2; }
.v22-main-grid { grid-template-columns: minmax(0,2fr) minmax(300px,.86fr); }
.v22-panel-head { padding: 19px 19px 0; }
.v22-panel-head h2 { margin-top: 4px; font-size: 14px; letter-spacing: -.015em; }
.v22-panel-head.compact { padding-bottom: 5px; }
.section-eyebrow { color: #91a098; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.chart-total { text-align: right; }
.chart-total span { display: block; color: #98a39d; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.chart-total strong { display: block; margin-top: 4px; font-size: 13px; }
.trend-chart-wrap { margin: 17px 19px 8px; overflow-x: auto; border-radius: 17px; border: 1px solid #edf1ef; background: linear-gradient(180deg,#fbfdfc,#f6f9f7); }
.trend-chart { min-width: max(100%, calc(var(--trend-count) * 52px)); height: 264px; display: grid; grid-template-columns: repeat(var(--trend-count), minmax(42px,1fr)); align-items: end; gap: 7px; padding: 22px 15px 12px; background-image: linear-gradient(to bottom, rgba(23,79,52,.045) 1px, transparent 1px); background-size: 100% 25%; }
.trend-cell { height: 100%; min-width: 0; display: grid; grid-template-rows: 20px 1fr 26px; align-items: end; text-align: center; }
.trend-value { align-self: center; color: #96a19b; font-size: 7px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-track { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.trend-fill { width: min(30px,75%); min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg,#55c792,#bde5d0); box-shadow: 0 4px 14px rgba(20,145,91,.10); transition: height .3s ease; }
.trend-cell:hover .trend-fill { background: linear-gradient(180deg,#269e6a,#82d5ae); }
.trend-label { align-self: end; color: #89968f; font-size: 7.5px; font-weight: 700; white-space: nowrap; }
.chart-empty-note { margin: 0 19px 17px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: 11px; background: #f8faf9; color: #8a9891; font-size: 9px; }
.pulse-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #38b77c; box-shadow: 0 0 0 4px rgba(56,183,124,.12); }
.alert-count { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #f3f6f4; color: #62746a; font-size: 9px; font-weight: 900; }
.v22-attention-list { padding-bottom: 13px; }
.attention-item.danger { background: #fff2f3; border-color: #ffdadd; color: #bd3643; }
.readiness-strip { margin: 0 19px 18px; padding: 11px 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; border-radius: 13px; background: #f7faf8; border: 1px solid #edf2ef; }
.readiness-strip div { display: flex; align-items: center; gap: 6px; color: #84928b; font-size: 8px; font-weight: 750; }
.readiness-strip i { width: 7px; height: 7px; border-radius: 50%; background: #c6cfca; }
.readiness-strip i.ready { background: #24b574; box-shadow: 0 0 0 3px rgba(36,181,116,.10); }
.insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 15px; }
.insight-card { min-height: 315px; overflow: hidden; }
.rank-list, .payment-list, .recent-list { padding: 12px 19px 18px; }
.rank-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eff3f1; }
.rank-row:last-child { border-bottom: 0; }
.rank-number { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #eef7f2; color: #14734f; font-size: 9px; font-weight: 900; }
.rank-copy { min-width: 0; }
.rank-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.rank-copy span { display: block; margin-top: 3px; color: #9aa59f; font-size: 8px; }
.rank-qty { color: #4d6559; font-size: 9px; font-weight: 850; }
.payment-row { position: relative; padding: 10px 34px 10px 0; }
.payment-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.payment-line strong { font-size: 9px; }
.payment-line span { color: #98a39d; font-size: 7.5px; text-align: right; }
.progress-track { height: 6px; border-radius: 99px; background: #edf2ef; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1f9d6a,#62c99c); }
.payment-pct { position: absolute; right: 0; bottom: 8px; color: #567066; font-size: 8px; font-weight: 850; }
.recent-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eff3f1; }
.recent-row:last-child { border-bottom: 0; }
.recent-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #f3f7f5; font-size: 13px; }
.recent-copy, .recent-amount { min-width: 0; }
.recent-copy strong, .recent-amount strong { display: block; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-copy span, .recent-amount span { display: block; margin-top: 3px; color: #99a49e; font-size: 7.5px; }
.recent-amount { text-align: right; }
.mini-empty { min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #8e9a94; }
.mini-empty > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 14px; background: #f4f7f5; font-size: 18px; filter: grayscale(.2); }
.mini-empty strong { color: #52655b; font-size: 10px; }
.mini-empty p { max-width: 240px; margin: 5px 0 0; font-size: 8.5px; line-height: 1.5; }
.v22-table-panel { margin-top: 15px; }
.table-title-row { padding-bottom: 14px; }
.outlet-table td { vertical-align: middle; }
.outlet-cell { display: flex; align-items: center; gap: 10px; }
.outlet-cell > span { width: 33px; height: 33px; flex: 0 0 33px; display: grid; place-items: center; border-radius: 10px; background: #eaf7f0; color: #0b7650; font-size: 10px; font-weight: 900; }
.outlet-cell strong, .outlet-cell small { display: block; }
.outlet-cell strong { font-size: 10px; }
.outlet-cell small { margin-top: 3px; color: #9ca7a1; font-size: 8px; }
.margin-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; background: #f1f7f4; color: #3d6d57; font-size: 8px; font-weight: 850; }
.table-status { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 850; }
.table-status i { width: 7px; height: 7px; border-radius: 50%; }
.table-status.active { color: #08734a; }
.table-status.active i { background: #23b574; box-shadow: 0 0 0 3px rgba(35,181,116,.11); }
.notification-area { position: relative; }
.notification-count { position: absolute; right: 5px; top: 4px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border-radius: 99px; background: #dd4552; color: #fff; border: 2px solid #fff; font-size: 7px; font-weight: 900; }
.notification-menu { position: absolute; top: calc(100% + 9px); right: 0; width: min(330px,calc(100vw - 28px)); padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
.notification-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px 10px; border-bottom: 1px solid #edf2ef; }
.notification-head strong { font-size: 10px; }
.notification-head span { color: #98a39d; font-size: 8px; }
.notification-row { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 8px; padding: 10px 9px; border-bottom: 1px solid #f0f3f1; }
.notification-row:last-child { border-bottom: 0; }
.notification-row i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #8fa099; }
.notification-row.success i { background: #25b475; }
.notification-row.info i { background: #378dc9; }
.notification-row.warning i { background: #d69128; }
.notification-row.danger i { background: #d34a56; }
.notification-row strong { display: block; font-size: 9px; }
.notification-row span { display: block; margin-top: 3px; color: #8e9b94; font-size: 8px; line-height: 1.45; }
.user-menu-profile { padding: 8px 10px 11px; border-bottom: 1px solid #edf2ef; margin-bottom: 4px; }
.user-menu-profile strong, .user-menu-profile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-profile strong { font-size: 10px; }
.user-menu-profile span { margin-top: 3px; color: #98a39d; font-size: 8px; }

@media (max-width: 1280px) {
    .insight-grid { grid-template-columns: 1fr 1fr; }
    .insight-card:last-child { grid-column: 1 / -1; min-height: 250px; }
}
@media (max-width: 1180px) {
    .v22-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .dashboard-hero { align-items: flex-start; }
    .hero-actions { width: 100%; justify-content: flex-start; }
    .custom-filter-form { align-items: stretch; }
    .custom-filter-form label { flex: 1 1 160px; }
    .filter-submit { align-self: end; }
    .insight-grid { grid-template-columns: 1fr; }
    .insight-card:last-child { grid-column: auto; }
    .trend-chart { min-width: max(100%, calc(var(--trend-count) * 48px)); }
}
@media (max-width: 640px) {
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .v22-card { min-height: 132px; }
    .stat-value.money { font-size: 17px; }
    .stat-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
    .v22-panel-head { padding: 16px 14px 0; }
    .trend-chart-wrap { margin: 14px 14px 7px; }
    .chart-empty-note { margin: 0 14px 14px; }
    .readiness-strip { margin: 0 14px 14px; }
    .rank-list, .payment-list, .recent-list { padding-left: 14px; padding-right: 14px; }
    .chart-total { display: none; }
    .notification-menu { position: fixed; top: 64px; right: 14px; }
}
@media (max-width: 420px) {
    .dashboard-stats { grid-template-columns: 1fr; }
    .v22-card { min-height: 126px; }
    .filter-toggle { flex: 1; justify-content: center; }
    .status-badge { flex: 1; justify-content: center; }
}

/* =========================================================
   Dapur Teh M V2.3 — Master Bahan + Supplier
   ========================================================= */
.master-page, .form-page, .detail-page { max-width: 1780px; margin: 0 auto; }
.master-hero, .form-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.master-hero h1, .form-page-head h1 { margin: 6px 0 0; font-size: clamp(25px,3vw,36px); letter-spacing: -.045em; }
.master-hero p, .form-page-head p { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.primary-action, .secondary-action, .small-primary, .toolbar-button, .save-button, .cancel-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 800; text-decoration: none; transition: .18s ease; }
.primary-action { min-height: 44px; padding: 0 15px; background: linear-gradient(135deg,#0e8458,#08704a); color: #fff; border: 0; box-shadow: 0 10px 24px rgba(13,122,80,.18); font-size: 10px; white-space: nowrap; }
.primary-action:hover, .save-button:hover { transform: translateY(-1px); box-shadow: 0 13px 27px rgba(13,122,80,.23); }
.primary-action svg { width: 16px; height: 16px; }
.master-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.mini-stat { min-height: 108px; padding: 17px 18px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 7px 24px rgba(24,54,40,.04); }
.mini-stat span, .mini-stat small { display: block; }
.mini-stat span { color: #8e9b94; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.mini-stat strong { display: block; margin-top: 9px; font-size: 21px; letter-spacing: -.035em; }
.mini-stat small { margin-top: 4px; color: #a1aba6; font-size: 8px; }
.master-list-panel { overflow: hidden; }
.master-toolbar { display: flex; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid #edf2ef; background: linear-gradient(180deg,#fff,#fbfdfc); }
.material-toolbar { flex-wrap: wrap; }
.search-box { flex: 1 1 270px; min-width: 210px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dfe7e2; border-radius: 11px; background: #fff; }
.search-box:focus-within { border-color: #75bea0; box-shadow: 0 0 0 3px rgba(13,122,80,.08); }
.search-box svg { width: 15px; height: 15px; color: #8b9992; flex: 0 0 15px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 10px; }
.toolbar-select { min-height: 40px; max-width: 190px; padding: 0 30px 0 11px; border: 1px solid #dfe7e2; border-radius: 11px; background: #fff; color: #586b61; font-size: 9px; outline: 0; }
.toolbar-button { min-height: 40px; padding: 0 13px; border: 0; background: #173e30; color: #fff; font-size: 9px; }
.toolbar-reset { padding: 10px 8px; color: #788880; font-size: 9px; font-weight: 750; }
.master-table { min-width: 850px; }
.material-table { min-width: 1180px; }
.master-table td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.text-right { text-align: right !important; }
.entity-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entity-cell > span:last-child { min-width: 0; }
.entity-cell strong, .entity-cell small, .cell-stack strong, .cell-stack small { display: block; }
.entity-cell strong { color: #283d33; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-cell small { margin-top: 3px; color: #99a59f; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-avatar, .entity-image { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 11px; font-size: 10px; font-weight: 900; overflow: hidden; }
.entity-avatar.supplier { background: #eef5ff; color: #3e73a5; }
.entity-avatar.material { background: #eaf7f0; color: #0c7550; }
.entity-image { background: #f1f5f3; }
.entity-image img { width: 100%; height: 100%; object-fit: cover; }
.cell-stack strong { color: #53685e; font-size: 9px; }
.cell-stack small { margin-top: 3px; color: #a0aaa5; font-size: 8px; }
.count-pill, .cost-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px; background: #f3f7f5; color: #607269; font-size: 8px; font-weight: 800; white-space: nowrap; }
.cost-pill { align-items: flex-start; flex-direction: column; border-radius: 9px; background: #edf8f2; color: #0b714c; }
.cost-pill strong { font-size: 9px; }
.cost-pill small { color: #6c8f7f; font-size: 7px; }
.table-status.inactive { color: #9a6b2b; }
.table-status.inactive i { background: #d8a457; box-shadow: 0 0 0 3px rgba(216,164,87,.11); }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.action-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #e4ebe7; border-radius: 9px; color: #677a70; background: #fff; }
.action-icon:hover { color: #08734a; background: #edf8f2; border-color: #d1ecdf; }
.action-icon svg { width: 14px; height: 14px; }
.pagination-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #edf2ef; }
.pagination-info { color: #8f9c95; font-size: 8px; }
.pagination-info strong { color: #53685e; }
.pagination-links { display: flex; gap: 4px; }
.page-link { min-width: 31px; height: 31px; display: grid; place-items: center; padding: 0 7px; border: 1px solid #e2e9e5; border-radius: 9px; background: #fff; color: #65786e; font-size: 8px; font-weight: 850; }
.page-link.active { background: #0d7a50; border-color: #0d7a50; color: #fff; }
.page-link.disabled { opacity: .4; cursor: default; }

/* Forms */
.back-link { display: inline-flex; margin-bottom: 5px; color: #638074; font-size: 9px; font-weight: 800; }
.code-badge { padding: 8px 11px; border-radius: 10px; background: #f0f5f2; border: 1px solid #e4ebe7; color: #607269; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.validation-box { margin-bottom: 14px; padding: 13px 15px; border: 1px solid #ffd6d9; border-radius: 14px; background: #fff3f4; color: #a6323e; font-size: 9px; }
.validation-box strong { display: block; margin-bottom: 5px; }
.validation-box ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.form-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 14px; align-items: start; }
.form-main { display: grid; gap: 14px; }
.form-card { padding: 19px; }
.form-card-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 17px; }
.form-card-head > span { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 9px; background: #eaf7f0; color: #0c7951; font-size: 8px; font-weight: 900; }
.form-card-head h2 { margin: 0; font-size: 12px; }
.form-card-head p { margin: 4px 0 0; color: #96a29b; font-size: 8px; line-height: 1.5; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.field { min-width: 0; display: block; }
.field.wide { grid-column: 1 / -1; }
.field > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; color: #53675d; font-size: 9px; font-weight: 800; }
.field > span b { color: #ce4c58; }
.field > span small { color: #9aa6a0; font-size: 7px; font-weight: 650; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; border: 1px solid #dfe7e2; border-radius: 11px; background: #fff; color: #24382e; outline: 0; font-size: 10px; transition: .18s ease; }
.field input:not([type="checkbox"]), .field select { min-height: 43px; padding: 0 12px; }
.field textarea { padding: 11px 12px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #70bc9c; box-shadow: 0 0 0 3px rgba(13,122,80,.08); }
.field-help { display: block; margin-top: 5px; color: #9aa6a0; font-size: 7.5px; }
.file-control { padding-top: 9px !important; }
.remove-image { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: #7c8d84; font-size: 8px; }
.remove-image input { accent-color: var(--primary); }
.prefix-input { min-height: 43px; display: flex; align-items: center; border: 1px solid #dfe7e2; border-radius: 11px; background: #fff; overflow: hidden; }
.prefix-input:focus-within { border-color: #70bc9c; box-shadow: 0 0 0 3px rgba(13,122,80,.08); }
.prefix-input > span { height: 43px; display: grid; place-items: center; padding: 0 11px; background: #f5f8f6; border-right: 1px solid #e5ebe8; color: #718279; font-size: 9px; font-weight: 850; }
.prefix-input input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.formula-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 16px; padding: 11px 13px; border-radius: 12px; background: #f6faf8; border: 1px solid #e8efeb; }
.formula-box span { color: #809087; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.formula-box strong { color: #315548; font-size: 9px; }
.hpp-preview { margin-top: 15px; padding: 17px; border-radius: 15px; background: linear-gradient(135deg,#0d704c,#0a5b3f); color: #fff; }
.hpp-preview span, .hpp-preview small { display: block; }
.hpp-preview span { color: #9de2c4; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.hpp-preview strong { display: block; margin-top: 6px; font-size: 25px; letter-spacing: -.035em; }
.hpp-preview small { margin-top: 3px; color: #b9dfcd; font-size: 8px; }
.formula-example { margin-top: 9px; color: #8e9b94; font-size: 8px; }
.sticky-card { position: sticky; top: 98px; padding: 17px; }
.sticky-card h3 { margin: 13px 0 10px; font-size: 11px; }
.switch-row { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf2ef; border-bottom: 1px solid #edf2ef; }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 9px; }
.switch-row small { margin-top: 3px; color: #97a39d; font-size: 7px; }
.switch { position: relative; width: 39px; height: 23px; flex: 0 0 39px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: #dbe3df; transition: .2s; }
.switch i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.12); transition: .2s; }
.switch input:checked + i { background: #22a970; }
.switch input:checked + i::after { transform: translateX(16px); }
.form-note { margin: 12px 0; padding: 10px; border-radius: 10px; background: #f7faf8; color: #87958e; font-size: 7.5px; line-height: 1.55; }
.save-button { width: 100%; min-height: 43px; border: 0; background: linear-gradient(135deg,#0e8458,#08704a); color: #fff; font-size: 9px; }
.cancel-button { width: 100%; min-height: 39px; margin-top: 7px; border: 1px solid #e1e8e4; background: #fff; color: #66796f; font-size: 9px; }
.image-preview { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #dbe5df; border-radius: 14px; background: #f8faf9; overflow: hidden; color: #97a39d; }
.image-preview img { width: 100%; height: 190px; object-fit: cover; }
.image-preview > span { font-size: 29px; }
.image-preview > small { margin-top: 6px; font-size: 8px; }

/* Detail */
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; margin-bottom: 14px; }
.detail-identity { min-width: 0; display: flex; align-items: center; gap: 13px; }
.detail-avatar, .detail-photo { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 17px; overflow: hidden; font-size: 18px; font-weight: 900; }
.detail-avatar.supplier { background: #edf4ff; color: #3970a5; }
.detail-avatar.material { background: #e9f7f0; color: #08734a; }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-identity h1 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.03em; }
.detail-identity p { margin: 4px 0 0; color: #87958e; font-size: 9px; }
.detail-actions { display: flex; align-items: center; gap: 8px; }
.secondary-action { min-height: 36px; padding: 0 11px; border: 1px solid #dfe7e2; background: #fff; color: #52675d; font-size: 8px; }
.secondary-action:hover { background: #f5f9f7; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.7fr); gap: 14px; }
.info-card { padding-bottom: 18px; }
.panel-head.simple { padding-bottom: 9px; }
.info-list { margin: 5px 18px 0; }
.info-list > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 15px; padding: 10px 0; border-top: 1px solid #edf2ef; }
.info-list dt { color: #8d9a93; font-size: 8px; font-weight: 800; }
.info-list dd { margin: 0; color: #41574c; font-size: 9px; line-height: 1.55; }
.compact-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; text-align: center; padding: 20px; }
.big-number { margin-top: 7px; font-size: 42px; letter-spacing: -.055em; }
.compact-center p { margin: 4px 0 11px; color: #8e9b94; font-size: 8px; }
.text-action { color: #0c7a52; font-size: 8px; font-weight: 850; }
.related-panel { margin-top: 14px; }
.small-primary { min-height: 34px; padding: 0 10px; border: 0; background: #eaf7f0; color: #08734a; font-size: 8px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 15px 17px; border-color: #f1e7e7; }
.danger-zone strong { font-size: 9px; }
.danger-zone p { margin: 4px 0 0; color: #9a9f9c; font-size: 8px; }
.danger-actions { display: flex; align-items: center; gap: 7px; }
.danger-actions form { margin: 0; }
.danger-button { min-height: 36px; padding: 0 11px; border: 1px solid #f0cfd3; background: #fff5f6; color: #bd3c48; font-size: 8px; }
.material-cost-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.cost-summary { padding: 17px; }
.cost-summary span, .cost-summary small { display: block; }
.cost-summary span { color: #8e9b94; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.cost-summary strong { display: block; margin-top: 8px; font-size: 20px; }
.cost-summary small { margin-top: 3px; color: #9ca7a1; font-size: 8px; }
.cost-summary.highlight { background: linear-gradient(135deg,#0d704c,#0a5b3f); border-color: transparent; color: #fff; }
.cost-summary.highlight span { color: #a2e4c8; }
.cost-summary.highlight small { color: #b9dfcd; }
.material-info-grid { grid-template-columns: 1fr 1fr; }
.cost-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 7px 18px 0; padding: 18px; border-radius: 14px; background: #f7faf8; }
.cost-equation div { text-align: center; }
.cost-equation span, .cost-equation small { display: block; }
.cost-equation span { color: #405b4e; font-size: 11px; font-weight: 900; }
.cost-equation small { margin-top: 4px; color: #99a59f; font-size: 7px; }
.cost-equation > b { color: #94a29a; }
.cost-equation .result { padding: 10px; border-radius: 11px; background: #e8f7ef; }
.cost-equation .result span { color: #08734a; }
.equation-note { margin: 9px 18px 0; color: #8b9992; font-size: 8px; line-height: 1.5; }
.next-flow { margin-top: 14px; padding: 15px 17px; display: flex; align-items: center; gap: 12px; background: #f7fbf9; }
.next-flow-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: #dff3e8; color: #08734a; font-weight: 900; }
.next-flow strong { display: block; font-size: 9px; }
.next-flow p { margin: 3px 0 0; color: #8e9b94; font-size: 8px; }

@media (max-width: 1180px) {
    .form-layout { grid-template-columns: 1fr 280px; }
    .master-summary-grid, .material-cost-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .form-layout { grid-template-columns: 1fr; }
    .sticky-card { position: static; }
    .form-side { order: -1; }
    .image-preview { min-height: 135px; }
    .image-preview img { height: 170px; }
    .detail-grid, .material-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .master-hero, .form-page-head, .detail-hero, .danger-zone { align-items: flex-start; flex-direction: column; }
    .primary-action { width: 100%; }
    .master-toolbar { align-items: stretch; }
    .toolbar-select { flex: 1 1 130px; max-width: none; }
    .search-box { flex-basis: 100%; }
    .toolbar-button { flex: 1 1 110px; }
    .detail-actions { width: 100%; justify-content: space-between; }
    .danger-actions { width: 100%; }
    .danger-actions form { flex: 1; }
    .danger-actions button { width: 100%; }
    .cost-equation { grid-template-columns: 1fr; }
    .cost-equation > b { transform: rotate(90deg); }
}
@media (max-width: 560px) {
    .master-summary-grid, .material-cost-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .mini-stat, .cost-summary { min-height: 99px; padding: 14px; }
    .mini-stat strong, .cost-summary strong { font-size: 17px; }
    .form-grid.two { grid-template-columns: 1fr; }
    .field.wide { grid-column: auto; }
    .form-card { padding: 14px; }
    .formula-box { align-items: flex-start; flex-direction: column; }
    .pagination-bar { align-items: flex-start; flex-direction: column; }
    .info-list > div { grid-template-columns: 1fr; gap: 3px; }
    .detail-identity { align-items: flex-start; }
    .detail-avatar, .detail-photo { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
}
@media (max-width: 380px) {
    .master-summary-grid, .material-cost-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   DAPUR TEH M V2.4 — GUDANG PUSAT / INVENTORY
   ================================================================ */
.hero-actions { display:flex; align-items:center; gap:9px; }
.action-with-icon { display:inline-flex; align-items:center; justify-content:center; }
.compact-action { min-height:36px; padding:0 12px; }
.danger-action { background:linear-gradient(135deg,#cb4c56,#a83d47) !important; color:#fff !important; border-color:transparent !important; }
.inventory-summary-grid .mini-stat.warning { border-color:#f2dfb6; background:linear-gradient(145deg,#fffdf9,#fffaf0); }
.inventory-summary-grid .mini-stat.danger { border-color:#f1d0d4; background:linear-gradient(145deg,#fff,#fff7f8); }
.inventory-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px 5px; }
.inventory-panel-head h2 { margin:4px 0 0; font-size:13px; }
.activity-chip, .posted-badge { display:inline-flex; align-items:center; min-height:27px; padding:0 10px; border-radius:999px; background:#eef8f3; color:#08734a; font-size:8px; font-weight:850; white-space:nowrap; }
.posted-badge.out { background:#fff1f2; color:#b5434e; }
.stock-quantity { display:flex; align-items:baseline; gap:5px; }
.stock-quantity strong { font-size:15px; }
.stock-quantity span { color:#8c9992; font-size:8px; }
.stock-state { display:inline-flex; align-items:center; gap:6px; min-height:25px; padding:0 9px; border-radius:999px; font-size:8px; font-weight:850; }
.stock-state i { width:7px; height:7px; border-radius:50%; }
.stock-state.healthy { background:#eaf8f1; color:#08734a; }
.stock-state.healthy i { background:#22ae70; }
.stock-state.critical { background:#fff7e8; color:#a86e08; }
.stock-state.critical i { background:#e5a52b; }
.stock-state.out { background:#fff0f2; color:#b63f4b; }
.stock-state.out i { background:#d95763; }
.stock-detail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.movement-kind { display:inline-flex; min-height:24px; align-items:center; padding:0 8px; border-radius:999px; font-size:8px; font-weight:850; }
.movement-kind.in { background:#eaf8f1; color:#08734a; }
.movement-kind.out { background:#fff0f2; color:#b63f4b; }
.qty-in { color:#078456 !important; font-weight:850; }
.qty-out { color:#bd4651 !important; font-weight:850; }
.toolbar-date { min-height:36px; max-width:145px; padding:0 9px; border:1px solid #dfe7e2; border-radius:10px; background:#fff; color:#53685d; font-size:8px; outline:0; }
.document-code { color:#08734a; font-weight:900; letter-spacing:.02em; }
.document-code.out { color:#ad414c; }
.purpose-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; background:#f3f6f5; color:#53675d; font-size:8px; font-weight:800; }
.inventory-document-form { display:grid; gap:14px; }
.inventory-items-card { padding:0 0 16px; overflow:visible; }
.inventory-items-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 17px 13px; border-bottom:1px solid #edf2ef; }
.inventory-items-head h2 { margin:4px 0 0; font-size:13px; }
.inventory-items-head p { margin:4px 0 0; color:#89978f; font-size:8px; }
.add-row-button { border:0; cursor:pointer; white-space:nowrap; }
.inventory-items-list { padding:5px 17px 0; }
.inventory-row { position:relative; display:grid; align-items:end; gap:9px; padding:14px 31px 14px 0; border-bottom:1px solid #edf2ef; }
.stock-in-row { grid-template-columns:25px minmax(190px,1.45fr) minmax(125px,.7fr) minmax(145px,.8fr) minmax(105px,.65fr) minmax(105px,.65fr); }
.stock-out-row { grid-template-columns:25px minmax(220px,1.55fr) minmax(135px,.75fr) minmax(105px,.62fr) minmax(125px,.72fr) minmax(115px,.68fr); }
.row-index { align-self:center; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#edf6f1; color:#08734a; font-size:8px; font-weight:900; }
.inventory-row .field { margin:0; }
.inventory-row .field > span { min-height:15px; }
.inventory-row .field small { display:block; margin-top:4px; color:#98a49e; font-size:7px; }
.unit-input { min-height:43px; display:flex; align-items:center; overflow:hidden; border:1px solid #dfe7e2; border-radius:11px; background:#fff; }
.unit-input:focus-within { border-color:#70bc9c; box-shadow:0 0 0 3px rgba(13,122,80,.08); }
.unit-input input { width:100%; min-width:0; height:41px; padding:0 10px; border:0; outline:0; background:transparent; font-size:9px; }
.unit-input em { height:41px; display:grid; place-items:center; padding:0 9px; background:#f6f8f7; border-left:1px solid #e6ece8; color:#78877f; font-size:8px; font-style:normal; font-weight:800; white-space:nowrap; }
.row-calculation { min-height:58px; display:flex; flex-direction:column; justify-content:center; padding:8px 10px; border-radius:11px; background:#f6faf8; border:1px solid #e9efec; }
.row-calculation span { color:#89978f; font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.row-calculation strong { margin-top:4px; color:#284d3d; font-size:11px; }
.row-calculation small { margin-top:2px; color:#99a49e; font-size:7px; }
.row-calculation.value { background:#f8faf9; }
.row-calculation.balance { background:#f5f8fb; }
.inventory-row.insufficient { margin:4px -7px; padding-left:7px; border:1px solid #efc5ca; border-radius:12px; background:#fff8f9; }
.inventory-row.insufficient .row-calculation.balance strong { color:#c3424e; }
.remove-row-button { position:absolute; right:0; top:34px; width:25px; height:25px; border:1px solid #eadcdf; border-radius:8px; background:#fff; color:#bd5961; font-size:16px; line-height:1; cursor:pointer; }
.inventory-document-total { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:14px 17px 0; padding:14px 15px; border-radius:13px; background:linear-gradient(135deg,#0e704d,#095f42); color:#fff; }
.inventory-document-total span, .inventory-document-total small { display:block; }
.inventory-document-total span { font-size:9px; font-weight:900; }
.inventory-document-total small { margin-top:3px; color:#b7decb; font-size:7.5px; }
.inventory-document-total > strong { font-size:18px; white-space:nowrap; }
.inventory-document-total.danger-total { background:linear-gradient(135deg,#b94b55,#973944); }
.document-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; padding-bottom:5px; }
.post-button { min-width:170px; border:0; cursor:pointer; }
.danger-code { background:#fff0f2; color:#ad414c; }
.document-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.smaller-value { font-size:14px !important; line-height:1.25; }
.danger-summary { background:linear-gradient(135deg,#b94b55,#973944); color:#fff; border-color:transparent; }
.danger-summary span { color:#ffd5d9; }
.danger-summary small { color:#f6c3c8; }
.stock-out-avatar { background:#fff0f2; color:#ad414c; }
.document-note { margin:12px 17px 0; padding:12px 13px; border-radius:11px; background:#f7faf8; }
.document-note strong { display:block; font-size:8px; }
.document-note p { margin:4px 0 0; color:#75877e; font-size:8px; line-height:1.55; }
.document-note-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-bottom:12px; }

@media (max-width: 1180px) {
    .stock-in-row, .stock-out-row { grid-template-columns:25px minmax(180px,1.4fr) minmax(120px,.7fr) minmax(135px,.8fr); }
    .stock-in-row .row-calculation, .stock-out-row .row-calculation { grid-column:auto; }
    .stock-in-row { grid-template-columns:25px minmax(180px,1.4fr) repeat(2,minmax(120px,.75fr)); }
    .stock-in-row .row-calculation { margin-top:0; }
    .stock-in-row .row-calculation:nth-of-type(1) { grid-column:2 / 3; }
    .stock-out-row { grid-template-columns:25px minmax(190px,1.45fr) repeat(2,minmax(125px,.75fr)); }
}
@media (max-width: 900px) {
    .stock-detail-grid, .document-meta-grid { grid-template-columns:1fr 1fr; }
    .inventory-row, .stock-in-row, .stock-out-row { grid-template-columns:25px 1fr 1fr; align-items:end; }
    .inventory-row .row-material { grid-column:2 / -1; }
    .inventory-row .row-calculation { grid-column:auto !important; }
    .remove-row-button { top:13px; }
}
@media (max-width: 700px) {
    .hero-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
    .inventory-items-head { align-items:flex-start; flex-direction:column; }
    .add-row-button { width:100%; }
    .toolbar-date { flex:1 1 140px; max-width:none; }
    .document-actions { display:grid; grid-template-columns:1fr 1fr; }
    .post-button { min-width:0; }
    .inventory-panel-head { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 560px) {
    .stock-detail-grid, .document-meta-grid { grid-template-columns:1fr 1fr; }
    .inventory-items-list { padding-left:12px; padding-right:12px; }
    .inventory-row, .stock-in-row, .stock-out-row { grid-template-columns:24px 1fr; padding-right:0; padding-top:14px; }
    .inventory-row .row-material, .inventory-row .field, .inventory-row .row-calculation { grid-column:2 / -1 !important; }
    .row-index { grid-row:1 / span 2; align-self:start; margin-top:20px; }
    .remove-row-button { right:0; top:12px; }
    .inventory-document-total { align-items:flex-start; flex-direction:column; }
    .inventory-document-total > strong { font-size:20px; }
    .document-note-grid { grid-template-columns:1fr; gap:0; }
}
@media (max-width: 380px) {
    .stock-detail-grid, .document-meta-grid { grid-template-columns:1fr; }
    .hero-actions, .document-actions { grid-template-columns:1fr; }
}


/* ================================================================
   DAPUR TEH M V2.5 — TRANSFER OUTLET / PENERIMAAN / ADJUSTMENT
   ================================================================ */
.transfer-status { display:inline-flex; align-items:center; gap:6px; min-height:25px; padding:0 9px; border-radius:999px; font-size:8px; font-weight:850; white-space:nowrap; }
.transfer-status i { width:7px; height:7px; border-radius:50%; }
.transfer-status.info { background:#eef6ff; color:#246aa4; }
.transfer-status.info i { background:#3794d6; }
.transfer-status.success { background:#eaf8f1; color:#08734a; }
.transfer-status.success i { background:#22ae70; }
.transfer-status.warning { background:#fff7e8; color:#a86e08; }
.transfer-status.warning i { background:#e5a52b; }
.transfer-status.muted { background:#f3f6f5; color:#67786f; }
.transfer-status.muted i { background:#9aa8a1; }
.transfer-status.large { min-height:34px; padding:0 13px; font-size:9px; }
.detail-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.document-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:14px; }
.document-main { overflow:hidden; }
.document-side { padding:17px; align-self:start; }
.detail-list { display:grid; gap:0; margin-top:9px; }
.detail-list > div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #edf2ef; }
.detail-list span { color:#8b9991; font-size:8px; }
.detail-list strong { max-width:60%; text-align:right; color:#29483a; font-size:8px; }
.document-note span { display:block; color:#667a70; font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.waiting-box { margin-top:12px; padding:13px; border:1px solid #d9e9f6; border-radius:12px; background:#f4f9fd; }
.waiting-box strong { display:block; color:#296a9f; font-size:9px; }
.waiting-box p { margin:4px 0 0; color:#6d8799; font-size:8px; line-height:1.55; }
.success-box { border-color:#ccebdc; background:#effaf5; }
.success-box strong { color:#08734a; }
.success-box p { color:#668176; }
.difference-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:8px; font-weight:850; }
.difference-pill.neutral { background:#f2f6f4; color:#63746b; }
.difference-pill.negative { background:#fff0f2; color:#b63f4b; }
.difference-pill.positive { background:#eaf8f1; color:#08734a; }
.text-danger { color:#b63f4b !important; }
.text-success { color:#08734a !important; }
.dependency-empty { padding:35px 20px; text-align:center; }
.dependency-empty .empty-icon { margin:0 auto 10px; }
.dependency-empty h2 { margin:0; font-size:16px; }
.dependency-empty p { max-width:460px; margin:8px auto 18px; color:#788a80; font-size:9px; line-height:1.6; }
.field-span-2 { grid-column:1 / -1; }
.field textarea { width:100%; padding:11px 12px; border:1px solid #dfe7e2; border-radius:11px; background:#fff; color:#213d31; font:inherit; font-size:9px; outline:none; resize:vertical; }
.field textarea:focus { border-color:#70bc9c; box-shadow:0 0 0 3px rgba(13,122,80,.08); }
.adjustment-list .adjustment-row { grid-template-columns:25px minmax(210px,1.4fr) minmax(105px,.65fr) minmax(135px,.75fr) minmax(105px,.65fr) minmax(125px,.72fr); }
.adjustment-total { background:linear-gradient(135deg,#253f35,#1b342a); }
.three-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Outlet application */
.outlet-shell { min-height:100vh; background:#f2f6f4; color:#173328; }
.outlet-topbar { position:sticky; top:0; z-index:60; min-height:66px; display:flex; align-items:center; gap:24px; padding:0 24px; border-bottom:1px solid #dfe7e2; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.outlet-brand { display:flex; align-items:center; gap:10px; min-width:210px; color:inherit; text-decoration:none; }
.outlet-brand > span:last-child { display:flex; flex-direction:column; }
.outlet-brand strong { font-size:12px; }
.outlet-brand small { margin-top:2px; color:#1e9a66; font-size:7px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.outlet-nav { display:flex; align-items:center; gap:5px; flex:1; }
.outlet-nav a { position:relative; min-height:38px; display:flex; align-items:center; gap:7px; padding:0 12px; border-radius:11px; color:#6e8077; text-decoration:none; font-size:8.5px; font-weight:800; }
.outlet-nav a:hover { background:#f3f7f5; color:#164632; }
.outlet-nav a.active { background:#e7f6ef; color:#08734a; }
.nav-counter { min-width:18px; height:18px; display:grid; place-items:center; border-radius:999px; background:#d75a64; color:#fff; font-size:7px; }
.outlet-user { display:flex; align-items:center; gap:8px; }
.outlet-user-text { display:flex; flex-direction:column; min-width:110px; }
.outlet-user-text strong { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8.5px; }
.outlet-user-text small { color:#8a9a92; font-size:7px; }
.outlet-logout { min-height:32px; padding:0 10px; border:1px solid #dde6e1; border-radius:9px; background:#fff; color:#697b72; font-size:8px; font-weight:800; cursor:pointer; }
.outlet-content { max-width:1400px; margin:0 auto; padding:24px 28px 85px; }
.outlet-page-head { margin-bottom:18px; }
.outlet-page-head h1 { margin:5px 0 0; font-size:24px; letter-spacing:-.04em; }
.outlet-page-head p { margin:5px 0 0; color:#798b82; font-size:9px; }
.outlet-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.outlet-panel { overflow:hidden; }
.compact-toolbar { justify-content:flex-end; }
.attention-row { background:#fbfefa; }
.small-action { min-height:31px; width:auto !important; padding:0 11px; }
.outlet-document-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.outlet-document-meta > div { min-height:78px; padding:13px; border:1px solid #e0e8e4; border-radius:13px; background:#fff; }
.outlet-document-meta span { display:block; color:#89998f; font-size:7px; text-transform:uppercase; letter-spacing:.05em; font-weight:850; }
.outlet-document-meta strong { display:block; margin-top:7px; color:#1e3f31; font-size:10px; }
.outlet-document-meta small { display:block; margin-top:3px; color:#94a099; font-size:7px; }
.outlet-receive-card { padding:17px; }
.receive-instruction { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
.receive-step { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid #e3ebe7; border-radius:12px; background:#f8fbf9; }
.receive-step > span { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border-radius:8px; background:#e0f3e9; color:#08734a; font-size:8px; font-weight:900; }
.receive-step strong { display:block; font-size:8px; }
.receive-step p { margin:3px 0 0; color:#87968e; font-size:7px; line-height:1.45; }
.receive-items { border-top:1px solid #edf2ef; }
.receive-item { display:grid; grid-template-columns:minmax(180px,1.35fr) 110px minmax(145px,.8fr) 120px; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid #edf2ef; }
.receive-material { display:flex; align-items:center; gap:9px; }
.receive-material > div { display:flex; flex-direction:column; }
.receive-material strong { font-size:9px; }
.receive-material small { margin-top:2px; color:#92a098; font-size:7px; }
.receive-sent, .receive-difference { display:flex; flex-direction:column; }
.receive-sent span, .receive-difference span { color:#8a9991; font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.receive-sent strong, .receive-difference strong { margin-top:4px; font-size:9px; }
.receive-difference small { margin-top:2px; color:#6c7e75; font-size:7px; }
.receive-difference.has-difference strong, .receive-difference.has-difference small { color:#b64b55; }
.receive-input { margin:0; }
.receive-footer { display:grid; gap:12px; padding-top:16px; }
.receive-warning { padding:12px 13px; border-radius:11px; background:#fff8ec; border:1px solid #f2dfb8; }
.receive-warning strong { font-size:8px; color:#9a670d; }
.receive-warning p { margin:3px 0 0; color:#8e7953; font-size:7.5px; }
.receive-submit { width:100%; border:0; cursor:pointer; }
.receipt-final-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; padding:13px 14px; border-radius:12px; }
.receipt-final-banner.success { background:#ebf8f2; color:#08734a; }
.receipt-final-banner.warning { background:#fff7e8; color:#9f6908; }
.receipt-final-banner strong { font-size:10px; }
.receipt-final-banner span { font-size:8px; }
.outlet-stock-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.live-stock-badge { display:flex; align-items:center; gap:7px; color:#587067; font-size:8px; font-weight:800; }
.live-stock-badge i { width:8px; height:8px; border-radius:50%; background:#25b574; box-shadow:0 0 0 4px #dcf4e9; }
.compact-search { display:flex; align-items:center; gap:7px; }
.compact-search input { min-height:36px; padding:0 11px; border:1px solid #dfe7e2; border-radius:10px; outline:0; font-size:8px; }
.compact-search button { min-height:36px; padding:0 12px; border:0; border-radius:10px; background:#116f4e; color:#fff; font-size:8px; font-weight:850; cursor:pointer; }
.outlet-pos-placeholder { max-width:620px; margin:55px auto; padding:30px; text-align:center; }
.outlet-pos-placeholder .brand-mark { margin:0 auto 12px; }
.outlet-pos-placeholder h2 { margin:0; font-size:18px; }
.outlet-pos-placeholder p { margin:8px auto 18px; max-width:520px; color:#76887f; font-size:9px; line-height:1.65; }
.placeholder-actions { display:flex; justify-content:center; gap:9px; }
.outlet-mobile-nav { display:none; }

@media (max-width:1100px) {
    .document-grid { grid-template-columns:1fr; }
    .document-side { order:-1; }
    .adjustment-list .adjustment-row { grid-template-columns:25px minmax(180px,1.4fr) repeat(2,minmax(120px,.8fr)); }
    .outlet-user-text { display:none; }
}
@media (max-width:850px) {
    .outlet-nav { overflow-x:auto; }
    .outlet-brand { min-width:auto; }
    .outlet-brand > span:last-child { display:none; }
    .receive-item { grid-template-columns:1fr 1fr; }
    .receive-material { grid-column:1 / -1; }
    .detail-summary-grid, .outlet-document-meta { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
    .detail-summary-grid, .three-stats, .outlet-summary-grid { grid-template-columns:1fr 1fr; }
    .adjustment-list .adjustment-row { grid-template-columns:24px 1fr; }
    .adjustment-list .adjustment-row > *:not(.row-index):not(.remove-row-button) { grid-column:2 / -1 !important; }
    .field-span-2 { grid-column:auto; }
    .outlet-topbar { padding:0 14px; min-height:58px; }
    .outlet-nav { display:none; }
    .outlet-user { margin-left:auto; }
    .outlet-content { padding:18px 13px 82px; }
    .outlet-page-head h1 { font-size:21px; }
    .outlet-mobile-nav { position:fixed; left:10px; right:10px; bottom:10px; z-index:70; display:grid; grid-template-columns:repeat(3,1fr); min-height:58px; padding:5px; border:1px solid #dce6e1; border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 12px 35px rgba(31,69,52,.16); backdrop-filter:blur(12px); }
    .outlet-mobile-nav a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:12px; color:#7a8c83; text-decoration:none; }
    .outlet-mobile-nav a.active { background:#e9f7f1; color:#08734a; }
    .outlet-mobile-nav span { font-size:16px; line-height:1; }
    .outlet-mobile-nav small { font-size:7px; font-weight:850; }
    .outlet-mobile-nav i { position:absolute; top:4px; right:calc(50% - 25px); width:16px; height:16px; display:grid; place-items:center; border-radius:999px; background:#d95662; color:#fff; font-size:7px; font-style:normal; }
    .receive-instruction { grid-template-columns:1fr; }
    .receive-item { grid-template-columns:1fr; }
    .receive-material { grid-column:auto; }
    .placeholder-actions { flex-direction:column; }
}
@media (max-width:500px) {
    .detail-summary-grid, .three-stats, .outlet-summary-grid, .outlet-document-meta { grid-template-columns:1fr; }
    .receive-item { padding:13px 2px; }
    .receipt-final-banner { align-items:flex-start; flex-direction:column; }
    .outlet-stock-head { align-items:stretch; flex-direction:column; }
    .compact-search input { flex:1; }
}

/* =========================================================
   Dapur Teh M V2.6 — Outlet, Aset Outlet, User & Kasir
   ========================================================= */
.management-page .master-hero { align-items:flex-end; }
.attention-stat { border-color:#f1d8b2 !important; background:linear-gradient(145deg,#fffdf8,#fff9ee) !important; }
.attention-stat strong { color:#9a650e !important; }
.outlet-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; padding:15px; }
.outlet-card { overflow:hidden; border:1px solid #e0e8e4; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(30,68,51,.035); transition:.2s ease; }
.outlet-card:hover { transform:translateY(-2px); box-shadow:0 13px 30px rgba(30,68,51,.08); }
.outlet-card-cover { position:relative; height:130px; display:block; overflow:hidden; background:linear-gradient(135deg,#e5f6ee,#f5faf7); }
.outlet-card-cover img { width:100%; height:100%; object-fit:cover; }
.outlet-cover-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#588273; }
.outlet-cover-placeholder span { font-size:30px; }
.outlet-cover-placeholder small { font-size:8px; font-weight:850; letter-spacing:.06em; }
.outlet-live-status { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.93); font-size:7px; font-weight:900; box-shadow:0 5px 14px rgba(0,0,0,.07); }
.outlet-live-status i { width:6px; height:6px; border-radius:50%; }
.outlet-live-status.active { color:#08734a; }.outlet-live-status.active i { background:#20b574; }
.outlet-live-status.inactive { color:#8c5d63; }.outlet-live-status.inactive i { background:#c75b65; }
.outlet-card-body { padding:14px; }
.outlet-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.outlet-card-title > div { min-width:0; display:flex; flex-direction:column; }
.outlet-card-title a:not(.action-icon) { color:#17372a; text-decoration:none; font-size:11px; font-weight:900; }
.outlet-card-title span { margin-top:3px; color:#899991; font-size:7.5px; }
.outlet-card-title .action-icon { flex:0 0 29px; width:29px; height:29px; display:grid; place-items:center; border:1px solid #e3eae6; border-radius:9px; color:#617a6e; text-decoration:none; font-size:12px; }
.outlet-card-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:13px 0; }
.outlet-card-metrics > div { padding:8px; border:1px solid #edf1ef; border-radius:10px; background:#fafcfb; }
.outlet-card-metrics strong { display:block; color:#183a2c; font-size:11px; }
.outlet-card-metrics span { display:block; margin-top:2px; color:#8a9a92; font-size:6.6px; }
.outlet-card-metrics .warn-metric { background:#fff8ec; border-color:#f3dfb9; }.outlet-card-metrics .warn-metric strong { color:#a06b0b; }
.outlet-contact { display:flex; gap:7px; align-items:flex-start; padding:9px 0; border-top:1px solid #eef3f0; }
.outlet-contact > span { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#edf7f2; color:#138156; font-size:9px; }
.outlet-contact > div { min-width:0; display:flex; flex-direction:column; }
.outlet-contact strong { font-size:8px; }.outlet-contact small { margin-top:2px; color:#86978e; font-size:7px; line-height:1.4; }
.outlet-card-actions { display:grid; grid-template-columns:1.25fr .8fr .8fr; gap:5px; margin-top:8px; }
.outlet-card-actions a { min-height:31px; display:flex; align-items:center; justify-content:center; border:1px solid #e2eae6; border-radius:9px; color:#557267; text-decoration:none; font-size:7.5px; font-weight:850; }
.outlet-card-actions a:first-child { border-color:#cce8db; background:#eaf7f1; color:#0b744d; }
.management-empty { grid-column:1 / -1; padding:45px 20px; text-align:center; }
.management-empty .empty-icon { margin:0 auto 10px; }.management-empty h2 { margin:0; font-size:16px; }.management-empty p { max-width:480px; margin:8px auto 15px; color:#7d8e85; font-size:8.5px; line-height:1.6; }.management-empty .primary-action { display:inline-flex; }
.management-photo-preview { min-height:150px; }
.check-row { display:flex; gap:7px; align-items:center; margin:8px 0 13px; color:#6f8278; font-size:8px; }
.check-row input { accent-color:#128158; }
.management-detail-page { max-width:1480px; margin:0 auto; }
.narrow-detail { max-width:1180px; }
.detail-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:15px; }
.detail-identity { display:flex; align-items:center; gap:13px; min-width:0; }
.detail-photo { width:82px; height:70px; flex:0 0 82px; overflow:hidden; display:grid; place-items:center; border:1px solid #dce7e1; border-radius:15px; background:linear-gradient(135deg,#e8f6ef,#f7fbf9); font-size:27px; }
.detail-photo img { width:100%; height:100%; object-fit:cover; }
.detail-identity h1 { margin:4px 0 0; font-size:24px; letter-spacing:-.04em; }
.detail-identity p { margin:3px 0 0; color:#536f62; font-size:9px; font-weight:800; }
.detail-identity small { display:block; margin-top:3px; max-width:660px; color:#8a9991; font-size:7.5px; }
.detail-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.detail-actions { display:flex; align-items:center; gap:7px; }
.detail-actions form { margin:0; }
.danger-outline { min-height:36px; padding:0 13px; border:1px solid #eccdd0; border-radius:10px; background:#fff; color:#b34852; font-size:8px; font-weight:850; cursor:pointer; }
.management-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:13px; }
.management-kpi-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.management-kpi-grid article { min-height:94px; padding:14px; border:1px solid #e0e8e4; border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(28,62,48,.025); }
.management-kpi-grid span { display:block; color:#86968e; font-size:7px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.management-kpi-grid strong { display:block; margin-top:8px; color:#15382a; font-size:15px; letter-spacing:-.025em; }
.management-kpi-grid small { display:block; margin-top:4px; color:#93a098; font-size:7px; }
.management-kpi-grid .attention-kpi { border-color:#f0ddbb; background:#fffaf0; }.management-kpi-grid .attention-kpi strong { color:#9b690d; }
.management-detail-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.62fr); gap:13px; }
.management-detail-main { display:grid; gap:13px; }
.management-detail-side { display:grid; align-content:start; gap:13px; }
.management-section { padding:16px; }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:13px; border-bottom:1px solid #edf2ef; }
.panel-title-row h2 { margin:3px 0 0; font-size:13px; }.panel-title-row p { margin:3px 0 0; color:#899991; font-size:7.5px; }
.compact-entity-list { display:grid; }
.compact-entity-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px 2px; border-bottom:1px solid #edf2ef; color:inherit; text-decoration:none; }
.compact-entity-row:last-child { border-bottom:0; }
.compact-entity-row > div { min-width:0; display:flex; flex-direction:column; }.compact-entity-row strong { font-size:8.5px; }.compact-entity-row small { margin-top:2px; color:#8c9a93; font-size:7px; overflow:hidden; text-overflow:ellipsis; }
.entity-avatar.user { background:#edf1ff; color:#5a62ad; }.entity-avatar.asset { background:#fff4e1; color:#a86f11; }
.small-empty { padding:24px 5px; text-align:center; color:#87968e; font-size:8px; }.small-empty.full { grid-column:1/-1; }
.asset-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:12px; }
.asset-mini-card { display:grid; grid-template-columns:31px minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px; border:1px solid #e6ece9; border-radius:11px; color:inherit; text-decoration:none; }
.asset-mini-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#fff8e9; font-size:13px; }.asset-mini-card > div { min-width:0; display:flex; flex-direction:column; }.asset-mini-card strong { font-size:8px; }.asset-mini-card small { margin-top:2px; color:#8d9c94; font-size:6.7px; }
.asset-condition { display:inline-flex; align-items:center; width:max-content; padding:4px 7px; border-radius:999px; font-size:6.6px; font-weight:850; white-space:nowrap; }
.asset-condition.good { background:#e8f7ef; color:#08734a; }.asset-condition.fair { background:#edf3fa; color:#3c6795; }.asset-condition.repair { background:#fff4dd; color:#986307; }.asset-condition.damaged { background:#fdebed; color:#b24450; }
.info-stack-card { padding:15px; }.info-pair { padding:10px 0; border-bottom:1px solid #eef2f0; }.info-pair:last-child { border-bottom:0; }.info-pair span { display:block; color:#8b9a92; font-size:6.8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.info-pair strong { display:block; margin-top:3px; color:#274638; font-size:8.3px; overflow-wrap:anywhere; }
.quick-action-card { padding:14px; }.quick-action-card > a { min-height:36px; display:flex; align-items:center; margin-top:7px; padding:0 10px; border:1px solid #e4ebe7; border-radius:9px; color:#4e6b5e; text-decoration:none; font-size:7.8px; font-weight:800; }.quick-action-card > a:hover { background:#edf8f2; color:#08734a; }
.asset-photo { background:#fff8e9; }.user-detail-avatar { border-radius:50%; background:#eaf5f0; color:#0d7b52; font-size:22px; font-weight:900; }
.info-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin-top:12px; }.info-detail-grid > div { padding:11px 0; border-bottom:1px solid #eef2f0; }.info-detail-grid > div.wide { grid-column:1/-1; }.info-detail-grid span { display:block; color:#899991; font-size:6.8px; font-weight:850; text-transform:uppercase; }.info-detail-grid strong { display:block; margin-top:4px; color:#274638; font-size:8.3px; line-height:1.5; }
.plain-link { color:#0b7750; text-decoration:none; font-weight:800; }.muted-cell { color:#8b9992; font-size:8px; }
.role-badge { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:6.7px; font-weight:900; }.role-badge.owner { background:#e9f8f1; color:#08734a; }.role-badge.admin-pusat { background:#eef2ff; color:#5964a7; }.role-badge.kasir-outlet { background:#fff5e2; color:#9c6810; }
.role-explainer { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:13px; }.role-explainer > div { padding:10px; border:1px solid #e5ece8; border-radius:10px; background:#fafcfb; }.role-explainer b { display:block; font-size:8px; }.role-explainer span { display:block; margin-top:3px; color:#899991; font-size:6.8px; line-height:1.45; }
.user-preview { display:flex; flex-direction:column; align-items:center; padding:18px 8px; margin-bottom:9px; border-radius:13px; background:linear-gradient(135deg,#edf8f3,#f8fbfa); }.user-preview > span { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:#16875c; color:#fff; font-size:18px; font-weight:900; }.user-preview strong { margin-top:8px; font-size:10px; }.user-preview small { margin-top:2px; color:#84958c; font-size:7px; }

@media (max-width:1150px) {
    .outlet-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .management-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:850px) {
    .management-detail-grid { grid-template-columns:1fr; }
    .management-detail-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .detail-head { align-items:flex-start; flex-direction:column; }
    .asset-mini-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
    .outlet-card-grid { grid-template-columns:1fr; padding:10px; }
    .management-kpi-grid,.management-kpi-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .role-explainer { grid-template-columns:1fr; }
    .management-detail-side { grid-template-columns:1fr; }
    .detail-actions { width:100%; }.detail-actions > * { flex:1; }.detail-actions a,.detail-actions button { width:100%; justify-content:center; }
}
@media (max-width:500px) {
    .management-kpi-grid,.management-kpi-grid.four { grid-template-columns:1fr 1fr; }
    .detail-identity { align-items:flex-start; }.detail-photo { width:62px; height:58px; flex-basis:62px; }.detail-identity h1 { font-size:20px; }
    .outlet-card-actions { grid-template-columns:1fr 1fr; }.outlet-card-actions a:first-child { grid-column:1/-1; }
    .info-detail-grid { grid-template-columns:1fr; }.info-detail-grid > div.wide { grid-column:auto; }
    .compact-entity-row { grid-template-columns:32px minmax(0,1fr); }.compact-entity-row .table-status { grid-column:2; }
}

/* ========================================================================== 
   Dapur Teh M V2.7 — Master Menu · Resep/HPP · Menu Outlet
   ========================================================================== */
.menu-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:13px; }
.menu-master-card { overflow:hidden; border:1px solid #e1e9e5; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(25,65,48,.025); }
.menu-photo { position:relative; display:grid; place-items:center; height:150px; overflow:hidden; background:linear-gradient(135deg,#eef8f3,#f7fbf9); color:#6e8a7d; text-decoration:none; font-size:34px; }
.menu-photo img { width:100%; height:100%; object-fit:cover; }
.menu-photo .table-status { position:absolute; top:10px; right:10px; background:#fff; box-shadow:0 4px 12px rgba(20,60,42,.1); }
.menu-photo .table-status b { width:5px; height:5px; border-radius:50%; background:currentColor; }
.menu-card-body { padding:13px; }
.menu-card-body h3 { margin:4px 0 10px; font-size:14px; letter-spacing:-.02em; }
.menu-card-body h3 a { color:#16382a; text-decoration:none; }
.menu-cost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.menu-cost-grid > div { padding:9px; border-radius:10px; background:#f7faf8; }
.menu-cost-grid span { display:block; color:#8a9991; font-size:6.5px; font-weight:800; text-transform:uppercase; }
.menu-cost-grid strong { display:block; margin-top:4px; color:#173c2d; font-size:9px; }
.menu-meta-line { display:flex; gap:11px; margin:10px 0; color:#7e9087; font-size:7px; }
.menu-card-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.menu-card-actions a { min-height:31px; display:flex; align-items:center; justify-content:center; border:1px solid #e0e9e5; border-radius:9px; color:#557267; text-decoration:none; font-size:7.3px; font-weight:850; }
.menu-card-actions a:nth-child(2) { border-color:#cce8db; background:#eaf7f1; color:#0b744d; }
.menu-detail-photo { background:#eef8f3; }
.cost-preview-card { padding:16px; }
.cost-preview-card > strong { display:block; margin:7px 0 3px; color:#113b2b; font-size:21px; }
.cost-preview-card > small { display:block; margin-bottom:12px; color:#82948a; font-size:7.3px; line-height:1.5; }
.image-upload-box { min-height:160px; display:grid; place-items:center; overflow:hidden; margin:10px 0; border:1px dashed #ccdcd4; border-radius:14px; background:#f7faf8; color:#789086; text-align:center; }
.image-upload-box img { width:100%; height:180px; object-fit:cover; }
.image-upload-box > span { font-size:30px; }
.image-upload-box > small { display:block; margin-top:-45px; color:#87978f; font-size:7px; }
.upload-action { width:100%; display:flex; cursor:pointer; }
.quick-form-button { width:100%; min-height:36px; display:flex; align-items:center; margin-top:7px; padding:0 10px; border:1px solid #e4ebe7; border-radius:9px; background:#fff; color:#4e6b5e; font-size:7.8px; font-weight:800; cursor:pointer; }
.recipe-detail-table { margin-top:10px; }
.recipe-detail-head,.recipe-detail-row { display:grid; grid-template-columns:minmax(170px,1.5fr) .7fr .8fr .8fr; gap:10px; align-items:center; padding:9px 4px; }
.recipe-detail-head { color:#87978f; font-size:6.6px; font-weight:850; text-transform:uppercase; border-bottom:1px solid #e8eeeb; }
.recipe-detail-row { border-bottom:1px solid #eef3f0; font-size:8px; }
.recipe-detail-row > span:first-child { display:flex; flex-direction:column; }
.recipe-detail-row small { margin-top:2px; color:#8b9b93; font-size:6.6px; }
.outlet-price-list { display:grid; margin-top:8px; }
.outlet-price-row { display:grid; grid-template-columns:minmax(150px,1.3fr) .8fr .8fr .65fr; gap:10px; align-items:center; padding:10px 3px; border-bottom:1px solid #eef3f0; }
.outlet-price-row > div { display:flex; flex-direction:column; }
.outlet-price-row span { color:#899991; font-size:6.6px; }
.outlet-price-row strong { margin-top:2px; color:#244739; font-size:8px; }
.entity-avatar.menu { background:#fff5e6; color:#a56d0e; }
.recipe-status { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:6.7px; font-weight:850; }
.recipe-status.ready { background:#e9f7ef; color:#08734a; }
.recipe-status.empty { background:#fff3dd; color:#99650a; }
.recipe-hpp-badge { min-width:150px; padding:13px 15px; border:1px solid #cfe7da; border-radius:14px; background:#eef9f3; text-align:right; }
.recipe-hpp-badge span { display:block; color:#698479; font-size:6.7px; font-weight:850; text-transform:uppercase; }
.recipe-hpp-badge strong { display:block; margin-top:4px; color:#08734a; font-size:17px; }
.recipe-builder-card { overflow:visible; }
.recipe-items-list { display:grid; gap:7px; }
.recipe-row { display:grid; grid-template-columns:28px minmax(220px,1.6fr) minmax(140px,.7fr) minmax(115px,.6fr) minmax(125px,.65fr) 30px; gap:8px; align-items:end; padding:10px; border:1px solid #e3ebe7; border-radius:12px; background:#fff; }
.recipe-row .row-index { align-self:center; width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#eaf7f1; color:#0d7b52; font-size:7px; font-weight:900; }
.recipe-total-bar { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:12px; padding:14px 16px; border-radius:12px; background:#0d3e2d; color:#fff; }
.recipe-total-bar span,.recipe-total-bar small { display:block; }.recipe-total-bar span { font-size:8px; font-weight:850; }.recipe-total-bar small { margin-top:3px; color:#b9d1c6; font-size:6.8px; }.recipe-total-bar strong { font-size:18px; }
.outlet-selector-strip { display:flex; gap:8px; overflow:auto; padding:3px 0 13px; scrollbar-width:thin; }
.outlet-selector { min-width:180px; padding:10px 12px; border:1px solid #dfe8e4; border-radius:12px; background:#fff; color:#426052; text-decoration:none; }
.outlet-selector strong,.outlet-selector small { display:block; }.outlet-selector strong { font-size:8.5px; }.outlet-selector small { margin-top:3px; color:#899991; font-size:6.6px; }.outlet-selector.active { border-color:#9fd4bb; background:#eaf8f1; color:#08734a; }.outlet-selector.inactive { opacity:.62; }
.management-kpi-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.menu-outlet-panel { overflow:hidden; }
.menu-outlet-table td { vertical-align:middle; }
.compact-price-input { display:flex; align-items:center; min-width:125px; border:1px solid #dfe8e4; border-radius:9px; overflow:hidden; background:#fff; }
.compact-price-input span { padding:0 7px; color:#789087; font-size:7px; }
.compact-price-input input { width:100%; min-width:80px; height:34px; border:0; outline:0; padding:0 7px; font-size:8px; }
.compact-number { width:65px; height:34px; padding:0 7px; border:1px solid #dfe8e4; border-radius:9px; font-size:8px; }
.switch-control { display:inline-flex; cursor:pointer; }.switch-control input { display:none; }.switch-control span { position:relative; width:34px; height:19px; border-radius:999px; background:#d9e2de; transition:.2s; }.switch-control span:after { content:""; position:absolute; width:15px; height:15px; top:2px; left:2px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.16); transition:.2s; }.switch-control input:checked + span { background:#159161; }.switch-control input:checked + span:after { transform:translateX(15px); }
.menu-outlet-savebar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; border-top:1px solid #e5ece8; background:#f8fbf9; }.menu-outlet-savebar strong,.menu-outlet-savebar small { display:block; }.menu-outlet-savebar strong { font-size:8.5px; }.menu-outlet-savebar small { margin-top:3px; color:#85968d; font-size:6.8px; }
.alert-warning { border-color:#f0dcb6; background:#fff8e9; color:#8c600c; }

@media (max-width:1150px) { .menu-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .recipe-row { grid-template-columns:28px minmax(200px,1.4fr) minmax(130px,.7fr) minmax(105px,.6fr) 30px; } .recipe-row .row-calculation.value { grid-column:3/5; } }
@media (max-width:850px) { .recipe-detail-head { display:none; } .recipe-detail-row { grid-template-columns:1fr 1fr; padding:10px 0; } .outlet-price-row { grid-template-columns:1fr 1fr; } .recipe-row { grid-template-columns:28px 1fr 1fr; align-items:end; } .recipe-row .recipe-material { grid-column:2/4; } .recipe-row .row-calculation { grid-column:auto; } .recipe-row .remove-row-button { grid-column:3; justify-self:end; } }
@media (max-width:700px) { .menu-card-grid { grid-template-columns:1fr; padding:10px; } .management-kpi-grid.three { grid-template-columns:1fr 1fr; } .menu-outlet-savebar { align-items:stretch; flex-direction:column; }.menu-outlet-savebar .primary-action { width:100%; justify-content:center; } .recipe-hpp-badge { width:100%; text-align:left; } }
@media (max-width:540px) { .menu-cost-grid { grid-template-columns:1fr 1fr; }.menu-cost-grid > div:last-child { grid-column:1/-1; } .recipe-row { grid-template-columns:25px 1fr; }.recipe-row .recipe-material,.recipe-row .field,.recipe-row .row-calculation,.recipe-row .remove-row-button { grid-column:2; }.recipe-row .row-index { grid-row:1/6; align-self:start; }.recipe-total-bar { align-items:flex-start; flex-direction:column; }.outlet-price-row { grid-template-columns:1fr; }.management-kpi-grid.three { grid-template-columns:1fr; } }


/* =========================================================
   Dapur Teh M V2.8 — POS Kasir
   ========================================================= */
.pos-body { margin:0; background:#f3f7f5; color:#10251b; overflow:hidden; }
.pos-lock { overflow:hidden !important; }
.pos-app { min-height:100vh; }
.pos-topbar {
    height:72px; display:flex; align-items:center; gap:24px; padding:0 22px;
    background:#fff; border-bottom:1px solid #e3ebe6; position:sticky; top:0; z-index:50;
}
.pos-brand { min-width:210px; display:flex; align-items:center; gap:11px; color:#10251b; text-decoration:none; }
.pos-brand .brand-mark { width:40px; height:40px; flex:0 0 40px; }
.pos-brand strong,.pos-brand small { display:block; }
.pos-brand strong { font-size:14px; }
.pos-brand small { margin-top:3px; color:#77a08c; font-size:9px; font-weight:750; }
.pos-topbar-center { flex:1; display:flex; align-items:center; justify-content:center; gap:13px; }
.pos-online { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:99px; background:#edf9f3; color:#078050; font-size:9px; font-weight:850; }
.pos-online i { width:7px; height:7px; border-radius:50%; background:#18b978; box-shadow:0 0 0 4px rgba(24,185,120,.12); }
.pos-clock { color:#63766c; font-size:12px; font-variant-numeric:tabular-nums; font-weight:750; }
.pos-topbar-actions { display:flex; align-items:center; gap:8px; }
.pos-history-link,.pos-secondary-link,.pos-logout {
    height:36px; display:inline-flex; align-items:center; padding:0 11px; border:1px solid #e0e8e3;
    border-radius:10px; background:#fff; color:#3c5548; font-size:9px; font-weight:800; text-decoration:none;
}
.pos-history-link { background:#edf8f2; border-color:#d6eee1; color:#0a7851; }
.pos-logout { cursor:pointer; }
.pos-cashier { display:flex; align-items:center; gap:8px; margin-left:4px; padding-left:10px; border-left:1px solid #e8eeea; }
.pos-cashier .avatar { width:34px; height:34px; font-size:10px; }
.pos-cashier strong,.pos-cashier small { display:block; }
.pos-cashier strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.pos-cashier small { margin-top:2px; color:#8a9991; font-size:8px; }
.pos-alert { margin:10px 18px 0; padding:11px 14px; border-radius:12px; font-size:10px; position:relative; z-index:3; }
.pos-alert strong,.pos-alert span { display:block; }
.pos-alert span { margin-top:3px; }
.pos-alert-danger { background:#fff3f3; border:1px solid #f4d4d4; color:#b73a3a; }
.pos-alert-success { background:#eff9f4; border:1px solid #d2ecdd; color:#08784e; }

.pos-workspace { height:calc(100vh - 72px); display:grid; grid-template-columns:minmax(0,1fr) 360px; }
.pos-alert + .pos-workspace { height:calc(100vh - 125px); }
.pos-menu-area { min-width:0; padding:22px 20px 28px; overflow-y:auto; }
.pos-menu-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:17px; }
.pos-menu-header h1 { margin:3px 0 4px; font-size:25px; letter-spacing:-.04em; }
.pos-menu-header p { margin:0; color:#7c8d84; font-size:10px; }
.pos-today-summary { display:flex; gap:8px; }
.pos-today-summary div { min-width:125px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #e3ebe6; }
.pos-today-summary span,.pos-today-summary strong { display:block; }
.pos-today-summary span { color:#899890; font-size:8px; font-weight:750; }
.pos-today-summary strong { margin-top:4px; font-size:12px; }

.pos-search-row { position:sticky; top:-22px; z-index:4; padding:8px 0 12px; background:rgba(243,247,245,.96); backdrop-filter:blur(8px); }
.pos-search { height:42px; display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid #dbe6df; border-radius:13px; background:#fff; }
.pos-search svg { width:17px; height:17px; color:#8a9b91; }
.pos-search input { width:100%; border:0; outline:0; background:transparent; color:#183025; font-size:11px; }
.pos-category-scroll { display:flex; gap:7px; margin-top:9px; overflow-x:auto; scrollbar-width:none; }
.pos-category-scroll::-webkit-scrollbar { display:none; }
.pos-category { flex:0 0 auto; height:31px; padding:0 12px; border:1px solid #dde7e1; border-radius:99px; background:#fff; color:#61756a; cursor:pointer; font-size:9px; font-weight:750; }
.pos-category.active { background:#0b8d5e; border-color:#0b8d5e; color:#fff; }

.pos-menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
.pos-menu-card { padding:0; overflow:hidden; border:1px solid #e0e9e4; border-radius:16px; background:#fff; text-align:left; cursor:pointer; transition:.18s ease; }
.pos-menu-card:hover { transform:translateY(-2px); border-color:#b9ddcb; box-shadow:0 10px 24px rgba(19,60,39,.08); }
.pos-menu-card.just-added { transform:scale(.97); border-color:#13a86e; }
.pos-menu-image { position:relative; height:112px; display:block; overflow:hidden; background:linear-gradient(145deg,#edf5f1,#dcece4); }
.pos-menu-image img { width:100%; height:100%; object-fit:cover; display:block; }
.pos-menu-fallback { width:100%; height:100%; display:grid; place-items:center; color:#6b9a82; font-size:28px; font-weight:900; }
.pos-add-badge { position:absolute; right:9px; bottom:9px; width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:#0b8d5e; color:#fff; font-size:17px; font-style:normal; box-shadow:0 5px 12px rgba(11,141,94,.25); }
.pos-menu-copy { display:block; padding:11px 12px 13px; }
.pos-menu-copy small,.pos-menu-copy strong,.pos-menu-copy b { display:block; }
.pos-menu-copy small { color:#90a098; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.pos-menu-copy strong { min-height:30px; margin-top:4px; font-size:11px; line-height:1.35; }
.pos-menu-copy b { margin-top:7px; color:#087b53; font-size:11px; }
.pos-empty-menu { grid-column:1/-1; padding:70px 20px; text-align:center; color:#83928a; }
.pos-empty-menu span { display:block; font-size:38px; }
.pos-empty-menu strong { display:block; margin-top:10px; color:#41594c; }
.pos-empty-menu p { font-size:10px; }

.pos-cart-panel { min-width:0; display:flex; flex-direction:column; border-left:1px solid #dde7e1; background:#fff; box-shadow:-10px 0 28px rgba(22,49,36,.025); }
.pos-cart-head { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 17px; border-bottom:1px solid #edf2ef; }
.pos-cart-head h2 { margin:2px 0 0; font-size:16px; }
.pos-clear-cart { border:0; background:transparent; color:#a26161; cursor:pointer; font-size:9px; font-weight:750; }
.pos-cart-items { flex:1; min-height:0; overflow-y:auto; padding:8px 15px; }
.pos-cart-empty { height:100%; min-height:210px; display:grid; align-content:center; justify-items:center; text-align:center; color:#94a29a; }
.pos-cart-empty span { font-size:30px; }
.pos-cart-empty strong { margin-top:8px; color:#53675c; font-size:11px; }
.pos-cart-empty p { max-width:210px; margin:5px 0; font-size:9px; line-height:1.5; }
.pos-cart-line { padding:13px 2px; border-bottom:1px solid #edf2ef; }
.pos-cart-line-copy { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.pos-cart-line-copy strong { max-width:210px; font-size:10px; line-height:1.4; }
.pos-cart-line-copy span { color:#819189; font-size:8px; white-space:nowrap; }
.pos-cart-line-bottom { display:flex; align-items:center; gap:9px; margin-top:10px; }
.pos-cart-line-bottom > strong { margin-left:auto; font-size:10px; }
.pos-qty { display:flex; align-items:center; overflow:hidden; border:1px solid #dfe8e2; border-radius:9px; }
.pos-qty button { width:29px; height:29px; border:0; background:#f6f9f7; color:#3b5949; cursor:pointer; font-size:14px; }
.pos-qty b { min-width:30px; text-align:center; font-size:9px; }
.pos-remove-item { width:25px; height:25px; border:0; border-radius:8px; background:#fff3f3; color:#bd5757; cursor:pointer; }
.pos-cart-summary { padding:13px 17px 7px; border-top:1px solid #edf2ef; }
.pos-cart-summary > div { display:flex; justify-content:space-between; align-items:center; margin:6px 0; color:#71827a; font-size:9px; }
.pos-cart-summary strong { color:#31483c; }
.pos-cart-summary .pos-cart-total { margin-top:10px; padding-top:10px; border-top:1px dashed #dce6e0; color:#172d22; font-size:12px; font-weight:850; }
.pos-cart-total strong { color:#087d54; font-size:17px; }
.pos-pay-button { margin:10px 15px 15px; min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; border:0; border-radius:14px; background:#0a8b5d; color:#fff; cursor:pointer; box-shadow:0 9px 20px rgba(10,139,93,.18); }
.pos-pay-button:disabled { background:#d9e3dd; color:#9aaba1; box-shadow:none; cursor:not-allowed; }
.pos-pay-button span { font-size:11px; font-weight:800; }
.pos-pay-button strong { font-size:13px; }
.pos-mobile-cart { display:none; }

.pos-overlay { position:fixed; inset:0; z-index:80; background:rgba(8,26,17,.48); backdrop-filter:blur(2px); }
.pos-payment-modal { position:fixed; z-index:90; top:50%; left:50%; width:min(92vw,470px); max-height:92vh; overflow-y:auto; transform:translate(-50%,-50%); border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.2); }
.pos-payment-modal form { padding:19px; }
.pos-modal-head { display:flex; align-items:flex-start; justify-content:space-between; }
.pos-modal-head h2 { margin:3px 0 0; font-size:20px; }
.pos-modal-close { width:34px; height:34px; border:0; border-radius:11px; background:#f2f6f4; color:#596d62; cursor:pointer; font-size:20px; }
.pos-payment-total { display:flex; justify-content:space-between; align-items:center; margin:18px 0 13px; padding:15px; border-radius:14px; background:#0d3022; color:#fff; }
.pos-payment-total span { font-size:9px; opacity:.75; }
.pos-payment-total strong { font-size:22px; }
.pos-payment-field { display:block; margin-top:13px; }
.pos-payment-field > span { display:block; margin-bottom:6px; color:#556a5f; font-size:9px; font-weight:800; }
.pos-payment-field > span small { color:#9aa79f; font-weight:600; }
.pos-money-input { min-height:42px; display:flex; align-items:center; overflow:hidden; border:1px solid #dbe5df; border-radius:11px; background:#fff; }
.pos-money-input b { align-self:stretch; display:flex; align-items:center; padding:0 11px; background:#f3f7f5; color:#6f8077; font-size:10px; }
.pos-money-input input { width:100%; height:40px; padding:0 12px; border:0; outline:0; font-size:12px; font-weight:800; }
.pos-money-input.large input { font-size:17px; }
.pos-payment-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.pos-payment-method input { position:absolute; opacity:0; pointer-events:none; }
.pos-payment-method span { height:39px; display:grid; place-items:center; border:1px solid #dde6e1; border-radius:10px; color:#65766d; cursor:pointer; font-size:9px; font-weight:800; }
.pos-payment-method input:checked + span { background:#e9f7f0; border-color:#85caaa; color:#087b53; box-shadow:inset 0 0 0 1px #85caaa; }
.pos-quick-cash { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:7px; }
.pos-quick-cash button { height:33px; border:1px solid #dfe7e2; border-radius:9px; background:#f8faf9; color:#4e6257; cursor:pointer; font-size:8px; font-weight:750; }
.pos-change-box { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:10px 12px; border-radius:11px; background:#f1f8f4; color:#4d6859; font-size:9px; }
.pos-change-box strong { color:#087b53; font-size:13px; }
.pos-payment-field textarea { width:100%; resize:vertical; padding:10px 11px; border:1px solid #dbe5df; border-radius:11px; outline:0; font:inherit; font-size:10px; }
.pos-confirm-payment { width:100%; min-height:49px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding:0 15px; border:0; border-radius:13px; background:#0a8b5d; color:#fff; cursor:pointer; }
.pos-confirm-payment:disabled { opacity:.65; cursor:wait; }
.pos-confirm-payment span { font-size:10px; font-weight:800; }
.pos-confirm-payment strong { font-size:12px; }
.input-error { box-shadow:inset 0 0 0 2px #dd6363 !important; }

.payment-pill { display:inline-flex; padding:5px 8px; border-radius:99px; background:#f1f5f3; color:#53685c; font-size:8px; font-weight:800; }
.payment-pill.cash { background:#eef8f3; color:#087b53; }
.payment-pill.qris { background:#f1f3ff; color:#5458a8; }
.payment-pill.transfer { background:#eff7ff; color:#3370a2; }
.payment-pill.debit { background:#fff5e8; color:#9b671f; }
.pos-history-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Thermal-like receipt */
.receipt-page { min-height:100vh; margin:0; padding:25px 14px 60px; background:#edf2ef; color:#111; font-family:Arial,sans-serif; }
.receipt-actions { width:min(100%,430px); margin:0 auto 12px; display:flex; gap:7px; }
.receipt-actions a,.receipt-actions button { flex:1; min-height:36px; display:grid; place-items:center; border:1px solid #d8e1dc; border-radius:9px; background:#fff; color:#3e5549; text-decoration:none; cursor:pointer; font-size:9px; font-weight:750; }
.receipt-paper { width:min(100%, var(--receipt-paper-width, 58mm)); max-width:100%; margin:auto; padding:20px 18px 24px; background:#fff; box-shadow:0 12px 40px rgba(16,45,30,.12); }
.receipt-head { text-align:center; }
.receipt-head strong { display:block; font-size:17px; }
.receipt-head span { display:block; margin-top:3px; font-size:9px; line-height:1.35; }
.receipt-rule { margin:12px 0; border-top:1px dashed #666; }
.receipt-meta { display:grid; gap:4px; }
.receipt-meta div,.receipt-totals div { display:flex; justify-content:space-between; gap:10px; font-size:9px; }
.receipt-meta strong { text-align:right; font-size:9px; }
.receipt-item { margin:8px 0; }
.receipt-item > strong { display:block; font-size:10px; }
.receipt-item div { display:flex; justify-content:space-between; margin-top:3px; font-size:9px; }
.receipt-totals { display:grid; gap:5px; }
.receipt-totals .grand { margin:3px 0; padding:6px 0; border-top:1px solid #222; border-bottom:1px solid #222; font-size:11px; }
.receipt-notes { margin-top:10px; padding:7px; border:1px dashed #aaa; font-size:8px; line-height:1.5; }
.receipt-footer { text-align:center; }
.receipt-footer strong,.receipt-footer span { display:block; }
.receipt-footer strong { font-size:10px; }
.receipt-footer span { margin-top:4px; font-size:8px; line-height:1.45; }

@media (max-width: 980px) {
    .pos-body { overflow:auto; }
    .pos-topbar { height:62px; padding:0 12px; }
    .pos-brand { min-width:auto; }
    .pos-brand .brand-mark { width:35px; height:35px; flex-basis:35px; }
    .pos-brand strong { font-size:11px; }
    .pos-topbar-center,.pos-secondary-link,.pos-history-link,.pos-cashier > span:not(.avatar) { display:none; }
    .pos-workspace,.pos-alert + .pos-workspace { height:auto; min-height:calc(100vh - 62px); grid-template-columns:1fr; }
    .pos-menu-area { padding:16px 12px 95px; overflow:visible; }
    .pos-menu-header { align-items:flex-start; }
    .pos-menu-header h1 { font-size:21px; }
    .pos-today-summary { display:none; }
    .pos-search-row { top:62px; padding-top:4px; }
    .pos-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .pos-menu-image { height:105px; }
    .pos-cart-panel {
        position:fixed; z-index:85; left:0; right:0; bottom:0; height:min(82vh,650px);
        transform:translateY(105%); transition:.22s ease; border:0; border-radius:20px 20px 0 0;
        box-shadow:0 -18px 50px rgba(0,0,0,.18);
    }
    .pos-cart-panel.mobile-open { transform:translateY(0); }
    .pos-mobile-cart {
        position:fixed; z-index:60; left:12px; right:12px; bottom:10px; min-height:52px;
        display:flex; align-items:center; justify-content:space-between; padding:0 16px;
        border:0; border-radius:15px; background:#0b8d5e; color:#fff; box-shadow:0 12px 28px rgba(11,141,94,.3);
    }
    .pos-mobile-cart span { font-size:10px; font-weight:800; }
    .pos-mobile-cart i { min-width:20px; height:20px; display:inline-grid; place-items:center; margin-right:5px; border-radius:7px; background:rgba(255,255,255,.18); font-style:normal; font-size:8px; }
    .pos-mobile-cart strong { font-size:12px; }
    .pos-payment-modal { top:auto; bottom:0; left:0; width:100%; max-height:88vh; transform:none; border-radius:20px 20px 0 0; }
    .pos-payment-methods { grid-template-columns:repeat(2,1fr); }
    .pos-quick-cash { grid-template-columns:repeat(2,1fr); }
    .pos-history-summary { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
    .pos-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pos-menu-image { height:94px; }
    .pos-menu-copy { padding:9px 10px 11px; }
    .pos-menu-copy strong { font-size:10px; }
}
@media print {
    .no-print { display:none !important; }
    .receipt-page { padding:0; background:#fff; }
    .receipt-paper { width:var(--receipt-paper-width,58mm); padding:4mm 2mm; box-shadow:none; }
}

/* V2.8: 4 menu outlet pada navigasi HP */
@media (max-width:700px){.outlet-mobile-nav{grid-template-columns:repeat(4,1fr);}}


/* =========================================================
   Dapur Teh M V2.9 — Offline-first POS
   ========================================================= */
.pos-connectivity{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:11px;background:#f2f6f4;color:#64786d;min-width:122px}.pos-connectivity>i{width:8px;height:8px;border-radius:50%;background:#9aaba2;box-shadow:0 0 0 4px rgba(120,140,130,.1)}.pos-connectivity span{display:flex;flex-direction:column}.pos-connectivity strong{font-size:8px;line-height:1}.pos-connectivity small{margin-top:3px;font-size:6.5px;white-space:nowrap}.pos-connectivity.online{background:#edf9f3;color:#087b53}.pos-connectivity.online>i{background:#19b979;box-shadow:0 0 0 4px rgba(25,185,121,.12)}.pos-connectivity.offline,.pos-connectivity.warning{background:#fff5e7;color:#9c6416}.pos-connectivity.offline>i,.pos-connectivity.warning>i{background:#e69a2b;box-shadow:0 0 0 4px rgba(230,154,43,.14)}.pos-connectivity.syncing{background:#eef6ff;color:#3976a6}.pos-connectivity.syncing>i{background:#4c92cc;animation:posPulse 1s infinite}.pos-sync-button{height:31px;padding:0 9px;border:1px solid #dbe5df;border-radius:9px;background:#fff;color:#52675c;font-size:8px;font-weight:800;cursor:pointer}.pos-device-chip{padding:6px 8px;border-radius:8px;background:#f3f6f4;color:#7b8c83;font-size:7px;font-weight:850;letter-spacing:.04em}.pos-offline-banner{margin:8px 18px 0;padding:9px 13px;border:1px solid #f1d59d;border-radius:11px;background:#fff8ea;color:#93601b;font-size:9px}.pos-offline-banner strong{margin-right:8px}.pos-local-receipt-modal{position:fixed;inset:0;z-index:100;overflow:auto;padding:25px 12px;background:rgba(7,25,16,.62);backdrop-filter:blur(3px)}.pos-local-receipt-actions{width:min(100%,360px);margin:0 auto 9px;display:flex;gap:7px}.pos-local-receipt-actions button{flex:1;min-height:38px;border:0;border-radius:10px;background:#fff;color:#3d5549;font-size:9px;font-weight:800;cursor:pointer}.pos-local-receipt-actions button:last-child{background:#0b8d5e;color:#fff}.offline-stamp{margin-top:7px!important;padding:5px;border:1px dashed #777;font-size:7px!important;font-weight:800}.receipt-footer small{display:block;margin-top:6px;font-size:7px;font-weight:700}.pos-local-receipt-paper{position:relative}.pos-sync-error{color:#bd5252}@keyframes posPulse{50%{opacity:.35}}
@media(max-width:980px){.pos-device-chip,.pos-sync-button{display:none}.pos-connectivity{min-width:94px;padding:5px 7px}.pos-connectivity small{max-width:120px;overflow:hidden;text-overflow:ellipsis}.pos-topbar-center{display:flex;margin-left:auto}.pos-clock{display:none}.pos-offline-banner{margin:7px 10px 0}.pos-workspace{min-height:calc(100vh - 62px)}}
@media print{body:has(.pos-local-receipt-modal:not(.hidden)) .pos-topbar,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-menu-area,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-cart-panel,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-mobile-cart,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-offline-banner,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-overlay,body:has(.pos-local-receipt-modal:not(.hidden)) .pos-local-receipt-actions{display:none!important}body:has(.pos-local-receipt-modal:not(.hidden)) .pos-local-receipt-modal{position:static;display:block!important;padding:0;background:#fff}body:has(.pos-local-receipt-modal:not(.hidden)) .pos-local-receipt-paper{width:var(--receipt-paper-width,58mm);margin:0;padding:4mm 2mm;box-shadow:none}}



/* =========================================================
   Dapur Teh M V2.9.1
   UI HOTFIX — Master Menu + Resep/HPP + Menu Outlet
   ========================================================= */

/* Shared management shell */
.management-page {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    min-width: 0;
}
.management-page > * {
    min-width: 0;
}
.management-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.management-page-head > div {
    min-width: 0;
}
.management-page-head h1 {
    margin: 5px 0 0;
    color: #10251b;
    font-size: clamp(27px, 2.5vw, 36px);
    line-height: 1.08;
    letter-spacing: -.045em;
}
.management-page-head p {
    max-width: 760px;
    margin: 9px 0 0;
    color: #71847a;
    font-size: 11px;
    line-height: 1.65;
}
.management-page-head .primary-action {
    flex: 0 0 auto;
}
.primary-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#0e8659,#08724b);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
    box-shadow: 0 9px 20px rgba(13,122,80,.16);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.primary-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(13,122,80,.22);
}

/* KPI cards */
.management-kpi-grid {
    min-width: 0;
}
.management-kpi-grid article {
    min-width: 0;
    overflow: hidden;
}
.management-kpi-grid strong {
    overflow-wrap: anywhere;
}

/* Main list panel */
.management-list-panel,
.menu-outlet-panel {
    overflow: hidden;
    border-radius: 18px;
}
.management-filter-row {
    display: grid;
    grid-template-columns: minmax(260px,1fr) minmax(145px,190px) minmax(135px,170px) auto;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    border-bottom: 1px solid #e7eeea;
    background: #fbfcfb;
}
.menu-outlet-panel > .management-filter-row {
    grid-template-columns: minmax(260px,1fr) minmax(150px,210px) auto;
}
.search-box {
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #dce7e1;
    border-radius: 11px;
    background: #fff;
    color: #82948b;
    transition: .18s ease;
}
.search-box:focus-within {
    border-color: #79bea0;
    box-shadow: 0 0 0 3px rgba(13,122,80,.08);
}
.search-box > span {
    flex: 0 0 auto;
    color: #698177;
    font-size: 15px;
    line-height: 1;
}
.search-box input {
    width: 100%;
    height: 38px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #20382d;
    font-size: 10px;
}
.search-box input::placeholder {
    color: #9da9a2;
}
.management-filter-row select {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 11px;
    border: 1px solid #dce7e1;
    border-radius: 11px;
    outline: 0;
    background:
        linear-gradient(45deg,transparent 50%,#789087 50%) calc(100% - 16px) 17px/5px 5px no-repeat,
        linear-gradient(135deg,#789087 50%,transparent 50%) calc(100% - 12px) 17px/5px 5px no-repeat,
        #fff;
    appearance: none;
    color: #445f52;
    font-size: 9px;
    font-weight: 700;
}
.management-filter-row select:focus {
    border-color: #79bea0;
    box-shadow: 0 0 0 3px rgba(13,122,80,.08);
}
.filter-button {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #d5e3dc;
    border-radius: 11px;
    background: #eef7f2;
    color: #0b7650;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}
.filter-button:hover {
    background: #e5f3ec;
    border-color: #bfddce;
}

/* Tables */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d6cf transparent;
}
.management-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}
.management-table thead th {
    padding: 11px 14px;
    border-bottom: 1px solid #e6ede9;
    background: #f7faf8;
    color: #8d9b94;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.management-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf2ef;
    color: #40594d;
    font-size: 9px;
    vertical-align: middle;
}
.management-table tbody tr:last-child td {
    border-bottom: 0;
}
.management-table tbody tr {
    transition: background .15s ease;
}
.management-table tbody tr:hover {
    background: #fbfdfc;
}
.management-table td > strong {
    color: #19392c;
}
.management-table .entity-cell {
    min-width: 220px;
}
.management-table .entity-cell strong {
    font-size: 9px;
}
.management-table .entity-cell small {
    font-size: 7px;
}
.management-table .small-primary {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 9px;
    background: #e9f7ef;
    color: #08734a;
    font-size: 7.5px;
    font-weight: 850;
    white-space: nowrap;
}

/* Master Menu cards */
.menu-card-grid {
    align-items: start;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    padding: 14px;
}
.menu-master-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e0e9e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(24,54,40,.035);
    transition: .18s ease;
}
.menu-master-card:hover {
    transform: translateY(-2px);
    border-color: #c5dfd2;
    box-shadow: 0 12px 28px rgba(24,54,40,.07);
}
.menu-photo {
    height: 170px;
}
.menu-card-body {
    padding: 14px;
}
.menu-card-body h3 {
    margin-top: 5px;
    margin-bottom: 11px;
    font-size: 14px;
}
.menu-cost-grid > div {
    min-width: 0;
}
.menu-cost-grid strong {
    overflow-wrap: anywhere;
}
.menu-card-actions a {
    min-width: 0;
}

/* Pills / live states */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #cfe8dc;
    border-radius: 999px;
    background: #edf8f2;
    color: #08754e;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}
.live-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #17b775;
    box-shadow: 0 0 0 4px rgba(23,183,117,.10);
}

/* Menu Outlet */
.menu-outlet-page .outlet-selector-strip {
    margin-bottom: 2px;
}
.outlet-selector {
    min-width: 190px;
    box-shadow: 0 4px 14px rgba(20,55,38,.025);
}
.menu-outlet-table {
    min-width: 980px;
}
.menu-outlet-table th:nth-child(1),
.menu-outlet-table td:nth-child(1) {
    min-width: 230px;
}
.menu-outlet-table th:nth-child(4),
.menu-outlet-table td:nth-child(4) {
    min-width: 150px;
}
.menu-outlet-table th:nth-child(5),
.menu-outlet-table td:nth-child(5) {
    min-width: 110px;
}
.menu-outlet-table td:nth-child(5) strong,
.menu-outlet-table td:nth-child(5) small {
    display: block;
}
.menu-outlet-table td:nth-child(5) small {
    margin-top: 3px;
    color: #87978f;
    font-size: 7px;
}
.compact-price-input {
    height: 38px;
    min-width: 135px;
    border-radius: 10px;
}
.compact-price-input span {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 9px;
    border-right: 1px solid #e7edea;
    background: #f7faf8;
    font-size: 8px;
}
.compact-price-input input {
    height: 36px;
    padding: 0 9px;
    font-size: 9px;
    font-weight: 750;
}
.compact-number {
    width: 72px;
    height: 38px;
    font-size: 9px;
}
.switch-control span {
    width: 38px;
    height: 22px;
}
.switch-control span:after {
    width: 18px;
    height: 18px;
}
.switch-control input:checked + span:after {
    transform: translateX(16px);
}
.menu-outlet-savebar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    min-height: 67px;
    padding: 12px 15px;
    background: rgba(248,251,249,.96);
    backdrop-filter: blur(10px);
}
.menu-outlet-savebar strong {
    font-size: 9px;
}
.menu-outlet-savebar small {
    font-size: 7px;
}

/* Pagination */
.pagination-wrap {
    padding: 13px 14px;
    border-top: 1px solid #edf2ef;
    background: #fbfcfb;
}
.pagination-wrap nav {
    display: flex;
    justify-content: center;
}
.pagination-wrap svg {
    width: 14px;
    height: 14px;
}

/* Recipe page */
.recipe-status {
    white-space: nowrap;
}
.recipe-status.ready {
    border: 1px solid #cfe9da;
}
.recipe-status.empty {
    border: 1px solid #f0ddb9;
}

/* Responsive */
@media (max-width: 1180px) {
    .management-filter-row {
        grid-template-columns: minmax(220px,1fr) 160px 145px auto;
    }
    .menu-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 900px) {
    .management-page-head {
        align-items: flex-start;
    }
    .management-filter-row,
    .menu-outlet-panel > .management-filter-row {
        grid-template-columns: 1fr 1fr;
    }
    .management-filter-row .search-box {
        grid-column: 1 / -1;
    }
    .filter-button {
        width: 100%;
    }
}
@media (max-width: 700px) {
    .management-page-head {
        flex-direction: column;
        margin-bottom: 15px;
    }
    .management-page-head .primary-action {
        width: 100%;
    }
    .management-kpi-grid.four,
    .management-kpi-grid.three {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .management-kpi-grid article {
        min-height: 86px;
        padding: 12px;
    }
    .management-filter-row,
    .menu-outlet-panel > .management-filter-row {
        grid-template-columns: 1fr;
        padding: 11px;
    }
    .management-filter-row .search-box {
        grid-column: auto;
    }
    .menu-card-grid {
        grid-template-columns: 1fr;
        padding: 11px;
    }
    .menu-photo {
        height: 190px;
    }
    .management-table {
        min-width: 760px;
    }
    .menu-outlet-table {
        min-width: 940px;
    }
    .menu-outlet-savebar {
        position: static;
    }
}
@media (max-width: 480px) {
    .management-kpi-grid.four,
    .management-kpi-grid.three {
        grid-template-columns: 1fr;
    }
    .management-page-head h1 {
        font-size: 26px;
    }
    .menu-photo {
        height: 165px;
    }
}


/* =========================================================
   Dapur Teh M V2.9.2 — Printer Thermal
   ========================================================= */
.pos-printer-chip{display:inline-flex;align-items:center;gap:6px;min-height:31px;padding:0 9px;border:1px solid #dbe5df;border-radius:9px;background:#fff;color:#667a70;text-decoration:none;font-size:7.5px;font-weight:850;white-space:nowrap}.pos-printer-chip i{width:7px;height:7px;border-radius:50%;background:#a7b4ad}.pos-printer-chip.configured{background:#f4f8f6;color:#527064}.pos-printer-chip.configured i{background:#e0a431}.pos-printer-chip.connected{background:#edf9f3;border-color:#cde9dc;color:#087b53}.pos-printer-chip.connected i{background:#18b978;box-shadow:0 0 0 4px rgba(24,185,120,.1)}
.printer-settings-page{max-width:1200px;margin:0 auto}.printer-settings-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.printer-settings-card,.printer-advanced-card{padding:18px}.printer-preview-card{grid-row:span 2}.printer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.printer-card-head h2{margin:4px 0 0;font-size:17px}.printer-card-head p{max-width:560px;margin:5px 0 0;color:#7d8e85;font-size:9px;line-height:1.55}.printer-state-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f2f5f3;color:#6f8077;font-size:8px;white-space:nowrap}.printer-state-chip i{width:7px;height:7px;border-radius:50%;background:#a7b3ad}.printer-state-chip.connected{background:#ecf8f2;color:#087a51}.printer-state-chip.connected i{background:#1ab978}.printer-state-chip.error{background:#fff0f0;color:#b94d4d}.printer-state-chip.error i{background:#d75d5d}.printer-state-chip.connecting{background:#eef5ff;color:#4276a1}.printer-state-chip.connecting i{background:#4d91c9;animation:posPulse 1s infinite}
.printer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.printer-field{display:block;min-width:0}.printer-field>span{display:block;margin-bottom:6px;color:#53685d;font-size:8px;font-weight:850}.printer-field input,.printer-field select{width:100%;height:40px;padding:0 11px;border:1px solid #dce6e0;border-radius:10px;background:#fff;color:#344c40;outline:0;font-size:9px;box-sizing:border-box}.printer-field input:focus,.printer-field select:focus{border-color:#74bd9d;box-shadow:0 0 0 3px rgba(15,127,84,.07)}.printer-field small{display:block;margin-top:5px;color:#91a098;font-size:7px;line-height:1.45}.field-span-2{grid-column:1/-1}.printer-ble-block{padding:13px;border:1px solid #e1e9e5;border-radius:13px;background:#f9fbfa}.printer-device-box{display:flex;align-items:center;gap:11px}.printer-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#edf7f2;font-size:21px}.printer-device-box strong,.printer-device-box small{display:block}.printer-device-box strong{font-size:9px}.printer-device-box small{margin-top:3px;color:#86978e;font-size:7px}.printer-connect-actions{display:flex;gap:8px;margin-top:11px}.printer-connect-actions .secondary-action{min-height:42px;width:auto;padding:0 14px}.printer-support-note{margin-top:9px;padding:9px 10px;border-radius:9px;background:#fff7e9;color:#8b641f;font-size:7.5px;line-height:1.5}
.printer-paper-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}.printer-paper-choice input{position:absolute;opacity:0}.printer-paper-choice span{display:block;padding:13px;border:1px solid #dfe8e3;border-radius:12px;background:#fff;cursor:pointer}.printer-paper-choice strong,.printer-paper-choice small{display:block}.printer-paper-choice strong{font-size:11px}.printer-paper-choice small{margin-top:4px;color:#87978f;font-size:7px}.printer-paper-choice input:checked+span{border-color:#62b48f;background:#ebf8f1;box-shadow:inset 0 0 0 1px #62b48f}.printer-toggle-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid #e0e8e4;border-radius:11px;background:#fff;cursor:pointer}.printer-toggle-field>span strong,.printer-toggle-field>span small{display:block}.printer-toggle-field>span strong{font-size:8px}.printer-toggle-field>span small{margin-top:3px;color:#8d9b94;font-size:7px}.printer-toggle-field input{position:absolute;opacity:0}.printer-toggle-field i{position:relative;width:38px;height:22px;flex:0 0 38px;border-radius:999px;background:#d7e0db;transition:.2s}.printer-toggle-field i:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.2s}.printer-toggle-field input:checked+i{background:#159c68}.printer-toggle-field input:checked+i:after{transform:translateX(16px)}
.printer-preview-wrap{min-height:390px;display:grid;place-items:start center;padding:20px;border-radius:14px;background:#e9efec;overflow:auto}.printer-preview-paper{width:235px;padding:17px 13px;background:#fff;color:#111;box-shadow:0 10px 28px rgba(24,51,37,.12);font-family:monospace;font-size:8px;box-sizing:border-box;transition:width .2s}.printer-preview-paper[data-font="B"]{font-size:7px}.printer-preview-paper>strong,.printer-preview-paper>span,.printer-preview-paper>small{display:block;text-align:center}.printer-preview-paper>strong{font-size:12px}.printer-preview-paper>span{margin-top:3px;line-height:1.35}.printer-preview-paper hr{margin:9px 0;border:0;border-top:1px dashed #666}.printer-preview-paper>div{display:flex;justify-content:space-between;gap:7px;margin:4px 0}.printer-preview-paper .grand{font-size:10px;font-weight:900}.paper-badge{padding:6px 9px;border-radius:999px;background:#eef7f2;color:#137950;font-size:7px;font-weight:850}.printer-test-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.printer-test-actions .secondary-action{width:auto;min-height:42px;padding:0 14px}.printer-message{margin-top:11px;padding:10px 11px;border-radius:10px;background:#edf8f2;color:#0d7750;font-size:8px}.printer-message.error{background:#fff0f0;color:#b44a4a}.printer-advanced-card{grid-column:1/-1}.printer-advanced-card summary{cursor:pointer;color:#4d6558;font-size:9px;font-weight:850}.printer-advanced-card[open] summary{margin-bottom:14px}
.receipt-actions{width:min(100%,620px);flex-wrap:wrap}.receipt-actions>*{min-width:95px}.receipt-paper{box-sizing:border-box}
.outlet-mobile-nav{grid-template-columns:repeat(5,1fr)!important}
@media(max-width:980px){.pos-printer-chip{display:none}.printer-settings-grid{grid-template-columns:1fr}.printer-preview-card{grid-row:auto}.printer-advanced-card{grid-column:auto}}
@media(max-width:700px){.printer-settings-card,.printer-advanced-card{padding:14px}.printer-form-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.printer-card-head{flex-direction:column}.printer-paper-choice{grid-template-columns:1fr 1fr}.printer-preview-wrap{min-height:300px;padding:13px}.printer-test-actions{display:grid;grid-template-columns:1fr 1fr}.printer-connect-actions{display:grid;grid-template-columns:1fr}.printer-connect-actions .secondary-action{width:100%}}
@media print{.receipt-paper,.pos-local-receipt-paper{width:var(--receipt-paper-width,58mm)!important;max-width:none!important}}


/* =========================================================
   V2.9.3 — Persistent POS Printer + Receipt Designer
   ========================================================= */
.pos-printer-group{display:inline-flex;align-items:center;gap:4px}
button.pos-printer-chip{font-family:inherit;cursor:pointer}
.pos-printer-chip.attention{background:#fff7e9;border-color:#eed9ad;color:#9a651d}
.pos-printer-chip.attention i{background:#e3a331;box-shadow:0 0 0 4px rgba(227,163,49,.12)}
.pos-printer-chip.connecting{background:#eef6ff;border-color:#d4e4f1;color:#3b77a6}
.pos-printer-chip.connecting i{background:#4c92cc;animation:posPulse 1s infinite}
.pos-printer-settings-mini{width:31px;height:31px;display:grid;place-items:center;border:1px solid #dbe5df;border-radius:9px;background:#fff;color:#63786d;text-decoration:none;font-size:12px}
.pos-printer-settings-mini:hover{background:#f3f8f5}

.printer-session-note{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:13px 15px;border:1px solid #cfe7da;border-radius:14px;background:#edf8f2;color:#315d49}
.printer-session-note>div{min-width:0}.printer-session-note strong,.printer-session-note span{display:block}
.printer-session-note strong{font-size:9px}.printer-session-note span{max-width:820px;margin-top:4px;font-size:8px;line-height:1.5;color:#638073}
.printer-session-note .primary-action{flex:0 0 auto}

.printer-designer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.printer-branding-card,.printer-promo-card{min-width:0}
.receipt-logo-editor{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:15px}
.receipt-logo-preview{height:105px;display:grid;place-items:center;overflow:hidden;border:1px dashed #c9d9d0;border-radius:13px;background:#f6f9f7;color:#9aa9a1;font-size:11px;font-weight:900}
.receipt-logo-preview img{max-width:92%;max-height:92%;object-fit:contain;filter:grayscale(1)}
.receipt-logo-controls{min-width:0}.receipt-logo-controls small{display:block;margin-top:7px;color:#8b9b92;font-size:7px;line-height:1.5}
.receipt-file-button{display:inline-flex;vertical-align:middle;margin-right:6px;cursor:pointer}
.receipt-file-button input{display:none}
.receipt-file-button span{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:10px;background:#eaf7f0;color:#08744c;font-size:8px;font-weight:850}
.receipt-logo-controls .secondary-action{width:auto;min-height:38px;padding:0 12px}

.receipt-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.receipt-toggle-grid .printer-toggle-field{min-height:66px}
.printer-field textarea{width:100%;padding:10px 11px;border:1px solid #dbe6df;border-radius:10px;outline:0;background:#fff;color:#284337;font:inherit;font-size:9px;resize:vertical;box-sizing:border-box}
.printer-field textarea:focus{border-color:#7bc2a2;box-shadow:0 0 0 3px rgba(13,122,80,.08)}
.printer-field input[type=range]{padding:0;border:0;box-shadow:none;accent-color:#0b8d5e}

.printer-preview-wide{grid-column:1/-1}
.printer-preview-wide .printer-preview-wrap{min-height:470px}
.receipt-designer-preview{font-family:monospace}
.receipt-custom-logo{display:block;max-width:72%;max-height:100px;object-fit:contain;margin:0 auto 7px;filter:grayscale(1)}
.receipt-queue-block{text-align:center;margin:0 0 7px}.receipt-queue-block span,.receipt-queue-block strong{display:block}
.receipt-queue-block span{font-size:8px;font-weight:900;letter-spacing:1px;color:#587467}
.receipt-queue-block strong{font-size:24px;line-height:1.02;font-weight:900;color:#102b20}
.receipt-custom-logo.align-left{margin-left:0;margin-right:auto}.receipt-custom-logo.align-center{margin-left:auto;margin-right:auto}.receipt-custom-logo.align-right{margin-left:auto;margin-right:0}
.receipt-promo{margin:9px 0;padding:7px 2px;border-top:2px double #666;border-bottom:2px double #666;text-align:center}
.receipt-promo strong,.receipt-promo span,.receipt-promo b{display:block}
.receipt-promo strong{font-size:9px}.receipt-promo span{margin:4px 0;font-size:7.5px;line-height:1.45}.receipt-promo b{font-size:8px}
.receipt-social{margin:6px 0;text-align:center;font-size:7.5px;font-weight:700}
.receipt-designer-preview .receipt-head{font-family:inherit}
.receipt-designer-preview .receipt-head>strong{font-size:12px}
.receipt-designer-preview .receipt-meta>div,.receipt-designer-preview .receipt-totals>div,.receipt-designer-preview .receipt-item>div{display:flex;justify-content:space-between;gap:7px}
.receipt-designer-preview .receipt-meta>div{margin:3px 0}
.receipt-designer-preview .receipt-item{margin:5px 0}.receipt-designer-preview .receipt-item>strong{display:block}.receipt-designer-preview .receipt-item>div{margin-top:2px}
.receipt-designer-preview .receipt-totals>div{margin:4px 0}
.receipt-designer-preview .receipt-notes{margin:7px 0}
.receipt-designer-preview .receipt-footer{text-align:center}
.receipt-designer-preview .receipt-footer strong,.receipt-designer-preview .receipt-footer span,.receipt-designer-preview .receipt-footer small{display:block}

@media(max-width:980px){
 .pos-printer-group{display:none}
 .printer-designer-grid{grid-template-columns:1fr}
 .printer-preview-wide{grid-column:auto}
}
@media(max-width:700px){
 .printer-session-note{align-items:flex-start;flex-direction:column}
 .printer-session-note .primary-action{width:100%}
 .receipt-logo-editor{grid-template-columns:100px minmax(0,1fr)}
 .receipt-toggle-grid{grid-template-columns:1fr}
 .printer-preview-wide .printer-preview-wrap{min-height:330px}
}

/* V2.9.5 mobile POS + kitchen ticket */
.pos-mobile-shortcuts{display:none}
.pos-helper-tile{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:10px 12px;border:1px solid #dbe6df;border-radius:14px;background:#fff;color:#183025;text-decoration:none;box-shadow:0 8px 20px rgba(18,55,38,.05)}
.pos-helper-tile small{font-size:8px;font-weight:800;color:#7f9188;text-transform:uppercase;letter-spacing:.06em}
.pos-helper-tile strong{font-size:11px;line-height:1.25}
.receipt-kitchen-items{display:grid;gap:7px}.receipt-kitchen-item{display:flex;align-items:flex-start;gap:8px}.receipt-kitchen-item b{min-width:26px;font-size:1.05em}.receipt-kitchen-item strong{flex:1}.receipt-kitchen-notes strong,.receipt-kitchen-notes span{display:block}.receipt-kitchen-notes strong{margin-bottom:4px}
.pos-local-receipt-actions{width:min(100%,430px);display:grid;grid-template-columns:repeat(3,1fr)}
.pos-local-receipt-actions button:nth-child(2){background:#fff7e9;color:#8e5c16}.pos-local-receipt-actions button:last-child{background:#0b8d5e;color:#fff}

@media(max-width:980px){
  .pos-topbar{height:auto;min-height:62px;padding:10px 12px;flex-wrap:wrap;gap:8px}
  .pos-topbar-center{order:3;width:100%;display:flex!important;justify-content:flex-start;gap:7px;overflow-x:auto;scrollbar-width:none;margin-left:0}
  .pos-topbar-center::-webkit-scrollbar{display:none}
  .pos-sync-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .pos-device-chip{display:none}
  .pos-printer-group{display:inline-flex}
  .pos-printer-chip{display:inline-flex;min-height:30px;padding:0 8px;font-size:7px}
  .pos-printer-settings-mini{display:grid;flex:0 0 30px;width:30px;height:30px}
  .pos-topbar-actions{margin-left:auto;gap:6px}
  .pos-cashier{padding-left:0;border-left:0;margin-left:0}
  .pos-logout{height:34px;padding:0 11px;border-radius:10px}
  .pos-menu-area{padding:14px 12px 100px}
  .pos-menu-header{margin-bottom:10px}
  .pos-mobile-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
  .pos-search-row{top:0;padding-top:2px}
  .pos-search{height:46px;border-radius:15px}
  .pos-search input{font-size:12px}
  .pos-category{height:34px;padding:0 13px;font-size:9px}
  .pos-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pos-menu-card{border-radius:18px}
  .pos-menu-image{height:116px}
  .pos-menu-copy strong{min-height:34px;font-size:11px}
  .pos-cart-panel{position:fixed;left:0;right:0;bottom:0;z-index:95;max-height:88vh;border-radius:22px 22px 0 0;border-left:0;box-shadow:0 -18px 40px rgba(8,26,17,.17);transform:translateY(102%);transition:transform .2s ease}
  .pos-cart-panel.mobile-open{transform:translateY(0)}
  .pos-mobile-cart{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;min-height:52px;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border:0;border-radius:16px;background:#0b8d5e;color:#fff;box-shadow:0 14px 30px rgba(11,141,94,.25)}
  .pos-local-receipt-modal{padding:18px 10px}
  .pos-local-receipt-actions{width:100%;grid-template-columns:1fr}
  .pos-local-receipt-actions button{min-height:42px}
}

@media(max-width:430px){
  .pos-brand strong{font-size:12px}.pos-brand small{font-size:8px}
  .pos-menu-grid{gap:9px}
  .pos-menu-image{height:108px}
  .pos-menu-copy{padding:10px 10px 12px}
  .pos-helper-tile{min-height:52px;padding:9px 10px}
}

/* V2.9.6 Kitchen + Queue */
.kitchen-page,.queue-page{min-height:calc(100vh - 72px);padding:22px;background:#f3f7f5;color:#10251b}
.kitchen-page-head,.queue-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.kitchen-page-head h1,.queue-page-head h1{margin:4px 0 5px;font-size:27px;letter-spacing:-.04em}.kitchen-page-head p,.queue-page-head p{margin:0;max-width:720px;color:#75877e;font-size:10px;line-height:1.55}
.kitchen-head-actions,.queue-head-actions{display:flex;align-items:center;gap:8px}.kitchen-live-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#edf9f3;color:#087b53;font-size:8px;font-weight:900}.kitchen-live-chip i{width:7px;height:7px;border-radius:50%;background:#18b978;box-shadow:0 0 0 4px rgba(24,185,120,.12)}
.kitchen-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.kitchen-summary article{padding:15px 16px;border:1px solid #dfe8e3;border-radius:16px;background:#fff}.kitchen-summary span,.kitchen-summary strong,.kitchen-summary small{display:block}.kitchen-summary span{font-size:8px;font-weight:900;letter-spacing:.08em;color:#7d8f86}.kitchen-summary strong{margin:5px 0 2px;font-size:26px}.kitchen-summary small{font-size:8px;color:#9aa7a0}
.kitchen-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.kitchen-column{min-width:0;padding:10px;border:1px solid #dfe8e3;border-radius:18px;background:#eef4f1}.kitchen-column-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px}.kitchen-column-head span{font-size:10px;font-weight:900}.kitchen-column-head b{min-width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#fff;color:#527064;font-size:9px}.kitchen-order-list{display:grid;gap:9px}.kitchen-order-card{overflow:hidden;border:1px solid #dfe7e2;border-radius:15px;background:#fff;box-shadow:0 8px 20px rgba(18,55,38,.04)}.kitchen-order-card>header{display:flex;align-items:center;gap:11px;padding:12px 13px;border-bottom:1px solid #edf2ef}.kitchen-queue-number{min-width:63px;text-align:center}.kitchen-queue-number small,.kitchen-queue-number strong{display:block}.kitchen-queue-number small{font-size:7px;font-weight:900;color:#899990;letter-spacing:.08em}.kitchen-queue-number strong{font-size:27px;line-height:1;color:#0a8b5d}.kitchen-order-meta{min-width:0}.kitchen-order-meta b,.kitchen-order-meta span{display:block}.kitchen-order-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:#53675c}.kitchen-order-meta span{margin-top:4px;font-size:8px;color:#98a59e}.kitchen-order-items{list-style:none;margin:0;padding:10px 13px}.kitchen-order-items li{display:flex;gap:8px;padding:5px 0;font-size:11px;line-height:1.35}.kitchen-order-items li b{min-width:28px;color:#087b53}.kitchen-order-items li span{font-weight:750}.kitchen-note{margin:0 13px 10px;padding:9px 10px;border-radius:10px;background:#fff7e8;border:1px solid #f1d79e;color:#7d541d}.kitchen-note b,.kitchen-note span{display:block}.kitchen-note b{font-size:7px;letter-spacing:.08em}.kitchen-note span{margin-top:3px;font-size:9px;line-height:1.4}.kitchen-order-card>footer{padding:10px 13px 13px}.kitchen-primary-btn,.kitchen-secondary-btn{width:100%;min-height:40px;border:0;border-radius:11px;background:#0b8d5e;color:#fff;font:inherit;font-size:9px;font-weight:900;cursor:pointer;text-decoration:none;display:grid;place-items:center}.kitchen-primary-btn.ready{background:#0d3022}.kitchen-secondary-btn{background:#f4f8f6;border:1px solid #dce7e1;color:#39594a}.kitchen-ready-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.kitchen-empty{min-height:180px;display:grid;align-content:center;justify-items:center;text-align:center;padding:20px;color:#899990}.kitchen-empty span{font-size:26px}.kitchen-empty strong{margin-top:7px;font-size:10px;color:#51685c}.kitchen-empty p{margin:5px 0 0;font-size:8px}.kitchen-connection{position:fixed;right:16px;bottom:16px;z-index:25;padding:7px 10px;border:1px solid #dce7e1;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(20,50,35,.08);color:#668076;font-size:7px}.kitchen-connection.error{background:#fff4ed;border-color:#f0d1c0;color:#a55b31}.kitchen-mobile-tabs{display:none}

.queue-voice-panel,.queue-ready-section,.queue-preparing-section{margin-bottom:14px;padding:16px;border:1px solid #dfe8e3;border-radius:18px;background:#fff}.queue-voice-main,.queue-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.queue-voice-main h2,.queue-section-title h2{margin:3px 0 0;font-size:16px}.queue-section-title>strong{min-width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#edf8f2;color:#087b53;font-size:12px}.queue-voice-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:9px;margin-top:12px}.queue-voice-grid label span{display:block;margin-bottom:5px;color:#687c71;font-size:8px;font-weight:800}.queue-voice-grid select,.queue-voice-grid input{width:100%;min-height:38px;padding:0 10px;border:1px solid #dbe6df;border-radius:10px;background:#fff;color:#183025;font-size:9px}.queue-voice-grid input[type=range]{padding:0}
.queue-ready-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}.queue-ready-card{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:13px;border:1px solid #cfe7da;border-radius:16px;background:linear-gradient(145deg,#f9fffc,#edf9f3)}.queue-ready-no{display:grid;align-content:center;justify-items:center;min-height:78px;border-radius:13px;background:#0b8d5e;color:#fff}.queue-ready-no small,.queue-ready-no strong{display:block}.queue-ready-no small{font-size:7px;font-weight:900;letter-spacing:.08em;opacity:.8}.queue-ready-no strong{font-size:34px;line-height:1}.queue-ready-copy{min-width:0}.queue-ready-copy b,.queue-ready-copy span,.queue-ready-copy small{display:block}.queue-ready-copy b{font-size:11px}.queue-ready-copy span{margin-top:5px;color:#60756a;font-size:8px;line-height:1.45}.queue-ready-copy small{margin-top:6px;color:#8a9a92;font-size:7px}.queue-ready-actions{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:7px}.queue-call-btn,.queue-served-btn{min-height:42px;border:0;border-radius:11px;font:inherit;font-size:9px;font-weight:900;cursor:pointer}.queue-call-btn{background:#0d3022;color:#fff}.queue-served-btn{background:#fff;border:1px solid #cfe0d7;color:#476154}.queue-preparing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:12px}.queue-prep-card{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e2eae6;border-radius:13px;background:#f7faf8}.queue-prep-card strong{min-width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#fff;color:#0b8d5e;font-size:15px}.queue-prep-card span{font-size:8px;line-height:1.4;color:#60756a}.queue-empty{grid-column:1/-1;min-height:150px;display:grid;align-content:center;justify-items:center;text-align:center;color:#8c9a93}.queue-empty span{font-size:28px}.queue-empty strong{margin-top:6px;color:#52685c;font-size:10px}.queue-empty p{margin:4px 0 0;font-size:8px}.queue-empty.compact{min-height:70px}

@media(max-width:980px){
 .kitchen-page,.queue-page{min-height:calc(100vh - 110px);padding:14px 10px 75px}.kitchen-page-head,.queue-page-head{align-items:flex-start;flex-direction:column}.kitchen-page-head h1,.queue-page-head h1{font-size:22px}.kitchen-head-actions,.queue-head-actions{width:100%}.kitchen-head-actions>a,.queue-head-actions>a{flex:1;text-align:center}.kitchen-summary{gap:7px}.kitchen-summary article{padding:11px}.kitchen-summary strong{font-size:21px}.kitchen-mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:sticky;top:0;z-index:8;padding:6px 0 9px;background:#f3f7f5}.kitchen-mobile-tabs button{height:38px;border:1px solid #dce6e0;border-radius:11px;background:#fff;color:#61756a;font-size:8px;font-weight:850}.kitchen-mobile-tabs button.active{background:#0b8d5e;border-color:#0b8d5e;color:#fff}.kitchen-mobile-tabs b{margin-left:4px}.kitchen-board{grid-template-columns:1fr}.kitchen-column{display:none}.kitchen-column.active{display:block}.kitchen-order-card>header{padding:11px}.kitchen-order-items li{font-size:12px}.kitchen-primary-btn,.kitchen-secondary-btn{min-height:46px;font-size:10px}.queue-voice-grid{grid-template-columns:1fr 1fr}.queue-ready-grid{grid-template-columns:1fr}.queue-ready-card{grid-template-columns:74px minmax(0,1fr)}.queue-call-btn,.queue-served-btn{min-height:46px;font-size:10px}.queue-preparing-grid{grid-template-columns:1fr 1fr}.kitchen-connection{right:10px;bottom:10px}
}
@media(max-width:430px){.kitchen-summary article small{display:none}.kitchen-summary span{font-size:7px}.kitchen-summary strong{font-size:20px}.queue-voice-grid{grid-template-columns:1fr}.queue-preparing-grid{grid-template-columns:1fr}.queue-ready-card{grid-template-columns:66px minmax(0,1fr)}.queue-ready-no{min-height:68px}.queue-ready-no strong{font-size:30px}}

/* V2.9.6 POS success + preprint */
.pos-success-toast{position:fixed;right:16px;bottom:16px;z-index:76;min-width:330px;max-width:min(92vw,420px);display:flex;align-items:center;justify-content:space-between;gap:13px;padding:12px 13px;border:1px solid #cde8da;border-radius:15px;background:#f4fff9;box-shadow:0 16px 38px rgba(12,73,45,.16)}
.pos-success-toast>div:first-child small,.pos-success-toast>div:first-child strong,.pos-success-toast>div:first-child span{display:block}.pos-success-toast>div:first-child small{font-size:7px;font-weight:900;letter-spacing:.08em;color:#5d8671}.pos-success-toast>div:first-child strong{margin-top:2px;font-size:14px}.pos-success-toast>div:first-child strong b{color:#0a8b5d}.pos-success-toast>div:first-child span{margin-top:2px;font-size:9px;color:#6f8077}.pos-success-actions{display:flex;gap:5px}.pos-success-actions button{min-height:34px;padding:0 9px;border:1px solid #d8e6df;border-radius:9px;background:#fff;color:#40594c;font-size:7.5px;font-weight:850;cursor:pointer}.pos-success-actions button:first-child{background:#fff7e8;border-color:#efdbb3;color:#8b5d1f}.pos-success-actions button:nth-child(2){background:#0b8d5e;border-color:#0b8d5e;color:#fff}
@media(max-width:980px){.pos-success-toast{left:10px;right:10px;bottom:74px;min-width:0;padding:10px;flex-direction:column;align-items:stretch}.pos-success-actions{display:grid;grid-template-columns:repeat(3,1fr)}.pos-success-actions button{min-height:38px}.pos-mobile-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pos-header-side{display:flex;align-items:stretch;gap:8px}.pos-current-queue{min-width:92px;padding:9px 12px;border:1px solid #cfe7da;border-radius:12px;background:#edf9f3;text-align:center}.pos-current-queue span,.pos-current-queue strong,.pos-current-queue small{display:block}.pos-current-queue span{font-size:7px;font-weight:900;letter-spacing:.08em;color:#6b8a79}.pos-current-queue strong{margin:2px 0;font-size:24px;line-height:1;color:#0a8b5d}.pos-current-queue small{font-size:6.5px;color:#8ba097}
@media(max-width:980px){.pos-header-side{display:block}.pos-current-queue{display:none!important}}
@media(max-width:980px){.pos-current-queue:not(.hidden){display:block!important;min-width:72px;padding:7px 8px}.pos-current-queue strong{font-size:20px}.pos-current-queue small{display:none}}

/* =========================================================
   Dapur Teh M V2.9.7 — Mobile Cashier UX + Order Correction
   ========================================================= */
.pos-mobile-active-order{display:none}
.pos-success-hint{display:block;margin:7px 12px 0;color:#6f8177;font-size:8px;line-height:1.45}
.pos-success-actions .kitchen-manual{background:#fff5de!important;color:#885b13!important;border-color:#efd69c!important}
.printer-manual-kitchen-note{padding:11px 12px;border:1px solid #efd9aa;border-radius:11px;background:#fff8e9;color:#76541c}
.printer-manual-kitchen-note strong,.printer-manual-kitchen-note span{display:block}.printer-manual-kitchen-note strong{font-size:9px}.printer-manual-kitchen-note span{margin-top:4px;font-size:8px;line-height:1.5}

/* Riwayat order kasir */
.pos-history-panel{overflow:hidden}
.pos-history-panel .inventory-panel-head p{margin:4px 0 0;color:#7e8d85;font-size:8px;line-height:1.5}
.pos-history-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 145px 150px 135px auto;gap:8px;padding:12px 14px;border-top:1px solid #edf1ef;border-bottom:1px solid #e8eeea;background:#fbfcfb}
.pos-history-toolbar input,.pos-history-toolbar select{width:100%;height:39px;padding:0 10px;border:1px solid #dce6e0;border-radius:10px;background:#fff;color:#3d5549;font-size:9px;box-sizing:border-box}
.pos-history-toolbar button{height:39px;padding:0 14px;border:0;border-radius:10px;background:#0b8d5e;color:#fff;font-size:9px;font-weight:850;cursor:pointer}
.pos-order-history-list{display:grid;gap:10px;padding:14px;background:#f8faf9}
.pos-order-history-card{padding:13px;border:1px solid #dee8e2;border-radius:15px;background:#fff;box-shadow:0 5px 16px rgba(18,50,34,.035)}
.pos-order-history-card.is-void{opacity:.78;background:#fafafa}
.pos-order-history-head{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:11px}
.pos-order-queue{height:56px;display:grid;place-items:center;align-content:center;border-radius:12px;background:#eaf8f1;color:#08794f}
.pos-order-queue small{font-size:6px;font-weight:900;letter-spacing:.09em}.pos-order-queue strong{font-size:20px;line-height:1}
.pos-order-head-copy strong,.pos-order-head-copy span{display:block}.pos-order-head-copy strong{font-size:9px;color:#183126}.pos-order-head-copy span{margin-top:4px;color:#85938c;font-size:7px}
.pos-order-status{text-align:right}.pos-order-status span{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:7px;font-weight:900}.pos-order-status span.active{background:#eaf8f1;color:#08794f}.pos-order-status span.void{background:#fff0f0;color:#ad4949}.pos-order-status small{display:block;margin-top:4px;color:#8a9a91;font-size:6px}
.pos-order-history-items{display:grid;gap:4px;margin:11px 0;padding:9px 10px;border-radius:10px;background:#f7faf8}.pos-order-history-items div{font-size:9px;color:#40584c}.pos-order-history-items b{color:#0a8357}
.pos-order-history-meta{display:flex;align-items:center;gap:10px;padding:0 2px}.pos-order-history-meta span{color:#73857a;font-size:8px}.pos-order-history-meta strong{margin-left:auto;color:#17382a;font-size:11px}.pos-order-history-meta em{max-width:280px;color:#a05b5b;font-size:7px;font-style:normal}
.pos-order-history-actions{display:flex;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid #edf2ef}.pos-order-history-actions a,.pos-order-history-actions button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid #dce6e0;border-radius:9px;background:#fff;color:#52675b;font:inherit;font-size:8px;font-weight:800;text-decoration:none;cursor:pointer}.pos-order-history-actions a.edit{background:#eaf8f1;border-color:#cbe6d8;color:#08794f}.pos-order-history-actions form{margin-left:auto}.pos-order-history-actions button{background:#fff3f3;border-color:#f1d4d4;color:#a54141}
.pos-history-empty{padding:60px 20px}

/* Koreksi transaksi */
.pos-correction-page{display:grid;gap:12px}.correction-order-head{display:grid;grid-template-columns:65px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px}.correction-order-head>div:nth-child(2) strong,.correction-order-head>div:nth-child(2) span{display:block}.correction-order-head>div:nth-child(2) strong{font-size:10px}.correction-order-head>div:nth-child(2) span{margin-top:4px;color:#83928a;font-size:8px}.correction-order-head>a{color:#567064;font-size:8px;font-weight:800;text-decoration:none}
.correction-queue{height:58px;display:grid;place-items:center;align-content:center;border-radius:12px;background:#eaf8f1;color:#08794f}.correction-queue small{font-size:6px;font-weight:900}.correction-queue strong{font-size:22px;line-height:1}
.pos-correction-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}.correction-menu-panel,.correction-summary-panel{padding:14px}.correction-summary-panel{position:sticky;top:82px}.correction-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.correction-section-head h2,.correction-summary-panel h2{margin:2px 0 0;font-size:16px}.correction-section-head input{width:min(280px,45%);height:38px;padding:0 11px;border:1px solid #dce6e0;border-radius:10px;font-size:9px}
.correction-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}.correction-menu-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px solid #e0e8e3;border-radius:12px;background:#fff}.correction-menu-image{width:54px;height:54px;overflow:hidden;border-radius:9px;background:#edf4f0}.correction-menu-image img{width:100%;height:100%;object-fit:cover}.correction-menu-image span{width:100%;height:100%;display:grid;place-items:center;color:#7e998a;font-weight:900}.correction-menu-copy strong,.correction-menu-copy span{display:block}.correction-menu-copy strong{font-size:9px;line-height:1.3}.correction-menu-copy span{margin-top:4px;color:#0a8257;font-size:8px;font-weight:800}.correction-qty{display:grid;grid-template-columns:28px 27px 28px;align-items:center;border:1px solid #dce5e0;border-radius:9px;overflow:hidden}.correction-qty button{height:29px;border:0;background:#f5f8f6;cursor:pointer}.correction-qty b{text-align:center;font-size:9px}
.correction-lines{display:grid;gap:6px;max-height:220px;overflow:auto;margin:10px 0;padding:9px;border-radius:10px;background:#f7faf8}.correction-lines>div:not(.correction-empty){display:flex;justify-content:space-between;gap:8px;font-size:8px}.correction-lines b{color:#078253}.correction-lines strong{font-size:8px}.correction-empty{padding:15px;text-align:center;color:#8a9991;font-size:8px}.correction-total,.correction-grand{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;font-size:9px}.correction-total strong{font-size:11px}.correction-grand{margin-top:12px;padding:12px;border-radius:11px;background:#103426;color:#fff}.correction-grand strong{font-size:16px}.correction-summary-panel .printer-field{margin-top:10px}.correction-summary-panel .printer-field b{color:#b63f3f}.correction-save{width:100%;margin-top:11px}.correction-warning{display:block;margin-top:8px;color:#8b6953;font-size:7px;line-height:1.45}

@media(max-width:980px){
  .pos-mobile-active-order{display:block;margin:10px 0 12px;padding:10px;border:1px solid #cfe4d9;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(18,55,38,.05)}
  .pos-mobile-active-order.hidden{display:none!important}
  .pos-mobile-active-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.pos-mobile-active-head small,.pos-mobile-active-head strong{display:block}.pos-mobile-active-head small{font-size:7px;font-weight:900;color:#7d9086;letter-spacing:.08em}.pos-mobile-active-head strong{margin-top:2px;font-size:11px}.pos-mobile-active-head button{height:30px;padding:0 9px;border:1px solid #cde4d7;border-radius:8px;background:#edf8f2;color:#08784f;font-size:7px;font-weight:850}
  .pos-mobile-active-lines{display:grid;gap:5px;max-height:115px;overflow:auto;margin-top:8px;padding:7px 8px;border-radius:9px;background:#f7faf8}.pos-mobile-active-line{display:flex;justify-content:space-between;gap:8px;font-size:8px}.pos-mobile-active-line span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-mobile-active-line b{color:#078253}.pos-mobile-active-line strong{white-space:nowrap}
  .pos-mobile-active-total{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:7px;border-top:1px dashed #d6e2db;font-size:9px}.pos-mobile-active-total strong{color:#087e53;font-size:12px}
  .pos-history-toolbar{grid-template-columns:1fr 1fr}.pos-history-toolbar input:first-child{grid-column:1/-1}.pos-history-toolbar button{grid-column:1/-1}
  .pos-correction-grid{grid-template-columns:1fr}.correction-summary-panel{position:static}.correction-menu-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pos-order-history-head{grid-template-columns:54px minmax(0,1fr)}.pos-order-status{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:6px}.pos-order-status small{margin:0}.pos-order-history-meta{flex-wrap:wrap}.pos-order-history-meta strong{margin-left:auto}.pos-order-history-meta em{width:100%;max-width:none}.pos-order-history-actions{display:grid;grid-template-columns:1fr 1fr}.pos-order-history-actions form{margin:0;grid-column:1/-1}.pos-order-history-actions button{width:100%}
  .correction-order-head{grid-template-columns:54px minmax(0,1fr)}.correction-order-head>a{grid-column:1/-1}.correction-menu-grid{grid-template-columns:1fr}.correction-section-head{align-items:flex-start;flex-direction:column}.correction-section-head input{width:100%}
}

@media(max-width:600px){
  .pos-workspace.has-active-cart .pos-mobile-active-order{float:right;position:sticky;top:8px;width:42%;box-sizing:border-box;margin:10px 0 12px 8px;z-index:8;max-height:260px;overflow:hidden}
  .pos-workspace.has-active-cart .pos-menu-grid{width:55%;grid-template-columns:1fr;box-sizing:border-box}
  .pos-workspace.has-active-cart .pos-menu-image{height:116px}
  .pos-workspace.has-active-cart .pos-mobile-active-lines{max-height:150px}
  .pos-menu-area::after{content:"";display:block;clear:both}
}


/* =========================================================
   Dapur Teh M V2.9.8 — Minimal Mobile Cashier Header
   ========================================================= */
.pos-topbar-v298{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pos-topbar-simple-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.pos-printer-main{min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:12px;border:1px solid #e4c98e;background:#fff7e7;color:#8b5c13;font-size:8px;font-weight:850;white-space:nowrap;cursor:pointer}
.pos-printer-main.connected{border-color:#bde2ce;background:#ebf8f1;color:#08764e}
.pos-more-menu-button{width:40px;height:40px;display:grid;align-content:center;justify-content:center;gap:4px;padding:0;border:1px solid #d9e5de;border-radius:12px;background:#fff;cursor:pointer}
.pos-more-menu-button span{width:17px;height:2px;border-radius:99px;background:#2f5745;display:block}
.pos-more-backdrop{position:fixed;inset:0;z-index:110;background:rgba(5,22,13,.42);backdrop-filter:blur(2px)}
.pos-more-drawer{position:fixed;z-index:120;top:0;right:0;width:min(88vw,360px);height:100dvh;display:flex;flex-direction:column;background:#f7faf8;box-shadow:-18px 0 45px rgba(11,36,24,.18);transform:translateX(104%);transition:transform .22s ease;overflow-y:auto}
.pos-more-drawer.open{transform:translateX(0)}
.pos-drawer-open{overflow:hidden!important}
.pos-more-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 16px 14px;background:#fff;border-bottom:1px solid #e4ece7}
.pos-more-drawer-head>div>strong,.pos-more-drawer-head>div>small{display:block}.pos-more-drawer-head>div>strong{margin-top:4px;font-size:14px}.pos-more-drawer-head>div>small{margin-top:2px;color:#7f9188;font-size:9px}
.pos-more-drawer-head>button{width:36px;height:36px;border:0;border-radius:11px;background:#f0f5f2;color:#50675b;font-size:22px;cursor:pointer}
.pos-more-status-card{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px;padding:11px;border:1px solid #dfe8e3;border-radius:14px;background:#fff}
.pos-more-status-card .pos-connectivity{min-width:0;flex:1}.pos-more-status-card .pos-device-chip{flex:0 0 auto}
.pos-more-nav{display:grid;gap:7px;padding:0 12px 12px}
.pos-more-item{width:100%;min-height:58px;display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid #e0e9e4;border-radius:13px;background:#fff;color:#1d392c;text-align:left;text-decoration:none;cursor:pointer;font-family:inherit}
.pos-more-item:hover{border-color:#bcdccc;background:#f2faf6}.pos-more-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:#edf6f1;font-size:15px}
.pos-more-item>span:last-child{min-width:0}.pos-more-item strong,.pos-more-item small{display:block}.pos-more-item strong{font-size:10px}.pos-more-item small{margin-top:2px;color:#85958d;font-size:8px;line-height:1.35}
.pos-more-drawer-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 12px 18px;border-top:1px solid #e2eae5;background:#fff}
.pos-more-user{display:flex;align-items:center;gap:8px;min-width:0}.pos-more-user .avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e8f6ef;color:#08764e;font-weight:900;font-size:10px}.pos-more-user>span:last-child{min-width:0}.pos-more-user strong,.pos-more-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-more-user strong{font-size:9px}.pos-more-user small{font-size:7px;color:#899990}
.pos-more-logout{min-height:36px;padding:0 12px;border:1px solid #ecd9d9;border-radius:10px;background:#fff5f5;color:#a34848;font-size:8px;font-weight:850;cursor:pointer}

@media(max-width:980px){
  .pos-topbar-v298{min-height:68px;height:68px!important;padding:0 12px!important;flex-wrap:nowrap!important}
  .pos-topbar-v298 .pos-brand{min-width:0;flex:1}.pos-topbar-v298 .pos-brand>span:last-child{min-width:0}.pos-topbar-v298 .pos-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px;font-size:11px}.pos-topbar-v298 .pos-brand small{max-width:125px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pos-printer-main{min-height:38px;padding:0 9px;font-size:7px}.pos-printer-main span{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pos-more-menu-button{width:38px;height:38px;flex:0 0 38px}
  .pos-workspace{min-height:calc(100vh - 68px)!important}
  .pos-menu-area{padding-top:13px!important}
  .pos-mobile-shortcuts{display:none!important}
}
@media(max-width:420px){
  .pos-topbar-v298 .brand-mark{width:35px;height:35px;flex-basis:35px}
  .pos-topbar-v298 .pos-brand{gap:8px}.pos-topbar-v298 .pos-brand strong{max-width:96px}.pos-topbar-v298 .pos-brand small{max-width:96px}
  .pos-printer-main{padding:0 8px}.pos-printer-main span{max-width:88px}
}


/* =========================================================
   Dapur Teh M V2.9.9 — Mobile POS Header + Payment Fix
   ========================================================= */
.pos-current-queue-topbar{min-width:58px;padding:7px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid #cfe7da;border-radius:12px;background:#edf9f3;text-align:center;box-shadow:none}
.pos-current-queue-topbar span{display:block;font-size:6.5px;font-weight:900;letter-spacing:.08em;color:#6b8a79;line-height:1}
.pos-current-queue-topbar strong{display:block;font-size:20px;line-height:1;color:#0a8b5d}
.pos-current-queue-topbar small{display:none}
.pos-current-queue-topbar.hidden{display:none!important}

@media(max-width:980px){
  .pos-overlay{z-index:130}
  .pos-payment-modal{z-index:160}
  .pos-cart-panel{z-index:120}
}

@media(max-width:600px){
  .pos-menu-header{display:none!important}
  .pos-menu-area{padding-top:10px!important}
  .pos-search-row{margin-top:0!important}
  .pos-current-queue-topbar{flex:0 0 56px;min-width:56px;padding:6px 6px;border-radius:12px}
  .pos-current-queue-topbar strong{font-size:18px}
  .pos-current-queue-topbar span{font-size:6px}
  .pos-topbar-simple-actions{gap:6px}
  .pos-printer-main{flex:0 1 auto}
  .pos-printer-main span{max-width:82px}
  .pos-workspace.has-active-cart .pos-mobile-active-order{float:right;position:sticky!important;top:80px;width:42%;box-sizing:border-box;margin:6px 0 8px 8px;z-index:20;max-height:280px;overflow:hidden}
  .pos-workspace.has-active-cart .pos-menu-grid{width:55%;grid-template-columns:1fr;box-sizing:border-box}
  .pos-workspace.has-active-cart .pos-menu-image{height:116px}
  .pos-workspace.has-active-cart .pos-mobile-active-lines{max-height:156px}
  .pos-payment-modal{top:auto;bottom:0;left:0;right:0;width:100%;max-height:min(88vh,760px);transform:none;border-radius:22px 22px 0 0}
  .pos-payment-modal form{padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================
   Dapur Teh M V2.9.9.1 — CART OVERLAY HOTFIX
   Fix: mobile cart was below the blur overlay.
   Layer order: page < overlay < cart < payment modal.
   ========================================================= */
@media (max-width: 980px) {
    .pos-overlay {
        z-index: 130 !important;
    }

    .pos-cart-panel {
        z-index: 150 !important;
    }

    .pos-cart-panel.mobile-open {
        z-index: 150 !important;
        pointer-events: auto !important;
    }

    .pos-payment-modal {
        z-index: 180 !important;
    }

    .pos-local-receipt-modal {
        z-index: 190 !important;
    }
}


/* V2.9.9.2 — Thermal logo compatibility */
.printer-logo-test-box{min-height:58px;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px dashed #cfe0d7;border-radius:11px;background:#f8fbf9}
.printer-logo-test-box .secondary-action{flex:0 0 auto;width:auto;min-height:38px;padding:0 12px}
.printer-logo-test-box small{font-size:7px;line-height:1.45;color:#819188}
@media(max-width:700px){.printer-logo-test-box{align-items:flex-start;flex-direction:column}.printer-logo-test-box .secondary-action{width:100%}}


/* =========================================================
   V2.9.9.4 — Standalone PWA / Semi App
   ========================================================= */
html.pwa-standalone,html.pwa-standalone body{overscroll-behavior:none;background:#f3f7f5}
html.pwa-standalone body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.pwa-standalone input,html.pwa-standalone textarea,html.pwa-standalone [contenteditable="true"]{-webkit-user-select:text;user-select:text}
html.pwa-standalone .pos-topbar{padding-top:max(10px,env(safe-area-inset-top))}
html.pwa-standalone .pos-mobile-cart{bottom:max(12px,env(safe-area-inset-bottom))}
.pos-more-installed{cursor:default;background:#eef9f3;color:#0b7d54}
.pos-more-installed .pos-more-icon{background:#dff3e8;color:#08744d}
.pwa-install-guide{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;background:rgba(9,29,19,.48);backdrop-filter:blur(8px)}
.pwa-install-guide.hidden{display:none!important}
.pwa-install-guide-card{position:relative;width:min(100%,390px);padding:26px 22px 22px;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(9,29,19,.25);text-align:center}
.pwa-install-guide-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:10px;background:#eff5f1;color:#557064;font-size:20px;cursor:pointer}
.pwa-install-guide-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 13px;border-radius:17px;background:#0b8d5e;color:#fff;font-size:24px;font-weight:900}
.pwa-install-guide-card h2{margin:0;color:#10271c;font-size:21px}.pwa-install-guide-card p{margin:9px auto 18px;max-width:310px;color:#657a70;font-size:11px;line-height:1.65}.pwa-install-guide-card .primary-action{width:100%;min-height:44px}
@media(display-mode:standalone){body{overscroll-behavior:none}}


/* V2.9.9.5 — Central Receipt Settings */
.printer-central-note{background:linear-gradient(135deg,#eefaf4,#f8fcfa);border-color:#bfe4d2}
.central-settings-status{flex:0 0 auto;min-height:35px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:999px;border:1px solid #dbe6df;background:#fff;color:#667c70;font-size:8px;white-space:nowrap}
.central-settings-status i{width:7px;height:7px;border-radius:50%;background:#9caea5}
.central-settings-status.synced{border-color:#bfe7d2;background:#eaf8f1;color:#08744c}.central-settings-status.synced i{background:#13aa70}
.central-settings-status.local{border-color:#f0d89f;background:#fff8e9;color:#956312}.central-settings-status.local i{background:#e1a42d}
.central-settings-status.error{border-color:#efc4c4;background:#fff1f1;color:#a64242}.central-settings-status.error i{background:#da5959}
@media(max-width:700px){.printer-central-note .central-settings-status{width:100%;justify-content:center}}


/* =========================================================
   Dapur Teh M V2.9.9.6 — Larger Mobile Customer Order Card
   ========================================================= */
@media(max-width:600px){
  .pos-workspace.has-active-cart .pos-mobile-active-order{
    float:right;
    position:sticky!important;
    top:80px;
    width:47%;
    min-height:150px;
    max-height:340px;
    box-sizing:border-box;
    margin:6px 0 10px 7px;
    padding:12px;
    z-index:24;
    overflow:hidden;
    border-radius:16px;
    border:1px solid #c5e1d2;
    box-shadow:0 10px 24px rgba(18,55,38,.09);
  }
  .pos-workspace.has-active-cart .pos-menu-grid{
    width:50%;
    grid-template-columns:1fr;
    box-sizing:border-box;
  }
  .pos-workspace.has-active-cart .pos-menu-image{height:118px}
  .pos-mobile-active-head{align-items:flex-start;gap:7px}
  .pos-mobile-active-head small{font-size:7.5px;line-height:1.3;letter-spacing:.08em}
  .pos-mobile-active-head strong{margin-top:3px;font-size:13px;line-height:1.15}
  .pos-mobile-active-head button{
    flex:0 0 auto;
    min-width:54px;
    height:34px;
    padding:0 8px;
    border-radius:9px;
    font-size:7.5px;
    line-height:1.15;
  }
  .pos-workspace.has-active-cart .pos-mobile-active-lines{
    max-height:205px;
    gap:7px;
    margin-top:10px;
    padding:9px;
    border-radius:10px;
  }
  .pos-mobile-active-line{gap:6px;font-size:8.5px;line-height:1.35}
  .pos-mobile-active-line b{font-size:9px}
  .pos-mobile-active-line strong{font-size:8.5px}
  .pos-mobile-active-total{
    margin-top:9px;
    padding-top:9px;
    font-size:9.5px;
  }
  .pos-mobile-active-total strong{font-size:14px;line-height:1}
}

@media(max-width:380px){
  .pos-workspace.has-active-cart .pos-mobile-active-order{width:48%;padding:10px;margin-left:6px}
  .pos-workspace.has-active-cart .pos-menu-grid{width:49%}
  .pos-mobile-active-head button{min-width:48px;padding:0 6px;font-size:7px}
  .pos-mobile-active-head strong{font-size:12px}
  .pos-mobile-active-total strong{font-size:13px}
}


/* =========================================================
   Dapur Teh M V2.9.9.7 — Adjustable Mobile Order Panel
   ========================================================= */
.pos-ui-settings-backdrop{position:fixed;inset:0;z-index:230;background:rgba(7,25,16,.48);backdrop-filter:blur(5px)}
.pos-ui-settings-backdrop.hidden,.pos-ui-settings-modal.hidden{display:none!important}
.pos-ui-settings-modal{position:fixed;z-index:240;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid #dce7e1;border-radius:22px;background:#fff;box-shadow:0 24px 80px rgba(8,31,19,.28)}
.pos-ui-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px;border-bottom:1px solid #e6eee9}.pos-ui-settings-head h2{margin:4px 0 2px;font-size:20px;color:#10281c}.pos-ui-settings-head p{margin:0;color:#71847a;font-size:9px}.pos-ui-settings-head>button{width:36px;height:36px;border:0;border-radius:11px;background:#eff5f1;color:#60786b;font-size:21px;cursor:pointer}
.pos-ui-settings-body{padding:16px 18px;overflow-y:auto;display:grid;gap:15px}.pos-ui-setting-group>strong,.pos-ui-slider-row>span>strong{display:block;margin-bottom:8px;color:#243e31;font-size:9px}.pos-ui-slider-row>span small{display:block;color:#86968e;font-size:7px;margin-top:2px}.pos-ui-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pos-ui-presets button{min-height:38px;padding:0 5px;border:1px solid #dbe6df;border-radius:10px;background:#f9fbfa;color:#556d61;font-size:8px;font-weight:800}.pos-ui-presets button.active{border-color:#71c19e;background:#e9f7f0;color:#08744d}
.pos-ui-slider-row{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding:12px;border:1px solid #e0e9e4;border-radius:13px;background:#fbfdfc}.pos-ui-slider-row output{align-self:center;min-width:46px;text-align:right;color:#0a8157;font-size:16px;font-weight:900}.pos-ui-slider-row input{grid-column:1/-1;width:100%;accent-color:#0b8d5e}
.pos-ui-segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pos-ui-segmented label{cursor:pointer}.pos-ui-segmented input{display:none}.pos-ui-segmented span{min-height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #dbe6df;border-radius:11px;background:#fff;color:#587064;font-size:8px;font-weight:850}.pos-ui-segmented input:checked+span{border-color:#6fc09d;background:#eaf8f1;color:#08744d}
.pos-ui-setting-row>label{min-height:58px;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e0e9e4;border-radius:13px;background:#fbfdfc}.pos-ui-setting-row label>span{min-width:0;flex:1}.pos-ui-setting-row strong,.pos-ui-setting-row small{display:block}.pos-ui-setting-row strong{font-size:9px;color:#284437}.pos-ui-setting-row small{margin-top:3px;font-size:7px;color:#87978f}.pos-ui-setting-row input{appearance:none;width:40px;height:23px;flex:0 0 40px;border-radius:999px;background:#d7e1dc;position:relative;cursor:pointer}.pos-ui-setting-row input:after{content:'';position:absolute;width:19px;height:19px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16);transition:.15s}.pos-ui-setting-row input:checked{background:#12a56e}.pos-ui-setting-row input:checked:after{transform:translateX(17px)}
.pos-ui-setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pos-ui-select-field span{display:block;margin-bottom:5px;color:#61766b;font-size:8px;font-weight:800}.pos-ui-select-field select{width:100%;height:41px;padding:0 10px;border:1px solid #dbe6df;border-radius:11px;background:#fff;color:#2c483a;font-size:9px}
.pos-ui-live-preview{width:var(--preview-width,55%);min-width:180px;justify-self:end;padding:12px;border:1px solid #c7e2d4;border-radius:14px;background:#f7fcf9;box-shadow:0 7px 18px rgba(15,71,44,.06);transition:width .15s}.pos-ui-live-preview>span{display:block;color:#789086;font-size:7px;font-weight:900;letter-spacing:.08em}.pos-ui-live-preview>strong{display:block;margin:3px 0 8px;font-size:13px}.pos-ui-live-preview>div,.pos-ui-live-preview footer{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:5px 0;border-top:1px solid #e3ece7}.pos-ui-live-preview small{font-size:7.5px}.pos-ui-live-preview b{font-size:8px}.pos-ui-live-preview footer{margin-top:3px}.pos-ui-live-preview footer strong{font-size:13px;color:#078255}.pos-ui-live-preview[data-text-size="large"] small{font-size:8.5px}.pos-ui-live-preview[data-text-size="large"] b{font-size:9px}
.pos-ui-settings-foot{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:13px 18px calc(13px + env(safe-area-inset-bottom,0px));border-top:1px solid #e6eee9;background:#fbfdfc}.pos-ui-settings-foot .secondary-action,.pos-ui-settings-foot .primary-action{width:100%;min-height:43px}
body.pos-ui-settings-open{overflow:hidden}
.pos-mobile-active-more{padding:6px 0 1px;color:#71867b;font-size:7.5px;font-weight:800;text-align:center;border-top:1px dashed #dbe7e0}

@media(max-width:600px){
  .pos-workspace[data-order-panel-layout="side"].has-active-cart .pos-mobile-active-order{
    width:var(--pos-order-card-width,55%)!important;
    margin-left:8px!important;
  }
  .pos-workspace[data-order-panel-layout="side"].has-active-cart .pos-menu-grid{
    width:calc(100% - var(--pos-order-card-width,55%) - 8px)!important;
  }
  .pos-workspace[data-order-panel-layout="full"].has-active-cart .pos-mobile-active-order{
    float:none!important;width:100%!important;margin:0 0 10px!important;max-height:300px!important;
  }
  .pos-workspace[data-order-panel-layout="full"].has-active-cart .pos-menu-grid{
    width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .pos-workspace[data-order-sticky="0"].has-active-cart .pos-mobile-active-order{position:relative!important;top:auto!important}
  .pos-workspace[data-order-sticky="1"].has-active-cart .pos-mobile-active-order{position:sticky!important;top:80px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-head small{font-size:8px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-head strong{font-size:14px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-line{font-size:9px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-line b,.pos-workspace[data-order-text-size="large"] .pos-mobile-active-line strong{font-size:9.5px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-total{font-size:10px!important}
  .pos-workspace[data-order-text-size="large"] .pos-mobile-active-total strong{font-size:15px!important}
  .pos-ui-settings-modal{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:92vh;border-radius:22px 22px 0 0}
  .pos-ui-presets{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   Dapur Teh M V2.9.10 — Menu Variants / Special Options
   ========================================================= */
.menu-variant-builder .form-card-head em{font-style:normal;font-size:7px;padding:3px 6px;border-radius:999px;background:#eef8f3;color:#08734a;margin-left:5px}
.variant-builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #e2ebe6;border-radius:13px;background:#f8fbf9;margin-bottom:12px}
.variant-builder-toolbar strong,.variant-builder-toolbar small{display:block}.variant-builder-toolbar strong{font-size:10px;color:#173a2b}.variant-builder-toolbar small{margin-top:3px;font-size:8px;color:#819188}.variant-builder-toolbar .small-primary{flex:0 0 auto}
.variant-builder-list{display:grid;gap:12px}.variant-builder-empty{min-height:130px;display:grid;place-items:center;align-content:center;gap:5px;border:1px dashed #d6e4dc;border-radius:14px;background:#fbfdfc;text-align:center}.variant-builder-empty span{font-size:26px}.variant-builder-empty strong{font-size:11px}.variant-builder-empty small{font-size:8px;color:#8b9a92}.variant-builder-empty.hidden{display:none}
.variant-group-card{padding:13px;border:1px solid #dce8e1;border-radius:14px;background:#fff}.variant-group-head{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:end;gap:10px;padding-bottom:11px;border-bottom:1px solid #edf2ef}.variant-group-title span{display:block;margin-bottom:5px;font-size:7px;font-weight:900;letter-spacing:.08em;color:#879a90}.variant-group-title input{width:100%;height:39px;padding:0 10px;border:1px solid #dbe6df;border-radius:10px;font-size:10px;font-weight:800;color:#17372a;box-sizing:border-box}.variant-required{height:39px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #dce7e1;border-radius:10px;background:#f8fbf9;font-size:8px;font-weight:800;color:#4e6d5e}.variant-required input{accent-color:#0b8d5e}.variant-remove-group{height:39px;padding:0 11px;border:1px solid #f0d4d4;border-radius:10px;background:#fff7f7;color:#b74646;font-size:8px;font-weight:850}
.variant-options{display:grid;gap:8px;margin-top:11px}.variant-option-row{display:grid;grid-template-columns:26px minmax(170px,1fr) minmax(120px,.65fr) minmax(130px,.65fr) 36px;gap:8px;align-items:end}.variant-option-row .field{margin:0}.variant-option-row .field>span{font-size:7px}.variant-drag{height:38px;display:grid;place-items:center;color:#9ca9a2}.variant-remove-option{height:38px;border:1px solid #f0d8d8;border-radius:9px;background:#fff6f6;color:#c14d4d;font-size:17px}.variant-add-option{margin-top:10px;min-height:36px;padding:0 11px;border:1px dashed #bcd9ca;border-radius:10px;background:#f1faf5;color:#08764e;font-size:8px;font-weight:850}
.menu-variant-meta{color:#7b5ca9!important}.variant-detail-list{display:grid;gap:9px}.variant-detail-group{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;padding:11px 12px;border:1px solid #e3ebe7;border-radius:12px}.variant-detail-group>div:first-child strong,.variant-detail-group>div:first-child small{display:block}.variant-detail-group>div:first-child strong{font-size:9px}.variant-detail-group>div:first-child small{margin-top:3px;font-size:7px;color:#85968d}.variant-detail-options{display:flex;flex-wrap:wrap;gap:6px}.variant-detail-options span{padding:6px 8px;border-radius:8px;background:#f2f7f4;font-size:8px;color:#365547}.variant-detail-options b{margin-left:4px;color:#08754e}

.pos-variant-card-badge{position:absolute;left:8px;top:8px;z-index:2;padding:4px 6px;border-radius:999px;background:rgba(31,36,48,.88);color:#fff;font-style:normal;font-size:6px;font-weight:900;letter-spacing:.08em;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.pos-variant-backdrop{position:fixed;inset:0;z-index:230;background:rgba(3,9,14,.78);backdrop-filter:blur(5px)}.pos-variant-backdrop.hidden{display:none}
.pos-variant-modal{position:fixed;z-index:240;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:86vh;overflow:auto;padding:18px;border:1px solid #40506a;border-radius:18px;background:#202c3f;color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.45)}.pos-variant-modal.hidden{display:none}
.pos-variant-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.pos-variant-modal-head small{display:block;font-size:7px;font-weight:900;letter-spacing:.1em;color:#a9b6c8}.pos-variant-modal-head h2{margin:4px 0 0;font-size:20px;line-height:1.2;color:#fff}.pos-variant-modal-head button{width:34px;height:34px;border:0;border-radius:10px;background:#2d3b50;color:#bac5d3;font-size:22px;line-height:1}
.pos-variant-groups{display:grid;gap:15px}.pos-variant-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.pos-variant-group-head strong{font-size:10px;color:#f8fbff}.pos-variant-group-head small{font-size:7px;color:#9eacbd}.pos-variant-options{display:grid;gap:9px}.pos-variant-option{min-height:52px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border:2px solid transparent;border-radius:12px;color:#fff;font-size:14px;font-weight:850;box-shadow:none;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.pos-variant-option:active{transform:scale(.985)}.pos-variant-option.selected{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}.pos-variant-option b{font-size:9px;opacity:.92}.pos-variant-option.style-neutral{background:#46556a}.pos-variant-option.style-yellow{background:#efb52b}.pos-variant-option.style-orange{background:#ff6d22}.pos-variant-option.style-red{background:#ef3e46}.pos-variant-option.style-green{background:#159c69}.pos-variant-option.style-blue{background:#2d84d6}.pos-variant-option.style-purple{background:#7957bf}
.pos-variant-total{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:11px 12px;border-top:1px solid #38475b;border-bottom:1px solid #38475b}.pos-variant-total span{font-size:9px;color:#adbac9}.pos-variant-total strong{font-size:16px;color:#fff}.pos-variant-confirm{width:100%;min-height:48px;margin-top:13px;border:0;border-radius:12px;background:#0b9b65;color:#fff;font-size:11px;font-weight:900}
.pos-cart-variant{display:block;margin:3px 0 1px;font-style:normal;font-size:7.5px;font-weight:750;color:#8a6a28}.pos-mobile-active-variant{display:block;margin-top:2px;font-size:6.5px;color:#8a7761;white-space:normal}.receipt-variant{display:block;margin:2px 0 3px;font-size:.82em;font-weight:700}.receipt-kitchen-variant{display:block;margin-top:2px;font-size:.82em;font-weight:900}.kitchen-item-variant{display:block;margin-top:3px;padding:4px 6px;border-radius:7px;background:#fff3cd;color:#75580a;font-size:10px;font-weight:900}.history-variant{display:block;margin-left:18px;margin-top:2px;font-size:7px;color:#9a6b23}.correction-line-with-variant span small{display:block;margin:2px 0 0 18px;color:#947020;font-size:7px}

@media(max-width:760px){
 .variant-group-head{grid-template-columns:1fr}.variant-required,.variant-remove-group{width:100%;box-sizing:border-box}.variant-option-row{grid-template-columns:20px minmax(0,1fr) 100px}.variant-option-row .field:nth-of-type(3){grid-column:2/4}.variant-remove-option{grid-column:4;grid-row:1/3;height:100%}
 .pos-variant-modal{width:calc(100vw - 24px);padding:15px;border-radius:18px}.pos-variant-modal-head h2{font-size:17px}.pos-variant-option{min-height:56px;font-size:14px}
}