/*
 * Sambethel Superstore — Client Presentation UI Layer
 * Applied after each module stylesheet so the whole application shares one
 * accessible type scale, stronger contrast and consistent interaction design.
 */

:root {
  --ui-brand: #0b8a42;
  --ui-brand-strong: #06652f;
  --ui-brand-deep: #063c25;
  --ui-accent: #f7941d;
  --ui-accent-strong: #db7308;
  --ui-ink: #14231b;
  --ui-text: #24342b;
  --ui-muted: #5d6d64;
  --ui-subtle: #75847b;
  --ui-border: #dce5df;
  --ui-border-strong: #c7d4cc;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7faf8;
  --ui-canvas: #f2f6f3;
  --ui-success-soft: #e8f7ee;
  --ui-warning-soft: #fff3e3;
  --ui-danger: #c92a3e;
  --ui-danger-soft: #fff0f2;
  --ui-info: #1769aa;
  --ui-shadow-xs: 0 2px 7px rgba(8, 48, 27, 0.055);
  --ui-shadow-sm: 0 8px 24px rgba(8, 48, 27, 0.075);
  --ui-shadow-md: 0 18px 48px rgba(8, 48, 27, 0.105);
  --ui-shadow-lg: 0 30px 80px rgba(8, 48, 27, 0.17);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-radius-xl: 26px;
  --ui-font: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media screen {
  html {
    min-width: 320px;
    scroll-behavior: smooth;
    background: var(--ui-canvas);
    font-family: var(--ui-font);
    font-size: 16px;
    color: var(--ui-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body,
  button,
  input,
  select,
  textarea,
  table {
    font-family: var(--ui-font) !important;
  }

  body {
    color: var(--ui-text);
    line-height: 1.55;
    letter-spacing: -0.006em;
  }

  ::selection {
    color: #fff;
    background: var(--ui-brand);
  }

  * {
    scrollbar-color: #b6c9bc transparent;
    scrollbar-width: thin;
  }

  *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b6c9bc;
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #8faa98;
    background-clip: padding-box;
  }

  a,
  button,
  input,
  select,
  textarea,
  summary {
    -webkit-tap-highlight-color: transparent;
  }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(247, 148, 29, 0.38) !important;
    outline-offset: 2px !important;
  }

  :where(button, a, input, select, textarea) {
    transition:
      color var(--ui-transition),
      border-color var(--ui-transition),
      background-color var(--ui-transition),
      box-shadow var(--ui-transition),
      transform var(--ui-transition),
      opacity var(--ui-transition);
  }

  :where(h1, h2, h3, h4) {
    color: var(--ui-ink);
    font-weight: 800;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  :where(p, small, label, td, th, li) {
    text-wrap: pretty;
  }

  /* Shared application canvas */
  body:not(.page-login):not(.page-pos) {
    background:
      radial-gradient(circle at 92% -5%, rgba(247, 148, 29, 0.105), transparent 31rem),
      radial-gradient(circle at 24% 8%, rgba(11, 138, 66, 0.085), transparent 34rem),
      linear-gradient(180deg, #f8faf8 0, var(--ui-canvas) 25rem);
  }

  .dashboard-shell,
  .pos-shell {
    isolation: isolate;
  }

  .main-content {
    background: transparent !important;
  }

  .dashboard-content,
  .inventory-content,
  .accounting-content,
  .sales-history-content,
  .chat-page {
    animation: uiPageIn 420ms ease-out both;
  }

  /* Sidebar polish */
  .sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background:
      radial-gradient(circle at 18% 8%, rgba(247, 148, 29, 0.22), transparent 16rem),
      radial-gradient(circle at 95% 62%, rgba(255, 255, 255, 0.075), transparent 18rem),
      linear-gradient(180deg, #0b4f2d 0%, var(--ui-brand-deep) 54%, #042d1b 100%) !important;
    box-shadow: 18px 0 48px rgba(4, 45, 27, 0.15) !important;
  }

  .sidebar__brand {
    min-height: 100px;
    padding: 22px 20px !important;
    background: rgba(255, 255, 255, 0.025);
  }

  .sidebar__logo {
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
  }

  .sidebar__brand-copy strong {
    font-size: 1.08rem !important;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  .sidebar__brand-copy span {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
  }

  .sidebar__section-label {
    margin-top: 20px !important;
    color: rgba(255, 255, 255, 0.52) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
  }

  .sidebar__nav .nav-group__trigger,
  .sidebar__nav a.nav-link,
  .sidebar__nav .nav-group__menu > a {
    min-height: 43px;
    color: rgba(255, 255, 255, 0.79) !important;
    border: 1px solid transparent;
    border-radius: 11px !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    line-height: 1.35;
  }

  .sidebar__nav .nav-group__trigger:hover,
  .sidebar__nav a.nav-link:hover,
  .sidebar__nav .nav-group__menu > a:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.085);
    background: rgba(255, 255, 255, 0.09) !important;
    transform: translateX(3px);
  }

  .sidebar__nav .is-active,
  .sidebar__nav [aria-current="page"] {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background:
      linear-gradient(90deg, rgba(247, 148, 29, 0.24), rgba(255, 255, 255, 0.085)) !important;
    box-shadow: inset 3px 0 0 var(--ui-accent), 0 8px 22px rgba(0, 0, 0, 0.09);
  }

  .sidebar__footer {
    background: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
  }

  .sidebar__user {
    gap: 11px !important;
  }

  .sidebar__user strong {
    color: #fff;
    font-size: 0.83rem !important;
  }

  .sidebar__user span {
    color: rgba(255, 255, 255, 0.64) !important;
    font-size: 0.7rem !important;
  }

  .avatar,
  .operator-avatar {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--ui-accent), #ef7c10) !important;
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.24);
  }

  /* Top bars */
  .main-content > .topbar,
  .main-content .topbar,
  .page-pos .topbar {
    border-bottom-color: rgba(199, 212, 204, 0.88) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 7px 24px rgba(8, 48, 27, 0.055);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .topbar h1,
  .topbar h2,
  .topbar__left h1,
  .topbar__left h2 {
    color: var(--ui-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
  }

  .location-chip,
  .operator-chip,
  .walk-in-chip,
  .cart-count {
    border-color: var(--ui-border) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-xs);
  }

  .location-chip__dot,
  .chat-live-status i {
    box-shadow: 0 0 0 5px rgba(11, 138, 66, 0.12);
  }

  /* Headings and supporting copy */
  .dashboard-content h2,
  .inventory-heading h2,
  .accounting-heading h2,
  .sales-page-heading h1,
  .sale-panel-header h2,
  .checkout-header h2 {
    color: var(--ui-ink) !important;
    font-weight: 850 !important;
    letter-spacing: -0.05em !important;
  }

  .inventory-heading h2,
  .accounting-heading h2,
  .sales-page-heading h1 {
    font-size: clamp(1.75rem, 2.8vw, 2.45rem) !important;
    line-height: 1.12;
  }

  .eyebrow,
  .finder-label,
  .sidebar__section-label {
    color: var(--ui-brand) !important;
    font-size: 0.7rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.115em !important;
    text-transform: uppercase;
  }

  .sidebar .sidebar__section-label {
    color: rgba(255, 255, 255, 0.52) !important;
  }

  .inventory-heading p:last-child,
  .accounting-heading p,
  .sales-page-heading p,
  .panel__header p,
  .inventory-panel__heading p,
  .accounting-panel__heading p,
  .history-panel-heading p,
  .sale-panel-header p,
  .checkout-header p,
  .finder-heading small,
  .brand-block p {
    color: var(--ui-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  /* Cards and panels */
  .summary-card,
  .inventory-summary-card,
  .accounting-summary-card,
  .history-summary-card,
  .panel,
  .inventory-panel,
  .accounting-panel,
  .history-panel,
  .history-table-panel,
  .history-filter-panel,
  .sale-panel,
  .checkout-panel,
  .label-builder-panel,
  .label-settings-panel,
  .label-preview-panel,
  .chat-layout,
  .modal-card,
  .inventory-modal__dialog,
  .accounting-modal__card,
  .history-modal-card,
  .history-sale-modal-card,
  .history-edit-modal-card,
  .history-void-modal-card {
    border-color: var(--ui-border) !important;
    background-color: rgba(255, 255, 255, 0.97) !important;
    box-shadow: var(--ui-shadow-sm) !important;
  }

  .summary-card,
  .inventory-summary-card,
  .accounting-summary-card,
  .history-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    border-radius: var(--ui-radius-lg) !important;
  }

  .summary-card::after,
  .inventory-summary-card::after,
  .accounting-summary-card::after,
  .history-summary-card::after {
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 105px;
    height: 105px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(11, 138, 66, 0.1), transparent 69%);
    content: "";
    pointer-events: none;
  }

  .summary-card:hover,
  .inventory-summary-card:hover,
  .accounting-summary-card:hover,
  .history-summary-card:hover {
    border-color: rgba(11, 138, 66, 0.25) !important;
    box-shadow: var(--ui-shadow-md) !important;
    transform: translateY(-3px);
  }

  .summary-card strong,
  .inventory-summary-card strong,
  .accounting-summary-card strong,
  .history-summary-card strong {
    color: var(--ui-ink) !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
    font-weight: 850 !important;
    letter-spacing: -0.045em;
  }

  .summary-card span,
  .inventory-summary-card span,
  .accounting-summary-card span,
  .history-summary-card span {
    color: var(--ui-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
  }

  .summary-card small,
  .inventory-summary-card small,
  .accounting-summary-card small,
  .history-summary-card small {
    color: var(--ui-subtle) !important;
    font-size: 0.75rem !important;
  }

  .panel,
  .inventory-panel,
  .accounting-panel,
  .history-panel,
  .history-table-panel,
  .history-filter-panel,
  .label-builder-panel,
  .label-settings-panel,
  .label-preview-panel {
    border-radius: var(--ui-radius-lg) !important;
  }

  .panel__header,
  .inventory-panel__heading,
  .accounting-panel__heading,
  .history-panel-heading {
    border-bottom-color: #edf2ef !important;
    background: linear-gradient(180deg, #fff, #fbfdfb);
  }

  .panel__header h3,
  .inventory-panel__heading h3,
  .accounting-panel__heading h3,
  .history-panel-heading h2,
  .history-panel-heading h3 {
    color: var(--ui-ink) !important;
    font-size: 1.08rem !important;
    font-weight: 820 !important;
  }

  /* Buttons */
  .inventory-button,
  .accounting-button,
  .history-button,
  .primary-button,
  .secondary-button,
  .refresh-button,
  .dashboard-link,
  .logout-button,
  .mobile-menu-button,
  .icon-button,
  .chat-icon-button,
  .inventory-page-button,
  .history-page-button,
  .notification-button {
    min-height: 42px;
    border-radius: 11px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.008em;
  }

  .inventory-button--primary,
  .accounting-button.primary,
  .history-button--primary,
  .primary-button {
    border-color: transparent !important;
    background: linear-gradient(135deg, #0c9348 0%, var(--ui-brand-strong) 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(11, 138, 66, 0.22) !important;
  }

  .inventory-button--primary:hover:not(:disabled),
  .accounting-button.primary:hover:not(:disabled),
  .history-button--primary:hover:not(:disabled),
  .primary-button:hover:not(:disabled) {
    box-shadow: 0 14px 30px rgba(11, 138, 66, 0.3) !important;
    transform: translateY(-2px);
  }

  .inventory-button--secondary,
  .accounting-button:not(.primary),
  .history-button--secondary,
  .secondary-button,
  .dashboard-link,
  .refresh-button {
    border-color: var(--ui-border-strong) !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-xs);
  }

  .inventory-button--secondary:hover:not(:disabled),
  .accounting-button:not(.primary):hover:not(:disabled),
  .history-button--secondary:hover:not(:disabled),
  .secondary-button:hover:not(:disabled),
  .dashboard-link:hover,
  .refresh-button:hover:not(:disabled) {
    border-color: rgba(11, 138, 66, 0.34) !important;
    background: var(--ui-success-soft) !important;
    color: var(--ui-brand-strong) !important;
    box-shadow: var(--ui-shadow-sm);
    transform: translateY(-1px);
  }

  :where(button, .inventory-button, .accounting-button, .history-button):active:not(:disabled) {
    transform: translateY(0) scale(0.975) !important;
  }

  :where(button, input, select, textarea):disabled {
    cursor: not-allowed !important;
    opacity: 0.56 !important;
  }

  .logout-button:hover {
    border-color: rgba(201, 42, 62, 0.35) !important;
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
  }

  /* Form controls */
  .inventory-field,
  .accounting-field,
  .history-field,
  .payment-field,
  .location-control,
  .chat-search {
    color: var(--ui-text) !important;
    font-size: 0.76rem !important;
    font-weight: 780 !important;
  }

  .inventory-field > span,
  .accounting-field > span,
  .history-field > span,
  .payment-field > span,
  .location-control > span,
  .chat-search > span {
    color: #435249 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }

  :where(
    .inventory-field,
    .accounting-field,
    .history-field,
    .payment-field,
    .location-control,
    .chat-search,
    .search-box,
    .product-search-box
  ) :where(input, select, textarea),
  .label-lines-table input,
  .label-option input,
  .chat-composer textarea {
    min-height: 44px !important;
    border-color: var(--ui-border-strong) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
    font-size: 0.86rem !important;
    font-weight: 620 !important;
    box-shadow: inset 0 1px 2px rgba(8, 48, 27, 0.025);
  }

  :where(
    .inventory-field,
    .accounting-field,
    .history-field,
    .payment-field,
    .location-control,
    .chat-search,
    .search-box,
    .product-search-box
  ) textarea,
  .chat-composer textarea {
    min-height: 94px !important;
    line-height: 1.55;
    resize: vertical;
  }

  :where(input, select, textarea)::placeholder {
    color: #88968e !important;
    opacity: 1;
  }

  :where(input, select, textarea):hover:not(:disabled) {
    border-color: #aebfb4 !important;
  }

  :where(input, select, textarea):focus {
    border-color: rgba(11, 138, 66, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(11, 138, 66, 0.1) !important;
    outline: none !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ui-brand);
  }

  .search-box,
  .product-search-box,
  .inventory-search-wrap {
    border-color: var(--ui-border-strong) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow-xs);
  }

  .search-box:focus-within,
  .product-search-box:focus-within,
  .inventory-search-wrap:focus-within {
    border-color: rgba(11, 138, 66, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(11, 138, 66, 0.1), var(--ui-shadow-sm) !important;
  }

  /* Tables */
  .ui-table-scroll,
  .inventory-table-wrap,
  .accounting-table-wrap,
  .history-table-wrap {
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .inventory-table,
  .accounting-table,
  .history-table,
  .label-lines-table,
  .inventory-line-table {
    color: var(--ui-text) !important;
    font-size: 0.82rem !important;
  }

  :where(.inventory-table, .accounting-table, .history-table, .label-lines-table, .inventory-line-table) thead th {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    color: #415047 !important;
    border-bottom-color: var(--ui-border-strong) !important;
    background: #f2f7f3 !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  :where(.inventory-table, .accounting-table, .history-table, .label-lines-table, .inventory-line-table) tbody td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    color: #2f4036 !important;
    border-bottom-color: #e9efeb !important;
    font-size: 0.82rem !important;
    line-height: 1.45;
  }

  :where(.inventory-table, .accounting-table, .history-table, .label-lines-table, .inventory-line-table) tbody tr {
    transition: background-color var(--ui-transition), box-shadow var(--ui-transition);
  }

  :where(.inventory-table, .accounting-table, .history-table, .label-lines-table, .inventory-line-table) tbody tr:hover {
    background: #f4faf6 !important;
    box-shadow: inset 3px 0 0 rgba(11, 138, 66, 0.5);
  }

  .numeric,
  [data-number],
  input[type="number"] {
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Tabs and badges */
  .accounting-tabs {
    gap: 7px !important;
    padding: 7px !important;
    border-bottom-color: var(--ui-border) !important;
    background: #f7faf8 !important;
  }

  .accounting-tab {
    min-height: 40px;
    border-radius: 10px !important;
    color: var(--ui-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }

  .accounting-tab:hover {
    background: #fff !important;
    color: var(--ui-brand-strong) !important;
  }

  .accounting-tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-strong)) !important;
    box-shadow: 0 7px 18px rgba(11, 138, 66, 0.2);
  }

  .status-badge,
  [class*="status--"],
  [class*="badge"] {
    font-weight: 800 !important;
    letter-spacing: 0.01em;
  }

  /* Modals and overlays */
  .inventory-modal,
  .accounting-modal,
  .history-modal,
  .history-modal-backdrop {
    background: rgba(3, 27, 16, 0.62) !important;
    backdrop-filter: blur(7px) saturate(120%);
  }

  .inventory-modal__dialog,
  .accounting-modal__card,
  .history-modal-card,
  .history-sale-modal-card,
  .history-edit-modal-card,
  .history-void-modal-card,
  .modal-card {
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    animation: uiModalIn 220ms ease-out both;
  }

  .inventory-modal__header,
  .accounting-modal__header,
  .history-modal-header {
    border-bottom-color: #e9efeb !important;
    background: linear-gradient(180deg, #fff, #fbfdfb);
  }

  .inventory-modal__footer,
  .accounting-modal__footer,
  .history-modal-footer {
    border-top-color: #e9efeb !important;
    background: #f8faf9 !important;
  }

  .inventory-modal__close,
  .accounting-close,
  .history-modal-close,
  .sidebar__close {
    border-color: var(--ui-border) !important;
    background: #fff !important;
    color: var(--ui-muted) !important;
    box-shadow: var(--ui-shadow-xs);
  }

  .inventory-modal__close:hover,
  .accounting-close:hover,
  .history-modal-close:hover,
  .sidebar__close:hover {
    border-color: rgba(201, 42, 62, 0.3) !important;
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
    transform: rotate(4deg) scale(1.04);
  }

  /* POS module */
  .page-pos {
    background:
      radial-gradient(circle at 94% 0%, rgba(15, 118, 110, 0.11), transparent 30rem),
      radial-gradient(circle at 12% 10%, rgba(247, 148, 29, 0.08), transparent 26rem),
      #f2f6f4 !important;
  }

  .page-pos .topbar {
    min-height: 76px !important;
  }

  .brand-block h1 {
    color: var(--ui-ink) !important;
    font-size: 1.04rem !important;
    font-weight: 850 !important;
  }

  .brand-logo-link {
    border: 1px solid var(--ui-border);
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.16) !important;
  }

  .sale-panel,
  .checkout-panel {
    border-radius: 22px !important;
    box-shadow: var(--ui-shadow-md) !important;
  }

  .product-result,
  .product-card,
  .search-result-item {
    border-color: var(--ui-border) !important;
    border-radius: 13px !important;
  }

  .product-result:hover,
  .product-card:hover,
  .search-result-item:hover {
    border-color: rgba(15, 118, 110, 0.36) !important;
    background: #f3faf8 !important;
    box-shadow: var(--ui-shadow-sm);
    transform: translateY(-2px);
  }

  .cart-table-header {
    color: #435249 !important;
    background: #edf5f0 !important;
    font-size: 0.71rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .total-line strong,
  .checkout-total,
  #grandTotal,
  #totalAmount {
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Chat */
  .chat-layout {
    border-radius: 24px !important;
    box-shadow: var(--ui-shadow-md) !important;
  }

  .chat-conversations {
    border-right-color: var(--ui-border) !important;
    background: linear-gradient(180deg, rgba(232, 247, 238, 0.78), #fff 37%) !important;
  }

  .chat-channel {
    border: 1px solid transparent !important;
    border-radius: 13px !important;
  }

  .chat-channel:hover {
    border-color: var(--ui-border) !important;
    background: #f3f7f4 !important;
    transform: translateX(2px);
  }

  .chat-channel.active {
    border-color: rgba(11, 138, 66, 0.16) !important;
    background: var(--ui-success-soft) !important;
    box-shadow: inset 3px 0 0 var(--ui-brand);
  }

  .chat-message__bubble,
  .chat-bubble {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
  }

  /* Login presentation */
  .page-login {
    background: #f6f8f6 !important;
  }

  .page-login .glass {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.91) !important;
    box-shadow: 0 30px 90px rgba(8, 48, 27, 0.17) !important;
  }

  .page-login input {
    font-size: 0.94rem !important;
  }

  .page-login button[type="submit"] {
    min-height: 50px;
    border-radius: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 15px 32px rgba(11, 138, 66, 0.26);
  }

  /* Dynamic UI enhancements */
  .ui-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20000;
    height: 3px;
    pointer-events: none;
    background: transparent;
  }

  .ui-progress__bar {
    width: 0;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--ui-brand), var(--ui-accent));
    box-shadow: 0 0 12px rgba(247, 148, 29, 0.45);
    transition: width 80ms linear;
  }

  .ui-scroll-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-strong));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 15px 32px rgba(11, 138, 66, 0.26);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.92);
  }

  .ui-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .ui-scroll-top:hover {
    box-shadow: 0 18px 38px rgba(11, 138, 66, 0.34);
    transform: translateY(-3px) scale(1.02);
  }

  .ui-ripple {
    position: absolute;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.16;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: uiRipple 560ms ease-out forwards;
  }

  .ui-ripple-host {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  .ui-reveal {
    opacity: 0;
    transform: translateY(12px);
  }

  .ui-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 420ms ease,
      transform 420ms ease;
  }

  .ui-toast {
    position: fixed;
    right: 22px;
    bottom: 82px;
    z-index: 20010;
    display: flex;
    max-width: min(390px, calc(100vw - 30px));
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-lg);
    font-size: 0.81rem;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    backdrop-filter: blur(16px);
  }

  .ui-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .ui-toast[data-tone="success"] {
    border-color: rgba(11, 138, 66, 0.25);
    background: rgba(242, 252, 246, 0.97);
  }

  .ui-toast[data-tone="warning"] {
    border-color: rgba(247, 148, 29, 0.32);
    background: rgba(255, 249, 239, 0.97);
  }

  .ui-kbd-hint {
    display: inline-flex;
    min-width: 24px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border: 1px solid var(--ui-border-strong);
    border-bottom-width: 2px;
    border-radius: 7px;
    background: #fff;
    color: var(--ui-muted);
    font-size: 0.67rem;
    font-weight: 800;
    box-shadow: var(--ui-shadow-xs);
  }

  @keyframes uiPageIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes uiModalIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes uiRipple {
    to {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* Responsive readability */
  @media (max-width: 900px) {
    .inventory-content,
    .accounting-content,
    .dashboard-content,
    .sales-history-content,
    .chat-page {
      padding-right: 18px !important;
      padding-left: 18px !important;
    }

    .topbar {
      padding-right: 16px !important;
      padding-left: 16px !important;
    }

    .ui-scroll-top {
      right: 15px;
      bottom: 15px;
      width: 43px;
      height: 43px;
    }

    .ui-toast {
      right: 15px;
      bottom: 68px;
    }
  }

  @media (max-width: 620px) {
    html {
      font-size: 15px;
    }

    .inventory-heading,
    .accounting-heading,
    .sales-page-heading {
      gap: 14px !important;
    }

    .inventory-heading h2,
    .accounting-heading h2,
    .sales-page-heading h1 {
      font-size: 1.65rem !important;
    }

    .inventory-button,
    .accounting-button,
    .history-button,
    .primary-button,
    .secondary-button {
      min-height: 44px;
    }

    .summary-card,
    .inventory-summary-card,
    .accounting-summary-card,
    .history-summary-card {
      min-height: 116px;
    }

    .inventory-modal__dialog,
    .accounting-modal__card,
    .history-modal-card,
    .modal-card {
      border-radius: 19px !important;
    }
  }
}

@media print {
  .ui-progress,
  .ui-scroll-top,
  .ui-toast {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media screen {
  .ui-live-clock {
    display: grid;
    min-width: 98px;
    gap: 1px;
    padding: 7px 11px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ui-muted);
    box-shadow: var(--ui-shadow-xs);
    line-height: 1.2;
    text-align: right;
  }

  .ui-live-clock__date {
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .ui-live-clock__time {
    color: var(--ui-ink);
    font-size: 0.82rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1100px) {
    .ui-live-clock {
      display: none;
    }
  }
}