/* OysKasir visual theme, adapted from the latest OysPanel Fresh UI.
   Layout and checkout rules remain in the native application. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --teal: #5c67f2;
  --teal-dark: #4f46e5;
  --ink: #1e293b;
  --muted: #77839a;
  --line: #e5e9f2;
  --bg: #f4f6fa;
  --green: #059669;
  --sidebar: 250px;
  --radius: 19px;
  --oys-primary-soft: #eef0ff;
  --oys-gradient: linear-gradient(135deg, #6875f5 0%, #5145df 100%);
  --oys-shadow: 0 8px 28px rgb(37 49 82 / 5%);
  --oys-ease: cubic-bezier(.2,.7,.2,1);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: radial-gradient(ellipse at 80% 0, #eae7fd80, transparent 47%),
    radial-gradient(ellipse at 18% 38%, #fff4cd38, transparent 40%), var(--bg);
  font-size: 13px;
  line-height: 1.5;
}
::selection { background: #dedbff; color: #3730a3; }
* { scrollbar-width: thin; scrollbar-color: #bfc3e1 transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 8px; background: #c5c7e0; border: 2px solid transparent; background-clip: padding-box; }
button,input,select,textarea { font-family: inherit; }
h1,h2 { font-weight: 800; letter-spacing: -.7px; }
h3 { font-weight: 750; letter-spacing: -.4px; }
h4 { font-weight: 700; }
.sub { color: #7c8699; font-size: 12px; line-height: 1.75; }
.icon { width: 18px; height: 18px; }
.icon-tone { fill: currentColor; fill-opacity: .14; stroke: none; }
.btn,button.nav-link,.account-btn,.demo-accounts button,.variant-choice,.view-toggle button {
  transition: color 180ms var(--oys-ease), background-color 180ms var(--oys-ease),
    border-color 180ms var(--oys-ease), box-shadow 180ms var(--oys-ease), transform 180ms var(--oys-ease);
}
.btn { border-radius: 11px; font-weight: 700; font-size: 12px; border-color: #dfe4ed; box-shadow: 0 2px 5px #1e293b03; }
.btn:hover { background: #f5f4ff; color: #4f46e5; border-color: #cacbfa; }
.btn.primary { border-color: transparent; background: var(--oys-gradient); box-shadow: 0 5px 14px #4f46e525; color: white; }
.btn.primary:hover { color: white; background: linear-gradient(135deg,#5c6aef,#483bcf); box-shadow: 0 8px 20px #4f46e536; }
.btn.soft { background: #f0f1ff; border-color: #dde0fe; color: #5a57d6; }
.btn.green { color: #07866f; border-color: #c8eadf; background: linear-gradient(135deg,#f1fcf7,#e7f8f0); }
.btn.amber { color: #ab7724; border-color: #f1e2c1; background: #fffbf1; }
.btn.danger { color: #dc4562; border-color: #f6d9e1; background: #fff3f6; }
.btn.danger:hover { border-color: #f4b8c5; background: #ffeaf0; color: #c03050; }
.btn.text { color: var(--teal-dark); box-shadow: none; }
button:disabled { opacity: .44; box-shadow: none; }
button:focus-visible,a:focus-visible,[role=button]:focus-visible,summary:focus-visible {
  outline: 3px solid #b7baf8; outline-offset: 3px;
}
input,select,textarea { border-color: #dfe4ee; border-radius: 11px; background-color: #ffffffed;
  transition: border-color 180ms, box-shadow 180ms, background-color 180ms; }
input:hover,select:hover,textarea:hover { border-color: #c6c9e8; }
input:focus,select:focus,textarea:focus { border-color: #7a7cf0; box-shadow: 0 0 0 4px #5c67f214; }
input::placeholder,textarea::placeholder { color: #9aa3b4; font-size: 12px; }
input[type=checkbox] { accent-color: #6359e8; }
.badge { border-radius: 7px; font-weight: 650; background: #f0f1ff; color: #605ac7; border-color: #e1e2fb; font-size: 10px; }
.badge.green { color: #09866f; background: #ebf9f2; border-color: #d4f0e3; }
.badge.amber { color: #a97523; background: #fff8e8; border-color: #f3e7c6; }
.panel,.page-head.boxed { border-color: #e6e9f2; border-radius: var(--radius); box-shadow: var(--oys-shadow); }
.panel-pad { padding: 23px; }
.page-head.boxed { padding: 23px; background: #ffffffed; }
.page-head h2 { font-size: 20px; }
.empty { color: #8c96a9; }
.empty>.icon { color: #9298d3; background: #f0f1fc; padding: 12px; box-sizing: content-box; border-radius: 16px; }

/* Translucent shell and individually colored icon tiles, as in OysPanel. */
.sidebar { background: #fffffff7; border-color: #e4e7f1; box-shadow: 3px 0 20px #303b6403;
  transition: width 240ms var(--oys-ease), transform 240ms var(--oys-ease); }
