/* OysKasir comfort theme — final visual layer for every screen. */
:root {
  --teal: #696fce;
  --teal-dark: #575daf;
  --ink: #293244;
  --muted: #7b8392;
  --line: #e1e2e9;
  --bg: #f1f2f5;
  --oys-comfort-bg: #f1f2f5;
  --oys-comfort-surface: rgba(251, 251, 253, .92);
  --oys-comfort-surface-solid: #fbfbfd;
  --oys-comfort-soft: #f4f4f8;
  --oys-comfort-line: rgba(89, 84, 111, .12);
  --oys-comfort-purple: #696fce;
  --oys-comfort-purple-dark: #575daf;
  --oys-comfort-purple-soft: #eeeff9;
  --oys-comfort-shadow: 0 12px 34px rgba(45, 43, 59, .07), inset 0 1px 0 rgba(255, 255, 255, .82);
  --oys-comfort-shadow-hover: 0 17px 40px rgba(45, 43, 59, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  --oys-comfort-gradient: linear-gradient(135deg, #646bc7 0%, #716bc9 54%, #7d70cf 100%);
  --oys-ease: cubic-bezier(.2, .7, .2, 1);
  --watzap-indigo: #696fce;
  --watzap-purple: #7d70cf;
  --watzap-ink: #293244;
  --watzap-muted: #7b8392;
  --watzap-gradient: var(--oys-comfort-gradient);
  --wz-gradient-rich: var(--oys-comfort-gradient);
  color-scheme: light;
}

html { background: var(--oys-comfort-bg); }

body,
.install-body {
  color: var(--oys-comfort-ink, #293244);
  background:
    radial-gradient(circle at 8% 4%, rgba(243, 240, 225, .48), transparent 34rem),
    radial-gradient(circle at 96% 18%, rgba(221, 222, 246, .58), transparent 44rem),
    linear-gradient(145deg, #f4f5f4 0%, #f1f2f5 48%, #eeedf7 100%);
  background-attachment: fixed;
  background-size: auto;
  animation: none;
}

body,
button,
input,
select,
textarea { letter-spacing: -.01em; }

h1,
h2,
h3,
h4,
.panel-title h3,
.page-head h2,
.branch-overview-head h3 {
  color: #293244;
  text-wrap: balance;
}

.sub,
.muted,
.stat-foot,
.form-section > p,
.data-table td p,
.recent-row p,
.cart-details { color: #7d8594; }

::selection { color: #35305f; background: #ddd9f1; }
* { scrollbar-color: #aaa4c8 transparent; }
::-webkit-scrollbar-thumb { background: #aaa4c8; }

/* Shared surfaces across dashboard, catalog, reports, forms and settings. */
.panel,
.toolbar,
.page-head.boxed,
.table-wrap,
.branch-overview,
.branch-performance-table,
.product-card,
.cart,
.account-menu,
dialog,
.install-panel,
.login-left {
  border-color: var(--oys-comfort-line);
  background: var(--oys-comfort-surface);
  box-shadow: var(--oys-comfort-shadow);
  backdrop-filter: blur(18px) saturate(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
}

.panel,
.page-head.boxed,
.table-wrap,
.branch-overview,
.cart { border-radius: 21px; }

.panel-title {
  border-bottom-color: var(--oys-comfort-line);
  background: rgba(250, 249, 246, .72);
}

.page-head.boxed {
  padding: 22px 24px;
}

.page-head.boxed::before,
.chart-panel h3::before {
  background: linear-gradient(180deg, #6e67cf, #8a72d8);
}

.toolbar {
  border-radius: 17px;
  background: rgba(249, 248, 245, .90);
}

/* Calm controls with clear focus and less glare. */
input,
select,
textarea {
  color: #30394b;
  border-color: rgba(92, 87, 113, .15);
  border-radius: 12px;
  background: rgba(247, 247, 250, .96);
  box-shadow: inset 0 1px 2px rgba(48, 45, 61, .025), 0 1px 0 rgba(255, 255, 255, .72);
  font-weight: 550;
  transition: border-color 180ms var(--oys-ease), background-color 180ms var(--oys-ease), box-shadow 180ms var(--oys-ease);
}

input::placeholder,
textarea::placeholder { color: #9a9fab; font-weight: 500; }

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(107, 101, 207, .25);
  background: #fafafd;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(107, 101, 207, .55);
  background: #fcfcfe;
  box-shadow: 0 0 0 4px rgba(107, 101, 207, .10), inset 0 1px 0 #fff;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly] {
  color: #7e8490;
  background: #eeeef3;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #30394b;
  caret-color: #30394b;
  -webkit-box-shadow: 0 0 0 1000px #f5f5f9 inset, 0 0 0 4px rgba(105, 111, 206, .08);
  transition: background-color 9999s ease-out 0s;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(107, 101, 207, .26);
  outline-offset: 3px;
}

.btn {
  color: #465064;
  border-color: rgba(91, 86, 111, .14);
  border-radius: 12px;
  background: #fafafd;
  box-shadow: 0 4px 12px rgba(45, 43, 59, .04), inset 0 1px 0 rgba(255, 255, 255, .82);
  transition: color 190ms var(--oys-ease), background-color 190ms var(--oys-ease), border-color 190ms var(--oys-ease), box-shadow 190ms var(--oys-ease), transform 190ms var(--oys-ease);
}

.btn:hover {
  color: #5953b8;
  border-color: rgba(107, 101, 207, .23);
  background: #f1f1f9;
  box-shadow: 0 8px 18px rgba(70, 63, 117, .08), inset 0 1px 0 #fff;
}

.btn.primary,
.login-form .submit,
.pay-btn {
  color: #fff;
  border-color: transparent;
  border-radius: 13px;
  background: var(--oys-comfort-gradient);
  box-shadow: 0 9px 21px rgba(91, 82, 177, .22), inset 0 1px 0 rgba(255, 255, 255, .17);
  font-weight: 750;
}

.btn.primary:hover,
.login-form .submit:hover,
.pay-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #585fb8, #6f63bf);
  box-shadow: 0 12px 25px rgba(83, 73, 164, .27), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}

.btn.soft { color: #5c61b5; border-color: #dcddef; background: #f0f1f9; }
.btn.green { color: #237963; border-color: #d4e7df; background: #eff7f3; box-shadow: none; }
.btn.amber { color: #8c6b2f; border-color: #eadfc8; background: #faf5e9; box-shadow: none; }
.btn.danger { color: #a54f5b; border-color: #ead7da; background: #faf0f1; box-shadow: none; }
.btn.text { color: #5c61b5; background: transparent; box-shadow: none; }

.badge { color: #5f59b6; border-color: #dedaf0; background: #f1eff8; }
.badge.green { color: #287863; border-color: #d3e7df; background: #edf6f2; }
.badge.amber { color: #8b6a2e; border-color: #eadfc5; background: #faf4e7; }
.badge.red { color: #a5515d; border-color: #ead7db; background: #faeff1; }
.badge.gray { color: #707887; border-color: #e0dedb; background: #f1efec; }

/* Navigation uses the same warm neutral material. */
.sidebar {
  border-color: rgba(89, 84, 111, .10);
  background: linear-gradient(180deg, rgba(251, 251, 253, .985), rgba(246, 246, 250, .97));
  box-shadow: 7px 0 30px rgba(44, 42, 56, .055), inset -1px 0 0 rgba(255, 255, 255, .72);
}

.sidebar-brand,
.topbar {
  background: rgba(250, 250, 252, .92);
}

.topbar {
  border-color: rgba(89, 84, 111, .10);
  box-shadow: 0 10px 28px rgba(44, 42, 56, .055), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.topbar .menu-btn,
.topbar .branch-select,
.topbar .module,
.account-btn {
  border-color: rgba(89, 84, 111, .11);
  background: rgba(247, 247, 250, .92);
  box-shadow: 0 4px 13px rgba(44, 42, 56, .035), inset 0 1px 0 rgba(255, 255, 255, .76);
}

.nav-link {
  color: #666d7b;
  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);
}

.nav-link:hover {
  color: #5960b5;
  background: rgba(239, 239, 248, .78);
  transform: translateX(1px);
}

.nav-link.active {
  color: #565db3;
  border-color: rgba(107, 101, 207, .14);
  background: linear-gradient(135deg, #f0f1fa, #e8e9f6);
  box-shadow: 0 8px 20px rgba(79, 71, 132, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.sidebar-footer {
  border-color: rgba(101, 94, 154, .13);
  background: linear-gradient(135deg, #f5f5fa, #ececf7 58%, #eaf1f6);
  box-shadow: 0 9px 24px rgba(69, 63, 104, .09), inset 0 1px 0 rgba(255, 255, 255, .86);
}

/* Dashboard keeps identity without a bright, saturated banner. */
.dashboard-head,
.main-dashboard-head {
  border-color: rgba(255, 255, 255, .22);
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 255, 255, .14), transparent 15rem),
    linear-gradient(118deg, #5f67bc 0%, #6b66c2 50%, #786bc7 100%);
  box-shadow: 0 16px 38px rgba(83, 75, 151, .17), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.dashboard-head h2,
.main-dashboard-head h2 { color: #fff; }
.dashboard-head p,
.main-dashboard-head .dashboard-heading-copy p { color: rgba(255, 255, 255, .76); }

.dashboard-tools {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.dashboard-stats .stat,
.stat {
  border-color: var(--oys-comfort-line);
  background: var(--oys-comfort-surface);
  box-shadow: var(--oys-comfort-shadow);
}

.gradient,
.dashboard-stats .stat.gradient {
  border-color: rgba(255, 255, 255, .18);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .12), transparent 10rem),
    linear-gradient(125deg, #5f67bc, #7469c6);
  box-shadow: 0 15px 34px rgba(83, 75, 151, .18), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.dashboard-stats .stat-value,
.stat-value { color: #293244; }
.dashboard-stats .gradient .stat-value,
.gradient .stat-value { color: #fff; }
.dashboard-stats .stat-label,
.stat-label { color: #737c8c; }
.dashboard-stats .gradient .stat-label,
.gradient .stat-label { color: rgba(255, 255, 255, .76); }

.branch-overview { background: rgba(248, 248, 251, .84); }
.branch-performance-table { background: rgba(251, 251, 253, .92); }

/* Tables and forms stay readable during long sessions. */
.data-table { color: #3f485a; }
.data-table th {
  color: #6f7787;
  border-bottom-color: rgba(89, 84, 111, .11);
  background: #f1f2f6;
}

.data-table td { border-bottom-color: rgba(89, 84, 111, .085); }
.data-table tbody tr { transition: background-color 170ms ease; }
.data-table tbody tr:hover { background: #f0f1f8; }

.form-grid label,
.field-label,
.file-upload-title { color: #535d6f; }
.form-section > p { color: #828a98; }

.form-actions,
.modal-foot {
  border-color: var(--oys-comfort-line);
  background: #f3f3f7;
}

.variant-editor {
  border-color: var(--oys-comfort-line);
  background: #f6f6f9;
}

.file-upload-control {
  border-color: rgba(92, 87, 113, .15);
  background: #f6f6f9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.file-upload-button { background: #ececf7; color: #5c61b5; }

.note,
.wholesale-rule {
  color: #625d83;
  border-color: #dfdbea;
  background: #f2f0f7;
}

.notice-amber {
  color: #80652f;
  border-color: #e8ddc4;
  background: #faf5e9;
}

.receipt-preview {
  color: #303746;
  border: 1px solid rgba(89, 84, 111, .10);
  background: #fafafd;
  box-shadow: 0 12px 28px rgba(44, 42, 56, .08);
}

.pagination { color: #747c8b; }
.pagination select { background-color: #f5f5f8; }

/* Dialogs, messages and login. */
dialog {
  color: #30394a;
  border-radius: 20px;
  background: #fafafd;
  box-shadow: 0 24px 70px rgba(37, 34, 52, .22);
}

dialog::backdrop {
  background: rgba(36, 34, 47, .42);
  backdrop-filter: blur(5px);
}

.modal-head {
  border-bottom-color: rgba(255, 255, 255, .14);
  background: var(--oys-comfort-gradient);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.modal-head h3 { color: #fff; }
.modal-body { background: #fafafd; }

.account-menu,
.account-menu::before { background: #fafafd; }
.account-menu { border-color: rgba(89, 84, 111, .13); }
.account-menu::before { border-color: rgba(89, 84, 111, .13); }
.account-menu-header { border-bottom-color: rgba(89, 84, 111, .10); }
.account-menu .account-menu-actions .btn { background: transparent; }

.error-box,
.install-message {
  color: #914c57;
  border-color: #ead3d6;
  background: #f9eeee;
}

.install-message.success {
  color: #2f725e;
  border-color: #d1e5dc;
  background: #edf5f1;
}

.success-icon { color: #2c8268; background: #eaf4ef; }

.login {
  background: transparent;
}

.login-left {
  border-color: rgba(255, 255, 255, .66);
  background: rgba(250, 250, 252, .91);
  box-shadow: 0 24px 58px rgba(48, 44, 64, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: oys-comfort-enter 520ms var(--oys-ease) both;
}

.login-form input,
.login-session,
.demo-accounts button,
.login-info {
  border-color: rgba(89, 84, 111, .12);
  background: #f5f5f8;
  box-shadow: 0 5px 16px rgba(45, 43, 59, .035), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.demo-accounts button:hover,
.login-info:hover { border-color: rgba(105, 111, 206, .20); background: #eeeff8; }
.login-session { color: #697283; }
.login-foot { color: #858b96; }

.install-panel { background: rgba(250, 250, 252, .94); }
.install-help pre { color: #4b5565; background: #eeeef3; }

/* Keep the POS layer consistent with the rest of the application. */
.main.pos-main {
  background:
    radial-gradient(circle at 78% 2%, rgba(219, 220, 244, .52), transparent 35%),
    linear-gradient(145deg, #f4f5f4 0%, #f1f2f5 52%, #eeedf7 100%);
}

.pos-catalog,
.pos-tools,
.pos-search {
  border-color: rgba(89, 84, 111, .10);
  background: rgba(248, 248, 251, .79);
  box-shadow: 0 8px 22px rgba(44, 42, 56, .045), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.pos-products .marketplace-card,
.marketplace-content,
.cart-row,
.cart-items,
.cart-controls,
.cart-bottom,
.customer-box {
  border-color: rgba(89, 84, 111, .10);
  background: #fafafd;
}

.pos-products .marketplace-card {
  box-shadow: 0 7px 20px rgba(44, 42, 56, .055), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.cart-header,
.view-toggle button.active,
.pos-products .marketplace-promo,
.pos-products .marketplace-card .marketplace-add {
  background: var(--oys-comfort-gradient);
}

.pos-products .marketplace-card .product-price,
.bill strong { color: #5e58bd; }

.bill { border-color: #ddd8eb; background: linear-gradient(125deg, #f1eef8, #faf8f3); }

@keyframes oys-comfort-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .panel:hover,
  .page-head.boxed:hover,
  .table-wrap:hover,
  .dashboard-stats .stat:hover,
  .pos-products .marketplace-card:not(.out-of-stock):hover {
    border-color: rgba(107, 101, 207, .17);
    box-shadow: var(--oys-comfort-shadow-hover);
    transform: translateY(-1px);
  }

  .gradient:hover,
  .dashboard-stats .stat.gradient:hover {
    box-shadow: 0 18px 40px rgba(83, 75, 151, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
  }
}

@media (max-width: 760px) {
  body,
  .install-body { background-attachment: scroll; }
  .sidebar { background: rgba(250, 250, 252, .985); }
  .topbar { background: rgba(250, 250, 252, .95); }
  .panel,
  .page-head.boxed,
  .table-wrap,
  .branch-overview,
  .cart { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body,
  .install-body { background: #fff; }
  .panel,
  .table-wrap,
  .receipt-preview { background: #fff; box-shadow: none; backdrop-filter: none; }
}