:root {
  --sidebar-width: 192px;
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --panel: #ffffff;
  --page: #fafafa;
  --grouped-surface: #fafafa;
  --primary: #0071e3;
  --primary-strong: #005bb5;
  --accent: #ff9f0a;
  --soft: #eef5ff;
  --warning: #fff7e6;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Helvetica, "Helvetica Neue", Arial, "Myanmar Text", Padauk, Pyidaungsu, sans-serif;
  background: var(--page);
  color: var(--ink);
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 20px;
  background: #f5f5f7;
}

html.auth-checking .auth-gate,
html.auth-required .auth-gate {
  display: grid;
}

html.auth-checking .app-shell,
html.auth-required .app-shell {
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.auth-login-card {
  width: min(360px, 100%);
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e2e7;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
}

.auth-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-login-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: cover;
  border-radius: 8px;
}

.auth-login-brand h1 {
  font-size: 22px;
}

.auth-login-brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.auth-gate-form {
  display: grid;
  gap: 14px;
}

html.auth-checking .auth-gate-form {
  display: none;
}

.auth-gate-form .primary {
  width: 100%;
  margin-top: 2px;
}

.auth-gate-status {
  min-height: 18px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.auth-gate-status[data-tone="error"] {
  color: #b42318;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 220ms ease;
}

.app-shell.sidebar-collapsed {
  --sidebar-width: 72px;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.settings-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  padding: 5px 9px 14px;
  overflow: hidden;
  background: #f8f8fa;
  border-right: 1px solid #e2e2e7;
  backdrop-filter: saturate(180%) blur(18px);
  transition: opacity 160ms ease, padding 220ms ease, border-width 220ms ease;
}

.app-shell.sidebar-collapsed .settings-sidebar {
  padding: 5px 7px 14px;
  overflow: hidden;
  border-right-width: 1px;
  opacity: 1;
  pointer-events: auto;
}

.sidebar-toggle {
  position: fixed;
  z-index: 25;
  top: 22px;
  right: auto;
  bottom: auto;
  left: calc(var(--sidebar-width) - 31px);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: left 220ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.theme-toggle {
  flex: 0 0 auto;
}

.theme-toggle::before {
  display: none;
}

.theme-toggle span {
  color: #ff9f0a;
  font-size: 18px;
  line-height: 1;
}

.theme-toggle.is-dark {
  background: #2c2c2e;
  border: 1px solid #48484a;
}

.theme-toggle.is-dark span {
  color: #ffd60a;
}

.sidebar-toggle::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform 220ms ease;
}

.sidebar-toggle:hover {
  background: #ffffff;
  border-color: #d2d2d7;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: fixed;
  top: 21px;
  right: auto;
  left: calc(var(--sidebar-width) + 8px);
  transform: none;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before {
  transform: rotate(180deg);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 14px;
}

.sidebar-brand.brand-tab {
  width: 100%;
  min-height: auto;
  margin-bottom: 10px;
  padding: 11px 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.sidebar-brand.brand-tab:hover,
.sidebar-brand.brand-tab.active {
  background: transparent;
}

.sidebar-brand img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.09);
}

.sidebar-brand h1 {
  font-size: 18px;
}

.sidebar-module-search {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 10px);
  margin: 0 5px 8px;
}

.sidebar-module-search-icon {
  position: absolute;
  left: 10px;
  width: 13px;
  height: 13px;
  background: #6e6e73;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sidebar-module-search input {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 9px 0 30px;
  border: 0.2px solid #8e8e93;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
}

.sidebar-module-search input:focus {
  border-color: #8fb4d2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12);
}

.sidebar-module-search-empty {
  margin: 2px 5px 8px;
  color: var(--muted);
  font-size: 11px;
}

.module-nav .tab[hidden],
.module-nav .nav-group[hidden],
.sidebar-module-search-empty[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
}

h2 {
  font-size: 22px;
  line-height: 1.35;
}

h3 {
  font-size: 18px;
}

.eyebrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Keep one clear title for each workspace; chart periods remain as useful context. */
.dashboard-head > div > .eyebrow,
.panel-head:not(.dashboard-trend-head) > div > .eyebrow,
.raw-page-head > div > .eyebrow {
  display: none;
}

.dashboard-head h2,
.panel-head:not(.dashboard-trend-head) h2,
.raw-page-head h2 {
  color: #0066cc;
}

.cloud-sync-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.cloud-sync-panel .panel-head {
  margin-bottom: 0;
}

.cloud-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.cloud-auth-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
}

.team-invite-form {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
}

.cloud-auth-form .form-actions {
  margin: 0;
}

.cloud-signed-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cloud-signed-in .form-actions {
  margin: 0;
}

.cloud-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  color: var(--muted);
  background: #f2f2f7;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cloud-status[data-tone="success"] { color: #176b31; background: #e9f9ee; }
.cloud-status[data-tone="error"] { color: #9d2118; background: #fff0ef; }
.cloud-status[data-tone="loading"] { color: #8a4f00; background: #fff7e6; }

.global-cloud-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.app-utility-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 28px;
  padding: 4px 9px;
  color: #005bb5;
  background: #ffffff;
  border: 1px solid #c7c7cc;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.language-toggle:hover {
  color: #004f9e;
  background: #f7fbff;
  border-color: #0071e3;
}

.language-toggle:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.22);
  outline-offset: 2px;
}


.tabs {
  display: grid;
  gap: 1px;
}

.settings-sidebar .sidebar-user-profile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  margin-top: 0;
  padding: 8px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #dedee3;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: left;
  white-space: normal;
}

.sidebar-cloud-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: auto;
  padding: 7px 8px 5px;
  border-top: 0;
}