.sidebar-brand { height: 72px; padding: 14px 20px; gap: 12px; border-bottom: 1px dashed #e6e9f1; color: #14254b; }
.sidebar-brand img { width: 39px; height: 39px; border-radius: 12px; box-shadow: 0 5px 12px #5c67f224; }
.sidebar-brand strong { font-size: 18px; letter-spacing: -.65px; font-weight: 800; }
.sidebar-brand strong span,.login-brand h1 span { color: #5c67f2; }
.sidebar-brand small { color: #98a1b0; font-size: 10px; font-weight: 600; margin-top: 1px; }
.sidebar nav { padding: 5px 12px 20px; }
.nav-group { margin-top: 17px; margin-bottom: 19px; }
.nav-group-label,.nav-group:nth-child(n) .nav-group-label { color: #959cb0; border: 0; padding-left: 0; margin: 0 11px 9px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.nav-link { min-height: 44px; padding: 7px 9px; gap: 10px; margin: 3px 0; color: #606d82; font-weight: 650;
  font-size: 11.5px; border: 1px solid transparent; border-radius: 12px;
  transition: background-color 180ms, color 180ms, border-color 180ms; }
.nav-link>.icon { --icon-color: #6d5bd0; --icon-bg: #efecff; color: var(--icon-color); background: var(--icon-bg);
  width: 30px; height: 30px; padding: 6px; flex: 0 0 30px; border-radius: 10px;
  transition: transform 200ms var(--oys-ease), box-shadow 200ms; }
.nav-link[data-page=pos]>.icon,.nav-link[data-page=products]>.icon,.nav-link[data-page=stock]>.icon { --icon-color: #3b82f6; --icon-bg: #eaf3ff; }
.nav-link[data-page=transactions]>.icon,.nav-link[data-page=reports]>.icon,.nav-link[data-page=opname]>.icon { --icon-color: #09987c; --icon-bg: #e9faf3; }
.nav-link[data-page=shifts]>.icon,.nav-link[data-page=customers]>.icon { --icon-color: #d9982f; --icon-bg: #fff6e6; }
.nav-link[data-page=categories]>.icon,.nav-link[data-page=users]>.icon { --icon-color: #a368d7; --icon-bg: #f5edfd; }
.nav-link[data-page=billing]>.icon { --icon-color: #d5688b; --icon-bg: #fceef4; }
.nav-link.active { color: #574bd0; background: linear-gradient(135deg,#f4f2ff,#ebedff); border-color: #e5e2fc; font-weight: 750; }
.nav-link.active>.icon { box-shadow: 0 3px 8px #6557d214; color: var(--icon-color); }
.nav-link:hover { background: #f7f6fe; color: #5145bd; }
.nav-link .badge { font-size: 8px; border-radius: 5px; padding: 2px 4px; }
.sidebar-footer { color: #a3aabd; font: 9px "Plus Jakarta Sans",sans-serif; padding: 16px 20px; }
.sidebar-footer button { background: #f3f3fa; border-radius: 6px; width: 22px; height: 20px; color: #757da0; }
.topbar { height: 72px; background: #ffffffef; border-color: #e8eaf4; box-shadow: 0 5px 20px #27325503;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: left 240ms var(--oys-ease); }
.topbar .menu-btn { background: #f7f8fc; border: 1px solid #eef0f6; border-radius: 10px; width: 35px; height: 35px; color: #8390a7; }
.topbar .branch-select { background: #f9f9fd; border-color: #e8eaf3; font-size: 11px; font-weight: 650; }
.topbar .module { background: #f9f9fd; font-size: 11px; border-color: #e8eaf3; border-radius: 11px; }
.account-btn { background: #fcfcff; border-color: #e6e8f1; border-radius: 12px; padding: 5px 9px 5px 5px; font-weight: 650; font-size: 12px; }
.avatar { background: var(--oys-gradient); box-shadow: 0 3px 7px #5c67f21a; border-radius: 9px; }
.account-menu { top: 48px; padding: 14px; border-color: #e6e7f3; box-shadow: 0 15px 45px #27305b1a; border-radius: 16px; }
.main { padding-top: 97px; transition: margin-left 240ms var(--oys-ease); }
.collapsed { --sidebar: 78px; }
.collapsed .sidebar-brand { padding: 13px; }
.collapsed .nav-link { padding: 7px; }
.collapsed .nav-link>.icon { width: 32px; height: 32px; }

/* Dashboard, reports and forms. */
.dashboard-head h2 { font-size: 25px; }
.dashboard-head p { max-width: 390px; }
.dashboard-tools { background: #ffffffd9; border-color: #e5e7f1; padding: 8px; gap: 8px; border-radius: 14px; box-shadow: 0 4px 16px #33415505; }
.date-filter input { font-size: 11px; border-radius: 9px; background: #fafafe; }
.stat { padding: 22px; }
.stat-label { font-size: 10px; letter-spacing: .5px; font-weight: 750; color: #8490a5; }
.stat-value { font-size: 25px; letter-spacing: -.8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-foot { color: #99a1b1; font-size: 10px; }
.stat-icon { background: #eeefff; color: #6959de; border-radius: 13px; padding: 11px; }
.stat:nth-child(2) .stat-icon { background: #e9f8f1; color: #0a9b80; }
.stat:nth-child(3) .stat-icon { background: #fff4e4; color: #d39939; }
.stat:nth-child(4) .stat-icon { background: #eef3ff; color: #5686e2; }
.gradient { background: var(--oys-gradient); border-color: transparent; box-shadow: 0 9px 24px #6556db22; }
.gradient .stat-label,.gradient .stat-foot { color: #e0e2ff; }
.gradient .stat-icon { background: #ffffff26; color: white; }
.gradient .stat-value { color: white; }
.revenue-bottom { color: #e1e3ff; font-size: 11px; }
.dashboard-stats .stat { min-height: 160px; }
.dashboard-stats .stat-value { font-size: 30px; }
.dashboard-stats .gradient .stat-value { font-size: 34px; }
.chart-panel { padding: 23px; }
.chart-panel h3 { font-size: 14px; }
.chart-svg text { font-family: "Plus Jakarta Sans",sans-serif; font-size: 10px; fill: #929aad; }
.legend { color: #79839a; font-size: 10px; }
.legend i { border-radius: 3px; }
.recent-row .round-icon { color: #6470e2; background: #f1f1fd; border-radius: 11px; }
.recent-row strong { font-size: 12px; }
.recent-row p { font-size: 10px; }
.panel-title h3 { font-size: 14px; font-weight: 750; }
.toolbar { background: #ffffffdd; border-color: #e5e9f2; border-radius: 15px; }
.data-table th { background: linear-gradient(180deg,#fafbff,#f4f6fb); color: #79859d; font-size: 10px; letter-spacing: .35px; font-weight: 800; padding: 16px 18px; }
.data-table td { padding: 17px 18px; font-size: 12px; border-bottom-color: #edf0f6; }
.data-table tbody tr { transition: background-color 160ms; }
.data-table tbody tr:hover { background: #faf9ff; }
.data-table td strong { font-weight: 700; }
.pagination { font-size: 11px; color: #8b95a8; }
.form-grid label,.field-label { font-size: 12px; font-weight: 650; color: #59667d; }
.form-grid label input,.form-grid label textarea,.form-grid label select { font-size: 12px; font-weight: 500; }
.form-section h3 { font-size: 15px; }
.form-section>p { color: #95a0b1; font-size: 11px; }
.form-actions,.modal-foot { background: #f8f9fd; border-top-color: #e9ecf5; }
.variant-editor { background: #fbfbff; border-color: #e6e6f4; border-radius: 15px; }
.note { background: #f3f3ff; border-color: #e3e2fb; color: #726b9e; }
.notice-amber { background: #fff9ed; border-color: #f3e7c7; color: #9b772e; }
.presets button { background: #f5f5fc; color: #8b93a8; }
.presets button.active { background: #eae8fc; color: #5a4cd0; }

/* POS: stable controls, softer product cards and a clear payment area. */
.main.pos-main { padding-top: 88px; }
.product-card { border: 1px solid #e5e8f2; box-shadow: 0 3px 12px #33415504; border-radius: 17px;
  transition: border-color 180ms, box-shadow 180ms, transform 180ms var(--oys-ease); }
.product-card:hover { border-color: #c2bff4; box-shadow: 0 8px 22px #6457bb12; }
.product-image,.product-placeholder { border-radius: 11px; background: #f4f5fb; }
.product-placeholder { color: #a8abd2; }
.product-brand { color: #847bae; font-size: 9px; font-weight: 750; letter-spacing: .5px; }
.product-card h4 { font-size: 13px; font-weight: 650; color: #39445b; line-height: 1.6; }
.product-price { color: #5549c4; font-weight: 800; font-size: 14px; letter-spacing: -.3px; }
.product-meta { color: #9aa3b3; font-size: 10px; }
.wholesale { color: #b38a40; }
.stock-badge { border-radius: 6px; padding: 3px 7px; font-size: 9px; font-weight: 650; background: #f0fcf5f2; border-color: #d6edde; color: #298775; }
.product-buttons .btn { box-shadow: none; }
.pos-tools .btn { font-size: 11px; }
.spec-btn { color: #9b94ad; background: #f5f4fb; border-radius: 5px; }
.pos-products .product-card h4 { font-size: 12px; line-height: 1.55; }
.view-toggle { border-radius: 11px; border-color: #e4e6f2; }
.view-toggle button { padding: 8px; }
.view-toggle button.active { background: var(--oys-gradient); box-shadow: 0 2px 5px #5c67f224; }
.cart { border-radius: 19px; border-color: #e2e4f1; box-shadow: 0 8px 30px #4d48810a; }
.cart-header { background: var(--oys-gradient); padding: 14px 16px; font-size: 13px; font-weight: 750; }
.cart-header>.icon { background: #ffffff20; padding: 5px; width: 28px; height: 28px; border-radius: 8px; }
.cart-items { background: #f8f9fe; }
.cart-empty { color: #a4aabe; font-size: 10px; }
.cart-empty>.icon { color: #aaa2df; background: #eeedfb; }
.cart-empty h4 { color: #68738c; font-size: 13px; font-weight: 750; }
.cart-controls { background: #fafaff; }
.cart-controls button { color: #7f81a7; }
.cart-row { border-color: #e9eaf5; border-radius: 12px; box-shadow: 0 2px 5px #33415503; }
.cart-row-title strong { font-weight: 650; }
.cart-row-bottom .money { color: #6051cd; font-weight: 750; }
.qty { border-color: #e6e7f2; border-radius: 8px; }
.qty button { color: #8f87bd; background: #f6f5ff; }
.qty input { box-shadow: none; }
.customer-box { background: #f9f9fe; border-color: #eaebf4; border-radius: 13px; }
.customer-box label { color: #9794b0; font-size: 9px; }
.bill { background: linear-gradient(115deg,#f4f3ff,#f9f9ff); border-color: #e5e2fb; border-radius: 13px; padding: 14px 12px; }
.bill label { color: #8a82ad; font-size: 10px; font-weight: 750; }
.bill strong { color: #5b50ca; font-size: 26px; font-weight: 800; letter-spacing: -.8px; }
.cart-details { color: #9a96ae; font-size: 10px; }
.pay-btn { height: 45px; letter-spacing: .1px; }
.variant-choice { border-radius: 13px; }
.variant-choice:hover { background: #f7f5ff; border-color: #c7bff8; }

/* Login and demo account selector. */
.login { grid-template-columns: minmax(345px,.88fr) minmax(0,1.32fr); gap: 24px; padding: 24px; }
.login-left { padding: clamp(28px,3.7vw,58px); border: 1px solid #ffffffe8; border-radius: 24px;
  background: #ffffffea; box-shadow: 0 15px 40px #414a7a08; }
.login-brand { margin-bottom: 28px; }
.login-brand img { width: 53px; height: 53px; border-radius: 16px; box-shadow: 0 7px 20px #635ae32a; }
.login-brand h1 { font-size: 29px; letter-spacing: -1px; font-weight: 800; color: #1c2d51; }
.login-brand p { color: #9aa2b2; font-size: 10px; }
.login-form label { color: #747d96; font-size: 10px; letter-spacing: .8px; font-weight: 750; }
.login-form input { height: 46px; background: #fcfcff; border-color: #e5e7f2; border-radius: 12px; box-shadow: none; }
.login-form input:focus { border-color: #8386ed; box-shadow: 0 0 0 4px #5c67f212; }
.login-form .submit { height: 46px; border-radius: 12px; box-shadow: 0 6px 17px #5c67f22b; }
.login-row label { font-size: 11px; font-weight: 550; letter-spacing: 0; }
.login-session { max-width: 100%; border-radius: 10px; background: #f8f9fc; border-color: #eef0f6; padding: 12px; font-size: 10px; color: #7f889c; }
.login-session .icon { color: #7793b7; width: 15px; height: 15px; }
.demo-title { font-size: 9px; letter-spacing: 1px; font-weight: 700; color: #abb0bf; margin-top: 22px; }
.demo-accounts { gap: 9px; }
.demo-accounts button { border: 1px solid #e8e7f5; background: linear-gradient(145deg,#fcfbff,#f8f7ff); border-radius: 13px; padding: 12px 5px; box-shadow: none; }
.demo-accounts button>.icon { display: block; margin: 0 auto 8px; padding: 6px; width: 33px; height: 33px; background: #edeaff; color: #8a72d9; border-radius: 10px; }
.demo-accounts button:nth-child(2)>.icon { background: #e9f2ff; color: #5b92e4; }
.demo-accounts button:nth-child(3)>.icon { background: #e9f8f2; color: #48ac92; }
.demo-accounts button b { font-size: 11px; font-weight: 700; color: #70728f; }
.demo-accounts button small { color: #888598; font-size: 9px; }
.demo-accounts button:hover { background: #f0edff; border-color: #cac2f1; box-shadow: 0 5px 15px #7464bb10; }
.login-info { font-size: 10px; border-radius: 12px; border-color: #ecedf5; background: #fcfcff; color: #78738e; }
.login-foot { font: 9px "Plus Jakarta Sans",sans-serif; color: #afb4c2; }
.login-right { background: radial-gradient(ellipse at 92% 3%,#dfd9ff,transparent 53%),
    radial-gradient(ellipse at 20% 100%,#fff5dc90,transparent 45%),linear-gradient(135deg,#eeecfc,#e6e8f8);
  color: #28345c; border-radius: 24px; border: 1px solid #ffffff91; padding: 70px 35px 66px; }
.login-right::before { opacity: .2; background: radial-gradient(circle at 10% 8%,white,transparent 45%); }
.login-right h2 { color: #30365d; font-size: clamp(25px,2.65vw,37px); letter-spacing: -1.2px; line-height: 1.3; max-width: 650px; font-weight: 800; }
.login-right>p { color: #747b94; font-size: 11px; line-height: 1.85; max-width: 560px; margin-top: 15px; }
.login-pill { color: #7e74b0; background: #ffffff85; border: 1px solid #ffffffb0; font-size: 9px; font-weight: 650; top: 25px; right: 28px; padding: 6px 11px; }
.feature-grid { gap: 12px; margin-top: 25px; }
.feature { min-height: 143px; border-radius: 16px; padding: 16px; background: #ffffffdf; border: 1px solid #ffffff; box-shadow: 0 5px 15px #44477b05; }
.feature-top { color: #bec0d3; font: 9px "Plus Jakarta Sans",sans-serif; font-weight: 700; margin-bottom: 12px; align-items: center; }
.feature-top>.icon { box-sizing: content-box; padding: 7px; width: 17px; height: 17px; color: #8b77ce; background: #f3efff; border-radius: 10px; }
.feature:nth-child(2) .icon,.feature:nth-child(5) .icon { color: #6b9ad7; background: #edf5ff; }
.feature:nth-child(3) .icon,.feature:nth-child(6) .icon { color: #5baf93; background: #edf9f3; }
.feature:nth-child(4) .icon { color: #cca057; background: #fff7e8; }
.feature h3 { font-size: 11px; font-weight: 750; color: #59627c; letter-spacing: -.1px; }
.feature p { color: #7c8197; font-size: 10px; line-height: 1.65; }
.feature small { color: #84779f; font: 8px "Plus Jakarta Sans",sans-serif; font-weight: 600; margin-top: 9px; }
.login-right-footer { border-color: #d9d8ec; color: #aca9bf; font: 8px "Plus Jakarta Sans",sans-serif; left: 35px; right: 35px; bottom: 25px; }

dialog { border-color: #e8e6f5; border-radius: 20px; box-shadow: 0 25px 80px #25234833; }
dialog::backdrop { background: #25234470; backdrop-filter: blur(4px); }
dialog[open] { animation: oys-dialog-in 180ms var(--oys-ease); }
.modal-head { background: linear-gradient(120deg,#f7f6ff,#eceafb); color: #62598b; border-bottom: 1px solid #e5e1f4; padding: 19px 23px; }
.modal-head h3 { font-size: 15px; font-weight: 750; }
.modal-head .btn { background: #ffffffa6; color: #8f83b3; border: 1px solid #e9e3f5; }
.success-center .amount { color: #5a4bd1; }
#toast { background: #383553; border: 1px solid #ffffff1a; font-size: 12px; box-shadow: 0 10px 35px #30304b26; }
#toast.error { background: #a63c56; }
.receipt-preview { font-family: ui-monospace,Consolas,monospace; }
@keyframes oys-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (hover:hover) and (pointer:fine) {
  .btn:not(:disabled):hover,.demo-accounts button:hover { transform: translateY(-1px); }
  .btn:not(:disabled):active,.demo-accounts button:active { transform: translateY(0) scale(.98); }
  .nav-link:hover>.icon { transform: translateY(-1px); }
  .product-card:hover { transform: translateY(-2px); }
}
@media (min-width:1500px) { .login-left { padding: 60px; }.login-right { padding-left: 50px; padding-right: 50px; }.feature { padding: 20px; min-height: 160px; }.feature h3 { font-size: 13px; }.feature p { font-size: 11px; } }
@media (max-width:1190px) {
  :root { --sidebar: 235px; }
  .collapsed { --sidebar: 78px; }
  .dashboard-head h2 { font-size: 23px; }
  .login { gap: 18px; padding: 18px; grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr); }
  .login-left { padding: 30px; }.login-right { padding: 70px 24px 65px; }
  .login-right h2 { font-size: 27px; }.feature { padding: 12px; }
  .login-right-footer { left: 24px; right: 24px; }
}
@media (max-width:960px) {
  :root { --sidebar: 220px; }
  .collapsed { --sidebar: 78px; }
  .nav-link { font-size: 10.5px; gap: 8px; padding: 6px; }
  .sidebar nav { padding-inline: 9px; }.sidebar-brand { padding: 15px; }
  .nav-link>.icon { width: 29px; height: 29px; flex-basis: 29px; }
  .dashboard-stats .stat-value { font-size: 25px; }.dashboard-stats .gradient .stat-value { font-size: 30px; }
  .pos-tools .btn { padding: 8px; }.pos-products .product-card { padding: 10px; }
  .login { gap: 14px; padding: 14px; grid-template-columns: 330px minmax(0,1fr); }
  .login-right h2 { font-size: 25px; }.feature h3 { font-size: 10px; }.feature p { font-size: 9px; }
}
@media (max-width:760px) {
  :root,.collapsed { --sidebar: 0px; }
  .sidebar,.collapsed .sidebar { width: 250px; }
  .sidebar-brand,.collapsed .sidebar-brand { padding: 14px 20px; }
  .nav-link,.collapsed .nav-link { padding: 7px 9px; font-size: 11.5px; gap: 10px; }
  .nav-link>.icon,.collapsed .nav-link>.icon { width: 30px; height: 30px; flex-basis: 30px; }
  .sidebar nav { padding-inline: 12px; }.collapsed .nav-group { margin-bottom: 19px; }
  .topbar { height: 64px; }.sidebar-brand { height: 64px; }
  .main { padding-top: 85px; }.main.pos-main { padding-top: 80px; }
  .page-head.boxed,.panel-pad { padding: 18px; }
  .dashboard-head h2 { font-size: 23px; }.dashboard-tools { width: 100%; gap: 7px; }
  .dashboard-stats .stat { min-height: 136px; }.dashboard-stats .stat-value { font-size: 27px; }
  .dashboard-stats .gradient .stat-value { font-size: 32px; }
  .chart-panel { padding: 19px; }.stat { padding: 18px; }.stat-label { font-size: 9px; }
  .pos-products .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pos-products .product-card { min-height: 235px; padding: 11px; }
  .pos-products .product-image,.pos-products .product-placeholder { height: 115px; }
  .pos-products .product-card h4 { font-size: 12px; }
  .cart-empty h4 { font-size: 14px; }.customer-box label { font-size: 10px; }
  .cart-row-title strong { font-size: 13px; }.cart-details { font-size: 11px; }
  .payment-row input,.payment-row select { font-size: 12px; }
  .login { display: block; padding: 20px; min-height: 100vh; }
  .login-left { min-height: calc(100vh - 40px); width: 100%; max-width: 470px; padding: 32px; }
  .login-brand img { width: 55px; height: 55px; }.login-brand h1 { font-size: 31px; }
  .login-brand p { font-size: 10px; }.login-form input { height: 47px; }
  .demo-accounts button { padding: 13px 4px; }
  .btn { min-height: 39px; }.btn.small { min-height: 33px; }
  .pos-catalog .pagination { flex-wrap: wrap; gap: 8px; }.pagination .actions { gap: 8px; }
}
@media (max-width:400px) {
  .login { padding: 12px; }.login-left { padding: 27px 22px; min-height: calc(100vh - 24px); }
  .login-brand p { font-size: 9px; }.login-info { font-size: 9px; }
  .demo-accounts { gap: 6px; }.demo-accounts button b { font-size: 10px; }.demo-accounts button small { font-size: 8px; }
  .date-filter input { width: 116px; }.dashboard-tools { padding: 7px; }
  .dashboard-tools .btn { font-size: 10px; }.stat { padding: 15px; }
  .stat-icon { padding: 9px; }.pos-products .product-card { padding: 9px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: white; }.receipt-preview { font-family: ui-monospace,Consolas,monospace; }
  .panel,.product-card { box-shadow: none; }.data-table th { background: #f5f5f5; }
}