/* SSO Citymall Daily Operations v12: polished POS and collapsible side menu. */
.menu { display:inline-grid; width:38px; height:38px; place-content:center; gap:5px; padding:0; border:1px solid rgba(255,255,255,.19); border-radius:10px; background:rgba(255,255,255,.07); }
.menu span { display:block; width:17px; height:2px; border-radius:2px; background:#fff; transition:transform .2s ease,opacity .2s ease; }
.menu[aria-expanded="false"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu[aria-expanded="false"] span:nth-child(2) { opacity:0; }
.menu[aria-expanded="false"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.pos-title-note { width:min(280px,100%); padding:11px 13px; border:1px solid #efd58f; border-radius:12px; background:#fff9e8; color:#5e4b1a; }
.pos-title-note b,.pos-title-note small { display:block; }
.pos-title-note b { font:800 12px Outfit,sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.pos-title-note small { margin-top:3px; color:#746135; font-size:11px; line-height:1.35; }
.pos-workflow { display:flex; flex-wrap:wrap; gap:8px; margin:-3px 0 18px; }
.pos-workflow span { display:inline-flex; align-items:center; min-height:29px; padding:6px 10px; border:1px solid #dce4ed; border-radius:99px; background:#fff; color:#6a7a8e; font-size:11px; font-weight:800; }
.pos-workflow span.active { border-color:#efbd1e; background:#fff5ca; color:#604900; }
#pos .pos-layout { gap:21px; }
#pos .pos-form { position:relative; overflow:hidden; padding:22px; border:1px solid #dbe2ea; border-top:5px solid #ffca18; border-radius:17px; background:linear-gradient(135deg,#fff 0%,#fffdf7 100%); box-shadow:0 13px 32px rgba(31,51,76,.07); }
#pos .pos-form::before { content:"SSO CITYMALL • POINT OF SALE"; position:absolute; top:12px; right:17px; color:#a7800a; font:800 9px Outfit,sans-serif; letter-spacing:.11em; }
#pos .pos-form .form-grid { gap:4px 15px; padding-top:11px; }
#pos .pos-form label { color:#213750; font-size:11px; letter-spacing:.01em; }
#pos .pos-form input,#pos .pos-form select,#pos .pos-form textarea { border-color:#d8e0e9; background:#fff; transition:border-color .2s ease,box-shadow .2s ease; }
#pos .pos-form input:focus,#pos .pos-form select:focus,#pos .pos-form textarea:focus { outline:0; border-color:#e8b211; box-shadow:0 0 0 3px rgba(255,205,30,.17); }
#pos #posType { border-color:#e9bd31; background:#fff8dd; color:#4b3a08; font-weight:800; }
#pos .required-dot { display:inline-block; margin-left:4px; color:#a97500; font-size:9px; font-weight:800; text-transform:uppercase; }
#pos #posCourtHint { display:block; min-height:16px; margin-top:5px; color:#687b91; font-size:10px; line-height:1.35; }
#pos .pos-catalog-search { padding:11px; border:1px solid #e3e9ef; border-radius:12px; background:#f8fafc; }
#pos .pos-catalog-search input { background:#fff; }
#pos .catalog-result { border-color:#d9e3ef; background:#fff; }
#pos .catalog-result button { border-radius:7px; background:#15243a; color:#fff; }
#pos #posAddItem { margin-top:9px; border:1px solid #d8e2ec; background:#f0f4f8; color:#274461; }
#pos .pos-summary { border:1px solid #1c2e47; border-top:5px solid #ffca18; border-radius:17px; background:linear-gradient(165deg,#122138,#172c49 60%,#0f1d30); color:#eef5ff; box-shadow:0 14px 35px rgba(13,29,50,.18); }
#pos .pos-summary .eyebrow { background:#ffca18; color:#1b273a; }
#pos .pos-summary h3,#pos .pos-summary .section-heading h3 { color:#fff; }
#pos .summary-lines { border-color:rgba(224,235,250,.24); }
#pos .summary-line small,#pos .pos-summary .muted { color:#bbc9da; }
#pos .summary-total { border-bottom:1px solid rgba(224,235,250,.2); }
#pos .summary-total strong { color:#ffcf2b; }
#pos .payment-section { border-color:rgba(224,235,250,.2); }
#pos .payment-line select,#pos .payment-line input { border-color:#3a5576; background:#f8fbff; color:#1e314a; }
#pos .payment-total { border-color:rgba(224,235,250,.24); }
#pos .payment-total b:last-child { color:#ffd37c; }
#pos .pos-summary .primary.full { margin-top:20px; background:#ffca18; color:#14233a; box-shadow:0 8px 18px rgba(255,202,24,.22); }
body.dark-mode .pos-title-note { border-color:#796326; background:#352e1a; color:#ffe7a0; }
body.dark-mode .pos-title-note small { color:#e5cf91; }
body.dark-mode #pos .pos-form { border-color:#33445b; background:linear-gradient(135deg,#18263a,#142134); }
body.dark-mode #pos .pos-form label { color:#e8f0fb; }
body.dark-mode #pos .pos-form input,body.dark-mode #pos .pos-form select,body.dark-mode #pos .pos-form textarea { border-color:#3b4d65; background:#111d2d; color:#f1f5fb; }
body.dark-mode #pos .pos-catalog-search { border-color:#3a4d65; background:#152237; }
body.dark-mode .pos-workflow span { border-color:#3b4d64; background:#1b2a3f; color:#bdcbe0; }
body.dark-mode .pos-workflow span.active { border-color:#dcb128; background:#453a18; color:#ffeaa2; }
@media(min-width:981px) { .app.menu-collapsed .shell { grid-template-columns:0 1fr; } .app.menu-collapsed #navigation { width:0; min-width:0; padding:0; overflow:hidden; opacity:0; pointer-events:none; } }
@media(max-width:980px) { .menu { display:inline-grid; } #pos .title { align-items:flex-start; flex-direction:column; } }
@media(max-width:680px) { .pos-title-note { width:100%; } .pos-workflow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .pos-workflow span { justify-content:center; text-align:center; } #pos .pos-form { padding:17px; } #pos .pos-form::before { position:static; display:block; margin:0 0 10px; } #pos .pos-summary { position:static; } }