.sidebar-cloud-row .cloud-status {
  min-height: 24px;
  max-width: 100%;
  padding: 3px 9px;
  color: #6e6e73;
  background: #f2f2f7;
  border: 1px solid #dedee3;
  border-radius: 999px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-cloud-row .cloud-status::before { background: #8e8e93; }
.sidebar-cloud-row .cloud-status[data-tone="success"]::before { background: #248a3d; }
.sidebar-cloud-row .cloud-status[data-tone="loading"]::before { background: #ff9f0a; }
.sidebar-cloud-row .cloud-status[data-tone="error"]::before { background: #ff3b30; }

.settings-sidebar .sidebar-user-profile[hidden] {
  display: none;
}

.settings-sidebar .sidebar-user-profile:hover,
.settings-sidebar .sidebar-user-profile.active {
  background: #ffffff;
  border-color: #b8d8f4;
}

.sidebar-user-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0a84ff 8%, #5856d6 58%, #af52de 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(88, 86, 214, 0.25);
  font-size: 13px;
  font-weight: 800;
}

.sidebar-user-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.sidebar-user-copy strong,
.sidebar-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.sidebar-user-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
}

.tab,
.secondary,
.ghost,
.primary {
  min-height: 42px;
  border-radius: 8px;
  padding: 9px 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.tabs .tab {
  font-size: 14px;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.62);
}

.tab.active {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 3px 8px rgba(0, 0, 0, 0.14);
}

.nav-icon::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.order-icon {
  background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}

.order-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v18l-3-2-2 2-2-2-2 2-2-2-3 2V4a2 2 0 0 1 2-2Zm2 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v18l-3-2-2 2-2-2-2 2-2-2-3 2V4a2 2 0 0 1 2-2Zm2 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dashboard-icon {
  background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}

.dashboard-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V10h3v10H4Zm6 0V4h3v16h-3Zm6 0v-7h3v7h-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V10h3v10H4Zm6 0V4h3v16h-3Zm6 0v-7h3v7h-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invoice-icon {
  background: linear-gradient(180deg, #bf5af2 0%, #7d2ae8 100%);
}

.invoice-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm1 3v5h8V5H8Zm0 8v2h2v-2H8Zm4 0v2h2v-2h-2Zm4 0v6h-2v-6h2Zm-8 4v2h2v-2H8Zm4 0v2h2v-2h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm1 3v5h8V5H8Zm0 8v2h2v-2H8Zm4 0v2h2v-2h-2Zm4 0v6h-2v-6h2Zm-8 4v2h2v-2H8Zm4 0v2h2v-2h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.receivable-icon {
  background: linear-gradient(180deg, #ffb340 0%, #ff7a1a 100%);
}

.receivable-icon::before {
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3c4.4 0 8 1.4 8 3.2v2.1c0 1.8-3.6 3.2-8 3.2s-8-1.4-8-3.2V6.2C4 4.4 7.6 3 12 3Zm-8 8c1.7 1.4 4.7 2.1 8 2.1s6.3-.8 8-2.1v2.1c0 1.8-3.6 3.2-8 3.2s-8-1.4-8-3.2V11Zm0 4.8c1.7 1.4 4.7 2.1 8 2.1s6.3-.8 8-2.1V18c0 1.8-3.6 3.2-8 3.2S4 19.8 4 18v-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3c4.4 0 8 1.4 8 3.2v2.1c0 1.8-3.6 3.2-8 3.2s-8-1.4-8-3.2V6.2C4 4.4 7.6 3 12 3Zm-8 8c1.7 1.4 4.7 2.1 8 2.1s6.3-.8 8-2.1v2.1c0 1.8-3.6 3.2-8 3.2s-8-1.4-8-3.2V11Zm0 4.8c1.7 1.4 4.7 2.1 8 2.1s6.3-.8 8-2.1V18c0 1.8-3.6 3.2-8 3.2S4 19.8 4 18v-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.payable-summary-icon {
  background: linear-gradient(180deg, #8e8e93 0%, #636366 100%);
}

.payable-summary-icon::before {
  width: 18px;
  height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%20stroke%3D%27white%27%20stroke-width%3D%272%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.5%27%20stroke%3D%27white%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M6%209H7M17%2015H18%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
}

.finance-position-icon {
  background: #ffffff;
  border: 1px solid #d1d1d6;
}

.finance-position-icon::before {
  content: "$";
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #ff3b30;
  background: transparent;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  transform: translateX(1px);
}

.raw-material-icon {
  background: linear-gradient(180deg, #ff6b5f 0%, #ff3b30 100%);
  border: 0;
}

.raw-material-icon::before {
  width: 17px;
  height: 17px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4%208.5L12%204L20%208.5V16L12%2020L4%2016V8.5Z%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272.2%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M4.5%208.7L12%2013L19.5%208.7M12%2013V20%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

.finished-product-icon {
  background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}

.finished-product-icon::before {
  width: 17px;
  height: 17px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M5%2012.5L9.4%2016.8L19%207.2%27%20stroke%3D%27white%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

.purchase-module-icon {
  background: linear-gradient(180deg, #ffb340 0%, #ff6b00 100%);
}

.purchase-module-icon::before {
  width: 17px;
  height: 17px;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 8V7a5 5 0 0 1 10 0v1h1.4L20 21H4L5.6 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 8V7a5 5 0 0 1 10 0v1h1.4L20 21H4L5.6 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plastics-roll-icon {
  background: linear-gradient(180deg, #9b9ba0 0%, #6e6e73 100%);
}

.plastics-roll-icon::before {
  width: 17px;
  height: 17px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.distributor-icon {
  background: linear-gradient(180deg, #63e6a3 0%, #30d158 100%);
}

.distributor-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21c.35-4.8 3.15-7.5 8-7.5s7.65 2.7 8 7.5H4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21c.35-4.8 3.15-7.5 8-7.5s7.65 2.7 8 7.5H4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.settings-icon {
  background: linear-gradient(180deg, #8e8e93 0%, #48484a 100%);
}

.settings-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a7.2 7.2 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A7.2 7.2 0 0 0 7 6L4.6 5l-2 3.5 2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5 2 3.5 2.4-1a7.2 7.2 0 0 0 2.6 1.5L10 22h4l.4-2.5A7.2 7.2 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a7.2 7.2 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A7.2 7.2 0 0 0 7 6L4.6 5l-2 3.5 2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5 2 3.5 2.4-1a7.2 7.2 0 0 0 2.6 1.5L10 22h4l.4-2.5A7.2 7.2 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.purchase-module-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-period-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-action-toolbar {
  margin: 0;
}

.dashboard-filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(100%, 820px);
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.dashboard-filter-group {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  min-width: 0;
  padding: 8px 0;
}

.dashboard-filter-group + .dashboard-filter-group {
  border-top: 1px solid #e5e5ea;
}

.dashboard-filter-group > strong {
  align-self: center;
  color: var(--text);
  font-size: 12px;
}

.dashboard-filter-panel .dashboard-period-controls,
.dashboard-filter-panel .dashboard-trend-controls {
  justify-content: flex-start;
  gap: 8px;
}

.dashboard-filter-panel .dashboard-period-controls {
  display: grid;
  grid-template-columns: 120px minmax(240px, 320px);
}

.dashboard-filter-panel .dashboard-trend-controls {
  display: grid;
  grid-template-columns: 120px minmax(240px, 320px) minmax(140px, 180px);
}

.dashboard-filter-panel .dashboard-period-controls label,
.dashboard-filter-panel .dashboard-trend-controls label,
.dashboard-filter-panel .dashboard-product-control {
  width: 100%;
}

.dashboard-filter-panel select,
.dashboard-filter-panel input {
  width: 100%;
  min-width: 0;
}

.dashboard-filter-panel .period-month-year-fields {
  width: 100%;
}

#dashboardProductionDetailsToggle[aria-expanded="true"] {
  color: #ffffff;
  background: #1d1d1f;
}

/* Shared date filter anatomy: each picker stays compact and aligned across modules. */
.period-filter-controls,
.date-filter-controls {
  --period-control-height: 36px;
  --period-label-size: 11px;
}

.filter-drawer {
  margin-top: 0;
}

.raw-filter-toggle {
  margin: 0;
  flex: 0 0 auto;
}

.period-filter-controls label,
.date-filter-controls label {
  min-width: 0;
}

.period-filter-controls label > span,
.date-filter-controls label > span {
  min-height: 16px;
  color: var(--muted);
  font-size: var(--period-label-size);
  font-weight: 600;
  line-height: 16px;
}

.period-filter-controls select,
.period-filter-controls input,
.date-filter-controls select,
.date-filter-controls input {
  height: var(--period-control-height);
  min-height: var(--period-control-height);
  padding: 6px 9px;
  font-size: 13px;
}

.period-month-year-fields {
  grid-template-columns: minmax(0, 1fr) minmax(78px, 0.72fr);
  gap: 6px;
}

.period-month-year-fields > select,
.period-month-year-fields > input {
  min-width: 0;
}

.year-only .period-month-year-fields,
.period-month-year-fields.year-only {
  grid-template-columns: minmax(112px, 1fr);
}

.dashboard-period-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

/* The dashboard labels are grids, so this needs matching specificity to hide inactive pickers. */
.dashboard-period-controls label.hidden,
.dashboard-trend-controls label.hidden {
  display: none;
}

.dashboard-period-controls select,
.dashboard-period-controls input {
  min-width: 118px;
}

.dashboard-month-year {
  grid-template-columns: minmax(94px, 1fr) 88px;
}

.dashboard-subtitle {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-metric {
  min-height: 104px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.dashboard-metric span,
.dashboard-metric small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.dashboard-metric strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 25px;
  line-height: 1.1;
}

.dashboard-metric.accent-blue {
  border-color: #c8e1fb;
  background: #eaf4ff;
}

.dashboard-metric.accent-amber {
  border-color: #f3c7c2;
  background: #fff0ee;
}

.dashboard-metric.accent-orange {
  border-color: #f0d9ab;
  background: #fff6e6;
}

.dashboard-metric.accent-teal {
  border-color: #cfd4f5;
  background: #eef0ff;
}

.dashboard-metric.accent-green {
  border-color: #bfe4ca;
  background: #eef9f1;
}

.dashboard-metric.accent-cyan {
  border-color: #b8e0e6;
  background: #ebf8fa;
}

.dashboard-metric.accent-blue strong { color: #0066cc; }
.dashboard-metric.accent-amber strong { color: #c9352b; }
.dashboard-metric.accent-orange strong { color: #9a5a00; }
.dashboard-metric.accent-teal strong { color: #3158c9; }
.dashboard-metric.accent-green strong { color: #16773a; }
.dashboard-metric.accent-cyan strong { color: #087687; }

.dashboard-section {
  padding: 18px 0 20px;
  border-top: 1px solid var(--line);
}

.dashboard-production-section {
  padding-top: 4px;
  border-top: 0;
}

.dashboard-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.dashboard-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
}

.dashboard-section-head p,
.dashboard-chart-caption {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-production-products {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.dashboard-production-table {
  min-width: 620px;
}

.dashboard-production-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(100px, 0.7fr));
  align-items: center;
  min-height: 52px;
  border-top: 1px solid #e5e5ea;
}

.dashboard-production-row:first-child {
  border-top: 0;
}

.dashboard-production-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
}

.dashboard-production-row > span:not(:last-child) {
  border-right: 1px solid #e5e5ea;
}

.dashboard-production-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-production-row small {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-production-header {
  min-height: 36px;
  background: #edf3f8;
}

.dashboard-production-header > span {
  color: #526273;
  font-size: 12px;
  font-weight: 750;
}

.dashboard-stock-value strong {
  color: #16803a;
}

.dashboard-stock-value.is-negative strong,
#dashboardFinishedStock.is-negative {
  color: #d12f27;
}

.dashboard-production-empty {
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.dashboard-sales-head {
  align-items: flex-start;
}

.dashboard-commerce-metrics {
  margin-top: 2px;
}

.dashboard-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-trend-panel {
  min-height: 300px;
  padding: 14px;
  border-color: var(--line);
  box-shadow: none;
}

.dashboard-trend-head {
  align-items: flex-start;
}

.dashboard-trend-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.dashboard-trend-controls label,
.dashboard-product-control {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-trend-controls select,
.dashboard-trend-controls input,
.dashboard-product-control select {
  min-width: 118px;
}

.dashboard-trend-chart {
  height: 220px;
  margin-top: 8px;
}

.dashboard-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trend-grid-line {
  stroke: #e6e6eb;
  stroke-width: 1;
}

.trend-axis-label {
  fill: #86868b;
  font-size: 12px;
  font-family: Helvetica, "Helvetica Neue", Arial, "Myanmar Text", sans-serif;
}

.trend-line {
  fill: none;
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-orders { stroke: #007aff; }
.trend-sales { stroke: #19a06a; }

.purchase-module-view.active {
  display: grid;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
  gap: 20px;
  align-items: start;
}

.order-entry-layout {
  grid-template-columns: minmax(0, 1fr);
}

#orderForm.compact-order-form {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

#orderForm .order-form-head {
  margin-bottom: 12px;
}

#orderForm .order-customer-grid {
  grid-template-columns: minmax(160px, 0.72fr) minmax(210px, 0.9fr) minmax(280px, 1.38fr);
  align-items: end;
  gap: 12px;
}

#orderForm .order-customer-grid input,
#orderForm .order-customer-grid select {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

#orderForm #distributorCard {
  min-height: 38px;
  margin: 10px 0 16px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #d8d8dc;
  border-radius: 7px;
}

#orderForm .items-head {
  margin: 4px 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

#orderForm .items-head h3 {
  margin: 0;
}

#orderForm #addItemBtn {
  min-height: 34px;
  padding: 5px 10px;
}

#orderForm .item-row {
  grid-template-columns: minmax(260px, 1fr) 112px 166px 42px;
  padding: 10px;
  background: #ffffff;
}

#orderForm .order-note-field {
  margin-top: 2px;
}

#orderForm .order-note-field textarea {
  min-height: 64px;
}

#orderForm .order-form-footer {
  display: grid;
  justify-items: end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#orderForm .order-form-footer .summary-strip {
  width: min(100%, 500px);
  margin-top: 0;
  gap: 8px;
}

#orderForm .order-form-footer .summary-strip div {
  min-height: 66px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #dedee2;
}

#orderForm .order-form-footer .summary-strip strong {
  margin-top: 2px;
  font-size: 20px;
}

#orderForm .order-form-footer .actions {
  justify-content: flex-end;
  margin-top: 0;
}

.order-form-action {
  display: inline-flex;
  width: 96px;
  height: 42px;
  min-height: 42px;
  padding: 8px 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.order-form-action::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
}

.order-clear-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h11a5 5 0 1 1 0 10H9M4 7l4-4M4 7l4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h11a5 5 0 1 1 0 10H9M4 7l4-4M4 7l4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.order-save-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#saveOrderBtn {
  background: #1d1d1f;
  border: 1px solid #1d1d1f;
  transition: background 140ms ease, transform 100ms ease;
}

#saveOrderBtn:hover { background: #000000; }
#saveOrderBtn:active { background: #48484a; transform: scale(0.97); }
#saveOrderBtn[data-state="saving"] { background: #636366; }
#saveOrderBtn[data-state="saved"] { background: #248a3d; border-color: #248a3d; }

.panel {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.embedded-report {
  margin-top: 20px;
}

.raw-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.raw-month-filter {
  width: 180px;
  margin: 0;
}

.raw-month-filter select {
  min-height: 38px;
}

.raw-ledger-tools,
.raw-ledger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.raw-ledger-tools {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.raw-ledger-filters {
  display: flex;
  align-items: end;
  gap: 7px;
}

.raw-ledger-filters label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.raw-ledger-filters select {
  width: 118px;
  min-height: 32px;
  padding: 4px 7px;
  font-size: 12px;
}

.raw-inventory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.raw-inventory-main,
.inventory-section,
.raw-side-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.raw-selector-panel {
  padding: 14px;
  box-shadow: none;
}

.raw-selector-panel > .panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
  margin-bottom: 10px;
}

.raw-selector-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.raw-selector-head-actions .filter-action-toolbar {
  margin: 0;
}

.raw-delete-selected:not(:disabled):hover,
.raw-delete-selected:not(:disabled):focus-visible {
  color: #c9342b;
  background: #fff2f1;
}

.raw-delete-selected:disabled {
  color: #aeaeb2;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.raw-selector-filters {
  justify-content: flex-start;
  margin-bottom: 12px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.raw-selector-filters .raw-material-search-field {
  width: min(360px, 100%);
}

.raw-selector-filters:not(.filter-search-mode) .filter-search-section {
  display: none;
}

.raw-selector-filters.filter-search-mode {
  display: block;
}

.raw-selector-panel .raw-selector-add {
  width: auto;
  flex: 0 0 auto;
  padding-inline: 12px;
  box-shadow: none;
  white-space: nowrap;
}

.raw-selector-groups {
  display: grid;
  gap: 14px;
}

.raw-side-stack {
  position: sticky;
  top: 104px;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-title h3 {
  color: var(--primary);
  font-size: 14px;
}

.section-title small {
  color: var(--muted);
  font-weight: 700;
}

.inventory-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 8px;
}

.inventory-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 10px 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.inventory-card:active {
  cursor: grabbing;
}

.inventory-card:hover {
  border-color: rgba(29, 29, 31, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.inventory-card.active {
  border: 2px solid #8e8e93 !important;
  box-shadow: 0 5px 14px rgba(29, 29, 31, 0.08);
}

.inventory-card.dragging {
  opacity: 0.46;
  transform: scale(0.98);
}

.inventory-card.drag-over {
  border-color: rgba(52, 199, 89, 0.9);
  box-shadow: inset 0 0 0 2px rgba(52, 199, 89, 0.72), 0 8px 20px rgba(52, 199, 89, 0.16);
}

.inventory-card span,
.inventory-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-card .inventory-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.inventory-card .inventory-card-heading > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-card .inventory-card-location {
  flex: 0 1 auto;
  max-width: 48%;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-entry-source {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.inventory-card strong {
  font-size: 20px;
  line-height: 1;
}

.inventory-card.tone-rice { background: #f3f9ff; border-color: #cfe5fb; }
.inventory-card.tone-corn { background: #fff9e8; border-color: #f2dfa3; }
.inventory-card.tone-prawn { background: #fff5f3; border-color: #f1cdc8; }
.inventory-card.tone-chili { background: #fff4f2; border-color: #efccc7; }
.inventory-card.tone-oil { background: #fff8e9; border-color: #efd9a5; }
.inventory-card.tone-sugar { background: #f7fbff; border-color: #d8e5ef; }
.inventory-card.tone-onion { background: #faf7ff; border-color: #ddd1ef; }
.inventory-card.tone-seasoning { background: #f5fbf4; border-color: #cfe5cb; }
.inventory-card.tone-neutral { background: #ffffff; border-color: #d8d8de; }
.inventory-card.tone-packaging { background: #fbfbfd; border-color: #dcdce6; }
.inventory-card.tone-blue { background: #f1f8ff; border-color: #c5def7; }
.inventory-card.tone-green { background: #f1faf3; border-color: #c8e5ce; }
.inventory-card.tone-yellow { background: #fff9e9; border-color: #eadcae; }
.inventory-card.tone-red { background: #fff3f2; border-color: #edcbc7; }
.inventory-card.tone-purple { background: #f8f3ff; border-color: #dacced; }
.inventory-card.tone-grey { background: #fcfcfd; border-color: #d4d4d9; }

.inventory-card.tone-blue::before { background: #6ea8df; }
.inventory-card.tone-green::before { background: #76b584; }
.inventory-card.tone-yellow::before { background: #caa640; }
.inventory-card.tone-red::before { background: #cf756d; }
.inventory-card.tone-purple::before { background: #9a7fc2; }
.inventory-card.tone-grey::before { background: #8e8e93; }

.raw-color-picker {
  min-width: 0;
  margin: 2px 0 8px;
  padding: 0;
  border: 0;
}

.raw-color-picker legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.raw-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.raw-color-options label {
  position: relative;
  display: block;
  min-height: 28px;
  cursor: pointer;
}

.raw-color-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.raw-color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(29, 29, 31, 0.16);
  border-radius: 7px;
}

.raw-color-options input:checked + .raw-color-swatch {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--primary);
}

.raw-color-options input:focus-visible + .raw-color-swatch {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.raw-color-swatch.color-neutral { background: #ffffff; }
.raw-color-swatch.color-blue { background: #cfe8ff; }
.raw-color-swatch.color-green { background: #d2efd8; }
.raw-color-swatch.color-yellow { background: #f8e7a8; }
.raw-color-swatch.color-red { background: #f3c4bf; }
.raw-color-swatch.color-purple { background: #ddcff1; }
.raw-color-swatch.color-grey { background: #d8d8dd; }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 10px;
  align-items: baseline;
  text-align: right;
}

.mini-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-stats strong {
  font-size: 18px;
}

.raw-table-wrap table,
.raw-entry-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
}

.raw-entry-table .raw-col-date { width: 16%; }
.raw-entry-table .raw-col-in { width: 11%; }
.raw-entry-table .raw-col-used { width: 11%; }
.raw-entry-table .raw-col-balance { width: 13%; }
.raw-entry-table .raw-col-note { width: 39%; }
.raw-entry-table .raw-col-actions { width: 10%; }

.raw-entry-table th,
.raw-entry-table td {
  padding: 9px 10px;
}

.raw-entry-table .action-cell {
  width: auto;
}

.raw-entry-table .raw-table-empty {
  padding: 24px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.raw-entry-actions {
  justify-content: center;
  gap: 4px;
}

.raw-entry-selected-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.raw-title-box {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--soft);
  font-weight: 700;
}

.raw-title-box > div {
  flex: 1 1 auto;
  min-width: 0;
}

.raw-title-box strong,
.raw-title-box small {
  display: block;
}

.raw-title-box small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.raw-title-box .icon-button {
  flex: 0 0 auto;
}

.raw-entry-selected-row .info-line {
  flex: 1 1 auto;
}

.raw-entry-selected-row .icon-button {
  flex: 0 0 auto;
}

.raw-opening-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 180px;
  min-height: 38px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.raw-opening-inline strong {
  color: var(--text);
}

.raw-opening-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.raw-opening-edit input {
  width: 110px;
  min-height: 32px;
}

.raw-opening-edit .primary,
.raw-opening-edit .secondary,
.raw-opening-edit .ghost {
  min-height: 32px;
  padding: 5px 8px;
}

.raw-name-edit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

.raw-name-edit input {
  grid-column: 1 / -1;
  width: 100%;
}

.raw-name-edit .primary,
.raw-name-edit .secondary,
.raw-name-edit .ghost {
  min-height: 34px;
  padding: 6px 9px;
  white-space: nowrap;
}

#rawEntryForm > .form-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rawEntryForm > .form-actions #cancelRawEntryEditBtn {
  grid-column: 1;
}

#rawEntryForm > .form-actions #rawEntrySubmitBtn {
  grid-column: 2;
}

.raw-entry-table tr.month-break td {
  padding: 12px 10px 7px;
  border-top: 3px solid #b8bac4;
  border-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.raw-entry-table tr.month-break span {
  display: inline-flex;
  padding: 3px 8px;
  color: var(--ink);
  background: #f5f5f7;
  border: 1px solid #d8d8de;
  border-radius: 999px;
}

.compact-entry {
  padding: 14px;
}

.compact-entry label {
  margin-bottom: 10px;
}

.compact-grid {
  gap: 8px;
}

.balance-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.balance-preview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.balance-preview strong {
  font-size: 18px;
}

.add-item-toggle {
  width: 100%;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.06);
}

.side-panel {
  position: sticky;
  top: 104px;
}

.panel-head,
.items-head,
.actions,
.report-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-head {
  margin-bottom: 18px;
}

.panel-head.compact {
  margin-bottom: 10px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  align-content: start;
}

label span {
  min-height: 18px;
  line-height: 1.35;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.month-year-fields {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(105px, 0.8fr);
  gap: 8px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-line {
  margin: 14px 0 20px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--soft);
  font-weight: 700;
}

.info-line strong,
.info-line small,
.shortcut-button strong,
.shortcut-button small {
  display: block;
}

.info-line small,
.shortcut-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.shortcut-suggestions {
  display: none;
  margin-top: 8px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.shortcut-suggestions.open {
  display: grid;
}

#distributorCard {
  font-size: 11px;
  line-height: 1.5;
}

.shortcut-button {
  min-height: 48px;
  padding: 9px 11px;
  color: var(--ink);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.shortcut-button:last-child {
  border-bottom: 0;
}

.shortcut-button:hover,
.shortcut-button:focus {
  background: var(--soft);
  outline: none;
}

.status-field {
  margin-bottom: 18px;
}

.muted {
  color: var(--muted);
}

.items-head {
  margin: 12px 0;
}

.items-list {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.item-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px 150px 42px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: #f8f8fa;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.icon {
  width: 42px;
  height: 42px;
  align-self: end;
  border-radius: 8px;
  color: #c03525;
  background: #fff0ee;
  font-size: 24px;
  line-height: 1;
}

.item-row input,
.item-row select {
  height: 44px;
}

.summary-strip,
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.summary-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-strip div,
.metrics div,
.metric-button {
  padding: 14px;
  border-radius: 8px;
  background: #fcfcfd;
}

.metric-button {
  width: 100%;
  border: 1px solid transparent;
  color: inherit;
  text-align: left;
}

.metric-button:hover,
.metric-button:focus {
  border-color: var(--primary);
  background: var(--soft);
  outline: none;
}

.report-metric {
  border: 1px solid transparent;
}

.report-metric.qty {
  border-color: #c8e1fb;
  background: #eaf4ff;
}

.report-metric.amount {
  border-color: #f0d9ab;
  background: #fff6e6;
}

.report-metric.delivered {
  border-color: #c9e6d1;
  background: #ebf8ef;
}

.report-metric.pending {
  border-color: #f3c7c2;
  background: #fff0ee;
}

.report-metric.qty strong { color: #0066cc; }
.report-metric.amount strong { color: #9a5a00; }
.report-metric.delivered strong { color: #157f3b; }
.report-metric.pending strong { color: #c9352b; }

.summary-strip span,
.metrics span,
.metric-button span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.summary-strip strong,
.metrics strong,
.metric-button strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.primary {
  color: #ffffff;
  background: #1d1d1f;
}

.primary:hover {
  background: #000000;
}

.primary:active {
  background: #48484a;
}

.secondary {
  color: var(--primary-strong);
  background: #ffffff;
  border: 1px solid #c7c7cc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ghost {
  color: #4b4b4f;
  background: #ffffff;
  border: 1px solid #c7c7cc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.secondary:hover,
.ghost:hover {
  background: #ffffff;
  border-color: #8e8e93;
}

.danger {
  color: #9d3420;
  background: #ffebe6;
}

.badge {
  display: inline-grid;
  min-width: 42px;
  height: 42px;
  place-items: center;
  color: var(--primary-strong);
  background: var(--soft);
  border-radius: 8px;
}

.order-list {
  display: grid;
  gap: 10px;
}

.order-list.empty {
  padding: 16px;
  color: var(--muted);
  background: #f8f8fa;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.order-card {
  padding: 13px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.order-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.order-card strong,
.settings-row strong {
  display: block;
}

.order-card small,
.settings-row small {
  color: var(--muted);
}

.invoice-order-list {
  display: grid;
  gap: 8px;
}

.section-label {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.invoice-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  margin-bottom: 14px;
}

#invoiceView .invoice-layout > .panel:first-child > .filter-action-toolbar {
  margin-top: -4px;
  margin-bottom: 0;
}

#invoiceOrderFilters + .section-label {
  margin-top: 8px;
}

.invoice-filters > label,
.invoice-history-main-search > label,
.invoice-history-date-search > label,
.payable-summary-filters > label {
  width: 100%;
  min-width: 0;
}

.report-filters,
.invoice-filters,
.invoice-history-date-search,
.payable-summary-filters {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
}

.invoice-filters .invoice-all-dates-btn {
  align-self: end;
  justify-self: stretch;
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.invoice-order-month {
  grid-template-columns: minmax(0, 1fr) minmax(78px, 0.72fr);
}

.invoice-filters .year-only .invoice-order-month {
  grid-template-columns: minmax(120px, 1fr);
}

.invoice-history-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.invoice-history-search {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invoice-history-main-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.invoice-history-date-search {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.compact-field {
  min-width: 0;
}

.compact-field input,
.compact-field select,
.compact-clear {
  min-height: var(--period-control-height);
  padding-top: 6px;
  padding-bottom: 6px;
}

.compact-clear {
  width: 100%;
  align-self: end;
}

.invoice-history-month {
  grid-template-columns: minmax(0, 1fr) minmax(78px, 0.72fr);
}

.compact-field.year-only .invoice-history-month {
  grid-template-columns: minmax(120px, 1fr);
}

.initial-payment-box {
  margin-bottom: 12px;
  padding: 12px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.initial-payment-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr) minmax(150px, 1fr);
  gap: 8px;
}

.history-card {
  background: #fffdf7;
}

.invoice-history-card {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.4fr) minmax(150px, 0.55fr);
  align-items: center;
  gap: 14px;
}

.invoice-history-customer,
.invoice-history-quantity,
.invoice-history-amount {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.invoice-history-quantity {
  justify-items: center;
  text-align: center;
}

.invoice-history-amount {
  justify-items: end;
  text-align: right;
}

.invoice-history-card strong {
  color: var(--ink);
  font-size: 14px;
}

.invoice-history-card .invoice-history-amount strong {
  color: #0066cc;
}

.invoice-history-card small {
  font-size: 11px;
}

.invoice-history-list-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.invoice-history-list-actions .secondary {
  min-height: 34px;
  padding: 6px 11px;
  color: #ffffff;
  background: #1d1d1f;
  border-color: #1d1d1f;
  font-size: 11px;
}

.invoice-history-list-actions .secondary:hover {
  color: #ffffff;
  background: #3a3a3c;
  border-color: #3a3a3c;
}

.company-info-form {
  display: grid;
  gap: 12px;
  max-width: 680px;
  padding: 10px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.team-directory-section {
  display: grid;
  gap: 10px;
}

.team-directory-head,
.team-directory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.team-directory-head h2 {
  color: var(--ink);
  font-size: 15px;
}

.team-directory-head p,
.team-directory-message {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.team-directory-message[data-tone="error"] {
  color: #9d2118;
}

.team-member-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.team-member-count strong {
  color: var(--ink);
  font-size: 16px;
}

.team-directory-actions .ghost {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}

.team-member-list {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.team-member-list:empty {
  display: none;
}

.team-member-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr) minmax(130px, 0.8fr) minmax(120px, 0.7fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.team-member-row:last-child {
  border-bottom: 0;
}

.team-member-account {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.team-member-account .sidebar-user-avatar {
  width: 34px;
  height: 34px;
}

.team-member-account strong,
.team-member-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-account strong {
  color: var(--ink);
  font-size: 12px;
}

.team-member-account small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.team-member-row label {
  gap: 4px;
  font-size: 11px;
}

.team-member-row input,
.team-member-row select {
  min-height: 36px;
  height: 36px;
  padding: 6px 9px;
  font-size: 12px;
}

.team-member-row .secondary {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12px;
}

.team-finance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.team-finance-toggle input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: #1d1d1f;
}

html:not([data-finance-access="true"]) [data-view="financePositionView"] {
  display: none !important;
}

.secure-lock-open {
  overflow: hidden;
}

.secure-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 28, 30, 0.3);
  backdrop-filter: blur(8px);
}

.secure-lock-overlay.hidden {
  display: none;
}

.secure-lock-card {
  display: grid;
  gap: 13px;
  width: min(100%, 390px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.secure-lock-card h2 {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.secure-lock-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.secure-lock-card label {
  display: grid;
  gap: 5px;
}

.secure-lock-card label.hidden {
  display: none;
}

.secure-lock-card label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.secure-lock-card input {
  min-height: 40px;
  background: #ffffff;
}

.secure-lock-symbol {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid #d1d1d6;
  border-radius: 9px;
  background: #f5f5f7;
}

.settings-lock-symbol::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  width: 13px;
  height: 12px;
  border: 2px solid #1d1d1f;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.settings-lock-symbol::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 19px;
  width: 20px;
  height: 15px;
  border-radius: 4px;
  background: #1d1d1f;
}

.secure-lock-status {
  min-height: 18px;
  margin: 0 !important;
  font-weight: 650;
}

.secure-lock-status[data-tone="error"] {
  color: #c9352b;
}

.secure-lock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.secure-lock-actions button {
  min-height: 36px;
  padding: 6px 13px;
  font-size: 12px;
}

.team-member-row.pending {
  background: #fafafa;
}

.team-pending-label {
  color: #8a4f00;
  font-size: 11px;
  font-weight: 800;
}

.company-logo-editor {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.company-logo-editor img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}

.invoice-order-card {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  overflow: hidden;
}

.invoice-order-card.delivered {
  background: #f7fcf8;
  border-color: #d5eadb;
}

.invoice-order-card.not-delivered {
  background: #fff9f8;
  border-color: #eed8d4;
}

.invoice-order-card.partial {
  background: #fffbf2;
  border-color: #eadfbe;
}

.invoice-order-card span,
.invoice-order-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-order-status-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
  margin-top: 4px;
}

.invoice-order-status-row .status-pill {
  min-height: 38px;
  border-radius: 8px;
}

.invoice-order-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.invoice-order-fact b {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.05;
}

.invoice-order-fact small {
  font-size: 10px;
  line-height: 1.1;
}

.invoice-order-fact.remaining b {
  color: #b84b42;
}

.invoice-orders-see-more {
  width: 100%;
  min-height: 36px;
}

.invoice-orders-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.invoice-orders-pagination .secondary {
  min-height: 34px;
  font-size: 11px;
}

.invoice-order-card:hover {
  border-color: rgba(29, 29, 31, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.invoice-order-card.active {
  border-color: #69aff0;
  box-shadow: 0 0 0 1px #69aff0;
}

@media (min-width: 721px) {
  #invoiceOrderList .invoice-order-card:not(.history-card) {
    grid-template-columns: minmax(170px, 0.9fr) minmax(410px, 1.8fr);
    grid-template-rows: auto auto auto;
    gap: 1px 14px;
    min-height: 72px;
    padding: 9px 11px;
    border-radius: 6px;
  }

  #invoiceOrderList .invoice-order-card:not(.history-card) > span,
  #invoiceOrderList .invoice-order-card:not(.history-card) > strong,
  #invoiceOrderList .invoice-order-card:not(.history-card) > small {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #invoiceOrderList .invoice-order-card:not(.history-card) > strong {
    font-size: 14px;
    line-height: 1.35;
  }

  #invoiceOrderList .invoice-order-status-row {
    grid-column: 2;
    grid-row: 1 / 4;
    grid-template-columns: minmax(96px, 0.9fr) repeat(3, minmax(70px, 1fr));
    gap: 0;
    align-self: stretch;
    margin: 0;
  }

  #invoiceOrderList .invoice-order-status-row .status-pill {
    align-self: center;
    min-height: 30px;
    margin-right: 10px;
    border-radius: 6px;
  }

  #invoiceOrderList .invoice-order-fact {
    align-content: center;
    gap: 3px;
    padding: 3px 8px;
    border: 0;
    border-left: 1px solid #e5e5ea;
    border-radius: 0;
    background: transparent;
  }

  #invoiceOrderList .invoice-order-fact b {
    font-size: 14px;
  }

  #invoiceOrderList .invoice-order-fact small {
    font-size: 10px;
  }
}

.invoice-preview-panel {
  position: sticky;
  top: 24px;
}

.invoice-print-surface {
  min-height: 620px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invoice-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.invoice-sheet {
  display: flex;
  min-height: 590px;
  flex-direction: column;
  color: #8e8e93;
}

.invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1d1d1f;
}

.invoice-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.invoice-brand img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 14px;
}

.invoice-brand h2 {
  color: #1d1d1f;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.invoice-brand p {
  line-height: 1.4;
}

.invoice-brand p,
.invoice-brand small,
.invoice-meta small,
.invoice-meta span,
.invoice-customer span,
.invoice-customer small {
  color: var(--muted);
}

.invoice-brand small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
}

.invoice-meta {
  display: grid;
  gap: 2px;
  text-align: right;
}

.invoice-meta strong {
  font-size: 20px;
  letter-spacing: 0;
}

/* Keep workspace controls compact while the document itself mirrors A5 print. */
@media screen {
  .invoice-preview-panel > .panel-head {
    margin-bottom: 10px;
  }

  .invoice-preview-panel > .panel-head .report-actions {
    gap: 6px;
  }

  .invoice-preview-panel > .panel-head .secondary,
  .invoice-preview-panel > .panel-head .danger {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .invoice-print-surface {
    min-height: 620px;
    padding: 14px;
  }

  .invoice-preview-panel .invoice-table th:nth-child(2),
  .invoice-preview-panel .invoice-table td:nth-child(2) {
    width: 82px;
  }

  .invoice-preview-panel .invoice-table th:nth-child(3),
  .invoice-preview-panel .invoice-table td:nth-child(3),
  .invoice-preview-panel .invoice-table th:nth-child(4),
  .invoice-preview-panel .invoice-table td:nth-child(4) {
    width: 84px;
  }

  .invoice-preview-panel .invoice-table .aphaw-number-stepper {
    grid-template-columns: minmax(38px, 1fr) 22px;
    width: 76px;
  }

  .invoice-preview-panel .invoice-table .aphaw-step-button {
    min-width: 22px;
  }

  .invoice-preview-panel .invoiceQtyInput {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 12px;
  }

  .invoice-preview-panel .invoice-remaining {
    margin-top: 2px;
    font-size: 9px;
  }

}

.invoice-customer {
  margin: 10px 0;
}

.invoice-customer-card {
  display: grid;
  min-height: 96px;
  padding: 12px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  column-gap: 14px;
  background: #f8f8fa;
  border-radius: 8px;
}

.invoice-customer-card > span,
.invoice-customer-card > strong {
  font-size: 13px;
  line-height: 1.5;
}

.invoice-customer-card > strong {
  min-width: 0;
  margin: 0;
  color: #1d1d1f;
  overflow-wrap: anywhere;
}

.invoice-customer span,
.invoice-customer strong,
.invoice-customer small {
  display: block;
}

.invoice-customer-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  margin: 9px 0 0;
}

.invoice-customer-details div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
}

.invoice-customer-details dt,
.invoice-customer-details dd {
  margin: 0;
}

.invoice-customer-details dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.invoice-customer-details dd {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.invoice-table {
  min-width: 0;
  table-layout: auto;
}

.invoice-table th,
.invoice-table td {
  padding: 6px 8px;
}

.invoiceQtyInput {
  width: 86px;
  min-height: 36px;
  text-align: right;
}

.invoice-qty-print {
  display: none;
}

.invoice-remaining {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.invoice-total {
  display: flex;
  align-items: baseline;
  justify-content: end;
  gap: 12px;
  margin: 10px 0 0;
  padding: 8px 0 0;
  color: var(--ink);
  background: transparent;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  font-size: 18px;
  font-weight: 800;
}

.invoice-total span {
  color: var(--muted);
  line-height: 1.2;
}

.invoice-total strong {
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}

.invoice-footer {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 10px;
  color: #6e6e73;
  border-top: 1px solid #d8d8dc;
  text-align: center;
}

.invoice-footer strong {
  color: #1d1d1f;
  font-size: 12px;
  line-height: 1.45;
}

.invoice-footer span {
  font-size: 10px;
  line-height: 1.4;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.delivered {
  color: #237143;
  background: #e1f3e7;
}

.status-pill.not-delivered {
  color: #99512d;
  background: #fff0e5;
}

.status-pill.partial {
  color: #8a671b;
  background: #fff2c9;
}

.status-pill.advance {
  color: #0a5f9f;
  background: #e5f4ff;
}

.receivable-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.62fr);
}

.receivable-metrics {
  margin-top: 10px;
  margin-bottom: 16px;
}

#receivableView > .receivable-layout > .panel:first-child > .panel-head {
  min-height: 0;
  margin-bottom: 0;
}

#receivableView > .receivable-layout > .panel:first-child > .filter-action-toolbar {
  margin-top: 0;
  margin-bottom: 0;
}

.receivable-filters {
  grid-template-columns: minmax(240px, 1.35fr) repeat(2, minmax(190px, 1fr));
  gap: 10px;
}

.receivable-filters .ghost {
  align-self: end;
}

.receivable-advanced-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.advanced-filter-toggle {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.advanced-filter-panel {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.advanced-filter-panel label {
  display: grid;
  gap: 3px;
  min-width: 230px;
}

.advanced-filter-panel label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.advanced-filter-panel select {
  height: 32px;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 12px;
}

.receivable-period-filter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 140px minmax(260px, 320px) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.receivable-period-filter > label {
  min-width: 0;
}

.receivable-period-filter .month-year-fields {
  grid-template-columns: minmax(120px, 1fr) 96px;
  gap: 6px;
}

.receivable-period-filter > .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: end;
  width: auto;
  min-width: 140px;
  height: var(--period-control-height);
  min-height: var(--period-control-height);
  padding: 6px 12px;
}

.receivable-clear-button::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h11a5 5 0 1 1 0 10H9M4 7l4-4M4 7l4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h11a5 5 0 1 1 0 10H9M4 7l4-4M4 7l4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.receivable-period-filter .year-only .month-year-fields {
  grid-template-columns: minmax(150px, 1fr);
}

.receivable-table {
  min-width: 920px;
}

.receivable-table tbody tr[data-receivable-customer] {
  cursor: pointer;
}

.payable-summary-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.68fr);
}

.payable-summary-metrics {
  margin-bottom: 16px;
}

.finance-metric {
  border: 1px solid transparent;
}

.finance-metric.outstanding {
  border-color: #c8e1fb;
  background: #eaf4ff;
}

.finance-metric.collected {
  border-color: #c9e6d1;
  background: #ebf8ef;
}

.finance-metric.people,
.finance-metric.supplier {
  border-color: #d9d9de;
  background: #f3f3f5;
}

.finance-metric.payable {
  border-color: #f3c7c2;
  background: #fff0ee;
}

.finance-metric.paid {
  border-color: #c9e6d1;
  background: #ebf8ef;
}

.finance-metric.purchase {
  border-color: #f0d9ab;
  background: #fff6e6;
}

.finance-metric.outstanding strong { color: #0066cc; }
.finance-metric.collected strong,
.finance-metric.paid strong { color: #157f3b; }
.finance-metric.people strong,
.finance-metric.supplier strong { color: #5f6368; }
.finance-metric.payable strong { color: #c9352b; }
.finance-metric.purchase strong { color: #9a5a00; }

.payable-summary-filters {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.payable-summary-tools {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}

.payable-summary-tools .filter-action-toolbar {
  margin: 0;
}

.payable-summary-filters #payableMonthlyDateFilter {
  display: grid;
  min-width: 0;
}

.payable-summary-filters #payableMonthlyDateFilter .period-month-year-fields {
  grid-template-columns: minmax(0, 1fr) minmax(78px, 0.72fr);
  gap: 6px;
  min-width: 0;
}

.payable-summary-filters #payableMonthlyDateFilter .period-month-year-fields > select {
  width: 100%;
  min-width: 0;
}

.payable-summary-filters #payableMonthlyDateFilter.year-only .period-month-year-fields {
  grid-template-columns: minmax(0, 1fr);
}

.payable-summary-filters #payableMonthlyDateFilter.hidden {
  display: none;
}

.payable-summary-filters .ghost {
  align-self: end;
  width: 100%;
  min-height: var(--period-control-height);
  height: var(--period-control-height);
  padding: 6px 9px;
}

.payable-summary-table {
  min-width: 920px;
}

.payable-summary-table tbody tr[data-payable-supplier] {
  cursor: pointer;
}

.payable-summary-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.payable-detail-panel .info-line {
  margin-bottom: 12px;
}

.payable-payment-form {
  margin-bottom: 12px;
}

.payable-payment-form .form-actions {
  grid-template-columns: 1fr auto auto;
}

.payable-payment-form .primary {
  width: 100%;
}

.payable-order-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.payable-order-card-selected {
  border: 2px solid #7abcf0;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.1);
}

.payable-order-card strong,
.payable-order-card small {
  display: block;
}

.payable-order-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.payable-order-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.payable-order-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.payable-order-facts span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.payable-order-money {
  display: grid;
  gap: 2px;
}

.payable-history-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.payable-history-line .edit-button {
  flex: 0 0 auto;
}

.selected-row td {
  background: #ffffff;
  border-top: 2px solid #7abcf0;
  border-bottom: 2px solid #7abcf0;
}

.selected-row td:first-child {
  border-left: 2px solid #7abcf0;
}

.selected-row td:last-child {
  border-right: 2px solid #7abcf0;
}

.receivable-payment-panel .primary {
  width: auto;
}

.receivable-payment-panel .form-actions {
  display: flex;
  align-items: stretch;
}

.receivable-payment-panel .form-actions .primary {
  flex: 0 0 auto;
}

.receivable-payment-panel .form-actions .ghost,
.receivable-payment-panel .form-actions .danger {
  flex: 0 0 auto;
}

#receivablePaymentSummary {
  margin-top: 10px;
}

.receivable-history-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  padding: 7px 10px;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #c7c7cc;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

.receivable-history-toggle::before {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.receivable-history-toggle::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.receivable-history-toggle[aria-expanded="true"] {
  color: #ffffff;
  background: #1d1d1f;
  border-color: #1d1d1f;
}

.receivable-history-toggle[aria-expanded="true"]::after {
  transform: rotate(225deg);
}

.receivable-history-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.receivable-payment-history-panel {
  margin-top: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.receivable-payment-history-panel.hidden {
  display: none;
}

.opening-balance-fields {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #cfe1f6;
  border-radius: 8px;
}

.opening-balance-fields .section-label {
  margin: 0;
}

.receivable-invoice-details {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.receivable-invoice-details .section-label {
  margin: 0 0 2px;
}

.receivable-detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.receivable-see-more,
.receivable-show-less {
  width: 100%;
  min-height: 34px;
}

.receivable-invoice-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
}

.receivable-invoice-link {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.receivable-invoice-link:hover {
  border-color: #a8a8ad;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.receivable-invoice-link:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

.opening-receivable-card {
  border-color: #cfe1f6;
}

.opening-receivable-card .receivable-invoice-head {
  color: #075d9b;
  background: #edf5ff;
}

.opening-receivable-card .receivable-invoice-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

.opening-receivable-card .receivable-invoice-line b {
  white-space: nowrap;
  text-align: right;
}

.receivable-invoice-head,
.receivable-invoice-total,
.receivable-invoice-line,
.receivable-grand-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.receivable-invoice-head {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
  background: #f2f2f7;
}

.receivable-invoice-head small,
.receivable-invoice-payment,
.receivable-grand-total small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.receivable-invoice-line {
  padding: 7px 10px;
  border-top: 1px solid #ececf0;
  font-size: 12px;
}

.receivable-invoice-line span:nth-child(2),
.receivable-invoice-line b {
  white-space: nowrap;
  text-align: right;
}

.receivable-invoice-total {
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.receivable-invoice-adjustment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 10px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.receivable-invoice-adjustment b {
  white-space: nowrap;
  text-align: right;
}

.receivable-invoice-adjustment.discount {
  padding-bottom: 7px;
  color: #9a5a00;
}

.receivable-invoice-total b {
  grid-column: 2 / -1;
  white-space: nowrap;
  text-align: right;
}

.receivable-invoice-payment {
  display: block;
  padding: 0 10px 9px;
}

.receivable-grand-total {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 11px;
  border-radius: 8px;
  color: #075d9b;
  background: #edf5ff;
}

.receivable-total-box {
  min-width: 0;
}

.receivable-total-box span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.receivable-total-box b {
  display: block;
  margin-top: 4px;
  color: #075d9b;
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
}

.receivable-total-box.due b {
  color: #c9352b;
}

.receivable-grand-total small {
  grid-column: 1 / -1;
}

.payment-history-list {
  display: grid;
  gap: 8px;
}

.payment-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.payment-history-row strong,
.payment-history-row small {
  display: block;
}

.payment-history-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.payment-history-row b {
  white-space: nowrap;
}

.payment-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-action {
  min-height: 34px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--primary-strong);
  background: var(--soft);
  font-weight: 800;
}

.report-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  align-items: end;
}

.date-filter-controls #monthlyFilter.year-only .month-year-fields {
  grid-template-columns: minmax(112px, 1fr);
}

.hidden {
  display: none;
}

.table-wrap {
  margin-top: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

th {
  color: var(--muted);
  background: #f5f5f7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.num-cell {
  text-align: right;
  white-space: nowrap;
}

.action-cell {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.report-action-cell {
  width: 86px;
}

.report-row-actions {
  justify-content: center;
  gap: 4px;
}

#reportsView .table-title {
  margin-top: 14px;
}

#reportsView .table-wrap {
  margin-top: 10px;
}

#reportsView .report-table {
  min-width: 940px;
  table-layout: fixed;
}

#reportsView .report-table th:nth-child(1),
#reportsView .report-table td:nth-child(1) { width: 74px; white-space: nowrap; }
#reportsView .report-table th:nth-child(2),
#reportsView .report-table td:nth-child(2) { width: 106px; }
#reportsView .report-table th:nth-child(3),
#reportsView .report-table td:nth-child(3) { width: 92px; }
#reportsView .report-table th:nth-child(4),
#reportsView .report-table td:nth-child(4) { width: 126px; }
#reportsView .report-table th:nth-child(5),
#reportsView .report-table td:nth-child(5),
#reportsView .report-table th:nth-child(6),
#reportsView .report-table td:nth-child(6) { width: 56px; }
#reportsView .report-table th:nth-child(7),
#reportsView .report-table td:nth-child(7) { width: 62px; }
#reportsView .report-table th:nth-child(8),
#reportsView .report-table td:nth-child(8) { width: 82px; }
#reportsView .report-table th:nth-child(9),
#reportsView .report-table td:nth-child(9) { width: 92px; }
#reportsView .report-table th:nth-child(10),
#reportsView .report-table td:nth-child(10) { width: 80px; }
#reportsView .report-table th:nth-child(11),
#reportsView .report-table td:nth-child(11) { width: 62px; }

#reportsView .report-table th {
  padding: 7px 5px;
}

#reportsView .report-table td {
  padding: 7px 5px;
}

#reportsView .report-table td small {
  display: block;
  margin-top: 3px;
}

#reportsView .selectable-order-row {
  cursor: pointer;
}

#reportsView .selectable-order-row:hover td {
  background: #f8fafc;
}

#reportsView .selectable-order-row.selected td {
  background: #f6faff;
  border-top: 1px solid #8bbcff;
  border-bottom: 1px solid #8bbcff;
}

#reportsView .selectable-order-row.selected td:first-child {
  border-left: 1px solid #8bbcff;
}

#reportsView .selectable-order-row.selected td:last-child {
  border-right: 1px solid #8bbcff;
}

#reportsView .selectable-order-row:focus-visible {
  outline: none;
}

#reportsView .selectable-order-row:focus-visible td {
  background: #f6faff;
}

#reportsView .report-table .status-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding-inline: 7px;
  line-height: 1.25;
  white-space: normal;
}

#reportsView .report-table .invoice-row-button,
#reportsView .report-table .icon-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 6px;
}

#reportsView .report-action-cell {
  width: 46px;
}

.finished-product-view {
  display: none;
}

.finished-product-view.active {
  display: block;
}

.finished-product-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.finished-product-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
  padding: 3px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finished-product-tab {
  min-height: 32px;
  padding: 6px 13px;
  color: #6e6e73;
  background: #ffffff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
}

.finished-product-tab:not(.active):hover {
  color: #1d1d1f;
  background: #f7f7f8;
}

.finished-product-tab.active {
  color: #ffffff;
  background: #1d1d1f;
}

.finished-product-subview:not(.active) {
  display: none;
}

.finished-product-products-panel {
  padding: 14px;
  background: var(--grouped-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.finished-product-product-form {
  grid-template-columns: 150px minmax(220px, 1fr) 150px auto auto;
  margin-bottom: 12px;
}

.finished-product-product-list {
  max-width: none;
}

.finished-product-catalog-table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finished-product-catalog-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.finished-product-catalog-table th,
.finished-product-catalog-table td {
  padding: 9px 12px;
  vertical-align: middle;
}

.finished-product-catalog-table th:nth-child(1) {
  width: 44%;
}

.finished-product-catalog-table th:nth-child(2) {
  width: 26%;
}

.finished-product-catalog-table th:nth-child(3) {
  width: 22%;
}

.finished-product-catalog-table .catalog-actions-column,
.finished-product-catalog-table .catalog-row-actions {
  width: 82px;
  text-align: right;
}

.finished-product-catalog-table .row-actions {
  justify-content: flex-end;
}

.product-code-value {
  color: #4b5563;
  font-weight: 750;
}

.finished-product-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: auto;
  gap: 8px;
  overflow: visible;
}

.finished-product-head-actions.hidden {
  display: none;
}

.finished-product-head-actions .filter-action-toolbar {
  margin: 0;
}

.finished-product-selection-actions {
  position: relative;
}

.finished-product-actions-menu {
  right: 0;
  left: auto;
}

.finished-product-table-panel .panel-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.finished-product-filters {
  display: grid;
  grid-template-columns: 112px 150px 210px 180px auto;
  gap: 8px;
  align-items: end;
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finished-product-filters.hidden {
  display: none;
}

.finished-product-filters label {
  gap: 3px;
  font-size: 11px;
}

.finished-product-filters label span {
  min-height: 15px;
}

.finished-product-filters input,
.finished-product-filters select,
.finished-product-filters > button {
  height: 36px;
  min-height: 36px;
  padding: 6px 9px;
  font-size: 12px;
}

.finished-product-dashboard-section {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--grouped-surface);
  border-radius: 8px;
}

.finished-product-overview-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.finished-product-summary-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.finished-product-summary-card {
  display: grid;
  gap: 2px;
  min-height: 76px;
  padding: 9px 12px;
  border: 1px solid;
  border-radius: 8px;
}

.finished-product-summary-card.produced {
  background: #eef7ff;
  border-color: #b8dcff;
}

.finished-product-summary-card.remaining {
  background: #eefaf2;
  border-color: #b9e8c9;
}

.finished-product-summary-card span,
.finished-product-summary-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.finished-product-summary-card strong {
  color: #0869c8;
  font-size: 22px;
  line-height: 1.15;
}

.finished-product-summary-card.remaining strong {
  color: #16833f;
}

.finished-product-summary-card.remaining strong.negative {
  color: #c9342c;
}

.compact-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.finished-product-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.finished-product-card {
  display: grid;
  gap: 10px;
  min-height: 90px;
  padding: 10px 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.finished-product-card:hover {
  border-color: #99c9ef;
}

.finished-product-card.selected {
  background: #f6faff;
  border-color: #8bbcff;
  box-shadow: inset 0 0 0 1px #8bbcff;
}

.finished-product-card-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.finished-product-card-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finished-product-card-name small,
.finished-product-card-values small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.finished-product-card-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.finished-product-card-values > span {
  padding: 7px 8px;
  background: #f7f7f9;
  border-radius: 6px;
}

.finished-product-card-values strong,
.finished-product-card-values small {
  display: block;
}

.finished-product-card-values strong {
  margin-top: 2px;
  font-size: 18px;
}

.finished-product-card-values .remaining strong {
  color: #16833f;
}

.finished-product-card-values .remaining.negative strong {
  color: #c9342c;
}

.finished-product-empty {
  padding: 16px;
  color: var(--muted);
  background: #ffffff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-weight: 700;
}

.finished-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 14px;
  align-items: start;
}

.finished-product-table-panel,
.finished-product-entry-panel {
  min-width: 0;
  padding: 14px;
  background: var(--grouped-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.finished-product-total {
  min-width: 90px;
  color: var(--primary-strong);
  font-size: 24px;
  line-height: 1;
  text-align: right;
}

.finished-product-remaining strong {
  color: #16833f;
}

.finished-product-remaining.negative strong {
  color: #c9342c;
}

.finished-product-total::after {
  content: " total";
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.finished-product-table-wrap {
  margin-top: 8px;
}

.finished-product-table {
  min-width: 780px;
}

.finished-product-table th,
.finished-product-table td {
  padding: 9px 8px;
}

.finished-product-table th:first-child,
.finished-product-table td:first-child {
  width: 104px;
}

.finished-product-table th:nth-child(3),
.finished-product-table td:nth-child(3) {
  width: 112px;
}

.finished-product-table th:nth-child(4),
.finished-product-table td:nth-child(4) {
  width: 78px;
}

.finished-product-entry-row {
  cursor: pointer;
}

.finished-product-entry-row.selected td {
  background: #f6faff;
  border-top: 1px solid #8bbcff;
  border-bottom: 1px solid #8bbcff;
}

.finished-product-entry-row.selected td:first-child {
  border-left: 1px solid #8bbcff;
}

.finished-product-entry-row.selected td:last-child {
  border-right: 1px solid #8bbcff;
}

.finished-product-entry-row:focus-visible {
  outline: 2px solid #1d1d1f;
  outline-offset: -2px;
}

.finished-product-entry-panel {
  position: sticky;
  top: 74px;
}

.finished-product-form {
  display: grid;
  gap: 10px;
}

.finished-product-form .form-actions {
  margin-top: 4px;
}

.finished-product-form-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
}

.finished-product-form-action::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
}

.save-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  order: 100;
  margin-inline-start: auto;
}

.save-action-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cancel-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cancel-action-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.delete-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.delete-action-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M9 7V4h6v3m3 0-1 14H7L6 7m4 4v6m4-6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M9 7V4h6v3m3 0-1 14H7L6 7m4 4v6m4-6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.save-action-button.hidden,
.cancel-action-button.hidden,
.delete-action-button.hidden {
  display: none;
}

.finished-product-save-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.finished-product-cancel-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.empty-table-cell {
  padding: 28px 14px !important;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1080px) {
  .finished-product-overview-bar {
    display: flex;
  }

  .finished-product-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .finished-product-layout {
    grid-template-columns: 1fr;
  }

  .finished-product-entry-panel {
    position: static;
    max-width: 520px;
  }
}

@media (max-width: 700px) {
  .finished-product-summary-dashboard {
    grid-template-columns: 1fr;
  }

  .finished-product-head-actions {
    justify-content: flex-start;
  }

  .finished-product-filters {
    grid-template-columns: 1fr;
  }

  .finished-product-dashboard-head {
    align-items: stretch;
    flex-direction: column;
  }

  .finished-product-table-wrap {
    overflow: visible;
    border: 0;
  }

  .finished-product-table,
  .finished-product-table tbody,
  .finished-product-table tr,
  .finished-product-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .finished-product-table thead {
    display: none;
  }

  .finished-product-table tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .finished-product-table td,
  .finished-product-table td:first-child,
  .finished-product-table td:nth-child(2),
  .finished-product-table td:nth-child(4),
  .finished-product-table td:nth-child(5),
  .finished-product-table td:last-child {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(94px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  .finished-product-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
  }

}

.invoice-row-button {
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #0071e3;
  background: transparent;
  box-shadow: none;
}

.invoice-row-button:hover,
.invoice-row-button:focus-visible {
  color: #005bb5;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #d2d2d7, 0 2px 6px rgba(0, 0, 0, 0.08);
}

.invoice-row-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 10h6M9 14h6M9 18h4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 10h6M9 14h6M9 18h4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invoice-edit-icon.back-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invoice-preview-icon-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 2px;
  background: #ffffff;
  border: 1px solid #d8d8de;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.invoice-preview-icon-toolbar .utility-icon-button {
  margin: 0;
}

.invoice-preview-icon-toolbar .invoice-save-edit-button {
  display: inline-flex;
  width: auto;
  min-width: 102px;
  padding: 0 13px;
  gap: 7px;
  color: #ffffff;
  background: #1d1d1f;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}

.invoice-preview-icon-toolbar .invoice-save-edit-button::before {
  position: static;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invoice-preview-icon-toolbar .invoice-save-edit-button:hover,
.invoice-preview-icon-toolbar .invoice-save-edit-button:focus-visible {
  color: #ffffff;
  background: #000000;
}

.invoice-preview-icon-toolbar.invoice-correction-toolbar {
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.invoice-correction-toolbar .invoice-edit-icon {
  background: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.invoice-correction-toolbar .invoice-edit-icon:hover,
.invoice-correction-toolbar .invoice-edit-icon:focus-visible {
  color: #1d1d1f;
  background: #f5f5f7;
}

.utility-icon-button.hidden {
  display: none !important;
}

.void-invoice-icon {
  color: #c9342b;
}

.void-invoice-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m6 6 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m6 6 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.void-invoice-icon:hover,
.void-invoice-icon:focus-visible {
  color: #b42318;
  background: #fff0ef;
}

.inline-form {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.side-form {
  display: grid;
  gap: 14px;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.helper-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.side-divider {
  height: 1px;
  margin: 18px 0;
  background: var(--line);
}

.product-form {
  grid-template-columns: minmax(180px, 1fr) 150px auto auto;
}

#finishedProductProductsPanel .finished-product-product-form {
  grid-template-columns: 150px minmax(220px, 1fr) 150px auto auto;
  align-items: center;
}

.product-form-status {
  min-height: 18px;
  margin: -4px 0 10px;
  color: #6e6e73;
  font-size: 11px;
  font-weight: 700;
}

.settings-list {
  display: grid;
  gap: 8px;
}

.distributor-list-tools {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.distributor-toolbar {
  margin-bottom: 0;
}

.distributor-search-panel {
  max-width: 520px;
}

.distributor-search-panel input {
  min-height: 36px;
}

@media (min-width: 941px) {
  #distributorView > .split {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
  }

  #distributorView > .split > .side-panel {
    width: 340px;
  }
}

#distributorView .side-form {
  gap: 10px;
}

.distributor-table-wrap {
  margin-top: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.distributor-table {
  width: 100%;
  min-width: 840px;
  table-layout: fixed;
}

.distributor-col-shortcut { width: 9%; }
.distributor-col-name { width: 18%; }
.distributor-col-type { width: 18%; }
.distributor-col-region { width: 13%; }
.distributor-col-contact { width: 15%; }
.distributor-col-address { width: 19%; }
.distributor-col-discount { width: 8%; }

.distributor-table th,
.distributor-table td {
  padding: 8px 9px;
  vertical-align: middle;
}

.selectable-distributor-row {
  cursor: pointer;
}

.selectable-distributor-row:hover td {
  background: #f8f8fa;
}

.selectable-distributor-row:focus-visible {
  outline: 2px solid rgba(0, 113, 227, 0.42);
  outline-offset: -2px;
}

.distributor-table td strong,
.distributor-table td small {
  display: block;
}

.distributor-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.distributor-type {
  display: inline-flex;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.distributor-address-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-table-cell {
  padding: 24px !important;
  color: var(--muted);
  text-align: center;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sub-distributor-row {
  margin-left: 18px;
  border-left: 3px solid #8abcf2;
  background: #f7fbff;
}

body.dark-mode .sub-distributor-row {
  border-left-color: #3d7dbb;
  background: #20272d;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--muted);
  background: #f2f2f7;
  border-radius: 8px;
  line-height: 1;
}

.icon-button::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
}

.edit-button:hover,
.edit-button:focus {
  color: #007aff;
  background: #edf5ff;
  outline: none;
}

.trash-button:hover,
.trash-button:focus {
  color: #ff3b30;
  background: #fff2f1;
  outline: none;
}

.cancel-order-button:hover,
.cancel-order-button:focus {
  color: #b45309;
  background: #fff7ed;
  outline: none;
}

.cancel-order-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.7 4.9 4.9 6.7 10.2 12l-5.3 5.3 1.8 1.8 5.3-5.3 5.3 5.3 1.8-1.8-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.3L6.7 4.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edit-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.25V20h2.75L17.8 8.95 15.05 6.2 4 17.25Zm15.7-10.95a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0l-1.25 1.25 2.75 2.75 1.5-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.25V20h2.75L17.8 8.95 15.05 6.2 4 17.25Zm15.7-10.95a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0l-1.25 1.25 2.75 2.75 1.5-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.trash-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21a2 2 0 0 1-2-2V8h14v11a2 2 0 0 1-2 2H7ZM9 4h6l1 2h4v2H4V6h4l1-2Zm0 7v7h2v-7H9Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21a2 2 0 0 1-2-2V8h14v11a2 2 0 0 1-2 2H7ZM9 4h6l1 2h4v2H4V6h4l1-2Zm0 7v7h2v-7H9Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100vw - 44px));
  padding: 12px 14px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.context-menu {
  position: fixed;
  z-index: 50;
  min-width: 172px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
  backdrop-filter: saturate(180%) blur(16px);
}

.context-menu button {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  color: #ff453a;
  background: transparent;
  border-radius: 6px;
  font-weight: 850;
  text-align: left;
}

.context-menu button:hover {
  background: #ffecec;
}

@media (max-width: 920px) {
  .panel-head,
  .items-head,
  .raw-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .raw-month-filter {
    width: 100%;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .settings-sidebar {
    position: sticky;
    z-index: 10;
    height: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .app-shell.sidebar-collapsed .settings-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    padding: 5px 7px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .sidebar-toggle {
    position: fixed;
    top: 18px;
    right: 16px;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .app-shell.sidebar-collapsed .sidebar-toggle {
    position: fixed;
    top: 21px;
    right: auto;
    bottom: auto;
    left: calc(var(--sidebar-width) + 8px);
    transform: none;
  }

  .sidebar-brand {
    padding: 0 4px 12px;
  }

  .sidebar-brand img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .tabs,
  .module-nav,
  .report-actions {
    width: 100%;
    overflow-x: auto;
  }

  .tabs {
    display: flex;
    padding-bottom: 2px;
  }

  .module-nav {
    display: flex;
    align-items: flex-start;
    padding-bottom: 2px;
  }

  .nav-group {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 4px;
  }

  .nav-group-title {
    min-height: 24px;
    padding: 1px 7px 3px;
  }

  .nav-group-items {
    display: flex;
    flex-direction: column;
    min-width: 158px;
  }

  .tab {
    min-width: max-content;
  }

  .table-wrap:has(.report-table) {
    overflow: visible;
    border: 0;
  }

  .report-table {
    min-width: 0;
    background: transparent;
  }

  .report-table thead {
    display: none;
  }

  .report-table tbody,
  .report-table tr,
  .report-table td {
    display: block;
    width: 100%;
  }

  .report-table tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .report-table td {
    display: grid;
    grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }

  #reportsView .report-table tr {
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  #reportsView .report-table tr td:nth-child(n) {
    padding: 5px 0;
    width: 100%;
    white-space: normal;
  }

  .report-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
  }

  .report-table td small {
    text-align: right;
  }

  .report-table .report-action-cell,
  .report-table .report-action-cell .row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .split,
  .raw-inventory-layout,
  .grid.two,
  .report-filters,
  .invoice-filters,
  .invoice-history-date-search,
  .invoice-history-main-search,
  .receivable-filters,
  .initial-payment-grid,
  .summary-strip,
  .metrics {
    grid-template-columns: 1fr;
  }

  .cloud-auth-form,
  .team-invite-form {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-trend-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-trend-head {
    align-items: stretch;
  }

  .dashboard-trend-controls {
    justify-content: flex-start;
  }

  .dashboard-head {
    display: grid;
  }

  .dashboard-period-controls {
    justify-content: flex-start;
  }

  .dashboard-trend-controls label,
  .dashboard-product-control,
  .dashboard-period-controls label {
    width: 100%;
  }

  .dashboard-trend-controls select,
  .dashboard-trend-controls input,
  .dashboard-product-control select,
  .dashboard-period-controls select,
  .dashboard-period-controls input {
    width: 100%;
  }

  .receivable-period-filter,
  .receivable-period-filter .month-year-fields {
    grid-template-columns: 1fr;
  }

  .receivable-period-filter > .ghost {
    justify-self: stretch;
    width: 100%;
  }

  .item-row {
    grid-template-columns: 1fr 1fr;
  }

  #orderForm .order-customer-grid {
    grid-template-columns: 1fr;
  }

  #orderForm .item-row {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 0.45fr);
  }

  #orderForm .order-form-footer,
  #orderForm .order-form-footer .actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  #orderForm .order-form-footer .summary-strip {
    width: 100%;
  }

  .item-row .icon {
    width: 100%;
  }

  .inline-form,
  .product-form {
    grid-template-columns: 1fr;
  }

  .company-logo-editor {
    grid-template-columns: 1fr;
  }

  .team-directory-head,
  .team-directory-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .team-member-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .team-member-row .secondary {
    width: 100%;
  }

  .side-panel,
  .raw-side-stack {
    position: static;
  }

  .inventory-dashboard {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }

  .invoice-preview-panel {
    position: static;
  }

  .invoice-customer {
    grid-template-columns: 1fr;
  }

  .invoice-customer-details div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .invoice-order-status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-order-status-row .status-pill {
    grid-column: 1 / -1;
  }
}

/* App-wide dark theme. Printed invoices remain white by design. */
body.dark-mode {
  color-scheme: dark;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --line: #3a3a3c;
  --panel: #1c1c1e;
  --page: #0f0f10;
  --primary: #0a84ff;
  --primary-strong: #409cff;
  --soft: #1d3148;
  --warning: #3a2f1b;
  --grouped-surface: #242426;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

body.dark-mode .settings-sidebar {
  background: rgba(28, 28, 30, 0.9);
}

body.dark-mode .sidebar-toggle {
  border-color: #48484a;
  background: rgba(44, 44, 46, 0.92);
}

body.dark-mode .sidebar-toggle:hover,
body.dark-mode .sidebar-brand.brand-tab:hover,
body.dark-mode .sidebar-brand.brand-tab.active {
  background: #2c2c2e;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  color: var(--ink);
  background: #2c2c2e;
  border-color: #48484a;
}

body.dark-mode .inventory-card,
body.dark-mode .settings-row,
body.dark-mode .invoice-order-card,
body.dark-mode .receivable-invoice-card,
body.dark-mode .detail-card,
body.dark-mode .row-card,
body.dark-mode .info-line,
body.dark-mode .summary-strip,
body.dark-mode .metrics div,
body.dark-mode .metric-button,
body.dark-mode .empty,
body.dark-mode .month-summary,
body.dark-mode .invoice-customer-card {
  background: #242426;
  border-color: var(--line);
}

body.dark-mode .report-metric.qty {
  background: #102a43;
  border-color: #1d4f7c;
}

body.dark-mode .report-metric.amount {
  background: #33260f;
  border-color: #654818;
}

body.dark-mode .report-metric.delivered {
  background: #102e1c;
  border-color: #1f6038;
}

body.dark-mode .report-metric.pending {
  background: #381817;
  border-color: #74302c;
}

body.dark-mode .finance-metric.outstanding {
  background: #102a43;
  border-color: #1d4f7c;
}

body.dark-mode .finance-metric.collected,
body.dark-mode .finance-metric.paid {
  background: #102e1c;
  border-color: #1f6038;
}

body.dark-mode .finance-metric.people,
body.dark-mode .finance-metric.supplier {
  background: #242426;
  border-color: #48484a;
}

body.dark-mode .finance-metric.payable {
  background: #381817;
  border-color: #74302c;
}

body.dark-mode .finance-metric.purchase {
  background: #33260f;
  border-color: #654818;
}

body.dark-mode .dashboard-metric.accent-blue {
  background: #102a43;
  border-color: #1d4f7c;
}

body.dark-mode .dashboard-metric.accent-amber {
  background: #381817;
  border-color: #74302c;
}

body.dark-mode .dashboard-metric.accent-orange {
  background: #33260f;
  border-color: #654818;
}

body.dark-mode .dashboard-metric.accent-teal {
  background: #1c2448;
  border-color: #394a8f;
}

body.dark-mode .receivable-grand-total {
  color: #8fc7ff;
  background: #102a43;
}

body.dark-mode .receivable-total-box b {
  color: #8fc7ff;
}

body.dark-mode .receivable-total-box.due b {
  color: #ff9b94;
}

body.dark-mode .icon-button {
  color: var(--muted);
  background: #2c2c2e;
}

body.dark-mode .ghost {
  color: var(--ink);
  background: #2c2c2e;
  border-color: #48484a;
}

body.dark-mode .tab:not(.active),
body.dark-mode .subtab:not(.active) {
  color: var(--muted);
}

body.dark-mode .tab:hover,
body.dark-mode .subtab:hover,
body.dark-mode .settings-row:hover {
  background: #2c2c2e;
}

body.dark-mode th,
body.dark-mode .table-title,
body.dark-mode .invoice-history-section,
body.dark-mode .receivable-invoice-details,
body.dark-mode .payable-detail-content {
  background: #242426;
}

body.dark-mode td,
body.dark-mode th {
  border-color: var(--line);
}

body.dark-mode .selected-row td,
body.dark-mode .invoice-order-card.active {
  background: #17304a;
}

body.dark-mode .trend-grid-line {
  stroke: #48484a;
}

body.dark-mode .trend-axis-label {
  fill: #a1a1a6;
}

body.dark-mode .raw-entry-table tr.month-break td {
  background: #1c1c1e;
  border-color: #56565b;
}

body.dark-mode .invoice-print-surface,
body.dark-mode .invoice-sheet {
  color: #1d1d1f;
  background: #ffffff;
}

/* Unified application shell: compact navigation and one persistent workspace header. */
.module-nav {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c7c7cc transparent;
}

.module-nav::-webkit-scrollbar {
  width: 3px;
}

.module-nav::-webkit-scrollbar-track {
  background: transparent;
}

.module-nav::-webkit-scrollbar-thumb {
  background: #c7c7cc;
  border-radius: 999px;
}

.nav-group {
  overflow: visible;
  padding: 5px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.nav-group + .nav-group {
  margin-top: 4px;
}

.nav-group-title {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 17px;
  padding: 1px 7px 3px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 27px;
  padding: 3px 5px;
  color: #1d1d1f;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.nav-group-toggle::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-left: auto;
  margin-right: 3px;
  background: #6e6e73;
  opacity: 0.78;
  transform: translateY(-2px) rotate(90deg);
  transition: transform 160ms ease, opacity 160ms ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-group-toggle[aria-expanded="false"]::after {
  opacity: 0.78;
  transform: translateY(-2px) rotate(0deg);
}

.nav-group-toggle:hover {
  background: rgba(0, 0, 0, 0.035);
}

.nav-group-toggle:hover::after {
  opacity: 0.92;
}

.nav-group-toggle:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.38);
  outline-offset: 1px;
}

.nav-group-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: currentColor;
  transform: translateY(-2px);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.nav-group[data-nav-group="sales"] .nav-group-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18M9 9v11M15 9v11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18M9 9v11M15 9v11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.nav-group[data-nav-group="purchase"] .nav-group-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.nav-group[data-nav-group="inventory"] .nav-group-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 8 9 5 9-5v9l-9 5-9-5V8Z'/%3E%3Cpath d='M12 13v9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 8 9 5 9-5v9l-9 5-9-5V8Z'/%3E%3Cpath d='M12 13v9'/%3E%3C/svg%3E");
}

.nav-group[data-nav-group="settings"] .nav-group-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='2'/%3E%3Cpath d='M7 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='14' rx='2'/%3E%3Cpath d='M7 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3C/svg%3E");
}

.nav-group-items {
  display: grid;
  margin-left: 12px;
  padding-left: 7px;
  border-left: 1px solid #c7c7cc;
  gap: 1px;
}

.nav-group-items[hidden] {
  display: none;
}

.nav-group .tab,
.dashboard-nav-tab {
  height: 34px;
  min-height: 34px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
}

.nav-group .tab > span:last-child,
.dashboard-nav-tab > span:last-child {
  min-width: 0;
  padding-block: 1px;
  line-height: 1.5;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-sidebar .sidebar-brand h1,
.settings-sidebar .sidebar-user-profile strong,
.settings-sidebar .sidebar-user-profile small,
.settings-sidebar .global-cloud-status {
  font-weight: 600;
}

.settings-sidebar .nav-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.settings-sidebar .nav-icon::before {
  width: 14px;
  height: 14px;
}

.settings-sidebar .finance-position-icon::before {
  width: 100%;
  height: 100%;
  transform: none;
}

.settings-sidebar .nav-group .tab.active,
.settings-sidebar .dashboard-nav-tab.active {
  color: var(--ink);
  background: #dceaf7;
  box-shadow:
    inset 0 0 0 1px #bfd5e8,
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.settings-sidebar .nav-group .tab.active:hover,
.settings-sidebar .dashboard-nav-tab.active:hover {
  color: var(--ink);
  background: #dceaf7;
}

.settings-sidebar .nav-group .tab:focus-visible,
.settings-sidebar .dashboard-nav-tab:focus-visible {
  outline: 2px solid rgba(0, 122, 255, 0.42);
  outline-offset: 1px;
}

.settings-sidebar .sidebar-brand.brand-tab.active,
.settings-sidebar .sidebar-brand.brand-tab.active:hover {
  color: var(--ink);
  background: transparent;
}

/* Collapsed desktop sidebar remains a usable icon rail. */
.app-shell.sidebar-collapsed .sidebar-brand.brand-tab {
  flex-direction: column;
  gap: 4px;
  margin-bottom: 7px;
  padding: 7px 0 5px;
  text-align: center;
}

.app-shell.sidebar-collapsed .sidebar-brand img {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
}

.app-shell.sidebar-collapsed .sidebar-brand h1 {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-module-search,
.app-shell.sidebar-collapsed .sidebar-module-search-empty,
.app-shell.sidebar-collapsed .sidebar-user-copy,
.app-shell.sidebar-collapsed .global-cloud-status {
  display: none !important;
}

.app-shell.sidebar-collapsed .module-nav {
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-shell.sidebar-collapsed .nav-group {
  width: 48px;
  padding: 4px 3px;
}

.app-shell.sidebar-collapsed .nav-group + .nav-group {
  margin-top: 6px;
}

.app-shell.sidebar-collapsed .nav-group-items {
  display: grid !important;
  align-items: center;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.app-shell.sidebar-collapsed .nav-group-toggle {
  display: none;
}

.app-shell.sidebar-collapsed .nav-group .tab,
.app-shell.sidebar-collapsed .dashboard-nav-tab {
  justify-content: center;
  width: 40px;
  min-height: 36px;
  padding: 5px;
}

.app-shell.sidebar-collapsed .nav-group .tab > span:last-child,
.app-shell.sidebar-collapsed .dashboard-nav-tab > span:last-child {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-cloud-row {
  min-height: 8px;
  margin-top: auto;
}

.app-shell.sidebar-collapsed .sidebar-user-profile {
  justify-content: center;
  width: 40px;
  min-height: 40px;
  margin-inline: auto;
  padding: 3px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.app-shell.sidebar-collapsed .sidebar-user-profile:hover,
.app-shell.sidebar-collapsed .sidebar-user-profile.active {
  background: #ffffff;
  border-color: #dedee3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.content-pane {
  --content-gutter: clamp(18px, 3vw, 40px);
  min-width: 0;
  padding: 0 var(--content-gutter) 42px;
  background: #ffffff;
}

.app-utility-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  margin: 0 calc(var(--content-gutter) * -1) 16px;
  padding: 0 var(--content-gutter);
  background: #ffffff;
  border-bottom: 1px solid #e5e5ea;
  backdrop-filter: none;
}

.active-view-title {
  min-width: 0;
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 600;
  padding-block: 3px;
  line-height: 1.25;
  transform: translateY(1px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact typography for dense daily ERP workspaces. */
.view .panel-head h2,
.view .dashboard-head h2,
.view .raw-page-head h2 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.view .panel-head.compact h2,
.view .side-panel .panel-head h2,
.view .invoice-preview-panel > .panel-head h2 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.view h3 {
  color: var(--ink);
  font-size: 15px;
}

.panel-head p,
.dashboard-subtitle,
.section-title small,
.view .eyebrow {
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
}

.primary,
.secondary,
.ghost,
.danger,
.filter-drawer-toggle,
.purchase-status-tab,
.subtab {
  font-size: 13px;
}

.filter-drawer-toggle {
  min-height: 32px;
  margin: 0 0 8px;
  padding: 5px 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #b8b8bd;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.filter-drawer-toggle:hover,
.filter-drawer-toggle:focus-visible {
  color: var(--primary-strong);
  background: var(--panel);
  border-color: var(--primary);
  text-decoration: none;
}

/* Compact, semantic action controls shared by reports and list modules. */
.filter-action-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 2px;
  background: #ffffff;
  border: 1px solid #d8d8de;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.order-report-toolbar {
  overflow: visible;
  margin-bottom: 0;
}

.embedded-report .report-metrics {
  margin-top: 10px;
}

.selected-order-actions {
  position: relative;
  display: inline-flex;
}

.selection-actions-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h6M14 8h6M4 16h10M18 16h2'/%3E%3Ccircle cx='12' cy='8' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='16' cy='16' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h6M14 8h6M4 16h10M18 16h2'/%3E%3Ccircle cx='12' cy='8' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='16' cy='16' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.selection-actions-icon.is-unavailable {
  color: #aeaeb2;
  opacity: 0.7;
}

.selection-actions-icon.is-unavailable:hover {
  color: #6e6e73;
  background: #f2f2f7;
}

.selection-actions-icon[aria-expanded="true"] {
  color: #ffffff;
  background: #1d1d1f;
}

.selected-order-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  width: 154px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.finished-product-selection-actions > .finished-product-actions-menu {
  right: 0;
  left: auto;
  max-width: min(154px, calc(100vw - 24px));
}

.selected-order-actions-menu.hidden {
  display: none !important;
}

.selected-order-menu-item {
  position: relative;
  min-height: 36px;
  padding: 7px 10px 7px 36px;
  color: #1d1d1f;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.selected-order-menu-item::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 10px;
  width: 17px;
  height: 17px;
  background: currentColor;
}

.selected-order-menu-item:hover,
.selected-order-menu-item:focus-visible {
  background: #f2f2f7;
  outline: none;
}

.edit-order-menu-item::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.25V20h2.75L17.8 8.95 15.05 6.2 4 17.25Zm15.7-10.95a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0l-1.25 1.25 2.75 2.75 1.5-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.25V20h2.75L17.8 8.95 15.05 6.2 4 17.25Zm15.7-10.95a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0l-1.25 1.25 2.75 2.75 1.5-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.delete-order-menu-item {
  color: #c9342b;
}

.delete-order-menu-item::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21a2 2 0 0 1-2-2V8h14v11a2 2 0 0 1-2 2H7ZM9 4h6l1 2h4v2H4V6h4l1-2Zm0 7v7h2v-7H9Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21a2 2 0 0 1-2-2V8h14v11a2 2 0 0 1-2 2H7ZM9 4h6l1 2h4v2H4V6h4l1-2Zm0 7v7h2v-7H9Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.utility-icon-button,
.filter-action-button,
.filter-drawer-toggle.filter-icon-button {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  color: #1d1d1f;
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  transition: color 140ms ease, background 140ms ease, transform 120ms ease;
}

.utility-icon-button:hover,
.filter-action-button:hover,
.filter-drawer-toggle.filter-icon-button:hover {
  color: #005bb5;
  background: #eef6ff;
}

.utility-icon-button:active,
.filter-action-button:active,
.filter-drawer-toggle.filter-icon-button:active {
  transform: scale(0.94);
}

.filter-action-button[aria-expanded="true"],
.filter-drawer-toggle.filter-icon-button[aria-expanded="true"] {
  color: #ffffff;
  background: #1d1d1f;
}

.utility-icon-button::before,
.filter-action-button::before,
.filter-drawer-toggle.filter-icon-button::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  background: currentColor;
}

.search-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-4.35-4.35m2.35-5.15A7.5 7.5 0 1 1 4 11.5a7.5 7.5 0 0 1 15 0Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-4.35-4.35m2.35-5.15A7.5 7.5 0 1 1 4 11.5a7.5 7.5 0 0 1 15 0Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.filter-icon-button::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16l-6.2 7v5l-3.6 2v-7L4 6Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16l-6.2 7v5l-3.6 2v-7L4 6Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.table-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18M9 9v11M15 9v11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18M9 9v11M15 9v11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.printer-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V3h10v5M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M7 14h10v7H7v-7Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 11h.01' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V3h10v5M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M7 14h10v7H7v-7Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 11h.01' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.filter-drawer.filter-search-mode > :not(.filter-search-section) {
  display: none !important;
}

.new-action {
  min-height: 34px;
  padding: 6px 12px;
  color: #ffffff;
  background: #1d1d1f;
  border: 1px solid #1d1d1f;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.new-action:hover { background: #000000; }

/* This module uses a lighter outline than the shared filled delete glyph. */
.raw-delete-selected::before {
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M9 7V4.5h6V7M7.5 7l.8 12h7.4l.8-12M10.5 10.5v5.5M13.5 10.5v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M9 7V4.5h6V7M7.5 7l.8 12h7.4l.8-12M10.5 10.5v5.5M13.5 10.5v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Keep the raw-material icon tray and the New command visually separate. */
.raw-selector-head-actions {
  padding: 2px !important;
  background: #ffffff !important;
  border: 1px solid #d8d8de !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.raw-selector-head-actions > .filter-action-toolbar {
  flex: 0 0 auto;
  width: fit-content;
  inline-size: fit-content;
  min-height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
}

.raw-selector-panel > .panel-head > .raw-selector-add {
  margin: 0 0 0 4px;
  outline: 0;
  box-shadow: none;
}

/* Shared table hierarchy: stronger headers, quieter rows, and clear columns. */
table thead th {
  color: #566574;
  background: #eaf0f6 !important;
  font-size: 14px !important;
}

table tbody td {
  font-size: 13px !important;
}

table tbody td .status-pill {
  font-size: 12px;
}

@media (min-width: 769px) {
  table tr > th:not(:last-child),
  table tr > td:not(:last-child) {
    border-right: 1px solid #e5e5ea;
  }
}

/* White utility controls remain distinct on the grouped grey work surfaces. */
.view .icon-button,
.view .search-button {
  background: #ffffff;
  border: 1px solid #c7c7cc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.view .icon-button:hover,
.view .search-button:hover {
  background: #ffffff;
  border-color: #8e8e93;
}

/* The persistent header owns module titles; local controls remain where they are useful. */
#dashboardView > .dashboard-head > div:first-child,
#receivableView > .receivable-layout > .panel:first-child > .panel-head > div:first-child,
#payableSummaryView > .payable-summary-layout > .panel:first-child > .panel-head > div:first-child {
  display: none;
}

#dashboardView > .dashboard-head,
#receivableView > .receivable-layout > .panel:first-child > .panel-head,
#payableSummaryView > .payable-summary-layout > .panel:first-child > .panel-head {
  justify-content: flex-end;
}

#dashboardView > .dashboard-head {
  justify-content: flex-start;
}

#invoiceView > .invoice-layout > .panel:first-child > .panel-head,
#distributorView > .split > .panel:first-child > .panel-head,
#rawMaterialView > .raw-page-head,
#settingsView > .panel > .panel-head:first-child {
  display: none;
}

/* Apple-style grouped surfaces keep dense workflows readable without card clutter. */
#orderView > .order-entry-layout > .panel,
#orderView > .embedded-report,
#invoiceView > .invoice-layout > .panel:first-child,
#receivableView > .receivable-layout > .panel:first-child,
#distributorView > .split > .panel:first-child,
#payableSummaryView > .payable-summary-layout > .panel:first-child,
#rawMaterialView .raw-inventory-main > .panel,
#settingsView > .panel {
  padding: 14px;
  background: var(--grouped-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

#orderView > .embedded-report {
  margin-top: 16px;
}

/* Desktop order workspace: existing orders stay visible beside compact entry. */
@media (min-width: 1021px) {
  #orderView.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 460px);
    gap: 16px;
    align-items: start;
  }

  #orderView > .embedded-report {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-top: 0;
  }

  #orderView > .order-entry-layout {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  #orderView #orderForm.compact-order-form {
    max-width: none;
  }

  #orderView #orderForm .order-customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #orderView #distributorShortcutLabel,
  #orderView #posCustomerLabel {
    grid-column: 1 / -1;
  }

  #orderView #orderForm .item-row {
    grid-template-columns: minmax(100px, 0.72fr) minmax(130px, 1fr) 42px;
  }

  #orderView #orderForm .item-row > label:first-child {
    grid-column: 1 / -1;
  }

  #orderView #orderForm .order-form-footer .summary-strip {
    width: 100%;
  }
}

.view .side-panel,
.view .invoice-preview-panel,
.view .dashboard-trend-panel {
  background: var(--grouped-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.view .panel th {
  background: #eaf0f6;
}

.view .panel tbody tr:last-child td {
  border-bottom: 0;
}

.purchase-module-view.active,
.plastics-roll-module-view.active {
  display: block;
  min-height: 0;
}

.purchase-module-embed {
  min-height: 0;
  border-radius: 0;
  overflow: visible;
}

body.dark-mode .app-utility-bar {
  background: rgba(15, 15, 16, 0.9);
  border-bottom-color: #3a3a3c;
}

@media (max-width: 920px) {
  .content-pane {
    --content-gutter: 12px;
    padding: 0 var(--content-gutter) 28px;
  }

  .app-utility-bar {
    min-height: 68px;
    margin: 0 calc(var(--content-gutter) * -1) 16px;
    padding: 0 var(--content-gutter);
  }

  .active-view-title {
    font-size: 20px;
  }

  .module-nav {
    gap: 8px;
  }

  .nav-group {
    padding: 7px 6px;
  }

  .nav-group-title {
    display: block;
    padding: 0 7px 2px;
  }

  .nav-group + .nav-group {
    border-top: 0;
    border-left: 1px solid #dedee3;
  }

  .nav-group-items {
    min-width: 158px;
  }

  #orderView > .order-entry-layout > .panel,
  #orderView > .embedded-report,
  #invoiceView > .invoice-layout > .panel:first-child,
  #receivableView > .receivable-layout > .panel:first-child,
  #distributorView > .split > .panel:first-child,
  #payableSummaryView > .payable-summary-layout > .panel:first-child,
  #finishedProductView .finished-product-dashboard-section,
  #finishedProductView .finished-product-layout > .panel,
  #rawMaterialView .raw-inventory-main > .panel,
  #settingsView > .panel {
    padding: 12px;
  }
}

@media (max-width: 620px) {
  .dashboard-filter-panel {
    grid-template-columns: 1fr;
  }

  .dashboard-filter-group {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dashboard-filter-panel .dashboard-period-controls,
  .dashboard-filter-panel .dashboard-trend-controls {
    grid-template-columns: 1fr;
  }

  .dashboard-section-head,
  .dashboard-sales-head {
    display: grid;
    align-items: stretch;
  }

  .dashboard-production-products {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .dashboard-production-table {
    display: grid;
    min-width: 0;
    gap: 8px;
  }

  .dashboard-production-header {
    display: none;
  }

  .dashboard-production-row:not(.dashboard-production-header) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
  }

  .dashboard-production-row .dashboard-production-name {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid #e5e5ea;
  }

  .dashboard-production-row > span {
    padding: 9px;
  }

  .dashboard-production-row > span strong {
    font-size: 13px;
  }

  .invoice-history-card {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .invoice-history-customer {
    grid-column: 1 / -1;
  }

  .invoice-history-quantity {
    justify-items: start;
    text-align: left;
  }
}

/* Financial position */
.finance-position-view {
  display: none;
}

.finance-position-view.active {
  display: block;
}

.finance-position-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 10px;
}

.finance-position-head h2 {
  color: var(--ink);
  font-size: 17px;
}

.finance-change-password {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #d2d2d7;
  background: #ffffff;
  font-size: 11px;
  white-space: nowrap;
}

.finance-position-period {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.finance-period-filter {
  display: grid;
  grid-template-columns: 132px 112px 112px minmax(190px, 240px);
  align-items: start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #d8d8de;
  border-radius: 8px;
  background: var(--grouped-surface);
}

.finance-period-filter.hidden {
  display: none;
}

.finance-period-filter:not(.filter-search-mode) .filter-search-section {
  display: none;
}

.finance-period-filter.filter-search-mode {
  display: block;
  width: min(360px, 100%);
}

.finance-period-filter.filter-search-mode .finance-ledger-search {
  display: grid;
  gap: 4px;
}

.finance-period-filter.filter-search-mode input {
  width: 100%;
  min-height: 36px;
  background: #ffffff;
}

.finance-period-filter label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.finance-period-filter label.hidden {
  display: none;
}

.finance-period-filter label > span {
  display: flex;
  align-items: center;
  height: 16px;
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.finance-period-filter select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 5px 28px 5px 9px;
  background-color: #ffffff;
}

.finance-view-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.finance-filter-toolbar {
  flex: 0 0 auto;
  margin: 0;
}

#financePositionView:not(.finance-ledger-active) .finance-filter-toolbar .search-icon {
  display: none;
}

.finance-view-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
  padding: 3px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: #ffffff;
}

.finance-view-tab {
  min-height: 32px;
  padding: 5px 11px;
  color: #636366;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}

.finance-view-tab.active {
  color: #ffffff;
  background: #1d1d1f;
}

.finance-subview {
  display: none;
}

.finance-subview.active {
  display: block;
}

.finance-final-card {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 22px;
  text-align: center;
  border: 1px solid #b9d9fa;
  border-radius: 8px;
  background: #eaf4ff;
}

.finance-final-card span,
.finance-final-card small,
.finance-position-total span,
.finance-breakdown-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.finance-final-card strong {
  color: #005eb8;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
}

.finance-position-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.finance-position-total,
.finance-breakdown-grid section {
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.finance-position-total {
  background: #ffffff;
  border-color: #d8d8dd;
}

.finance-position-total.asset {
  border-color: #c9e6d1;
  background: #ebf8ef;
}

.finance-position-total.liability {
  border-color: #f3c7c2;
  background: #fff0ee;
}

.finance-position-total.movement {
  border-color: #f0d9ab;
  background: #fff6e6;
}

.finance-position-total strong,
.finance-breakdown-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.finance-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.finance-breakdown-grid section {
  border-color: #d8d8dd;
  background: #ffffff;
}

.finance-breakdown-grid .cash {
  border-color: #c7dcf3;
  background: #eef6ff;
}

.finance-breakdown-grid .receivable {
  border-color: #c9e6d1;
  background: #ebf8ef;
}

.finance-breakdown-grid .supplier-advance {
  border-color: #bfe3df;
  background: #ebf8f6;
}

.finance-breakdown-grid .payable {
  border-color: #f3c7c2;
  background: #fff0ee;
}

.finance-breakdown-grid .customer-advance {
  border-color: #f0d9ab;
  background: #fff6e6;
}

.finance-breakdown-grid .loan {
  border-color: #d9cfee;
  background: #f6f1fc;
}

.finance-warnings {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 11px 13px;
  color: #7a4b00;
  border: 1px solid #efd49b;
  border-radius: 8px;
  background: #fff9e9;
  font-size: 11px;
}

.finance-warnings span {
  display: block;
}

.finance-workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 14px;
  align-items: start;
}

.finance-table-panel,
.finance-entry-panel {
  padding: 14px;
  background: var(--grouped-surface);
  border: 0;
  box-shadow: none;
}

.finance-inventory-table,
.finance-ledger-table {
  min-width: 840px;
  table-layout: fixed;
}

.finance-inventory-table {
  min-width: 960px;
}

.finance-inventory-table th,
.finance-inventory-table td {
  padding: 7px 10px;
  vertical-align: middle;
}

.finance-inventory-table th:nth-child(1) {
  width: 15%;
}

.finance-inventory-table th:nth-child(2) {
  width: 20%;
}

.finance-inventory-table th:nth-child(3) {
  width: 9%;
}

.finance-inventory-table th:nth-child(4) {
  width: 16%;
}

.finance-inventory-table th:nth-child(5) {
  width: 12%;
}

.finance-inventory-table th:nth-child(6) {
  width: 18%;
}

.finance-inventory-table th:last-child,
.finance-inventory-table td:last-child {
  width: 70px;
  padding-right: 8px;
  padding-left: 6px;
  text-align: center;
}

.finance-inventory-table tbody tr {
  height: 64px;
}

.finance-entry-history-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.finance-entry-table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
}

.finance-entry-table th:nth-child(1),
.finance-entry-table td:nth-child(1) {
  width: 120px;
}

.finance-entry-table th:nth-child(2),
.finance-entry-table td:nth-child(2) {
  width: 180px;
}

.finance-entry-table th:nth-child(3),
.finance-entry-table td:nth-child(3) {
  width: 150px;
}

.finance-entry-table th:last-child,
.finance-entry-table td:last-child {
  width: 52px;
  text-align: center;
}

.finance-account-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.finance-account-table th:first-child,
.finance-account-table td:first-child {
  width: 54%;
}

.finance-account-table th:nth-child(2),
.finance-account-table td:nth-child(2) {
  width: 38%;
}

.finance-account-table .finance-account-action-heading,
.finance-account-table .finance-account-action-cell {
  width: 54px;
  padding-right: 10px;
  padding-left: 6px;
  text-align: center;
}

.finance-account-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.finance-account-table td:nth-child(2) strong {
  font-size: 14px;
}

.finance-account-table td small,
.finance-inventory-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.finance-positive {
  color: #157f3b;
}

.finance-negative {
  color: #c9352b;
}

.finance-entry-panel {
  display: grid;
  gap: 10px;
}

.finance-account-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finance-account-form-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.finance-account-form-actions #financeDeleteAccount {
  margin-right: auto;
  color: #b42318;
  border: 1px solid #f0c7c1;
  background: #fff1ef;
}

.finance-account-form-actions .save-action-button {
  margin-left: 0;
}

.finance-entry-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finance-entry-form-actions #financeReverseEntry {
  margin-right: auto;
}

.finance-entry-form-actions .save-action-button {
  margin-left: 0;
}

.finance-ledger-panel {
  padding: 14px;
}

.finance-ledger-head {
  align-items: end;
}

.finance-ledger-table {
  min-width: 1080px;
}

.finance-ledger-table td:nth-child(4) small,
.finance-ledger-table td:nth-child(4) strong {
  display: block;
}

.finance-ledger-table td:nth-child(4) small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
}

.finance-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.finance-accounting-basis {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.finance-report-metrics section {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #d8d8dd;
  border-radius: 8px;
}

.finance-report-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.finance-report-metrics strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.finance-report-grid {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.2fr);
  gap: 10px;
  align-items: start;
}

.finance-statement-list {
  display: grid;
}

.finance-statement-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  padding: 9px 3px;
  border-bottom: 1px solid #e5e5ea;
  font-size: 12px;
}

.finance-statement-list > div:last-child {
  border-bottom: 0;
}

.finance-statement-list .statement-total {
  font-weight: 750;
}

.finance-statement-list .statement-final {
  color: #005eb8;
  font-size: 14px;
  font-weight: 800;
}

.finance-trial-table {
  min-width: 560px;
}

.finance-trial-table tfoot th {
  color: var(--ink);
  background: #f5f5f7;
  border-top: 1px solid #c7c7cc;
}

.empty-table-cell {
  padding: 22px !important;
  color: var(--muted);
  text-align: center !important;
}

.finance-loan-opening-form {
  display: grid;
  grid-template-columns: 140px minmax(170px, 200px) auto;
  align-items: end;
  gap: 8px;
  width: min(100%, 520px);
  padding: 11px 13px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: #ffffff;
}

.finance-loan-opening-form > strong {
  grid-column: 1 / -1;
  align-self: center;
  margin-bottom: 2px;
  font-size: 12px;
}

.finance-loan-opening-form label {
  display: grid;
  gap: 3px;
  max-width: 190px;
}

.finance-loan-opening-form label span,
.finance-inline-cost span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.finance-loan-opening-form input {
  height: 34px;
  min-height: 34px;
}

.finance-loan-opening-form .aphaw-number-stepper {
  height: 34px;
  min-height: 34px;
}

.finance-loan-opening-form button {
  height: 34px;
  min-height: 34px;
}

.finance-inventory-table select,
.finance-inventory-table input {
  width: 100%;
  min-width: 90px;
  min-height: 30px;
  padding: 3px 8px;
  background: #ffffff;
}

.finance-inline-cost {
  display: grid;
  grid-template-columns: auto minmax(76px, 1fr);
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  text-align: left;
}

.finance-map-save {
  display: inline-flex;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .finance-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-workspace-layout {
    grid-template-columns: 1fr;
  }

  .finance-report-grid {
    grid-template-columns: 1fr;
  }

  .finance-entry-panel {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .finance-position-head {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-change-password {
    justify-self: start;
    width: max-content;
  }

  .finance-period-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .finance-view-toolbar {
    align-items: flex-start;
  }

  .finance-view-tabs {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-position-totals,
  .finance-breakdown-grid,
  .finance-report-metrics {
    grid-template-columns: 1fr;
  }

  .finance-ledger-head {
    align-items: stretch;
  }

  .finance-final-card {
    min-height: 126px;
  }

  .finance-final-card strong {
    font-size: 30px;
  }

  .finance-loan-opening-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-loan-opening-form label {
    max-width: none;
  }
}

/* Settings uses one compact hierarchy instead of one long generic panel. */
#settingsView {
  padding: 0;
}

.settings-page {
  display: grid;
  gap: 14px;
}

.settings-section {
  min-width: 0;
  padding: 16px;
  background: var(--grouped-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.settings-section-head h2,
.team-directory-head h2,
.settings-data-tools h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.settings-section-head p,
.team-directory-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

#settingsView .company-info-form {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#settingsView .company-logo-editor {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#settingsView .company-logo-editor img {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

#settingsView .company-logo-editor input[type="file"] {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 5px;
  font-size: 10px;
}

#settingsView .company-logo-editor input[type="file"]::file-selector-button {
  height: 24px;
  margin-right: 7px;
  padding: 3px 8px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-weight: 750;
}

.company-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.company-address-field {
  grid-column: 1 / -1;
}

#settingsView .company-info-form label {
  gap: 4px;
  min-width: 0;
  font-size: 11px;
}

#settingsView .company-info-form input,
#settingsView .company-info-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  font-size: 12px;
}

#settingsView .company-info-form textarea {
  height: 58px;
  min-height: 58px;
  resize: vertical;
}

.company-save-actions {
  align-self: end;
  justify-content: flex-end;
  margin: 0;
}

.company-save-actions .save-action-button {
  min-width: 126px;
  min-height: 36px;
}

#settingsView .team-directory-section {
  gap: 10px;
}

#settingsView .team-directory-head {
  align-items: flex-start;
}

#settingsView .team-member-list {
  border-color: var(--line);
  box-shadow: none;
}

.settings-data-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#settingsView .settings-backup-zone,
#settingsView .settings-danger-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
}

.settings-section-label {
  margin: 0 0 3px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#settingsView .settings-backup-zone h2,
#settingsView .settings-danger-zone h2 {
  margin: 0 0 4px;
  font-size: 14px;
}

#settingsView .settings-backup-zone p,
#settingsView .settings-danger-zone p {
  max-width: 520px;
  font-size: 11px;
  line-height: 1.45;
}

#settingsView .backup-download-button,
#settingsView .wipe-all-data-button {
  min-width: 148px;
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  #settingsView .company-info-form {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .company-save-actions {
    grid-column: 1 / -1;
  }

  .settings-data-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .settings-section {
    padding: 12px;
  }

  #settingsView .company-info-form,
  .company-fields-grid {
    grid-template-columns: 1fr;
  }

  .company-address-field,
  .company-save-actions {
    grid-column: auto;
  }

  #settingsView .settings-backup-zone,
  #settingsView .settings-danger-zone {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #settingsView .backup-download-button,
  #settingsView .wipe-all-data-button {
    justify-self: end;
  }
}

@media print {
  @page {
    size: A5 portrait;
    margin: 10mm;
  }

  .settings-sidebar,
  .sidebar-toggle,
  .app-utility-bar,
  .filter-action-toolbar,
  body.printing-invoice #invoiceView > .invoice-layout > .panel:first-child,
  body.printing-invoice .invoice-preview-panel > .panel-head,
  body.printing-invoice .initial-payment-box,
  .toast {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .content-pane {
    padding: 0;
  }

  /* Print only the document the user asked for, never the surrounding ERP screens. */
  .view {
    display: none !important;
  }

  body.printing-invoice #invoiceView {
    display: block !important;
  }

  body:not(.printing-invoice) #orderView,
  body:not(.printing-invoice) #reportsView {
    display: block !important;
  }

  body:not(.printing-invoice) .order-entry-layout,
  body:not(.printing-invoice) .report-actions,
  body:not(.printing-invoice) .report-filters {
    display: none !important;
  }

  .panel {
    box-shadow: none;
    border: 0;
  }

  body.printing-invoice .invoice-layout,
  body.printing-invoice .invoice-preview-panel {
    display: block;
  }

  body.printing-invoice .invoice-print-surface {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  body.printing-invoice .invoice-sheet {
    display: flex;
    min-height: 190mm;
    flex-direction: column;
  }

  body.printing-invoice .invoice-customer-card {
    display: grid;
    min-height: 96px;
    padding: 12px;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: baseline;
    align-content: start;
    column-gap: 14px;
  }

  body.printing-invoice .invoice-customer-card > span {
    font-size: 13px;
    line-height: 1.5;
  }

  body.printing-invoice .invoice-customer-card > strong {
    min-width: 0;
    margin: 0;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body.printing-invoice .invoice-customer-details {
    grid-column: 1 / -1;
    gap: 5px;
    margin-top: 9px;
  }

  body.printing-invoice .invoice-customer-details div {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
  }

  body.printing-invoice .invoice-customer-details dt,
  body.printing-invoice .invoice-customer-details dd {
    font-size: 13px;
    line-height: 1.5;
  }

  body.printing-invoice .invoice-customer-details dt {
    font-weight: 700;
  }

  body.printing-invoice .invoice-customer-details dd {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
  }

  body.printing-invoice .invoice-footer {
    margin-top: auto;
    padding-top: 10px;
  }

  body.printing-invoice .invoiceQtyInput,
  body.printing-invoice .invoice-remaining {
    display: none;
  }

body.printing-invoice .invoice-qty-print {
    display: inline;
  }
}

.settings-backup-zone,
.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 2px;
}

.settings-backup-zone h2,
.settings-danger-zone h2 {
  margin: 2px 0 4px;
  color: #1d1d1f;
  font-size: 16px;
}

.settings-backup-zone p,
.settings-danger-zone p {
  max-width: 680px;
  margin: 0;
  color: #6e6e73;
  font-size: 12px;
  line-height: 1.5;
}

.settings-backup-status:not(:empty) {
  margin-top: 6px;
  color: #4b4b4f;
  font-weight: 700;
}

.backup-download-button {
  position: relative;
  flex: 0 0 auto;
  min-width: 154px;
  min-height: 36px;
  padding: 7px 13px 7px 35px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}

.backup-download-button::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 15px;
  height: 15px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.settings-danger-zone .settings-danger-status:not(:empty) {
  margin-top: 6px;
  color: #c9342c;
  font-weight: 700;
}

.wipe-all-data-button {
  flex: 0 0 auto;
  min-width: 144px;
  min-height: 36px;
  padding: 7px 13px 7px 34px;
  border: 1px solid #d92d20;
  border-radius: 7px;
  background: #d92d20;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: relative;
}

.wipe-all-data-button::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 14px;
  height: 14px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wipe-all-data-button:hover:not(:disabled) {
  border-color: #b42318;
  background: #b42318;
}

.wipe-all-data-button:disabled {
  cursor: wait;
  opacity: .65;
}

@media (max-width: 720px) {
  .settings-backup-zone,
  .settings-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .wipe-all-data-button {
    align-self: flex-end;
  }
}

/* Final Settings layout: company details, team management, then data tools. */
#settingsView .company-info-form {
  align-items: start;
}

#settingsView .company-logo-editor {
  align-self: start;
}

.company-logo-upload {
  display: grid;
  gap: 6px;
  align-content: center;
  cursor: pointer;
}

.company-logo-upload-title {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.company-logo-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}

.company-logo-upload:hover .company-logo-upload-button {
  border-color: #a7a7ac;
  background: #f8f8fa;
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.team-cloud-controls:empty {
  display: none;
}

.team-cloud-panel {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.team-cloud-status,
.team-cloud-message {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#settingsView .cloud-signed-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

#settingsView .cloud-signed-in.hidden {
  display: none;
}

#settingsView .team-invite-form {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) minmax(180px, 1fr) minmax(150px, .7fr) auto;
  gap: 10px;
  align-items: end;
}

#settingsView .team-invite-form.hidden {
  display: none;
}

.team-cloud-account-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.team-cloud-account-actions strong,
.team-cloud-account-actions small {
  display: none;
}

.team-cloud-account-actions .ghost,
.team-invite-button {
  min-height: 36px;
  padding: 6px 11px;
  white-space: nowrap;
  font-size: 11px;
}

@media (max-width: 900px) {
  #settingsView .cloud-signed-in {
    grid-template-columns: 1fr;
  }

  #settingsView .team-invite-form {
    grid-column: 1;
    grid-template-columns: 1fr 1fr;
  }

  .team-cloud-account-actions {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  #settingsView .team-invite-form {
    grid-template-columns: 1fr;
  }
}