:root {
      --bg: #f4f6f8;
      --panel: #ffffff;
      --ink: #1d252d;
      --muted: #677483;
      --line: #dce3ea;
      --nav: #26323f;
      --nav-2: #314151;
      --green: #23805a;
      --red: #b54b4b;
      --yellow: #b98218;
      --blue: #2f6f9f;
      --teal: #287c7a;
      --entry-control-height: 34px;
      --shadow: 0 12px 28px rgba(30, 43, 56, .08);
}

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      max-width: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }

    button, input, select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .app {
      height: 100vh;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      overflow: hidden;
    }

    .sidebar {
      background: var(--nav);
      color: #f6fbff;
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      height: 100vh;
      overflow: hidden;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 6px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #ffffff;
      color: var(--nav);
      font-weight: 800;
      letter-spacing: 0;
      box-shadow: inset 0 -4px 0 rgba(47, 111, 159, .22);
    }

    .brand h1 {
      margin: 0;
      font-size: 18px;
      line-height: 21px;
    }

    .brand span {
      display: block;
      margin-top: 3px;
      color: #c7d2dc;
      font-size: 12px;
    }

    .nav {
      display: grid;
      gap: 7px;
    }

    .nav button {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 12px;
      color: #dbe6ef;
      background: transparent;
      border-radius: 8px;
      text-align: left;
    }

    .permission-hidden {
      display: none !important;
    }

    .nav button:hover,
    .nav button.active {
      background: var(--nav-2);
      color: #ffffff;
    }

    .ico {
      width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .sidebar-note {
      margin-top: auto;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 8px;
      color: #ced9e2;
      font-size: 13px;
      line-height: 19px;
      background: rgba(255, 255, 255, .05);
    }

    main {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      min-height: 72px;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: var(--panel);
      border-bottom: 1px solid var(--line);
    }

    .topbar h2 {
      margin: 0;
      font-size: 22px;
      line-height: 26px;
    }

    .topbar p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 8px;
      background: #e8eef3;
      color: var(--ink);
      white-space: nowrap;
    }

    .btn.primary {
      background: var(--blue);
      color: #fff;
    }

    .btn.danger {
      background: #f4dfdf;
      color: #8d3030;
    }

    .content {
      padding: 22px 24px 28px;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .view.active {
      height: 100%;
      min-height: 0;
    }

    .view:not(#dashboard).active {
      display: flex;
      flex-direction: column;
    }

    .view:not(#dashboard) .tools {
      flex: 0 0 auto;
    }

    .view:not(#dashboard) .table-host {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .view:not(#dashboard) .table-scroll {
      flex: 1;
      max-height: none;
      min-height: 0;
      width: 100%;
    }

    #dashboard.active {
      overflow: auto;
    }

    #reports.active .report-summary {
      flex: 0 0 auto;
    }

    #reports.active .report-table {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .report-profit {
      color: #007f71;
      font-weight: 800;
    }

    .report-loss {
      color: #b13d3d;
      font-weight: 800;
    }

    .cash-amount {
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }

    .cash-amount-income {
      color: #087867;
    }

    .cash-amount-expense {
      color: #b13d3d;
    }

    .cash-amount-cancelled {
      color: #7b8589 !important;
      text-decoration: line-through;
    }

    .cash-refund-summary {
      flex: 0 0 auto;
      min-height: 38px;
      margin: 0 0 5px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #e2c98c;
      background: #fff7e2;
      color: #725311;
      font-size: 11px;
    }

    .cash-refund-summary strong {
      font-size: 13px;
      color: #8a5c00;
    }

    .cash-refund-summary small {
      margin-left: auto;
      color: #786b4c;
      font-size: 10px;
    }

    .cashbox-tabs {
      flex: 0 0 auto;
      min-height: 38px;
      margin-bottom: 6px;
      display: flex;
      align-items: end;
      gap: 2px;
      border-bottom: 2px solid #008f80;
    }

    .cashbox-tabs button {
      height: 34px;
      padding: 0 14px;
      border: 1px solid #bcc7c7;
      border-bottom: 0;
      border-radius: 4px 4px 0 0;
      background: #e5e9e9;
      color: #4d5b60;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .cashbox-tabs button[aria-selected="true"] {
      border-color: #008f80;
      background: #008f80;
      color: #fff;
    }

    .cashbox-tabs button span {
      min-width: 18px;
      height: 18px;
      margin-left: 6px;
      padding: 0 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      background: rgba(255, 255, 255, .2);
      font-size: 10px;
    }

    .cashbox-tab-content {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }

    .cashbox-report-filters {
      flex: 0 0 auto;
      padding: 10px;
      display: grid;
      gap: 9px;
      border: 1px solid #c6cece;
      background: #edf0f0;
    }

    .cashbox-filter-period-row {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding-bottom: 9px;
      border-bottom: 1px solid #d2d8d8;
    }

    .cashbox-filter-caption {
      color: #5f6c72;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
    }

    .cashbox-filter-fields {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .cashbox-report-filters .cashbox-filter-fields > label {
      width: auto;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 4px;
      color: #5f6c72;
      font-size: 10px;
    }

    .cashbox-filter-fields > label > span {
      min-height: 12px;
      line-height: 12px;
    }

    .cashbox-report-filters input,
    .cashbox-report-filters select {
      width: 100%;
      height: 30px;
      min-height: 30px;
      padding: 3px 8px;
      border: 1px solid #bcc7c7;
      background: #fff;
      color: #25343a;
      font: inherit;
      font-size: 11px;
    }

    .cashbox-periods {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .cashbox-periods button {
      min-width: 82px;
      height: 30px;
      padding: 0 12px;
      border: 1px solid #b8c2c2;
      background: #fff;
      color: #4d5b60;
      font: inherit;
      font-size: 10px;
      cursor: pointer;
    }

    .cashbox-periods button.active {
      border-color: #008f80;
      background: #e1f2ef;
      color: #006f63;
      font-weight: 800;
    }

    .cashbox-balance-grid,
    .cashbox-daily-grid,
    .cashbox-period-grid,
    .cashbox-breakdown-grid {
      flex: 0 0 auto;
      display: grid;
      gap: 10px;
    }

    .cashbox-report-section {
      flex: 0 0 auto;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #c7d0d0;
      background: #f8fafa;
    }

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

    .cashbox-daily-grid,
    .cashbox-period-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .cashbox-breakdown-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .obligation-summary-grid {
      margin-top: 8px;
    }

    .obligation-table {
      flex: 1 1 auto;
      min-height: 260px;
      margin-top: 10px;
    }

    .drawer-history {
      margin-top: 14px;
      border-top: 1px solid #d2dada;
    }

    .drawer-history h4 {
      margin: 10px 0 7px;
      color: #007f71;
      font-size: 12px;
    }

    .drawer-history > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3px 10px;
      padding: 8px 0;
      border-top: 1px solid #e1e6e6;
      font-size: 11px;
    }

    .drawer-history small {
      grid-column: 1 / -1;
      color: #6e7d82;
    }

    .cashbox-balance-grid article,
    .cashbox-daily-grid article,
    .cashbox-period-grid article,
    .cashbox-breakdown-grid article {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 11px 12px;
      border: 1px solid #c7d0d0;
      border-top: 3px solid #008f80;
      background: #fff;
    }

    .cashbox-balance-grid article {
      min-height: 94px;
    }

    .cashbox-daily-grid article,
    .cashbox-period-grid article,
    .cashbox-breakdown-grid article {
      min-height: 76px;
    }

    .cashbox-balance-grid article.pending,
    .cashbox-breakdown-grid article.pending,
    .cashbox-period-grid article.pending {
      border-top-color: #c08a22;
      background: #fffaf0;
    }

    .cashbox-balance-grid article.available,
    .cashbox-period-grid article.available {
      border-top-color: #25715d;
      background: #f2f8f6;
    }

    .cashbox-daily-grid article.expense,
    .cashbox-period-grid article.expense,
    .cashbox-breakdown-grid article.expense {
      border-top-color: #b13d3d;
    }

    .cashbox-balance-grid span,
    .cashbox-daily-grid span,
    .cashbox-period-grid span,
    .cashbox-breakdown-grid span {
      display: block;
      min-height: 28px;
      color: #66747a;
      font-size: 10px;
      line-height: 14px;
      overflow-wrap: anywhere;
    }

    .cashbox-balance-grid strong,
    .cashbox-daily-grid strong,
    .cashbox-period-grid strong,
    .cashbox-breakdown-grid strong {
      display: block;
      margin-top: auto;
      color: #203036;
      font-size: 18px;
      line-height: 22px;
      font-variant-numeric: tabular-nums;
    }

    .cashbox-balance-grid small {
      display: block;
      min-height: 12px;
      margin-top: 4px;
      color: #78858a;
      font-size: 9px;
      line-height: 12px;
      overflow-wrap: anywhere;
    }

    .cashbox-report-table {
      flex: 0 0 auto;
      min-height: 190px;
      margin-top: 10px;
      border: 1px solid #c7d0d0;
      background: #fff;
    }

    .account-balance-table {
      min-width: 480px;
    }

    .account-balance-table th:first-child,
    .account-balance-table td:first-child {
      width: 52px;
      text-align: center;
    }

    .account-balance-table th:last-child,
    .account-balance-table td:last-child {
      width: 180px;
      text-align: right;
    }

    .debt-tab-table .data-table {
      width: 100%;
      min-width: 1120px;
      table-layout: fixed;
    }

    .debt-tab-table .data-table th,
    .debt-tab-table .data-table td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .debt-tab-table .data-table th:first-child,
    .debt-tab-table .data-table td:first-child {
      width: 42px;
      min-width: 42px;
      max-width: 42px;
    }

    .debt-tab-table .action-col {
      width: 52px;
      min-width: 52px;
      max-width: 52px;
    }

    .debt-tab-table.debt-wide-actions .action-col {
      width: 92px;
      min-width: 92px;
      max-width: 92px;
    }

    .debt-note-btn {
      position: relative;
    }

    .debt-note-btn > span {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 14px;
      height: 14px;
      padding: 0 3px;
      border: 1px solid #fff;
      border-radius: 7px;
      background: #008f80;
      color: #fff;
      font-size: 9px;
      line-height: 12px;
      text-align: center;
    }

    .debt-note-form .debt-note-input {
      grid-column: 1 / -1;
    }

    .debt-note-form .entry-panel-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debt-note-form .debt-note-input textarea {
      min-height: 92px;
      resize: vertical;
    }

    .debt-contact-history-table {
      width: 100%;
      table-layout: fixed;
    }

    .debt-contact-history-table th:nth-child(2),
    .debt-contact-history-table td:nth-child(2) {
      width: 150px;
      text-align: center;
    }

    .debt-contact-history-table th:nth-child(3),
    .debt-contact-history-table td:nth-child(3) {
      width: 132px;
      text-align: center;
    }

    .debt-contact-history-table th:last-child,
    .debt-contact-history-table td:last-child {
      width: 145px;
    }

    .debt-contact-history-table th:nth-child(4),
    .debt-contact-history-table td:nth-child(4) {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 17px;
    }

    @media (max-width: 720px) {
      .debt-note-form .entry-panel-grid { grid-template-columns: minmax(0, 1fr); }
      .debt-note-form .debt-note-input { grid-column: auto; }
    }

    .debt-tab-table .debt-col-invoice {
      width: 92px;
      min-width: 92px;
      max-width: 92px;
    }

    .debt-tab-table .debt-col-date,
    .debt-tab-table .debt-col-oldestDue,
    .debt-tab-table .debt-col-nextDue {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
      text-align: center;
    }

    .debt-tab-table .debt-col-partner {
      width: 240px;
      min-width: 240px;
      max-width: 240px;
    }

    .debt-tab-table .debt-col-employee {
      width: 145px;
      min-width: 145px;
      max-width: 145px;
    }

    .debt-tab-table .debt-col-total,
    .debt-tab-table .debt-col-paid,
    .debt-tab-table .debt-col-balance,
    .debt-tab-table .debt-col-overdueAmount {
      width: 112px;
      min-width: 112px;
      max-width: 112px;
      text-align: right;
    }

    .debt-tab-table .debt-col-days {
      width: 64px !important;
      min-width: 64px !important;
      max-width: 64px !important;
      text-align: center;
    }

    .debt-tab-table .debt-col-overdueCount,
    .debt-tab-table .debt-col-creditTerm {
      width: 82px;
      min-width: 82px;
      max-width: 82px;
      text-align: center;
    }

    .debt-tab-table .debt-col-type,
    .debt-tab-table .debt-col-status {
      width: 108px;
      min-width: 108px;
      max-width: 108px;
      text-align: center;
    }

    .cashbox-section-head {
      height: 34px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #008f80;
      color: #fff;
    }

    .cashbox-section-head h3 {
      margin: 0;
      font-size: 12px;
    }

    .cashbox-section-head span {
      font-size: 10px;
    }

    .cashbox-refund-summary {
      flex: 0 0 auto;
      min-height: 54px;
      margin-bottom: 6px;
      padding: 9px 11px;
      display: flex;
      align-items: center;
      gap: 18px;
      border: 1px solid #dfc582;
      background: #fff8e7;
    }

    .cashbox-refund-summary div {
      min-width: 160px;
    }

    .cashbox-refund-summary span,
    .cashbox-refund-summary p {
      margin: 0;
      color: #6f6345;
      font-size: 10px;
    }

    .cashbox-refund-summary strong {
      display: block;
      margin-top: 2px;
      color: #8a5c00;
      font-size: 17px;
    }

    .refund-action {
      height: 26px;
      padding: 0 10px;
      border: 1px solid #087867;
      background: #087867;
      color: #fff;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .refund-date {
      color: #5c6a70;
      font-size: 10px;
    }

    .audit-summary {
      flex: 0 0 auto;
      min-height: 52px;
      margin-bottom: 6px;
      padding: 8px 11px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px;
      border: 1px solid #c6cece;
      background: #eef2f2;
    }

    .audit-summary div {
      min-width: 0;
      padding: 5px 9px;
      border-left: 2px solid #009b89;
      background: #fff;
    }

    .audit-summary span,
    .audit-summary p {
      margin: 0;
      color: #627075;
      font-size: 10px;
    }

    .audit-summary strong {
      display: block;
      margin-top: 2px;
      color: #007568;
      font-size: 17px;
    }

    .audit-table-host {
      min-height: 0;
    }

    .audit-table {
      width: 100%;
      table-layout: fixed;
    }

    .audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 4%; }
    .audit-table th:nth-child(2), .audit-table td:nth-child(2) { width: 13%; }
    .audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: 10%; }
    .audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 10%; }
    .audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 18%; }
    .audit-table th:nth-child(6), .audit-table td:nth-child(6) { width: 14%; }
    .audit-table th:nth-child(7), .audit-table td:nth-child(7) { width: 31%; }

    .audit-table th,
    .audit-table td {
      height: 28px;
      padding: 4px 8px;
      border-right: 1px solid #dce4e4;
      border-bottom: 1px solid #dde5e5;
      font-size: 12px;
      line-height: 18px;
      vertical-align: middle;
    }

    .audit-table .badge {
      font-size: 12px;
    }

    .audit-table tfoot td {
      height: 28px;
      font-size: 12px;
      line-height: 18px;
      vertical-align: middle;
    }

    .audit-table tfoot td:nth-child(3) {
      text-align: left;
    }

    .audit-record-cell,
    .audit-actor {
      display: block;
      min-width: 0;
      overflow: hidden;
      color: #26363c;
      font-size: 12px;
      line-height: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .audit-detail-text {
      display: block;
      overflow: hidden;
      color: #26363c;
      font-size: 12px;
      line-height: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

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

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

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

    .kpi {
      min-height: 128px;
      padding: 16px;
      display: grid;
      align-content: space-between;
      gap: 12px;
    }

    .kpi .label {
      color: var(--muted);
      font-size: 13px;
    }

    .kpi strong {
      display: block;
      font-size: 28px;
      line-height: 31px;
      margin-top: 7px;
    }

    .trend {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: max-content;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      background: #e2f2ea;
      color: var(--green);
    }

    .two-col {
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, .9fr);
      margin-top: 16px;
    }

    .section-head {
      min-height: 54px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
    }

    .section-head h3 {
      margin: 0;
      font-size: 16px;
    }

    .section-head span {
      color: var(--muted);
      font-size: 13px;
    }

    .chart {
      height: 270px;
      padding: 18px 18px 14px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: end;
      gap: 14px;
    }

    .bar-wrap {
      min-width: 0;
      display: grid;
      gap: 9px;
      align-items: end;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }

    .bar {
      width: 100%;
      min-height: 28px;
      border-radius: 7px 7px 3px 3px;
      background: linear-gradient(180deg, #2f6f9f, #287c7a);
    }

    .activity {
      list-style: none;
      margin: 0;
      padding: 8px 16px 16px;
      display: grid;
      gap: 10px;
    }

    .activity li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #edf1f5;
      color: var(--muted);
      font-size: 13px;
    }

    .dot {
      width: 10px;
      height: 10px;
      margin-top: 5px;
      border-radius: 50%;
      background: var(--blue);
      flex: 0 0 auto;
    }

    .dot.green { background: var(--green); }
    .dot.yellow { background: var(--yellow); }
    .dot.red { background: var(--red); }

    .tools {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .search {
      width: min(360px, 100%);
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 0 12px;
      color: var(--ink);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .table-scroll {
      max-height: calc(100vh - 128px);
      overflow: auto;
      border: 1px solid var(--line);
      background: var(--panel);
      position: relative;
    }

    .table-scroll table {
      border: 0;
      box-shadow: none;
    }

    .data-table {
      width: max-content;
      min-width: 100%;
      table-layout: fixed;
    }

    .data-table th:first-child,
    .data-table td:first-child {
      width: 42px;
      min-width: 42px;
      max-width: 42px;
      text-align: center;
      padding-left: 4px;
      padding-right: 4px;
    }

    .data-table .col-qty {
      width: 70px;
      min-width: 70px;
      max-width: 70px;
      text-align: center;
    }

    .data-table .col-status {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
      text-align: center;
    }

    .data-table thead,
    .data-table tfoot {
      position: sticky;
      z-index: 3;
    }

    .data-table thead {
      top: 0;
    }

    .data-table tfoot {
      bottom: 0;
    }

    .data-table tfoot td {
      position: relative;
      z-index: 2;
      background: #eef4f3;
      border-top: 2px solid #009b89;
      color: #10272a;
      font-weight: 800;
    }

    th, td {
      padding: 13px 14px;
      border-bottom: 1px solid #edf1f5;
      text-align: left;
      vertical-align: middle;
      font-size: 14px;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: var(--muted);
      background: #f8fafb;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge.ok { background: #e2f2ea; color: var(--green); }
    .badge.warn { background: #fff0cf; color: var(--yellow); }
    .badge.bad { background: #f4dfdf; color: var(--red); }
    .badge.info { background: #dfeefa; color: var(--blue); }
    .badge.cash { background: #e2f2ea; color: #1f7a55; }
    .badge.card { background: #dfeefa; color: #246694; }
    .badge.credit { background: #fff0cf; color: #9a6a13; }
    .badge.wholesale { background: #eee6ff; color: #6550a3; }
    .badge.corporate { background: #e6edf2; color: #26323f; }

    .mini-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: inline-grid;
      place-items: center;
      background: #edf2f6;
      color: var(--ink);
    }

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

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    input, select {
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      color: var(--ink);
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(26, 35, 45, .42);
      z-index: 20;
    }

    .modal-backdrop.open {
      display: grid;
    }

    .modal {
      width: min(720px, 100%);
      max-height: 90vh;
      background: var(--panel);
      border-radius: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 24px 70px rgba(20, 28, 36, .28);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal.entry-mode {
      width: 100%;
      height: 100%;
      max-height: none;
    }

    .modal.entry-mode .body {
      flex: 1 1 auto;
      min-height: 0;
    }

    .modal.info-mode {
      width: min(900px, 100%);
    }

    .modal.confirm-mode {
      width: min(380px, calc(100vw - 28px));
      max-height: none;
      border-radius: 5px;
    }

    .modal > .section-head {
      background: #009b89;
      border-bottom-color: #007f70;
      color: #fff;
    }

    .modal > .section-head h3,
    .modal > .section-head span {
      color: #fff;
    }

    .modal .body {
      padding: 16px;
      background: #f2f4f4;
      overflow: auto;
    }

    .modal.confirm-mode .body {
      padding: 15px 16px;
      overflow: visible;
      background: #fff;
    }

    .modal.confirm-mode .form-grid {
      display: block;
      width: 100%;
    }

    .modal .form-grid {
      gap: 12px;
    }

    .modal label {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      color: #47545a;
    }

    .modal input,
    .modal select,
    .modal textarea {
      background: #ffffff;
      border-color: #aebbbb;
      color: #142025;
      box-shadow: none;
    }

    .modal input:focus,
    .modal select:focus,
    .modal textarea:focus {
      outline: 2px solid rgba(0, 155, 137, .18);
      border-color: #009b89;
    }

    .modal .field-line {
      padding: 0;
      background: transparent;
      border: 0;
    }

    .modal .fake-input {
      background: #ffffff;
      border-color: #aebbbb;
      color: #142025;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 14px;
    }

    .info-grid .field-line {
      grid-template-columns: 94px minmax(0, 1fr);
      min-height: 26px;
    }

    .info-grid .fake-input {
      min-width: 0;
      white-space: normal;
      word-break: break-word;
    }

    @media (max-width: 640px) {
      .info-grid {
        grid-template-columns: 1fr;
      }
    }

    .modal .footer {
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      background: #f2f4f4;
    }

    .modal.confirm-mode .footer {
      min-height: 48px;
      padding: 9px 12px;
      justify-content: center;
      gap: 10px;
      background: #eef1f1;
    }

    .modal.confirm-mode .footer .btn {
      min-width: 76px;
      height: 30px;
      min-height: 30px;
      font-size: 12px;
      border-radius: 3px;
    }

    .modal .footer .btn {
      background: #e2e7e7;
      color: #26323f;
      border: 1px solid #c7d0d0;
    }

    .modal .footer .btn[hidden] {
      display: none !important;
    }

    .modal .footer .btn:hover {
      background: #d6dddd;
    }

    .modal .footer .btn.primary {
      background: #009b89;
      color: #fff;
      border: 1px solid #007f70;
    }

    .modal .footer .btn.danger {
      background: #c94848;
      color: #fff;
      border: 1px solid #a93636;
    }

    .modal .footer .btn.danger:hover {
      background: #b83c3c;
    }

    .confirm-box {
      display: block;
      width: 100%;
      padding: 0;
      color: #27343a;
      font-size: 13px;
      line-height: 20px;
      text-align: center;
    }

    .confirm-box strong {
      color: #111b20;
      font-size: inherit;
      line-height: inherit;
      font-weight: 800;
    }

    .confirm-box span {
      display: block;
      width: 100%;
      color: #344249;
      overflow-wrap: normal;
      word-break: normal;
    }

    .modal .footer .btn.primary:hover {
      background: #008a7a;
    }

    .system-dialog-backdrop {
      position: absolute;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(26, 35, 45, .48);
    }

    .system-dialog-backdrop.open {
      display: grid;
    }

    .system-dialog {
      width: min(380px, calc(100vw - 28px));
      min-width: 0;
      max-width: min(380px, calc(100vw - 28px));
      overflow: hidden;
      border: 1px solid #aebaba;
      border-radius: 5px;
      background: #f4f6f6;
      box-shadow: 0 22px 60px rgba(18, 28, 34, .3);
    }

    .system-dialog-head {
      min-height: 40px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #32758a;
      border-bottom: 1px solid #285f70;
      color: #fff;
    }

    .system-dialog-head h3 {
      margin: 0;
      color: #fff;
      font-size: 14px;
      line-height: 18px;
    }

    .system-dialog-icon {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18);
    }

    .system-dialog-icon svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .system-dialog[data-tone="danger"] .system-dialog-head {
      background: #a93d3d;
      border-bottom-color: #8e3030;
    }

    .system-dialog[data-tone="success"] .system-dialog-head {
      background: #009b89;
      border-bottom-color: #007f70;
    }

    .system-dialog[data-tone="warning"] .system-dialog-head {
      background: #a66b18;
      border-bottom-color: #875714;
    }

    .system-dialog[data-tone="info"] .system-dialog-head {
      background: #32758a;
      border-bottom-color: #285f70;
    }

    .system-dialog[data-tone="logout"] .system-dialog-head {
      background: #1f2c33;
      border-bottom-color: #162127;
    }

    .system-dialog-body {
      min-height: 50px;
      padding: 15px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #fff;
    }

    .system-dialog-body p {
      margin: 0;
      max-width: 44ch;
      color: #27343a;
      font-size: 13px;
      line-height: 20px;
      text-align: center;
      white-space: pre-wrap;
      overflow-wrap: normal;
      word-break: normal;
    }

    .system-dialog-reason {
      width: 100%;
      display: grid;
      gap: 6px;
      color: #354249;
      font-size: 12px;
      font-weight: 700;
    }

    .system-dialog-reason[hidden] {
      display: none;
    }

    .system-dialog-reason textarea {
      width: 100%;
      min-height: 76px;
      resize: vertical;
      padding: 9px 10px;
      border: 1px solid #b8c3c3;
      border-radius: 4px;
      outline: 0;
      background: #fff;
      color: #27343a;
      font: inherit;
      font-weight: 400;
      line-height: 17px;
    }

    .system-dialog-reason textarea:focus {
      border-color: #a93d3d;
      box-shadow: 0 0 0 2px rgba(169, 61, 61, .12);
    }

    .system-dialog-reason textarea[aria-invalid="true"] {
      border-color: #b33e3e;
    }

    .system-dialog-reason small {
      min-height: 15px;
      color: #a23535;
      font-size: 11px;
      font-weight: 600;
    }

    .user-permissions {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 1px solid #cbd3d3;
      border-radius: 4px;
      background: #fff;
      overflow: hidden;
    }

    .user-permissions legend {
      padding: 0 4px;
      color: #4d5a60;
      font-size: 11px;
      font-weight: 700;
    }

    .permission-entry-panel {
      grid-column: 1 / -1;
    }

    .permission-matrix-head,
    .permission-tab-row {
      display: grid;
      grid-template-columns: minmax(210px, 1fr) repeat(7, 70px);
      align-items: center;
      min-width: 700px;
    }

    .permission-matrix-head {
      position: sticky;
      top: 0;
      z-index: 2;
      min-height: 34px;
      border-bottom: 1px solid #b8c6c5;
      background: #197f70;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .permission-matrix-head span:first-child {
      padding-left: 12px;
      text-align: left;
    }

    .permission-matrix-body {
      max-height: 330px;
      overflow: auto;
    }

    .permission-module + .permission-module {
      border-top: 1px solid #cbd3d3;
    }

    .permission-module > header {
      min-height: 32px;
      display: flex;
      align-items: center;
      padding: 0 11px;
      background: #edf2f1;
      color: #26393a;
    }

    .permission-tab-row {
      min-height: 34px;
      border-top: 1px solid #e1e6e6;
    }

    .permission-tab-row:hover {
      background: #f7faf9;
    }

    .user-permissions label {
      min-height: 28px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: #354249;
      font-size: 11px;
    }

    .permission-tab-label {
      padding: 0 12px 0 28px;
      font-weight: 600;
    }

    .permission-action {
      justify-content: center;
      border-left: 1px solid #edf0f0;
    }

    .permission-action span {
      display: none;
    }

    .permission-action-empty {
      color: #bdc6c6;
      text-align: center;
    }

    .user-permissions input {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: #23805a;
    }

    .system-dialog-footer {
      min-height: 48px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-top: 1px solid #d1d8d8;
      background: #eef1f1;
    }

    .system-dialog-footer .btn {
      min-width: 76px;
      height: 30px;
      min-height: 30px;
      border: 1px solid #b7c2c2;
      border-radius: 3px;
      background: #fff;
      color: #354249;
      font-size: 12px;
      transition: none;
    }

    .system-dialog-footer .system-dialog-confirm {
      border-color: #285f70;
      background: #32758a;
      color: #fff;
    }

    .system-dialog-footer .system-dialog-confirm.info {
      border-color: #285f70;
      background: #32758a;
    }

    .system-dialog-footer .system-dialog-confirm.success {
      border-color: #007f70;
      background: #009b89;
    }

    .system-dialog-footer .system-dialog-confirm.warning {
      border-color: #875714;
      background: #a66b18;
    }

    .system-dialog-footer .system-dialog-confirm.danger {
      border-color: #943030;
      background: #bd4242;
    }

    .system-dialog-footer .system-dialog-confirm.logout {
      border-color: #2b383e;
      background: #354249;
    }

    .system-dialog-footer .btn[hidden] {
      display: none !important;
    }

    .system-tooltip {
      position: fixed;
      z-index: 10000;
      width: max-content;
      max-width: min(320px, calc(100vw - 12px));
      padding: 5px 8px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 3px;
      background: #1f2c33;
      color: #fff;
      box-shadow: 0 5px 14px rgba(8, 16, 20, .22);
      font-size: 11px;
      font-weight: 600;
      line-height: 14px;
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
      pointer-events: none;
      transition: none;
    }

    .system-tooltip[hidden] {
      display: none !important;
    }

    .system-tooltip.is-numeric {
      max-width: calc(100vw - 12px);
      white-space: nowrap;
      overflow-wrap: normal;
      font-variant-numeric: tabular-nums;
    }

    .status-line {
      display: grid;
      gap: 9px;
      padding: 16px;
    }

    .status-item {
      display: grid;
      gap: 7px;
    }

    .status-item span {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 13px;
    }

    .meter {
      height: 9px;
      border-radius: 999px;
      background: #e6edf2;
      overflow: hidden;
    }

    .meter i {
      display: block;
      height: 100%;
      background: var(--teal);
      border-radius: inherit;
    }

    .empty {
      padding: 28px;
      text-align: center;
      color: var(--muted);
      background: #fff;
      border: 1px dashed var(--line);
      border-radius: 8px;
    }

    @media (max-width: 980px) {
      .app {
        grid-template-columns: 204px minmax(0, 1fr);
      }
      .sidebar {
        position: static;
        z-index: 10;
        padding: 12px;
      }
      .brand { padding-bottom: 10px; }
      .nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .sidebar-note { display: none; }
      .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .two-col { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
      }
      .content { padding: 16px; }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .kpis, .form-grid { grid-template-columns: 1fr; }
      .chart { gap: 8px; padding-inline: 12px; }
      th:nth-child(3), td:nth-child(3) { display: none; }
      .actions, .btn { width: 100%; }
      .btn { justify-content: center; }
    }

    .module-ribbon {
      height: 52px;
      display: grid;
      grid-template-columns: repeat(15, minmax(58px, 1fr));
      align-items: stretch;
      background: #24323a;
      border-bottom: 1px solid #172329;
      color: #d8e1e6;
      overflow-x: auto;
    }

    .module-ribbon button {
      min-width: 62px;
      display: grid;
      place-items: center;
      gap: 2px;
      padding: 4px 6px 5px;
      background: transparent;
      color: inherit;
      border-right: 1px solid rgba(255, 255, 255, .08);
      font-size: 12px;
      line-height: 13px;
    }

    .module-ribbon button.active {
      background: #1d2a31;
      color: #fff;
      box-shadow: inset 0 -3px 0 #0b9d8c;
    }

    .module-ribbon .top-ico {
      height: 25px;
      font-size: 23px;
      line-height: 1;
      filter: grayscale(1);
    }

    .app {
      min-height: calc(100vh - 52px);
      grid-template-columns: 204px minmax(0, 1fr);
      background: #e6e8e8;
    }

    .sidebar {
      padding: 0;
      gap: 0;
      background: #24323a;
      border-right: 1px solid #1b262d;
    }

    .brand {
      display: none;
    }

    .quick-search {
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: #22313a;
    }

    .quick-search input {
      min-height: 28px;
      height: 28px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 6px;
      padding: 0 8px;
      background: rgba(255, 255, 255, .06);
      color: #d9e3e8;
      font-size: 12px;
    }

    .quick-search input::placeholder {
      color: #9fb0ba;
    }

    .quick-search span {
      color: #00a18d;
      font-size: 16px;
    }

    .sidebar-profile {
      min-height: 56px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: #22313a;
      overflow: hidden;
    }

    .profile-avatar {
      width: 32px;
      min-width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 50%;
      background: #0b9d8c;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .profile-summary {
      flex: 1 1 auto;
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .profile-summary span {
      color: #91a4ae;
      font-size: 9px;
    }

    .profile-summary strong {
      overflow: hidden;
      color: #f3f8fa;
      font-size: 11px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-tools {
      flex: 0 0 auto;
      width: auto;
      height: 28px;
      align-self: flex-start;
      margin-top: 4px;
      min-width: 168px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .topbar-global-search {
      flex: 0 0 24px;
      width: 24px;
      min-width: 24px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0;
      overflow: hidden;
      background: transparent;
      transition: none;
    }

    .topbar-global-search.open {
      flex-basis: 300px;
      width: 300px;
      gap: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, .24);
    }

    .topbar-tools:has(.topbar-global-search.open) {
      min-width: 444px;
    }

    .topbar-global-search-toggle {
      width: 24px;
      min-width: 24px;
      height: 28px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      background: transparent;
      color: #00a18d;
    }

    .topbar-global-search-toggle:hover,
    .topbar-global-search-toggle:focus-visible,
    .topbar-global-search.open .topbar-global-search-toggle {
      color: #fff;
      outline: 0;
    }

    .topbar-global-search-toggle svg {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .topbar-global-search input {
      width: 0;
      min-width: 0;
      height: 24px;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #fff;
      font-size: 11px;
      opacity: 0;
      pointer-events: none;
    }

    .topbar-global-search.open input {
      width: 100%;
      opacity: 1;
      pointer-events: auto;
    }

    .topbar-global-search input::placeholder {
      color: #9eafb7;
    }

    .side-title {
      min-height: 32px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      color: #8fa1ab;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .side-title-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .side-title-label svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: #00a18d;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sidebar-toggle {
      width: 26px;
      min-width: 26px;
      height: 26px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #b9c7ce;
      flex: 0 0 auto;
      margin-left: auto;
      transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    .sidebar-toggle:hover {
      background: rgba(0, 161, 141, .18);
      color: #fff;
    }

    .sidebar-toggle:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 2px rgba(0, 161, 141, .45);
    }

    .sidebar-toggle svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .18s ease;
    }

    .profile-logout {
      position: relative;
      width: 26px;
      min-width: 26px;
      height: 26px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #aebdc4;
      overflow: visible;
      transition: none;
    }

    .profile-logout:hover,
    .profile-logout:focus-visible {
      background: rgba(255, 255, 255, .09);
      color: #fff;
      outline: 0;
    }

    .profile-logout svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .app {
      transition: grid-template-columns .18s ease;
    }

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

    .app.sidebar-collapsed .quick-search,
    .app.sidebar-collapsed .side-title-label,
    .app.sidebar-collapsed .profile-summary,
    .app.sidebar-collapsed .profile-logout,
    .app.sidebar-collapsed .nav-submenu {
      display: none;
    }

    .app.sidebar-collapsed .sidebar-profile {
      justify-content: center;
      gap: 2px;
      padding: 6px 4px;
    }

    .app.sidebar-collapsed .side-title {
      display: none;
    }

    .app.sidebar-collapsed .profile-avatar {
      width: 26px;
      min-width: 26px;
      height: 26px;
      font-size: 9px;
    }

    .app.sidebar-collapsed .sidebar-toggle {
      width: 20px;
      min-width: 20px;
      height: 26px;
      margin-left: 0;
    }

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

    .app.sidebar-collapsed .nav {
      padding-inline: 7px;
    }

    .app.sidebar-collapsed .nav button {
      justify-content: center;
      gap: 0;
      padding-inline: 6px;
      font-size: 0;
    }

    .app.sidebar-collapsed .nav .ico {
      flex-basis: 22px;
      margin: 0;
    }

    .nav {
      gap: 0;
      padding: 4px 7px 8px;
    }

    .nav button {
      min-height: 34px;
      gap: 9px;
      padding: 6px 9px;
      border-radius: 6px;
      border-bottom: 0;
      color: #f2f8fb;
      font-size: 13px;
      margin-bottom: 3px;
      line-height: 1;
    }

    .nav button:hover,
    .nav button.active {
      background: #17242b;
      color: #fff;
      box-shadow: inset 3px 0 0 #0b9d8c;
    }

    .nav-group {
      min-width: 0;
      display: grid;
    }

    .submenu-chevron {
      margin-left: auto;
      color: #9fb0ba;
      font-size: 17px;
      line-height: 1;
      transition: transform .16s ease;
    }

    .nav-group.open .submenu-chevron {
      transform: rotate(90deg);
    }

    .nav-submenu {
      display: none;
      margin: 0 0 3px 20px;
      padding-left: 6px;
      border-left: 1px solid rgba(255, 255, 255, .12);
    }

    .nav-group.open .nav-submenu {
      display: grid;
    }

    .nav-submenu button {
      min-height: 31px;
      margin-bottom: 2px;
      padding-block: 4px;
      font-size: 12px;
    }

    .nav .ico {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 4px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .08);
      color: #c7d4db;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .nav .ico svg {
      width: 14px;
      height: 14px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav button:hover .ico,
    .nav button.active .ico {
      background: #0b9d8c;
      border-color: #0b9d8c;
      color: #fff;
    }

    .sidebar-note {
      margin: auto 8px 8px;
      padding: 8px;
      border-radius: 0;
      font-size: 12px;
      background: #1e2c33;
    }

    main {
      background: #ededed;
      height: 100vh;
      overflow: hidden;
    }

    .topbar {
      min-height: 36px;
      padding: 0 10px;
      position: relative;
      background: #24323a;
      border-bottom: 1px solid #1b262d;
      color: #fff;
    }

    .topbar::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      bottom: 7px;
      width: 3px;
      border-radius: 0 2px 2px 0;
      background: #00a18d;
    }

    .topbar h2 {
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .topbar h2::before {
      content: none;
    }

    .topbar p {
      display: none;
    }

    .actions {
      gap: 6px;
    }

    .btn {
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 0;
      background: transparent;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .btn.primary {
      background: transparent;
      color: #fff;
    }

    .btn:hover {
      background: rgba(255, 255, 255, .14);
    }

    .content {
      padding: 8px 9px 14px;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }

    .workspace-toolbar {
      min-height: 38px;
      margin: -8px -9px 8px;
      padding: 6px 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #e5e8e8;
      border-bottom: 1px solid #c4cccc;
    }

    .workspace-toolbar .search {
      width: min(380px, calc(100vw - 280px));
      min-height: 28px;
      background: #fff;
    }

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

    .module-filters {
      flex: 0 0 auto;
      min-width: 0;
      min-height: 46px;
      margin-bottom: 5px;
      padding: 5px 7px;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 7px;
      overflow: visible;
      background: #edf0f0;
      border: 1px solid #c6cece;
    }

    .module-filter-field {
      flex: 0 0 132px;
      min-width: 132px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 2px;
      color: #5f6c72;
      font-size: 10px;
      line-height: 12px;
    }

    .module-filter-field.is-wide {
      flex-basis: 170px;
      min-width: 170px;
    }

    .module-filter-field input,
    .module-filter-field select {
      width: 100%;
      height: 27px;
      min-height: 27px;
      padding: 2px 6px;
      background: #fff;
      border: 1px solid #bcc7c7;
      color: #25343a;
      font-size: 11px;
    }

    .module-filter-field input:focus,
    .module-filter-field select:focus {
      outline: none;
      border-color: #009b89;
      box-shadow: 0 0 0 2px rgba(0, 155, 137, .1);
    }

    .module-filter-meta {
      flex: 0 0 auto;
      min-width: 76px;
      height: 27px;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      border-left: 1px solid #c7cece;
      color: #647178;
      font-size: 11px;
      white-space: nowrap;
    }

    .module-filter-clear {
      flex: 0 0 auto;
      height: 27px;
      min-height: 27px;
      padding: 0 9px;
      border: 1px solid #b9c3c3;
      background: #fff;
      color: #47555b;
      font-size: 11px;
      cursor: pointer;
    }

    .module-filter-clear:hover:not(:disabled) {
      border-color: #009b89;
      color: #007f71;
    }

    .module-filter-clear:disabled {
      opacity: .45;
      cursor: default;
    }

    #dashboardFilters .module-filters {
      margin-bottom: 8px;
    }

    .btn.add-record {
      width: auto;
      min-width: 126px;
      height: 28px;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 11px;
      border-radius: 3px;
      background: #009b89;
      color: #fff;
      font-size: 12px;
      line-height: 28px;
      font-weight: 700;
      border: 1px solid #008c7d;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .btn.add-record:hover {
      background: #008c7d;
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    .btn.add-record:active {
      transform: translateY(1px);
    }

    .card {
      border-radius: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
      border-color: #c8cece;
    }

    .section-head {
      min-height: 27px;
      padding: 4px 8px;
      border-bottom: 2px solid #009b89;
      background: #f1f1f1;
    }

    .section-head h3 {
      color: #008c7d;
      font-size: 13px;
      font-weight: 800;
    }

    .section-head span {
      font-size: 12px;
    }

    #dashboard .section-head {
      background: #009b89;
      border-bottom-color: #07907f;
      color: #fff;
    }

    #dashboard .section-head h3,
    #dashboard .section-head span {
      color: #fff;
    }

    #dashboard .two-col {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }

    #dashboard .two-col > .card {
      height: 340px;
      min-height: 340px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    #dashboard .two-col > .card .section-head {
      flex: 0 0 44px;
      min-height: 44px;
      padding: 8px 12px;
    }

    #dashboard .chart {
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      padding: 14px 16px 12px;
      overflow: hidden;
    }

    #dashboard .activity {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 8px 14px 12px;
      align-content: start;
    }

    #dashboard .activity li {
      padding: 8px 0;
      font-size: 12px;
      line-height: 16px;
    }

    #dashboard .dashboard-mini-table {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow: hidden;
      border: 0;
      border-top: 1px solid var(--line);
    }

    #dashboardSales,
    #dashboardDebts {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #dashboard .dashboard-mini-table .data-table {
      height: auto;
    }

    #dashboard .dashboard-mini-table .data-table tbody {
      overflow-y: auto;
    }

    #dashboard .dashboard-mini-table th,
    #dashboard .dashboard-mini-table td {
      height: 28px;
      padding: 4px 8px;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #dashboard .dashboard-mini-table .badge {
      min-height: 20px;
      padding: 1px 6px;
      font-size: 11px;
    }

    .kpis {
      gap: 8px;
    }

    .kpi {
      min-height: 88px;
      padding: 10px;
    }

    .kpi strong {
      font-size: 22px;
    }

    .trend,
    .badge {
      border-radius: 0;
      min-height: 18px;
      padding: 2px 6px;
      font-size: 12px;
    }

    .tools {
      min-height: 31px;
      margin-bottom: 3px;
      padding: 0;
      gap: 6px;
      justify-content: flex-end;
    }

    .search {
      min-height: 24px;
      border-radius: 0;
      font-size: 12px;
      width: 260px;
    }

    table {
      border-radius: 0;
      box-shadow: none;
      border-color: #bfc7c7;
    }

    .table-scroll {
      max-height: calc(100vh - 86px);
      border-color: #bfc7c7;
    }

    th, td {
      padding: 4px 8px;
      font-size: 12px;
      border-bottom: 1px solid #e2e2e2;
    }

    tbody tr:nth-child(even) {
      background: #f2f2f2;
    }

    th {
      height: 28px;
      min-height: 28px;
      color: #fff;
      background: #009b89;
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .data-table .action-col {
      width: 92px;
      min-width: 92px;
      max-width: 92px;
      text-align: center;
    }

    .data-table.has-print-action .action-col {
      width: 116px;
      min-width: 116px;
      max-width: 116px;
    }

    body.credit-document-preview-open {
      overflow: hidden;
    }

    .credit-document-preview {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: grid;
      grid-template-rows: 58px minmax(0, 1fr);
      background: #dfe5e8;
    }

    .credit-document-preview > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 22px;
      background: #263238;
      color: #fff;
      box-shadow: 0 2px 10px rgba(24, 38, 44, 0.22);
    }

    .credit-document-preview > header > div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .credit-document-preview > header strong {
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .credit-document-preview > header span {
      color: #cbd5d9;
      font-size: 11px;
    }

    .credit-document-preview > header nav {
      display: flex;
      gap: 8px;
      flex: 0 0 auto;
    }

    .credit-document-preview > header .btn {
      min-width: 84px;
      border-color: rgba(255, 255, 255, 0.28);
      color: #fff;
      background: transparent;
    }

    .credit-document-preview > header .btn.primary {
      border-color: var(--green);
      background: var(--green);
    }

    .credit-document-preview iframe {
      width: 100%;
      height: 100%;
      border: 0;
      background: #dfe5e8;
    }

    @media (max-width: 640px) {
      .credit-document-preview {
        grid-template-rows: 64px minmax(0, 1fr);
      }

      .credit-document-preview > header {
        padding: 0 12px;
      }

      .credit-document-preview > header span {
        display: none;
      }

      .credit-document-preview > header .btn {
        min-width: 70px;
        padding-inline: 10px;
      }
    }

    .data-table .col-field-invoice,
    .data-table .col-field-code {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
    }

    .data-table .col-field-date,
    .data-table .col-field-purchaseDate,
    .data-table .col-field-createdAt {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
      text-align: center;
    }

    .data-table .col-field-customer,
    .data-table .col-field-supplier,
    .data-table .col-field-partner,
    .data-table .col-field-fullName,
    .data-table .col-field-company {
      width: 190px;
      min-width: 190px;
      max-width: 190px;
    }

    .data-table .col-field-name,
    .data-table .col-field-product,
    .data-table .col-field-description {
      width: 170px;
      min-width: 170px;
      max-width: 170px;
    }

    .data-table .col-field-employee,
    .data-table .col-field-manager,
    .data-table .col-field-position,
    .data-table .col-field-category,
    .data-table .col-field-subcategory {
      width: 145px;
      min-width: 145px;
      max-width: 145px;
    }

    .data-table .col-field-phone,
    .data-table .col-field-mobile,
    .data-table .col-field-tax,
    .data-table .col-field-fin,
    .data-table .col-field-serial,
    .data-table .col-field-imei1,
    .data-table .col-field-imei2,
    .data-table .col-field-username {
      width: 122px;
      min-width: 122px;
      max-width: 122px;
    }

    .data-table .col-field-type,
    .data-table .col-field-role,
    .data-table .col-field-paymentType,
    .data-table .col-field-unit {
      width: 118px;
      min-width: 118px;
      max-width: 118px;
      text-align: center;
    }

    .data-table .col-field-amount,
    .data-table .col-field-paid,
    .data-table .col-field-balance,
    .data-table .col-field-price,
    .data-table .col-field-salePrice,
    .data-table .col-field-cost,
    .data-table .col-field-salary,
    .data-table .col-field-debt,
    .data-table .col-field-total {
      width: 116px;
      min-width: 116px;
      max-width: 116px;
      text-align: right;
    }

    .sales-table .col-field-invoice {
      width: 112px;
      min-width: 112px;
      max-width: 112px;
    }

    .sales-table .col-field-date {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
      text-align: center;
    }

    .sales-table .col-field-customer {
      width: 190px;
      min-width: 190px;
      max-width: 190px;
    }

    .sales-table .col-field-type {
      width: 112px;
      min-width: 112px;
      max-width: 112px;
      text-align: center;
    }

    .sales-table .col-field-employee {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
    }

    .sales-table .col-field-amount,
    .sales-table .col-field-paid,
    .sales-table .col-field-balance {
      width: 118px;
      min-width: 118px;
      max-width: 118px;
      text-align: right;
    }

    .inventory-table .action-col {
      width: 42px;
      min-width: 42px;
      max-width: 42px;
    }

    .inventory-table .col-field-status {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
    }

    .inventory-table .col-field-purchaseDate {
      width: 104px;
      min-width: 104px;
      max-width: 104px;
      text-align: center;
    }

    .inventory-table .col-field-supplier {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
    }

    .inventory-table .col-field-product {
      width: 190px;
      min-width: 190px;
      max-width: 190px;
    }

    .inventory-table .col-field-qty {
      width: 72px;
      min-width: 72px;
      max-width: 72px;
      text-align: center;
    }

    .inventory-table .col-field-imei1,
    .inventory-table .col-field-imei2 {
      width: 138px;
      min-width: 138px;
      max-width: 138px;
    }

    .inventory-table .col-field-serial {
      width: 112px;
      min-width: 112px;
      max-width: 112px;
    }

    .inventory-table .col-field-price {
      width: 96px;
      min-width: 96px;
      max-width: 96px;
      text-align: right;
    }

    .data-table th,
    .data-table td {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
    }

    .data-table .action-col {
      overflow: visible;
    }

    .icon-btn {
      width: 22px;
      height: 22px;
      border-radius: 0;
      background: transparent;
      color: #111;
      font-size: 14px;
    }

    input,
    select {
      min-height: 24px;
      border-radius: 0;
      border-color: #cfd4d4;
      padding: 2px 6px;
      font-size: 12px;
    }

    label {
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      font-size: 12px;
    }

    .customer-screen {
      display: grid;
      grid-template-columns: minmax(520px, 1fr) 302px;
      gap: 8px;
    }

    .customer-panel {
      background: #f4f4f4;
      border: 1px solid #c6cccc;
      box-shadow: inset 0 0 0 3px #e6e6e6;
    }

    .customer-tabs {
      height: 27px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid #c9cece;
      background: #e7e7e7;
    }

    .customer-tabs button {
      background: #e2e2e2;
      border-right: 1px solid #c6cccc;
      border-radius: 4px 4px 0 0;
      font-size: 12px;
      color: #111;
    }

    .customer-tabs button.active {
      background: #f8f8f8;
      color: #008c7d;
      font-weight: 800;
    }

    .customer-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 28px;
      padding: 13px 14px 18px;
    }

    .field-line {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) 20px;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      font-size: 12px;
      color: #6a6f73;
    }

    .field-line.full {
      grid-column: 1 / -1;
      grid-template-columns: 84px minmax(0, 1fr) 20px;
    }

    .fake-input {
      min-height: 23px;
      display: flex;
      align-items: center;
      padding: 3px 7px;
      border: 1px solid #d1d6d6;
      background: #fff;
      color: #111;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .fake-input.center {
      justify-content: center;
      font-weight: 700;
    }

    .edit-mark {
      color: #009b89;
      font-size: 17px;
      line-height: 1;
      text-align: center;
    }

    .address-card {
      padding: 8px;
      background: #f4f4f4;
      border: 1px solid #c6cccc;
      box-shadow: inset 0 0 0 3px #e6e6e6;
    }

    .address-tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px 6px;
      font-size: 12px;
    }

    .address-box {
      margin: 0 64px 0 64px;
      min-height: 107px;
      border: 1px solid #d1d6d6;
      background: #fff;
      padding: 8px;
      font-size: 12px;
      line-height: 15px;
    }

    .address-lines {
      display: grid;
      gap: 6px;
      padding: 7px 64px 0;
    }

    .address-lines div {
      min-height: 22px;
      border: 1px solid #d1d6d6;
      background: #fff;
      padding: 3px 6px;
      font-size: 12px;
      color: #111;
    }

    .customer-subsection {
      margin-top: 8px;
    }

    .subhead {
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #008c7d;
      font-size: 12px;
      font-weight: 800;
      border-bottom: 2px solid #009b89;
    }

    .sub-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      color: #111;
      font-weight: 700;
    }

    .tiny-filter {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #4d555a;
      font-weight: 400;
    }

    .tiny-filter select {
      width: 170px;
      height: 23px;
    }

    .call-grid {
      margin-top: 5px;
    }

    .call-grid tbody td:first-child {
      color: #c21832;
    }

    .modal {
      border-radius: 0;
    }

    @media (max-width: 1000px) {
      .module-ribbon {
        grid-template-columns: repeat(15, 70px);
      }

      .app {
        grid-template-columns: 204px minmax(0, 1fr);
      }

      .sidebar {
        position: static;
      }

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

      .customer-screen {
        grid-template-columns: 1fr;
      }

      .address-box,
      .address-lines {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
      }
    }

    @media (max-width: 640px) {
      .topbar {
        flex-direction: row;
        align-items: center;
        padding: 0 8px;
      }

      .workspace-toolbar {
        align-items: stretch;
      }

      .workspace-toolbar .search {
        width: 100%;
      }

      .actions,
      .btn {
        width: auto;
      }

      .customer-form {
        grid-template-columns: 1fr;
      }
    }

    .module-ribbon {
      display: none !important;
    }

    .app {
      min-height: 100vh;
      height: 100vh;
      display: grid;
      grid-template-columns: 204px minmax(0, 1fr);
      background: #ededed;
      overflow: hidden;
    }

    main {
      min-height: 100vh;
      height: 100vh;
      overflow: hidden;
    }

    .content {
      padding: 8px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .workspace-toolbar {
      flex: 0 0 auto;
    }

    .view.active {
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
    }

    #dashboard.active {
      overflow: auto;
      padding-bottom: 8px;
    }

    .data-table {
      height: auto;
      max-height: 100%;
    }

    .data-table tbody {
      flex: 0 1 auto;
    }

    .data-table tfoot td {
      background: #009b89;
      border-top: 1px solid #007f71;
      color: #fff;
      font-weight: 700;
    }

    /* Final shared sizing keeps every module on the same visual grid. */
    button,
    input,
    select {
      min-width: 0;
    }

    .topbar {
      flex: 0 0 36px;
      height: 36px;
    }

    .sidebar {
      min-height: 0;
    }

    .nav {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .nav button {
      flex: 0 0 auto;
    }

    .workspace-toolbar {
      flex: 0 0 40px;
      min-height: 40px;
      height: 40px;
    }

    .workspace-toolbar .search,
    .btn,
    .btn.add-record {
      height: 28px;
      min-height: 28px;
      line-height: 1;
    }

    .workspace-toolbar .search {
      flex: 1 1 auto;
      width: 0;
      max-width: none;
      background: #f3f5f5;
      border-color: #c7cece;
      color: #26323a;
      box-shadow: inset 0 1px 2px rgba(36, 50, 58, .04);
      transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .workspace-toolbar .search::placeholder {
      color: #7d898f;
    }

    .workspace-toolbar .search:hover {
      border-color: #aeb9b9;
    }

    .workspace-toolbar .search:focus {
      outline: none;
      background: #fff;
      border-color: #009b89;
      box-shadow: 0 0 0 2px rgba(0, 155, 137, .12);
    }

    .topbar-title {
      min-width: 0;
    }

    .topbar-title h2 span {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .topbar-clock {
      flex: 0 0 132px;
      width: 132px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #c8d3d8;
      font-size: 11px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .topbar-clock strong {
      width: 57px;
      min-width: 57px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      text-align: right;
    }

    .topbar-clock span {
      width: 67px;
      text-align: right;
    }

    .notification-toggle {
      position: relative;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #d8e3e6;
    }

    .notification-toggle[hidden] { display: none !important; }
    .notification-toggle:hover,
    .notification-toggle:focus-visible,
    .notification-toggle[aria-expanded="true"] { background: transparent; color: #00b39d; outline: 0; }
    .notification-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .notification-toggle span {
      position: absolute;
      top: -5px;
      right: -6px;
      min-width: 17px;
      height: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid #24323a;
      border-radius: 9px;
      background: #c94848;
      color: #fff;
      font-size: 8px;
      font-weight: 800;
      line-height: 1;
    }

    .notification-toggle span[hidden] { display: none !important; }

    .notification-panel {
      position: fixed;
      top: 42px;
      right: 8px;
      z-index: 32;
      width: min(390px, calc(100vw - 24px));
      max-height: min(620px, calc(100vh - 52px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid #aebdbc;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 16px 38px rgba(30, 46, 52, .24);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .notification-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .notification-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      border-bottom: 1px solid #237d73;
      background: #008d7d;
      color: #fff;
    }
    .notification-panel-head h3 { margin: 0; color: #fff; font-size: 13px; }
    .notification-panel-head span { display: block; margin-top: 2px; color: #d7efeb; font-size: 10px; }
    .notification-close {
      width: 26px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #fff;
      font-size: 20px;
      line-height: 1;
    }
    .notification-close:hover { background: rgba(255, 255, 255, .14); }
    .notification-panel-actions { display: flex; justify-content: flex-end; min-height: 35px; padding: 6px 10px; border-bottom: 1px solid #d6dfde; background: #eef2f2; }
    .notification-panel-actions button { padding: 4px 8px; border: 0; background: transparent; color: #007f71; font-size: 10px; font-weight: 700; }
    .notification-panel-actions button:hover { background: #dceae8; }
    .notification-panel-actions button:disabled { color: #95a3a4; cursor: default; }
    .notification-list { min-height: 90px; overflow-y: auto; }
    .notification-item { padding: 11px 12px; border-bottom: 1px solid #dce3e2; background: #fff; }
    .notification-item.is-unread { border-left: 3px solid #008d7d; background: #f3f9f8; }
    .notification-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .notification-item-head strong { min-width: 0; overflow: hidden; color: #2f4348; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .notification-item-head span { flex: 0 0 52px; padding: 3px 5px; border-radius: 3px; background: #e5ebea; color: #657578; font-size: 9px; font-weight: 700; text-align: center; }
    .notification-item.is-unread .notification-item-head span { background: #d7eeea; color: #00786b; }
    .notification-item[data-priority="Vacib"].is-unread { border-left-color: #b98217; background: #fffaf0; }
    .notification-item[data-priority="Kritik"].is-unread { border-left-color: #b84444; background: #fff5f5; }
    .notification-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
    .notification-item-meta span { padding: 2px 5px; border: 1px solid #ced9d8; border-radius: 3px; background: #f3f6f6; color: #657578; font-size: 9px; font-weight: 700; }
    .notification-item[data-priority="Vacib"] .notification-item-meta span:nth-child(2) { border-color: #d8bd82; background: #fff6df; color: #8b6415; }
    .notification-item[data-priority="Kritik"] .notification-item-meta span:nth-child(2) { border-color: #dfaaaa; background: #fbe8e8; color: #9b3434; }
    .notification-item p { margin: 6px 0; color: #53666a; font-size: 11px; line-height: 15px; overflow-wrap: anywhere; }
    .notification-item footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .notification-item time { color: #879496; font-size: 9px; }
    .notification-item footer button { padding: 3px 6px; border: 1px solid #a9c4c0; border-radius: 3px; background: #fff; color: #007c6f; font-size: 9px; font-weight: 700; }
    .notification-item footer button:hover { border-color: #008d7d; background: #008d7d; color: #fff; }
    .notification-empty { padding: 34px 16px; color: #7a898c; font-size: 11px; text-align: center; }

    .workspace-search {
      flex: 0 1 28px;
      width: 28px;
      min-width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      overflow: hidden;
      transition: width .18s ease, flex-basis .18s ease;
    }

    .workspace-search.open {
      flex-basis: 328px;
      width: 328px;
    }

    .search-toggle {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #43545a;
      transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    .search-toggle:hover,
    .workspace-search.open .search-toggle {
      background: #e1f0ed;
      color: #007e70;
    }

    .search-toggle:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 140, 125, .32);
    }

    .search-toggle svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .workspace-search .search {
      flex: 0 1 0;
      width: 0;
      min-width: 0;
      padding-left: 0;
      padding-right: 0;
      margin-left: 0;
      border-width: 0;
      opacity: 0;
      pointer-events: none;
    }

    .workspace-search.open .search {
      flex: 1 1 auto;
      width: auto;
      padding-left: 8px;
      padding-right: 8px;
      margin-left: 6px;
      border-width: 1px;
      opacity: 1;
      pointer-events: auto;
    }

    .workspace-actions {
      flex: 0 0 auto;
    }

    .workspace-shell {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    .workspace-shell > .content {
      flex: 1 1 auto;
      min-width: 0;
    }

    .info-drawer {
      flex: 0 0 0;
      width: 0;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      background: #f2f4f4;
      border-left: 0 solid #c4cccc;
      box-shadow: -8px 0 22px rgba(36, 50, 58, 0);
      transition: flex-basis .2s ease, width .2s ease, border-width .2s ease, box-shadow .2s ease;
      z-index: 8;
    }

    .info-drawer.open {
      flex-basis: 420px;
      width: 420px;
      border-left-width: 1px;
      box-shadow: -8px 0 22px rgba(36, 50, 58, .1);
    }

    .info-drawer-inner {
      width: 420px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .info-drawer.sales-details.open {
      flex-basis: 640px;
      width: 640px;
    }

    .info-drawer.sales-details .info-drawer-inner {
      width: 640px;
    }

    .info-drawer-head {
      flex: 0 0 auto;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      background: #009b89;
      border-bottom: 1px solid #007f71;
      color: #fff;
    }

    .info-drawer-head h3 {
      margin: 0;
      font-size: 13px;
      line-height: 16px;
    }

    .info-drawer-head span {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .78);
      font-size: 11px;
    }

    .info-drawer-body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 10px 12px;
      overflow-y: auto;
    }

    .drawer-field {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      min-height: 34px;
      padding: 6px 0;
      border-bottom: 1px solid #dce2e2;
      font-size: 12px;
    }

    .drawer-field > span {
      color: #69767d;
      line-height: 22px;
    }

    .drawer-value {
      min-width: 0;
      min-height: 22px;
      padding: 3px 6px;
      background: #fff;
      border: 1px solid #cbd3d3;
      color: #172328;
      line-height: 16px;
      overflow-wrap: anywhere;
    }

    .sales-details .drawer-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
    }

    .credit-detail-section {
      margin-top: 14px;
    }

    .credit-detail-section h4 {
      min-height: 30px;
      margin: 0;
      display: flex;
      align-items: center;
      padding: 0 8px;
      border-bottom: 2px solid #008c7d;
      background: #eef2f2;
      color: #007f71;
      font-size: 12px;
    }

    .credit-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid #cbd3d3;
      border-top: 0;
      background: #fff;
    }

    .credit-summary-grid > div {
      min-width: 0;
      padding: 8px;
      border-right: 1px solid #dce2e2;
    }

    .credit-summary-grid > div:last-child {
      border-right: 0;
    }

    .credit-summary-grid span,
    .credit-summary-grid strong {
      display: block;
    }

    .credit-summary-grid span {
      margin-bottom: 4px;
      color: #69767d;
      font-size: 10px;
    }

    .credit-summary-grid strong {
      color: #172328;
      font-size: 13px;
      white-space: nowrap;
    }

    .credit-table-wrap {
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid #cbd3d3;
      border-top: 0;
    }

    .credit-detail-table {
      width: 100%;
      min-width: 590px;
      border: 1px solid #bfc7c7;
      border-collapse: collapse;
      table-layout: auto;
      box-shadow: none;
    }

    .payment-schedule-table,
    .debt-payment-schedule-table {
      min-width: 900px;
    }

    .debt-payment-history-table {
      min-width: 790px;
    }

    .payment-history-table {
      min-width: 720px;
    }

    .credit-detail-table th,
    .credit-detail-table td {
      height: 28px;
      padding: 4px 6px;
      border-right: 1px solid #d5dddd;
      border-bottom: 1px solid #d5dddd;
      font-size: 10px;
      white-space: nowrap;
      vertical-align: middle;
    }

    .credit-detail-table th:last-child,
    .credit-detail-table td:last-child {
      border-right: 0;
    }

    .credit-detail-table thead th {
      border-bottom-color: #007f71;
      background: #009b89;
      color: #fff;
    }

    .credit-detail-table tbody tr:nth-child(even) td {
      background: #f2f5f5;
    }

    .credit-detail-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .credit-detail-table th:first-child,
    .credit-detail-table td:first-child {
      width: 34px;
      min-width: 34px;
      text-align: center;
    }

    .credit-detail-table .badge {
      font-size: 10px;
      white-space: nowrap;
    }

    .credit-detail-table .credit-table-empty {
      height: 42px;
      color: #69767d;
      text-align: center;
    }

    .debt-info-empty {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd3d3;
      border-top: 0;
      background: #fff;
      color: #69767d;
      font-size: 11px;
    }

    .info-drawer-footer {
      flex: 0 0 54px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid #cbd3d3;
      background: #e8ebeb;
    }

    .info-drawer-footer .btn {
      width: 104px;
      min-width: 104px;
      height: 30px;
      min-height: 30px;
      background: #fff;
      border: 1px solid #c2cccc;
      color: #26323a;
    }

    .data-table tbody tr.is-selected {
      background: #e0f3ef !important;
      box-shadow: inset 3px 0 0 #009b89;
    }

    .operation-editor {
      display: none;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      background: #f4f5f5;
      border: 1px solid #c7cece;
    }

    .global-search-results {
      display: none;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      background: #f2f4f4;
      border: 1px solid #c7cece;
    }

    .content.global-search-mode .workspace-toolbar,
    .content.global-search-mode > .view.active,
    .content.global-search-mode .operation-editor {
      display: none !important;
    }

    .content.global-search-mode .global-search-results {
      display: flex;
      animation: operationEditorIn .18s ease-out both;
    }

    .global-search-head {
      flex: 0 0 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 11px;
      background: #fff;
      border-bottom: 2px solid #009b89;
    }

    .global-search-head h3 {
      margin: 0;
      color: #172328;
      font-size: 14px;
    }

    .global-search-head span {
      color: #6d7a80;
      font-size: 11px;
      white-space: nowrap;
    }

    .global-search-list {
      flex: 1 1 auto;
      min-height: 0;
      padding: 8px;
      overflow-y: auto;
    }

    .global-result {
      background: #fff;
      border: 1px solid #cbd3d3;
    }

    .global-result + .global-result {
      margin-top: 8px;
    }

    .global-result-head {
      min-height: 35px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      background: #e9eded;
      border-bottom: 1px solid #cbd3d3;
    }

    .global-result-module {
      flex: 0 0 auto;
      padding: 3px 6px;
      background: #24323a;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
    }

    .global-result-head strong {
      min-width: 0;
      overflow: hidden;
      color: #172328;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-result-head .icon-btn {
      margin-left: auto;
    }

    .global-detail-grid {
      display: block;
      padding: 8px;
      border-bottom: 1px solid #dde3e3;
      overflow-x: auto;
    }

    .global-detail {
      min-width: 0;
      padding: 7px 8px;
      border-right: 1px solid #e1e6e6;
      border-bottom: 1px solid #e8ecec;
    }

    .global-detail span {
      display: block;
      color: #768289;
      font-size: 10px;
    }

    .global-detail b {
      display: block;
      margin-top: 3px;
      overflow: hidden;
      color: #26343a;
      font-size: 12px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-related {
      padding: 8px;
      background: #fafbfb;
    }

    .global-related-title {
      margin-bottom: 5px;
      color: #008c7d;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .global-related-line {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 8px;
      padding: 3px 0;
      color: #334148;
      font-size: 11px;
      line-height: 15px;
    }

    .global-related-line span {
      color: #77848a;
    }

    .global-related-line b {
      min-width: 0;
      color: #2d3a40;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    .global-primary-table,
    .global-related-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
      border: 1px solid #cbd3d3;
      background: #fff;
    }

    .global-primary-table {
      min-width: 680px;
    }

    .global-primary-table th,
    .global-primary-table td {
      position: static;
      height: 34px;
      padding: 7px 9px;
      border-right: 1px solid #dce2e2;
      border-bottom: 1px solid #dce2e2;
      font-size: 12px;
      line-height: 18px;
      text-align: left;
      white-space: normal;
    }

    .global-primary-table th {
      width: 130px;
      min-width: 130px;
      background: #e9eded;
      color: #5f6d73;
      font-weight: 700;
    }

    .global-primary-table td {
      color: #172328;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    .global-related-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #c7cece;
    }

    .global-related-table {
      min-width: 1420px;
      border: 0;
    }

    .global-related-table th,
    .global-related-table td {
      position: static;
      height: 32px;
      padding: 6px 8px;
      border-right: 1px solid #d8dfdf;
      border-bottom: 1px solid #dce2e2;
      color: #26343a;
      background: #fff;
      font-size: 11px;
      line-height: 18px;
      text-align: left;
      vertical-align: top;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .global-related-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #009b89;
      color: #fff;
      font-weight: 700;
      white-space: nowrap;
    }

    .global-related-table th:first-child,
    .global-related-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      width: 130px;
      min-width: 130px;
    }

    .global-related-table td:first-child {
      background: #eef4f3;
      color: #007f71;
      font-weight: 700;
    }

    .global-related-table th:first-child {
      z-index: 3;
      background: #007f71;
    }

    .global-search-empty {
      padding: 38px 18px;
      text-align: center;
      color: #718087;
      font-size: 12px;
    }

    .global-search-list.trace-mode {
      padding: 8px;
      overflow: auto;
    }

    .global-trace-sheet {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #bdc8c8;
      background: #fff;
    }

    .global-trace-summary {
      flex: 0 0 auto;
      min-height: 48px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid #cbd3d3;
      background: #e9eded;
    }

    .global-trace-summary div {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .global-trace-summary span,
    .global-trace-summary p {
      margin: 0;
      color: #68767c;
      font-size: 10px;
    }

    .global-trace-summary strong {
      color: #007f71;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .global-trace-table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .global-trace-table {
      width: 100%;
      border: 0;
      border-collapse: collapse;
      table-layout: fixed;
      background: #fff;
    }

    .global-trace-table .trace-product-col { width: 15%; }
    .global-trace-table .trace-document-col { width: 8%; }
    .global-trace-table .trace-party-col { width: 10%; }
    .global-trace-table .trace-money-col { width: 7%; }
    .global-trace-table .trace-employee-col { width: 9%; }
    .global-trace-table .trace-type-col { width: 7%; }
    .global-trace-table .trace-credit-col { width: 10%; }
    .global-trace-table .trace-status-col { width: 9%; }

    .global-trace-table th,
    .global-trace-table td {
      height: 40px;
      padding: 7px 8px;
      border-right: 1px solid #d5dddd;
      border-bottom: 1px solid #d5dddd;
      color: #26343a;
      font-size: 11px;
      line-height: 16px;
      text-align: left;
      vertical-align: top;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .global-trace-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      height: 36px;
      background: #009b89;
      color: #fff;
      font-weight: 700;
      vertical-align: middle;
    }

    .global-trace-table tbody tr:nth-child(even) td {
      background: #f5f8f8;
    }

    .global-trace-table .trace-product strong,
    .global-trace-table .trace-document strong,
    .global-trace-table .trace-credit strong {
      display: block;
      color: #172328;
      font-size: 11px;
    }

    .global-trace-table small {
      display: block;
      margin-top: 2px;
      color: #68767c;
      font-size: 10px;
      line-height: 14px;
    }

    .global-trace-table small b {
      color: #405158;
      font-weight: 700;
    }

    .global-trace-table .trace-document,
    .global-trace-table .trace-center {
      text-align: center;
    }

    .global-trace-table .trace-money {
      text-align: right;
      white-space: nowrap;
    }

    .global-trace-table .trace-credit {
      text-align: left;
    }

    .global-trace-table .trace-empty {
      color: #899397;
    }

    .global-trace-table .badge {
      width: 84px;
      min-width: 84px;
      max-width: 84px;
      font-size: 10px;
    }

    .global-trace-table tfoot td {
      position: sticky;
      bottom: 0;
      z-index: 2;
      height: 36px;
      min-height: 36px;
      background: #009b89;
      border-color: #007f71;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      vertical-align: middle;
    }

    .global-trace-table tfoot .trace-total-label {
      text-align: left;
    }

    .content.editor-mode {
      position: relative;
    }

    .content.editor-mode::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 18;
      background: rgba(26, 35, 45, .38);
    }

    .content.editor-mode .operation-editor {
      position: absolute;
      inset: 24px;
      z-index: 19;
      display: flex;
      border-color: #aebaba;
      box-shadow: 0 20px 60px rgba(20, 28, 36, .3);
      animation: operationEditorIn .2s ease-out both;
    }

    .operation-editor-head {
      flex: 0 0 42px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 10px;
      background: #009b89;
      border-bottom: 1px solid #007f71;
    }

    .operation-back {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: none;
      place-items: center;
      padding: 0;
      border: 1px solid #c7cece;
      background: #f3f5f5;
      color: #35434a;
    }

    .operation-back svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .operation-editor-head h3 {
      margin: 0;
      color: #fff;
      font-size: 14px;
    }

    .operation-editor-head span {
      margin-left: auto;
      color: rgba(255, 255, 255, .78);
      font-size: 11px;
    }

    .operation-form {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .operation-body {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 310px;
      align-items: start;
      overflow-y: auto;
    }

    .operation-main {
      min-width: 0;
      padding: 12px 14px;
    }

    .operation-section + .operation-section {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid #ccd4d4;
    }

    .content.editor-mode .operation-section {
      animation: operationSectionIn .24s ease-out both;
    }

    .content.editor-mode .operation-section:nth-child(2) {
      animation-delay: .05s;
    }

    .operation-section h4,
    .operation-summary h4 {
      margin: 0 0 10px;
      color: #008c7d;
      font-size: 12px;
      font-weight: 800;
    }

    .operation-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px 16px;
    }

    .operation-form label {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: #56636a;
      font-size: 12px;
    }

    .operation-form input,
    .operation-form select {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 3px 7px;
      background: #fff;
      border: 1px solid #bdc8c8;
      color: #172328;
    }

    .operation-form input:focus,
    .operation-form select:focus {
      outline: none;
      border-color: #009b89;
      box-shadow: 0 0 0 2px rgba(0, 155, 137, .11);
    }

    .operation-form input[readonly] {
      background: #e9eded;
      color: #46545a;
    }

    .operation-summary {
      min-width: 0;
      align-self: stretch;
      padding: 12px;
      background: #e9ecec;
      border-left: 1px solid #c7cece;
    }

    .content.editor-mode .operation-summary {
      animation: operationSummaryIn .24s .07s ease-out both;
    }

    .content.editor-mode .operation-editor.animation-layer-released,
    .content.editor-mode .operation-summary.animation-layer-released {
      animation: none;
      transform: none;
    }

    .operation-summary .operation-field-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .operation-live-total {
      margin-top: 14px;
      padding: 12px;
      background: #008c7d;
      color: #fff;
    }

    .operation-live-total span {
      display: block;
      color: rgba(255, 255, 255, .8);
      font-size: 11px;
    }

    .operation-live-total strong {
      display: block;
      margin-top: 5px;
      color: #fff;
      font-size: 22px;
      font-variant-numeric: tabular-nums;
    }

    .operation-footer {
      flex: 0 0 54px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid #c4cccc;
      background: #e8ebeb;
    }

    .content.editor-mode .operation-footer {
      animation: operationFooterIn .22s .08s ease-out both;
    }

    .operation-footer .btn {
      width: 112px;
      min-width: 112px;
      height: 30px;
      min-height: 30px;
    }

    .operation-cancel {
      background: #c94848;
      border: 1px solid #a93636;
      color: #fff;
    }

    .operation-save {
      background: #009b89;
      border: 1px solid #007f71;
      color: #fff;
    }

    .operation-editor-head > span {
      margin-left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .operation-form {
      display: grid;
      grid-template-rows: auto minmax(150px, 1fr) auto auto;
      overflow: hidden;
    }

    .operation-modal-footer {
      min-height: 48px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      border-top: 1px solid #c4cccc;
      background: #e8ebeb;
    }

    .operation-modal-footer .btn {
      width: 112px;
      min-width: 112px;
      height: 30px;
      min-height: 30px;
    }

    .operation-document-band {
      padding: 9px 10px 10px;
      background: #eef1f1;
      border-bottom: 1px solid #c5cece;
    }

    .operation-document-band h4,
    .operation-band-title h4,
    .operation-summary h4 {
      margin: 0;
      color: #008c7d;
      font-size: 11px;
      font-weight: 800;
    }

    .operation-document-band .operation-field-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px 10px;
      margin-top: 7px;
    }

    .operation-control-with-action {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--entry-control-height);
      gap: 5px;
    }

    .operation-control-with-action > button {
      width: var(--entry-control-height);
      min-width: var(--entry-control-height);
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 0;
      border: 1px solid #007f71;
      background: #009b89;
      color: #fff;
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
    }

    .operation-inline-create {
      grid-column: span 2;
      min-width: 0;
      padding: 7px;
      display: grid;
      grid-template-columns: auto minmax(130px, 1fr) minmax(120px, .8fr) auto;
      align-items: center;
      gap: 6px;
      border: 1px solid #c4cccc;
      background: #e4e9e9;
    }

    .operation-inline-create.operation-inline-create-supplier {
      grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .operation-inline-create.operation-inline-create-customer {
      grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .operation-inline-create[data-operation-create] > strong {
      grid-column: 1 / -1;
    }

    .operation-inline-create[data-operation-create] > button {
      justify-self: end;
    }

    .operation-inline-create[hidden],
    .sales-summary-fields > [hidden],
    .operation-summary [hidden] {
      display: none !important;
    }

    .operation-inline-create strong {
      color: #007f71;
      font-size: 10px;
      white-space: nowrap;
    }

    .operation-inline-create input,
    .operation-inline-create button {
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      font-size: 10px;
    }

    .operation-inline-create button {
      padding: 0 9px;
      border: 1px solid #007f71;
      background: #009b89;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }

    .sales-document-fields input[type="hidden"] {
      display: none;
    }

    .operation-document-band label,
    .operation-summary label {
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: 3px;
    }

    .operation-document-band label > span,
    .operation-summary label > span {
      min-height: 14px;
      color: #69767d;
      font-size: 10px;
      line-height: 14px;
    }

    .operation-item-band {
      min-width: 0;
      min-height: 0;
      padding: 0 10px 10px;
      overflow: auto;
      background: #f7f8f8;
    }

    .operation-band-title {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .operation-band-title span {
      color: #758188;
      font-size: 10px;
    }

    .operation-band-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .operation-add-line {
      height: 27px;
      padding: 0 10px;
      border: 1px solid #007f71;
      background: #009b89;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .operation-add-line:hover { background: #007f71; }

    .operation-item-table tbody td,
    .operation-item-table .draft-row td,
    .operation-item-table .draft-row:nth-child(even) td {
      background: #fff;
    }
    .operation-item-table .draft-row td:last-child { text-align: center; }
    .operation-item-table .draft-empty td { background: #fff; color: #7a858a; text-align: center; }
    .operation-edit-line,
    .operation-remove-line {
      width: 24px;
      height: 24px;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .operation-edit-line {
      color: #007f71;
      font-size: 15px;
    }

    .operation-remove-line {
      color: #b43d3d;
      font-size: 18px;
    }

    .operation-item-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #bfc8c8;
      background: #fff;
      box-shadow: 0 1px 2px rgba(31, 55, 52, .08);
    }

    .operation-item-table {
      width: 100%;
      min-width: 780px;
      border: 0;
      border-collapse: collapse;
      table-layout: fixed;
      background: #fff;
    }

    .operation-item-table th,
    .operation-item-table td {
      position: static;
      height: 34px;
      padding: 4px 6px;
      border-right: 1px solid #d4dddd;
      border-bottom: 1px solid #dce2e2;
      font-size: 11px;
      text-align: left;
      vertical-align: middle;
    }

    .operation-item-table th {
      background: #009b89;
      color: #fff;
      font-weight: 700;
      white-space: nowrap;
    }

    .operation-item-table td:first-child,
    .operation-item-table th:first-child {
      width: 38px;
      min-width: 38px;
      text-align: center;
    }

    .operation-item-table th.operation-row-actions,
    .operation-item-table td.operation-row-actions {
      width: 62px;
      min-width: 62px;
      text-align: center;
    }

    .operation-item-table td.operation-row-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .operation-item-table.purchase-item-table {
      min-width: 1120px;
    }

    .operation-item-table.purchase-item-table th:first-child,
    .operation-item-table.purchase-item-table td:first-child {
      width: 38px;
      min-width: 38px;
      text-align: center;
    }

    .operation-item-table.purchase-item-table th[data-field="description"],
    .operation-item-table.purchase-item-table td[data-field="description"] {
      width: 30%;
      min-width: 280px;
    }

    .operation-item-table.purchase-item-table th[data-field="lineQty"],
    .operation-item-table.purchase-item-table td[data-field="lineQty"] {
      width: 74px;
      min-width: 74px;
    }

    .operation-item-table.purchase-item-table th[data-field="unitPrice"],
    .operation-item-table.purchase-item-table td[data-field="unitPrice"],
    .operation-item-table.purchase-item-table th[data-field="lineTotal"],
    .operation-item-table.purchase-item-table td[data-field="lineTotal"] {
      width: 130px;
      min-width: 130px;
    }

    .operation-item-table.purchase-item-table th[data-field="imei1"],
    .operation-item-table.purchase-item-table td[data-field="imei1"],
    .operation-item-table.purchase-item-table th[data-field="imei2"],
    .operation-item-table.purchase-item-table td[data-field="imei2"],
    .operation-item-table.purchase-item-table th[data-field="serial"],
    .operation-item-table.purchase-item-table td[data-field="serial"] {
      width: 145px;
      min-width: 145px;
    }

    .operation-item-table input,
    .operation-item-table select {
      height: 26px;
      min-height: 26px;
      border-color: #c6cece;
      font-size: 11px;
    }

    .sales-product-lookup {
      width: 100%;
      min-width: 0;
    }

    .sales-product-lookup input[type="search"] {
      width: 100%;
    }

    .sales-product-lookup input[type="hidden"] {
      display: none;
    }

    .operation-summary-band {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 230px;
      align-items: stretch;
      border-top: 1px solid #bbc6c6;
      background: #e6eaea;
    }

    .operation-summary {
      min-width: 0;
      padding: 8px 10px 10px;
      background: transparent;
      border: 0;
    }

    .operation-summary .operation-field-grid {
      grid-template-columns: repeat(5, minmax(110px, 1fr));
      gap: 7px;
      margin-top: 6px;
      overflow-x: auto;
    }

    .operation-summary .sales-summary-fields {
      grid-template-columns: repeat(5, minmax(128px, 1fr));
      align-items: end;
    }

    .operation-summary .operation-check-field,
    .operation-document-band .operation-check-field {
      box-sizing: border-box;
      height: 30px;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      align-self: end;
      padding: 0 8px;
      border: 1px solid #c6cece;
      background: #f5f7f7;
      color: #35434a;
      white-space: nowrap;
      cursor: pointer;
    }

    .operation-summary .operation-check-field input[type="checkbox"],
    .operation-document-band .operation-check-field input[type="checkbox"] {
      flex: 0 0 16px;
      inline-size: 16px;
      min-inline-size: 16px;
      max-inline-size: 16px;
      block-size: 16px;
      min-block-size: 16px;
      max-block-size: 16px;
      margin: 0;
      padding: 0;
      accent-color: #009b89;
      cursor: pointer;
    }

    .operation-summary .operation-check-field span,
    .operation-document-band .operation-check-field span {
      display: inline-flex;
      align-items: center;
      min-height: 0;
      color: #35434a;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
    }

    .operation-summary .operation-check-field:has(input:disabled),
    .operation-document-band .operation-check-field:has(input:disabled) {
      opacity: .58;
      cursor: default;
    }

    .operation-summary-band .operation-live-total {
      min-height: 100%;
      margin: 0;
      display: grid;
      align-content: center;
      padding: 10px 14px;
      border-left: 1px solid #007568;
    }

    .operation-back,
    .operation-footer .btn {
      transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    }

    .operation-back:hover {
      background: #fff;
      border-color: #009b89;
      color: #008c7d;
      transform: translateX(-2px);
    }

    .operation-footer .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 5px rgba(36, 50, 58, .16);
    }

    .operation-footer .btn:active {
      transform: translateY(0);
      box-shadow: none;
    }

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

    @keyframes operationSectionIn {
      from { opacity: 0; transform: translateX(-6px); }
      to { opacity: 1; transform: translateX(0); }
    }

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

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

    @media (prefers-reduced-motion: reduce) {
      .content.editor-mode .operation-editor,
      .content.editor-mode .operation-section,
      .content.editor-mode .operation-summary,
      .content.editor-mode .operation-footer {
        animation: none;
      }

      .operation-back,
      .operation-footer .btn {
        transition: none;
      }
    }

    .btn {
      padding: 0 12px;
      border-radius: 3px;
    }

    .btn.add-record {
      min-width: 126px;
    }

    .modal .footer {
      min-height: 54px;
      align-items: center;
    }

    .modal .footer .btn {
      width: 104px;
      min-width: 104px;
      height: 30px;
      min-height: 30px;
      padding: 0 12px;
    }


    .data-table th,
    .data-table td {
      height: 28px;
      min-height: 28px;
      line-height: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .data-table .action-col {
      overflow: visible;
    }

    .mini-actions {
      width: 100%;
      height: 22px;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .icon-btn {
      flex: 0 0 22px;
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      padding: 0;
      line-height: 1;
    }

    .icon-btn svg {
      width: 15px;
      height: 15px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .card,
    .kpi,
    .section-head,
    .table-host,
    .table-scroll {
      min-width: 0;
    }

    .section-head h3,
    .section-head span,
    .kpi .label,
    .kpi strong {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    #settings.active {
      overflow: auto;
      padding-bottom: 8px;
    }

    .settings-workspace {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .settings-section {
      width: 100%;
      border: 1px solid #c4cccc;
      background: #f5f6f6;
    }

    .settings-section-head {
      min-height: 43px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      background: #009b89;
      color: #fff;
    }

    .settings-section-head h3 {
      margin: 0;
      font-size: 13px;
      line-height: 17px;
      font-weight: 700;
    }

    .settings-section-head p {
      margin: 1px 0 0;
      color: rgba(255, 255, 255, .82);
      font-size: 10px;
      line-height: 14px;
    }

    .settings-fields {
      padding: 11px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 12px;
    }

    .settings-field {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: #46545a;
      font-size: 10px;
      line-height: 13px;
      font-weight: 600;
    }

    .settings-field-wide {
      grid-column: span 2;
    }

    .settings-field input,
    .settings-field select {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 4px 8px;
      border: 1px solid #bcc6c6;
      border-radius: 2px;
      background: #fff;
      color: #25343a;
      font-size: 11px;
    }

    .settings-field input:focus,
    .settings-field select:focus {
      outline: none;
      border-color: #009b89;
      box-shadow: 0 0 0 2px rgba(0, 155, 137, .1);
    }

    .settings-check-field input[type="checkbox"] {
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      margin: 6px 0 7px;
      padding: 0;
      accent-color: #009b89;
    }

    .settings-footer {
      min-height: 47px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      border: 1px solid #c4cccc;
      background: #e8ebeb;
    }

    .settings-save-status {
      color: #087568;
      font-size: 11px;
      font-weight: 600;
    }

    .settings-save.btn {
      width: 112px;
      min-width: 112px;
      height: 30px;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 3px;
      background: #009b89;
      color: #fff;
      font-size: 11px;
    }

    .settings-tabs {
      overflow-x: auto;
      overflow-y: hidden;
    }

    .settings-tab-content,
    #developer .module-tab-content {
      flex: 1;
      min-height: 0;
    }

    .settings-list-manager {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .settings-list-create {
      flex: 0 0 auto;
      padding: 10px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 112px;
      align-items: end;
      gap: 10px;
      border: 1px solid #c4cccc;
      background: #e9eded;
    }

    .settings-hierarchy-create {
      grid-template-columns: repeat(2, minmax(180px, 1fr)) 112px;
    }

    .settings-list-create label {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: #536168;
      font-size: 10px;
      font-weight: 600;
    }

    .settings-list-create input,
    .settings-list-name {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 4px 8px;
      border: 1px solid #bcc6c6;
      border-radius: 2px;
      background: #fff;
      color: #25343a;
      font-size: 11px;
    }

    .settings-list-create .btn {
      width: 112px;
      min-width: 112px;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      border: 1px solid #008f80;
      background: #009b89;
      color: #fff;
    }

    .settings-list-create .btn:hover {
      background: #007f71;
    }

    .settings-list-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;
      border: 1px solid #c4cccc;
      background: #fff;
    }

    .settings-category-list {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 2px 2px 8px;
      overflow: auto;
    }

    .settings-category-block {
      flex: 0 0 auto;
      border: 1px solid #d2dbdb;
      border-left: 4px solid #009b89;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(32, 48, 56, .06);
      overflow: hidden;
    }

    .settings-category-head {
      min-height: 50px;
      padding: 8px 10px;
      display: grid;
      grid-template-columns: 34px minmax(220px, 1fr) 82px 128px 108px;
      align-items: center;
      gap: 10px;
      background: #fbfcfc;
      border-bottom: 1px solid #e3e8e8;
    }

    .settings-category-block:has(.settings-category-body:not([hidden])) .settings-category-head {
      background: #f3f8f7;
      border-bottom-color: #d5e2e0;
    }

    .settings-category-head .settings-list-name {
      height: var(--entry-control-height);
      border-color: #d4dddd;
      background: #fff;
      font-weight: 700;
    }

    .settings-category-expand {
      height: 30px;
      padding: 0 9px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #cbd6d6;
      border-radius: 15px;
      background: #fff;
      color: #435258;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }

    .settings-category-expand:hover {
      border-color: #9ecfca;
      background: #eef8f6;
      color: #007568;
    }

    .settings-category-expand strong {
      color: #008f80;
      font-size: 14px;
    }

    .settings-category-body[hidden] {
      display: none;
    }

    .settings-category-index {
      width: 26px;
      height: 26px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #eef5f4;
      color: #087568;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .settings-subcategory-create {
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 112px;
      align-items: end;
      gap: 10px;
      border-bottom: 1px solid #e1e7e7;
      background: #f8faf9;
    }

    .settings-subcategory-create label {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      color: #536168;
      font-size: 10px;
      font-weight: 600;
    }

    .settings-subcategory-create input {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 4px 8px;
      border: 1px solid #cbd6d6;
      border-radius: 4px;
      background: #fff;
      color: #25343a;
      font-size: 11px;
    }

    .settings-subcategory-create .btn {
      width: 112px;
      min-width: 112px;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      border: 1px solid #008f80;
      background: #009b89;
      color: #fff;
    }

    .settings-subcategory-create .btn:hover {
      background: #007f71;
    }

    .settings-subcategory-wrap {
      max-height: 230px;
      border: 0;
      background: #fff;
    }

    .settings-list-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .settings-list-table th,
    .settings-list-table td {
      height: 38px;
      padding: 5px 9px;
      border-right: 0;
      border-bottom: 1px solid #edf1f1;
      color: #28363c;
      font-size: 11px;
      text-align: left;
    }

    .settings-list-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #eef5f4;
      color: #4b5b62;
      font-size: 10px;
      font-weight: 800;
    }

    .settings-list-table tbody tr:nth-child(even) td {
      background: #fbfcfc;
    }

    .settings-list-table tbody tr:hover td {
      background: #f0f8f6;
    }

    .settings-list-table th:first-child,
    .settings-list-table td:first-child {
      width: 46px;
      text-align: center;
    }

    .settings-list-table th:nth-child(3),
    .settings-list-table td:nth-child(3) {
      width: 100px;
    }

    .settings-list-table .action-col {
      width: 116px;
    }

    .settings-row-save {
      color: #087568;
      font-weight: 800;
    }

    .searchable-select {
      position: relative;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .searchable-native-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      min-height: 1px !important;
      padding: 0 !important;
      opacity: 0;
      pointer-events: none;
    }

    .searchable-select-input {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding-right: 28px !important;
      background-image: linear-gradient(45deg, transparent 50%, #68767c 50%), linear-gradient(135deg, #68767c 50%, transparent 50%) !important;
      background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50% !important;
      background-size: 5px 5px, 5px 5px !important;
      background-repeat: no-repeat !important;
    }

    .searchable-options {
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      right: 0;
      z-index: 80;
      width: auto;
      max-height: 220px;
      overflow-y: auto;
      border: 1px solid #aebaba;
      background: #fff;
      box-shadow: 0 10px 24px rgba(27, 41, 48, .18);
    }

    .searchable-options[hidden] {
      display: none !important;
    }

    .searchable-option {
      width: 100%;
      min-height: 28px;
      display: block;
      padding: 6px 9px;
      border: 0;
      border-bottom: 1px solid #e2e7e7;
      background: #fff;
      color: #172328;
      font-size: 11px;
      line-height: 16px;
      text-align: left;
      cursor: pointer;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .searchable-option:hover,
    .searchable-option:focus {
      outline: none;
      background: #e6f4f1;
      color: #006f63;
    }

    .searchable-option-empty {
      padding: 8px 9px;
      color: #6f7c82;
      font-size: 11px;
    }

    .modal.entry-mode input[readonly] {
      border-color: #c5cece;
      background: #edf1f1;
      color: #526168;
      cursor: default;
    }

    .customer-guarantor-field {
      min-width: 0;
    }

    .customer-control-with-action {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--entry-control-height);
      align-items: start;
      gap: 6px;
    }

    .customer-control-with-action > button {
      width: var(--entry-control-height);
      min-width: var(--entry-control-height);
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 0;
      border: 1px solid #007f71;
      border-radius: 3px;
      background: #009b89;
      color: #fff;
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
    }

    .customer-control-with-action > button:hover {
      border-color: #006f63;
      background: #007f71;
      color: #fff;
    }

    .customer-guarantor-create {
      grid-column: 1 / -1;
      width: 100%;
      box-sizing: border-box;
      margin-top: 6px;
      padding: 8px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
      align-items: center;
      gap: 6px;
      border: 1px solid #c7d0d0;
      border-radius: 3px;
      background: #f1f4f4;
    }

    .customer-guarantor-create[hidden] {
      display: none !important;
    }

    .customer-guarantor-create > button {
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 0 10px;
      border: 1px solid #007f71;
      border-radius: 3px;
      background: #009b89;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }

    .customer-guarantor-create > button:hover {
      background: #007f71;
      color: #fff;
    }

    .field-invalid,
    .field-invalid label {
      color: #a72f2f !important;
    }

    .field-invalid input,
    .field-invalid select,
    input[aria-invalid="true"],
    select[aria-invalid="true"] {
      border-color: #c94848 !important;
      box-shadow: 0 0 0 2px rgba(201, 72, 72, .12) !important;
    }

    .form-check-field {
      min-height: var(--entry-control-height);
      padding: 8px 10px !important;
      display: flex !important;
      align-items: center;
      gap: 9px !important;
      border: 1px solid #c5cece !important;
      background: #fff !important;
    }

    .form-check-field input {
      width: 16px;
      height: 16px;
      min-height: 16px;
      margin: 0;
      accent-color: #009b89;
    }

    .form-check-field span {
      color: #344249;
      font-size: 11px;
      font-weight: 600;
    }

    .modal.entry-mode {
      width: min(1040px, calc(100% - 40px));
      height: auto;
      min-height: min(570px, calc(100% - 40px));
      max-height: calc(100% - 40px);
      border-radius: 5px;
      background: #f4f6f6;
    }

    .modal.entry-mode .body {
      align-items: flex-start;
      padding: 18px;
      background: #eef1f1;
    }

    .modal.entry-mode .form-grid {
      width: 100%;
      padding: 14px;
      border: 1px solid #cbd3d3;
      background: #f8f9f9;
    }

    .modal.entry-mode .structured-entry-form {
      min-height: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      border: 0;
      background: transparent;
    }

    .entry-form-intro {
      min-height: 58px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border: 1px solid #c7d0d0;
      border-left: 4px solid #009b89;
      background: #fff;
    }

    .entry-form-intro div {
      display: grid;
      gap: 2px;
    }

    .entry-form-intro span,
    .entry-form-intro small {
      color: #68757b;
      font-size: 10px;
      font-weight: 600;
    }

    .entry-form-intro strong {
      color: #203038;
      font-size: 15px;
      line-height: 20px;
    }

    .entry-form-columns {
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 12px;
    }

    .entry-form-panel {
      min-width: 0;
      border: 1px solid #c7d0d0;
      background: #fff;
    }

    .entry-form-panel > h4 {
      min-height: 36px;
      margin: 0;
      padding: 8px 11px;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #009b89;
      background: #e8eded;
      color: #304047;
      font-size: 11px;
      line-height: 16px;
    }

    .entry-panel-grid {
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .cashbox-entry-panel .cashbox-form-grid {
      padding: 13px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-content: start;
      gap: 11px 13px;
    }

    .content.editor-mode .operation-editor {
      top: 50%;
      left: 50%;
      right: auto;
      bottom: auto;
      width: min(1040px, calc(100% - 40px));
      height: min(650px, calc(100% - 40px));
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(20, 28, 36, .34);
      animation: centeredOperationIn .2s ease-out both;
    }

    @keyframes centeredOperationIn {
      from { opacity: 0; transform: translate(-50%, calc(-50% + 7px)); }
      to { opacity: 1; transform: translate(-50%, -50%); }
    }

    .operation-editor-head {
      flex-basis: 50px;
      padding: 8px 14px;
    }

    .operation-editor-head h3 {
      font-size: 15px;
    }

    .modal.entry-mode label {
      gap: 5px;
      color: #425158;
      font-size: 11px;
      font-weight: 700;
    }

    .modal.entry-mode input,
    .modal.entry-mode select,
    .modal.entry-mode .searchable-select-input {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 4px 8px;
      border-color: #b8c3c3;
      border-radius: 3px;
      background-color: #fff;
      font-size: 11px;
    }

    .modal.entry-mode textarea {
      width: 100%;
      min-height: 92px;
      border-color: #b8c3c3;
      border-radius: 3px;
      background-color: #fff;
      font-size: 11px;
    }

    .modal.entry-mode input[type="checkbox"],
    .modal.entry-mode input[type="radio"] {
      width: 16px;
      height: 16px;
      min-height: 16px;
      padding: 0;
    }

    .settings-edit.btn,
    .settings-cancel-edit.btn {
      width: 112px;
      min-width: 112px;
      height: 30px;
      border: 1px solid #008f80;
      background: #009b89;
      color: #fff;
    }

    .settings-cancel-edit.btn {
      border-color: #bfc8c8;
      background: #fff;
      color: #425158;
    }

    .account-balances-shell {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .account-balances-summary {
      flex: 0 0 auto;
      min-height: 62px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      align-items: center;
      gap: 3px 14px;
      border: 1px solid #bfcaca;
      border-left: 4px solid #009b89;
      background: #f4f7f7;
    }

    .account-balances-summary span,
    .account-balances-summary small {
      color: #5a686e;
      font-size: 11px;
    }

    .account-balances-summary strong {
      grid-row: span 2;
      color: #087568;
      font-size: 21px;
    }

    .modal textarea {
      width: 100%;
      min-height: 92px;
      padding: 8px 10px;
      resize: vertical;
      font: inherit;
    }

    .cashbox-form-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-content: start;
      gap: 14px 16px !important;
    }

    .cashbox-field-group {
      min-width: 0;
      align-self: start;
    }

    .cashbox-field-group > label {
      grid-template-columns: 100px minmax(0, 1fr);
      align-items: center;
      gap: 5px;
      color: #445158;
      font-size: 11px;
      font-weight: 600;
    }

    .cashbox-field-group input,
    .cashbox-field-group select {
      width: 100%;
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 3px 7px;
      border-radius: 2px;
      font-size: 11px;
    }

    .cashbox-note-field {
      grid-column: 1 / -1;
    }

    .field-with-action {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--entry-control-height);
      gap: 6px;
    }

    [data-cashbox-party-field] .field-with-action:has(.field-add-button[hidden]) {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .field-add-button {
      width: var(--entry-control-height);
      min-width: var(--entry-control-height);
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 0;
      border: 1px solid #007f71;
      border-radius: 3px;
      background: #009b89;
      color: #fff;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .field-add-button:hover {
      background: #007f71;
    }

    .inline-create {
      margin-top: 6px;
      padding: 7px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      border: 1px solid #c3cccc;
      background: #e9eded;
    }

    .inline-create[hidden] {
      display: none;
    }

    .account-inline-create {
      grid-template-columns: minmax(0, 1fr) 116px auto;
    }

    .inline-create input,
    .inline-create select {
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      font-size: 11px;
    }

    .inline-create button,
    .account-create-button {
      height: var(--entry-control-height);
      min-height: var(--entry-control-height);
      padding: 0 11px;
      border: 1px solid #007f71;
      background: #009b89;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .account-manager-shell {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .cashbox-accounts-panel {
      flex: 1 1 auto;
      width: 100%;
    }

    .account-create-bar {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 190px 122px;
      align-items: end;
      gap: 10px;
      padding: 10px;
      border: 1px solid #c4cccc;
      background: #e9eded;
    }

    .account-create-bar label {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 4px;
      color: #536168;
      font-size: 10px;
      font-weight: 600;
    }

    .account-create-button.btn {
      width: 122px;
      min-width: 122px;
      border-radius: 3px;
    }

    .account-list-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      border: 1px solid #c4cccc;
      background: #fff;
    }

    .account-list-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .account-list-table th,
    .account-list-table td {
      height: 36px;
      padding: 6px 9px;
      border-right: 1px solid #d7dede;
      border-bottom: 1px solid #d7dede;
      color: #28363c;
      font-size: 11px;
      text-align: left;
    }

    .account-list-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #009b89;
      color: #fff;
      font-weight: 700;
    }

    .account-list-table th:first-child,
    .account-list-table td:first-child {
      width: 46px;
      text-align: center;
    }

    .account-list-table th:last-child,
    .account-list-table td:last-child {
      width: 190px;
    }

    .account-row-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
    }

    .account-row-actions button {
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid #b7c2c2;
      background: #f2f4f4;
      color: #425057;
      font-size: 10px;
      cursor: pointer;
    }

    .account-row-actions .account-delete {
      width: 27px;
      min-width: 27px;
      padding: 0;
      border-color: #d8b1b1;
      background: #f7e8e8;
      color: #a43434;
      font-size: 17px;
    }

    .account-empty {
      padding: 30px !important;
      color: #758188 !important;
      text-align: center !important;
    }

    @media (max-width: 640px) {
      .app {
        grid-template-columns: 164px minmax(0, 1fr);
      }

      .workspace-toolbar {
        flex: 0 0 auto;
        height: auto;
        min-height: 40px;
        flex-wrap: wrap;
      }

      .workspace-search.open {
        flex-basis: 300px;
        width: 300px;
      }

      .modal .form-grid,
      .info-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 1200px) {
      .info-drawer {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(420px, 100%);
        max-width: 100%;
        border-left-width: 1px;
        transform: translateX(100%);
        transition: transform .2s ease, box-shadow .2s ease;
      }

      .info-drawer.open {
        width: min(420px, 100%);
        transform: translateX(0);
      }

      .info-drawer-inner {
        width: min(420px, 100vw);
        max-width: 100%;
      }

      .info-drawer.sales-details.open,
      .info-drawer.sales-details .info-drawer-inner {
        width: min(640px, 100vw);
        max-width: 100%;
      }
    }

    @media (max-width: 1000px) {
      .cashbox-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

      .modal-backdrop {
        padding: 12px;
      }

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

      .content.editor-mode .operation-editor {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
      }

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

      .operation-body {
        grid-template-columns: minmax(0, 1fr);
      }

      .operation-summary {
        border-top: 1px solid #c7cece;
        border-left: 0;
      }

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

      .operation-document-band .operation-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .operation-inline-create {
        grid-column: 1 / -1;
      }

      .operation-summary .operation-field-grid {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
      }
    }

    @media (max-width: 720px) {
      .cashbox-tabs {
        align-items: stretch;
        overflow-x: auto;
      }

      .cashbox-tabs button {
        flex: 0 0 auto;
      }

      .cashbox-daily-grid,
      .cashbox-period-grid,
      .cashbox-breakdown-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .cashbox-balance-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .cashbox-filter-period-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }

      .cashbox-filter-fields {
        grid-template-columns: minmax(0, 1fr);
      }

      .cashbox-periods {
        width: 100%;
        overflow-x: auto;
      }

      .cashbox-refund-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }

      .cashbox-form-grid,
      .account-create-bar {
        grid-template-columns: minmax(0, 1fr);
      }

      .cashbox-note-field {
        grid-column: auto;
      }

      .account-inline-create {
        grid-template-columns: minmax(0, 1fr);
      }

      .modal-backdrop {
        padding: 8px;
      }

      .content.editor-mode .operation-editor {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
      }

      .settings-fields {
        grid-template-columns: minmax(0, 1fr);
      }

      .settings-list-create {
        grid-template-columns: minmax(0, 1fr);
      }

      .settings-category-head,
      .settings-subcategory-create,
      .settings-subcategory-create label {
        grid-template-columns: minmax(0, 1fr);
      }

      .modal.entry-mode {
        width: calc(100% - 16px);
        min-height: calc(100% - 16px);
        max-height: calc(100% - 16px);
      }

      .entry-form-columns,
      .cashbox-entry-panel .cashbox-form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .settings-field-wide {
        grid-column: auto;
      }

      .operation-field-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .operation-inline-create,
      .operation-inline-create.operation-inline-create-customer,
      .operation-inline-create.operation-inline-create-supplier {
        grid-template-columns: minmax(0, 1fr);
      }

      .operation-form label {
        grid-template-columns: 92px minmax(0, 1fr);
      }

      .operation-editor-head span {
        display: none;
      }

      .global-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .global-related-line {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
      }

      .operation-summary-band {
        grid-template-columns: minmax(0, 1fr);
      }

      .operation-summary-band .operation-live-total {
        min-height: 72px;
        border-top: 1px solid #007568;
        border-left: 0;
      }
    }

    @media (max-width: 480px) {
      .workspace-search.open {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
      }

      .workspace-actions {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-end;
      }

      .topbar-clock {
        gap: 4px;
        font-size: 10px;
      }

      .topbar-clock strong {
        min-width: 45px;
        font-size: 10px;
      }

      .operation-editor-head h3,
      .operation-editor-head > span {
        display: none;
      }

      .operation-head-actions .btn {
        width: 70px;
        min-width: 70px;
        padding: 0 5px;
        font-size: 10px;
      }

      .operation-document-band .operation-field-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

/* Info records use the same centered window pattern as entry forms. */
.info-drawer,
.info-drawer.sales-details.open {
  position: absolute;
  inset: 0;
  z-index: 32;
  width: auto;
  max-width: none;
  height: auto;
  min-width: 0;
  padding: 24px;
  display: none;
  place-items: center;
  overflow: hidden;
  border: 0;
  background: rgba(26, 35, 45, .42);
  box-shadow: none;
  transform: none;
  transition: none;
}

.info-drawer.open,
.info-drawer.sales-details.open {
  width: auto;
  display: grid;
  transform: none;
  border: 0;
  box-shadow: none;
}

.info-drawer-inner,
.info-drawer.sales-details .info-drawer-inner {
  width: min(1040px, calc(100% - 40px));
  max-width: none;
  height: min(650px, calc(100% - 40px));
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #aebaba;
  border-radius: 5px;
  background: #f2f4f4;
  box-shadow: 0 24px 70px rgba(20, 28, 36, .34);
  animation: infoWindowIn .2s ease-out both;
}

.info-drawer.sales-details .info-drawer-inner {
  width: min(1160px, calc(100% - 40px));
  height: min(720px, calc(100% - 40px));
}

.info-drawer.obligation-details .info-drawer-inner {
  width: min(1120px, calc(100% - 40px));
  height: min(700px, calc(100% - 40px));
}

.expenses-report-table tfoot .cash-amount-expense {
  color: #fff;
}

.info-drawer-head {
  min-height: 50px;
  padding: 8px 14px;
}

.info-drawer-body {
  padding: 14px 16px;
  background: #eef1f1;
}

.info-drawer-footer {
  min-height: 59px;
  padding: 12px 16px;
}

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

@media (max-width: 720px) {
  .info-drawer,
  .info-drawer.sales-details.open {
    padding: 8px;
  }

  .info-drawer-inner,
  .info-drawer.sales-details .info-drawer-inner {
    width: 100%;
    height: 100%;
  }

  .drawer-detail-grid,
  .sales-details .drawer-detail-grid,
  .credit-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ERP operation layout: large transactions are full workspace pages, details are side drawers. */
.content.editor-mode {
  padding: 0;
}

.content.editor-mode::before {
  content: none;
}

.content.editor-mode .workspace-toolbar,
.content.editor-mode > .view.active {
  display: none !important;
}

.content.editor-mode .operation-editor {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  animation: operationPageIn .18s ease-out both;
}

.content.editor-mode .operation-editor-head {
  min-height: 54px;
  flex-basis: 54px;
  padding: 9px 14px;
}

.operation-back {
  display: grid;
}

.operation-document-band {
  padding: 12px 14px;
  background: #eef2f2;
}

.operation-document-band .operation-field-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px 12px;
}

.operation-item-band {
  padding: 0 14px 14px;
}

.operation-summary-band {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.operation-summary .operation-field-grid {
  grid-template-columns: repeat(5, minmax(126px, 1fr));
}

.operation-live-total strong {
  font-size: 24px;
}

.operation-modal-footer {
  min-height: 58px;
  padding: 11px 14px;
  justify-content: flex-end;
}

.operation-modal-footer .btn {
  width: auto;
  min-width: 132px;
  height: 34px;
  min-height: 34px;
}

.operation-modal-footer .operation-save {
  min-width: 154px;
  margin-left: 0;
}

.info-drawer,
.info-drawer.sales-details.open {
  position: relative;
  inset: auto;
  z-index: 8;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  background: #f2f4f4;
  box-shadow: -8px 0 22px rgba(36, 50, 58, 0);
  transform: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}

.info-drawer.open {
  flex: 0 0 clamp(420px, 40vw, 640px) !important;
  width: clamp(420px, 40vw, 640px) !important;
  min-width: 420px !important;
  border-left: 1px solid #c4cccc;
  box-shadow: -8px 0 22px rgba(36, 50, 58, .1);
}

.info-drawer.sales-details.open {
  flex: 0 0 clamp(520px, 45vw, 760px) !important;
  width: clamp(520px, 45vw, 760px) !important;
  min-width: 520px !important;
}

.info-drawer-inner,
.info-drawer.sales-details .info-drawer-inner {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f2f4f4;
  box-shadow: none;
  animation: none;
}

.info-drawer-body {
  padding: 12px 14px;
  background: #f2f4f4;
}

.modal.entry-mode {
  width: min(1040px, calc(100vw - 48px));
  height: auto;
  max-height: min(760px, calc(100vh - 48px));
}

.modal.entry-mode:has(.cashbox-entry-panel) {
  width: min(1120px, calc(100vw - 48px));
}

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

@keyframes drawerPanelIn {
  from { opacity: .65; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (min-width: 721px) {
  .info-drawer.open,
  .info-drawer.sales-details.open {
    position: relative !important;
    inset: auto !important;
    z-index: 8;
    display: block !important;
    transform: none !important;
    border-left: 1px solid #c4cccc;
  }

  .info-drawer.open {
    flex: 0 0 clamp(420px, 40vw, 640px) !important;
    width: clamp(420px, 40vw, 640px) !important;
    min-width: 420px !important;
  }

  .info-drawer.sales-details.open {
    flex: 0 0 clamp(520px, 45vw, 760px) !important;
    width: clamp(520px, 45vw, 760px) !important;
    min-width: 520px !important;
  }

  .info-drawer.open .info-drawer-inner {
    animation: drawerPanelIn .32s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .info-drawer.open {
    flex-basis: 380px !important;
    width: 380px !important;
    min-width: 380px !important;
  }

  .info-drawer.sales-details.open {
    flex-basis: 440px !important;
    width: 440px !important;
    min-width: 440px !important;
  }

  #debts .table-scroll {
    overflow-x: auto;
  }

  #debts .data-table {
    min-width: 960px;
  }
}

@media (max-width: 1000px) {
  .content.editor-mode .operation-editor {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .operation-document-band .operation-field-grid,
  .operation-summary .operation-field-grid,
  .operation-summary .sales-summary-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-summary-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-summary-band .operation-live-total {
    min-height: 92px;
    border-left: 0;
    border-top: 1px solid #007568;
  }

}

@media (max-width: 720px) {
  .info-drawer.open,
  .info-drawer.sales-details.open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100vh;
    border-left: 0;
  }

  .info-drawer-inner,
  .info-drawer.sales-details .info-drawer-inner {
    width: 100vw;
    height: 100vh;
  }

  .content.editor-mode {
    padding: 0;
  }

  .operation-form {
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
  }

  .operation-document-band .operation-field-grid,
  .operation-summary .operation-field-grid,
  .operation-summary .sales-summary-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-modal-footer {
    gap: 10px;
  }

  .operation-modal-footer .btn {
    min-width: 0;
    flex: 1 1 0;
  }

  .modal.entry-mode {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* Shared ERP grid treatment for every data table. */
.table-scroll {
  border-color: #c7d1d1;
  background: #fff;
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  border-right: 1px solid #dce4e4;
  border-bottom: 1px solid #dde5e5;
  background-clip: padding-box;
}

.data-table th:last-child,
.data-table td:last-child {
  border-right: 0;
}

.data-table tbody tr:nth-child(even) td {
  background: #f7f9f9;
}

.data-table tbody tr:hover td {
  background: #edf7f5;
}

.data-table tbody tr.is-selected td {
  background: #dff3ef;
}

.data-table thead th {
  border-bottom: 1px solid #007f71;
}

.data-table tfoot td {
  border-right-color: rgba(255, 255, 255, .28);
  border-bottom: 0;
}

.data-table tfoot td:last-child {
  border-right: 0;
}

#dashboard .dashboard-mini-table th,
#dashboard .dashboard-mini-table td {
  height: 28px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
}

#dashboard .dashboard-mini-table .data-table {
  height: auto;
  max-height: none;
}

#dashboard .dashboard-mini-table tbody {
  height: auto;
}

#dashboard .dashboard-mini-table .badge {
  min-height: 20px;
  padding: 1px 6px;
  font-size: 11px;
}

.data-table .badge {
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Every module table fills the remaining workspace; only its record list scrolls. */
.view:not(#dashboard).active {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.app,
main,
.content,
.workspace-shell,
.content > .view {
  min-width: 0;
  max-width: 100%;
}

.view:not(#dashboard) .cashbox-tab-content,
.view:not(#dashboard) .module-tab-content,
#reports .report-tab-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view:not(#dashboard) .cashbox-report-content {
  overflow: auto;
}

.view:not(#dashboard) .table-host {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.view:not(#dashboard) .table-scroll,
#reports.active .table-scroll {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.view:not(#dashboard) .table-scroll.is-overflowing-table,
#reports.active .table-scroll.is-overflowing-table {
  flex: 1 1 0;
  height: 100%;
  max-height: none;
}

.view:not(#dashboard) .table-scroll.is-compact-table,
#reports.active .table-scroll.is-compact-table {
  flex: 0 0 auto;
  height: auto;
}

.view:not(#dashboard) .cashbox-report-content .table-scroll {
  display: block;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: auto;
}

#reports.active .report-table {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.data-table thead,
.data-table tfoot {
  position: static;
}

.erp-table-shell .table-fixed-head,
.erp-table-shell .table-fixed-foot {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.erp-table-shell .table-body-scroll {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

.erp-table-shell.is-overflowing-table .table-body-scroll {
  flex: 1 1 0;
  overflow-y: auto;
}

.erp-table-shell .table-fixed-head:empty,
.erp-table-shell .table-fixed-foot:empty {
  display: none;
}

.erp-table-shell .table-fixed-head table,
.erp-table-shell .table-body-scroll table,
.erp-table-shell .table-fixed-foot table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
  margin: 0;
  border: 0;
  box-shadow: none;
}

/* Keep one column grid across header, rows and totals; allow deliberate overflow only on narrow screens. */
.erp-table-shell .table-fixed-head,
.erp-table-shell .table-fixed-foot,
.erp-table-shell .table-body-scroll {
  scrollbar-gutter: stable;
}

.data-table th,
.data-table td {
  box-sizing: border-box;
  vertical-align: middle;
}

.data-table tbody td:not(.action-col) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table .col-field-amount,
.data-table .col-field-paid,
.data-table .col-field-balance,
.data-table .col-field-price,
.data-table .col-field-salePrice,
.data-table .col-field-cost,
.data-table .col-field-salary,
.data-table .col-field-debt,
.data-table .col-field-total {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.data-table .col-field-date,
.data-table .col-field-purchaseDate,
.data-table .col-field-createdAt,
.data-table .col-field-invoice,
.data-table .col-field-code,
.data-table .col-field-status,
.data-table .col-field-active,
.data-table .col-field-qty {
  text-align: center;
}

@media (max-width: 900px) {
  .erp-table-shell .table-body-scroll {
    overflow-x: auto;
  }

  .erp-table-shell .table-fixed-head table,
  .erp-table-shell .table-body-scroll table,
  .erp-table-shell .table-fixed-foot table {
    width: var(--erp-table-min-width, 900px) !important;
    min-width: var(--erp-table-min-width, 900px) !important;
    max-width: none !important;
  }
}

#reports .profit-loss-table .data-table th:nth-child(3),
#reports .profit-loss-table .data-table td:nth-child(3) {
  text-align: right;
}

#reports .profit-loss-table .data-table th:nth-child(4),
#reports .profit-loss-table .data-table td:nth-child(4) {
  text-align: center;
}

#reports .profit-loss-table tbody tr td:first-child {
  color: #526264;
  font-weight: 700;
}

#reports .profit-loss-table tbody tr.profit-loss-income td {
  background: #f2faf7;
}

#reports .profit-loss-table tbody tr.profit-loss-expense td {
  background: #fff8f8;
}

#reports .profit-loss-table tbody tr.profit-loss-subtotal td {
  background: #e8f4f1;
  border-top: 2px solid #70aa9f;
  border-bottom-color: #bdd8d2;
}

#reports .profit-loss-table tbody tr.profit-loss-net td {
  background: #087f71;
  color: #fff;
  border-color: #087f71;
  font-size: 13px;
}

#reports .profit-loss-table tbody tr.profit-loss-net.is-loss td {
  background: #a84444;
  border-color: #a84444;
}

#reports .profit-loss-table tbody tr.profit-loss-net td:first-child {
  color: #fff;
}

#dashboard .dashboard-mini-table .badge {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}

#dashboard .dashboard-mini-table th:first-child,
#dashboard .dashboard-mini-table td:first-child,
#dashboardSales .dashboard-mini-table th:nth-child(2),
#dashboardSales .dashboard-mini-table td:nth-child(2),
#dashboardSales .dashboard-mini-table th:nth-child(3),
#dashboardSales .dashboard-mini-table td:nth-child(3),
#dashboardSales .dashboard-mini-table th:nth-child(5),
#dashboardSales .dashboard-mini-table td:nth-child(5),
#dashboardDebts .dashboard-mini-table th:nth-child(6),
#dashboardDebts .dashboard-mini-table td:nth-child(6) {
  text-align: center;
}

#dashboardSales .dashboard-mini-table th:nth-child(4),
#dashboardSales .dashboard-mini-table td:nth-child(4),
#dashboardDebts .dashboard-mini-table th:nth-child(2),
#dashboardDebts .dashboard-mini-table td:nth-child(2) {
  text-align: left;
}

#dashboardSales .dashboard-mini-table th:nth-child(6),
#dashboardSales .dashboard-mini-table td:nth-child(6),
#dashboardSales .dashboard-mini-table th:nth-child(7),
#dashboardSales .dashboard-mini-table td:nth-child(7),
#dashboardDebts .dashboard-mini-table th:nth-child(3),
#dashboardDebts .dashboard-mini-table td:nth-child(3),
#dashboardDebts .dashboard-mini-table th:nth-child(4),
#dashboardDebts .dashboard-mini-table td:nth-child(4),
#dashboardDebts .dashboard-mini-table th:nth-child(5),
#dashboardDebts .dashboard-mini-table td:nth-child(5) {
  text-align: right;
}

/* Module-specific table alignment. */
.cashbox-table .col-field-invoice,
.cashbox-table .col-field-account,
.sales-table .col-field-invoice,
.purchases-table .col-field-invoice,
.debt-tab-table .debt-col-invoice,
#auditLog .data-table th:nth-child(2),
#auditLog .data-table td:nth-child(2),
#auditLog .data-table th:nth-child(3),
#auditLog .data-table td:nth-child(3),
#auditLog .data-table th:nth-child(4),
#auditLog .data-table td:nth-child(4),
#auditLog .data-table th:nth-child(6),
#auditLog .data-table td:nth-child(6) {
  text-align: center;
}

#auditLog .data-table th:nth-child(5),
#auditLog .data-table td:nth-child(5) {
  text-align: left;
}

#auditLog .audit-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#auditLog .audit-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashbox-table .col-field-paymentType,
.cashbox-table .col-field-employee {
  text-align: left;
}

.customers-table .col-field-code,
.suppliers-table .col-field-code,
.customers-table .col-field-isSupplier {
  text-align: center;
}

/* Report tables follow the same semantic alignment as module tables. */
#reports .sales-report-table th:nth-child(3),
#reports .sales-report-table td:nth-child(3),
#reports .sales-report-table th:nth-child(6),
#reports .sales-report-table td:nth-child(6),
#reports .purchases-report-table th:nth-child(3),
#reports .purchases-report-table td:nth-child(3) {
  text-align: center;
}

#reports .sales-report-table th:nth-child(n+7),
#reports .sales-report-table td:nth-child(n+7),
#reports .purchases-report-table th:nth-child(n+7):nth-child(-n+9),
#reports .purchases-report-table td:nth-child(n+7):nth-child(-n+9),
#reports .expenses-report-table th:nth-child(7),
#reports .expenses-report-table td:nth-child(7),
#reports .payroll-report-table th:nth-child(n+4):nth-child(-n+8),
#reports .payroll-report-table td:nth-child(n+4):nth-child(-n+8),
#reports .profit-loss-table th:nth-child(n+3),
#reports .profit-loss-table td:nth-child(n+3) {
  text-align: right;
}

.cashbox-report-sheet {
  flex: 0 0 auto;
  margin-top: 10px;
  border: 1px solid #c7d0d0;
  background: #fff;
}

.cashbox-report-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  background: #eef1f1;
}

.cashbox-report-block {
  min-width: 0;
  border: 1px solid #c7d0d0;
  background: #fff;
}

.cashbox-report-block h4 {
  min-height: 30px;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-bottom: 1px solid #007f71;
  background: #009b89;
  color: #fff;
  font-size: 11px;
}

.cashbox-payment-block {
  grid-column: 1 / -1;
}

.cashbox-compact-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border: 0;
  box-shadow: none;
}

.cashbox-compact-table th,
.cashbox-compact-table td {
  height: 30px;
  padding: 5px 8px;
  border-right: 1px solid #d8dfdf;
  border-bottom: 1px solid #d8dfdf;
  font-size: 11px;
}

.cashbox-compact-table tr:last-child td { border-bottom: 0; }
.cashbox-compact-table th:last-child,
.cashbox-compact-table td:last-child { border-right: 0; }
.cashbox-compact-table td:last-child { text-align: right; }
.cashbox-balance-table th:last-child { text-align: right; }
.cashbox-movement-table th:not(:first-child),
.cashbox-movement-table td:not(:first-child) { text-align: right; }
.cashbox-payment-table td:nth-child(2),
.cashbox-payment-table td:nth-child(4) { text-align: right; }
.cashbox-payment-table td:nth-child(1),
.cashbox-payment-table td:nth-child(3) { width: 31%; }

.cashbox-compact-table .cashbox-summary-pending {
  color: #9a6a13;
  font-weight: 800;
}

@media (max-width: 860px) {
  .cashbox-report-layout { grid-template-columns: minmax(0, 1fr); }
  .cashbox-payment-block { grid-column: auto; }
}

.cashbox-cashier-table {
  width: 100% !important;
  min-width: 620px !important;
  table-layout: fixed;
}

.cashbox-cashier-table th:first-child,
.cashbox-cashier-table td:first-child {
  text-align: center;
}

.cashbox-cashier-table th:nth-child(2),
.cashbox-cashier-table td:nth-child(2) {
  text-align: left;
}

.cashbox-cashier-table th:nth-child(n+3),
.cashbox-cashier-table td:nth-child(n+3) {
  text-align: right;
}

.cashbox-cashier-table tbody td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view:not(#dashboard) .cashbox-report-content {
  overflow: hidden;
}

.cashbox-cashier-report {
  flex: 1 1 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
}

.view:not(#dashboard) .cashbox-report-content .cashbox-cashier-scroll {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.view:not(#dashboard) .cashbox-report-content .cashbox-cashier-scroll.erp-table-shell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.view:not(#dashboard) .cashbox-report-content .cashbox-cashier-scroll.erp-table-shell.is-overflowing-table {
  height: 100%;
}

.cashbox-report-content .cashbox-section-head,
.cashbox-report-content .cashbox-report-block h4 {
  border-bottom: 2px solid #009b89;
  background: #e7ebeb;
  color: #087568;
}

.cashbox-report-content .cashbox-section-head span {
  color: #66747a;
}

/* Finance report values stay legible when amounts include cents. */
.cashbox-report-content .cashbox-compact-table th,
.cashbox-report-content .cashbox-compact-table td {
  height: 34px;
  padding: 6px 10px;
  line-height: 18px;
}

.cashbox-report-content .cashbox-compact-table th {
  color: #46555b;
  font-size: 10px;
  font-weight: 750;
}

.cashbox-report-content .cashbox-compact-table thead th {
  color: #fff;
}

.cashbox-report-content .cashbox-compact-table td {
  color: #334148;
}

.cashbox-report-content .cashbox-balance-table td:last-child,
.cashbox-report-content .cashbox-movement-table td:not(:first-child),
.cashbox-report-content .cashbox-payment-table td:nth-child(2),
.cashbox-report-content .cashbox-payment-table td:nth-child(4) {
  background: #f7f9f9;
  color: #172b31;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cashbox-report-content .cash-amount-income {
  color: #006f62;
}

.cashbox-report-content .cash-amount-expense {
  color: #a83232 !important;
}

.cashbox-report-content .cashbox-summary-pending {
  color: #8a5c00 !important;
  font-weight: 800;
}

.cashbox-cashier-table tbody td:nth-child(n+3),
.cashbox-cashier-table tfoot td:nth-child(n+3) {
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cashbox-cashier-table tfoot td {
  font-weight: 800;
}

.advance-table th:nth-child(1),
.advance-table td:nth-child(1),
.advance-table th:nth-child(2),
.advance-table td:nth-child(2),
.advance-table th:nth-child(7),
.advance-table td:nth-child(7),
.advance-table th:nth-child(8),
.advance-table td:nth-child(8),
.advance-table th:nth-child(9),
.advance-table td:nth-child(9),
.advance-table th:nth-child(11),
.advance-table td:nth-child(11) {
  text-align: center;
}

.advance-table th:nth-child(3),
.advance-table td:nth-child(3),
.advance-table th:nth-child(10),
.advance-table td:nth-child(10) {
  text-align: left;
}

.advance-table th:nth-child(4),
.advance-table td:nth-child(4),
.advance-table th:nth-child(5),
.advance-table td:nth-child(5),
.advance-table th:nth-child(6),
.advance-table td:nth-child(6) {
  text-align: right;
}

.advance-table tfoot td:nth-child(2) {
  text-align: left;
}

.advance-table .advance-type-badge {
  width: 96px;
  min-width: 96px;
  max-width: 96px;
}

.obligation-records-table th:nth-child(1),
.obligation-records-table td:nth-child(1),
.obligation-records-table th:nth-child(2),
.obligation-records-table td:nth-child(2),
.obligation-records-table th:nth-child(7),
.obligation-records-table td:nth-child(7),
.obligation-records-table th:nth-child(8),
.obligation-records-table td:nth-child(8),
.obligation-records-table th:nth-child(9),
.obligation-records-table td:nth-child(9),
.obligation-records-table th:nth-child(10),
.obligation-records-table td:nth-child(10),
.obligation-records-table th:nth-child(12),
.obligation-records-table td:nth-child(12) {
  text-align: center;
}

.obligation-records-table th:nth-child(3),
.obligation-records-table td:nth-child(3),
.obligation-records-table th:nth-child(11),
.obligation-records-table td:nth-child(11) {
  text-align: left;
}

.obligation-records-table th:nth-child(4),
.obligation-records-table td:nth-child(4),
.obligation-records-table th:nth-child(5),
.obligation-records-table td:nth-child(5),
.obligation-records-table th:nth-child(6),
.obligation-records-table td:nth-child(6) {
  text-align: right;
}

.obligation-records-table tfoot td:nth-child(2) {
  text-align: left;
}

/* Dashboard uses compact ERP summaries instead of detached KPI cards. */
#dashboard .dashboard-overview {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#dashboard .dashboard-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #c7d0d0;
  background: #fff;
  overflow: hidden;
}

#dashboard .dashboard-panel > .section-head {
  flex: 0 0 34px;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 2px solid #009b89;
  background: #e7ebeb;
  color: #087568;
}

#dashboard .dashboard-panel > .section-head h3 {
  color: #087568;
  font-size: 12px;
}

#dashboard .dashboard-panel > .section-head span {
  color: #66747a;
  font-size: 10px;
}

#dashboard .dashboard-overview .section-head,
#dashboard .dashboard-analytics .section-head {
  border-bottom-color: #007f71;
  background: #009b89;
  color: #fff;
}

#dashboard .dashboard-overview .section-head h3,
#dashboard .dashboard-overview .section-head span,
#dashboard .dashboard-analytics .section-head h3,
#dashboard .dashboard-analytics .section-head span {
  color: #fff;
}

#dashboard .dashboard-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dashboard .dashboard-metric-list > div {
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-right: 1px solid #d8dfdf;
  border-bottom: 1px solid #d8dfdf;
}

#dashboard .dashboard-metric-list > div:nth-child(even) { border-right: 0; }
#dashboard .dashboard-metric-list > div:nth-last-child(-n+2) { border-bottom: 0; }

#dashboard .dashboard-metric-list span {
  color: #67757b;
  font-size: 10px;
}

#dashboard .dashboard-metric-list strong {
  color: #1d2c32;
  font-size: 17px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#dashboard .dashboard-metric-primary {
  background: #edf7f5;
}

#dashboard .dashboard-metric-primary strong {
  color: #087568;
}

#dashboard .dashboard-metric-warning {
  background: #fff8e8;
}

#dashboard .dashboard-metric-warning strong {
  color: #a06b12;
}

#dashboard .dashboard-analytics,
#dashboard .dashboard-tables {
  margin-top: 8px;
}

#dashboard.active {
  display: flex;
  flex-direction: column;
}

#dashboardFilters,
#dashboard .dashboard-analytics {
  flex: 0 0 auto;
}

#dashboard .dashboard-tables {
  flex: 1 0 300px;
  min-height: 300px;
}

#dashboard .dashboard-analytics > .dashboard-panel {
  height: 238px;
  min-height: 238px;
}

#dashboard .dashboard-tables > .dashboard-panel {
  height: 100%;
  min-height: 300px;
}

.workspace-toolbar {
  background: #d8dddd;
  border-bottom: 1px solid #b8c1c1;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .48), 0 1px 2px rgba(34, 52, 57, .07);
}

#dashboard .dashboard-panel .chart,
#dashboard .dashboard-panel .activity,
#dashboard .dashboard-panel #dashboardSales,
#dashboard .dashboard-panel #dashboardDebts {
  flex: 1 1 auto;
  min-height: 0;
}

#dashboard .dashboard-panel .chart {
  height: auto;
  padding: 12px 16px 10px;
}

#dashboard .dashboard-panel .bar {
  border-radius: 2px 2px 0 0;
  background: #3f7f8c;
}

#dashboard .dashboard-panel .activity {
  overflow-y: auto;
  padding: 4px 12px 8px;
}

#dashboard .dashboard-panel .activity li {
  padding: 7px 0;
  font-size: 11px;
}

#dashboardSales .dashboard-mini-table .data-table,
#dashboardDebts .dashboard-mini-table .data-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
}

#dashboardSales .dashboard-mini-table th:nth-child(1) { width: 6%; }
#dashboardSales .dashboard-mini-table th:nth-child(2) { width: 14%; }
#dashboardSales .dashboard-mini-table th:nth-child(3) { width: 15%; }
#dashboardSales .dashboard-mini-table th:nth-child(4) { width: 25%; }
#dashboardSales .dashboard-mini-table th:nth-child(5) { width: 14%; }
#dashboardSales .dashboard-mini-table th:nth-child(6),
#dashboardSales .dashboard-mini-table th:nth-child(7) { width: 13%; }

#dashboardDebts .dashboard-mini-table th:nth-child(1) { width: 7%; }
#dashboardDebts .dashboard-mini-table th:nth-child(2) { width: 27%; }
#dashboardDebts .dashboard-mini-table th:nth-child(3),
#dashboardDebts .dashboard-mini-table th:nth-child(4),
#dashboardDebts .dashboard-mini-table th:nth-child(5) { width: 17%; }
#dashboardDebts .dashboard-mini-table th:nth-child(6) { width: 15%; }

#dashboard .dashboard-mini-table .badge {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

#dashboard .dashboard-mini-table.erp-table-shell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

#dashboard .dashboard-mini-table.erp-table-shell .table-body-scroll {
  min-height: 0;
}

@media (max-width: 900px) {
  #dashboard .dashboard-overview,
  #dashboard .two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep text and icons readable on colored action buttons during hover. */
.operation-modal-footer .operation-save:hover,
.system-dialog-footer .system-dialog-confirm:hover,
.settings-save.btn:hover,
.settings-edit.btn:hover,
.settings-list-create .btn:hover,
.settings-subcategory-create .btn:hover,
.account-create-button:hover,
.inline-create button:hover,
.field-add-button:hover,
.operation-add-line:hover {
  border-color: #006f63;
  background: #007f71;
  color: #fff;
}

.operation-modal-footer .operation-cancel:hover,
.system-dialog-footer .system-dialog-confirm.danger:hover {
  border-color: #922f2f;
  background: #b83c3c;
  color: #fff;
}

.system-dialog-footer .system-dialog-confirm.info:hover {
  border-color: #214f5d;
  background: #286477;
}

.system-dialog-footer .system-dialog-confirm.logout:hover {
  border-color: #1f2c33;
  background: #27343a;
}

.system-dialog-footer .system-dialog-confirm.success:hover {
  border-color: #006f63;
  background: #008a7a;
}

.system-dialog-footer .system-dialog-confirm.warning:hover {
  border-color: #704811;
  background: #8f5c15;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  padding: 20px;
  background: #e8eded;
}

.login-screen.open {
  display: grid;
}

.auth-locked > .app,
.auth-locked > .module-ribbon {
  visibility: hidden;
}

.login-panel {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid #aebbbb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(30, 46, 50, .16);
}

.login-panel-head {
  min-height: 86px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 3px solid #00a18d;
  background: #26363e;
  color: #fff;
}

.login-brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  background: #008d7d;
  font-size: 15px;
  font-weight: 800;
}

.login-panel-head h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.login-panel-head p {
  margin: 3px 0 0;
  color: #bfcccf;
  font-size: 12px;
}

.login-form {
  padding: 22px 22px 18px;
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 6px;
  color: #35464b;
  font-size: 12px;
  font-weight: 700;
}

.login-form input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #bec9c9;
  border-radius: 4px;
  background: #f9fbfb;
  color: #26363e;
  font: inherit;
  font-weight: 400;
}

.login-form input:focus {
  border-color: #008d7d;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 141, 125, .12);
  background: #fff;
}

.login-error {
  margin: -3px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #b93d3d;
  background: #f9eeee;
  color: #9b2f2f;
  font-size: 12px;
}

.login-error.is-success {
  color: #087f6a;
  background: #e9f7f3;
  border-color: #9fd9cc;
}

.remote-activity {
  position: absolute;
  inset: 0;
  z-index: 6100;
  display: grid;
  place-content: center;
  justify-items: center;
  align-items: center;
  background: rgba(238, 242, 242, 0.38);
  color: #075f55;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 140ms ease;
  pointer-events: none;
}

.remote-activity.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rbsoft-loader {
  --loader-size: 40px;
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  display: inline-grid;
  place-items: center;
}

.rbsoft-loader--button { --loader-size: 24px; }
.rbsoft-loader--standard { --loader-size: 40px; }
.rbsoft-loader--page { --loader-size: 52px; }

.rbsoft-loader svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 3px;
}

.rbsoft-loader-track { stroke: rgba(112, 130, 130, .28); }
.rbsoft-loader-segment {
  stroke: #39d100;
  stroke-linecap: round;
  stroke-dasharray: 26 74;
  animation: rbsoft-loader-progress 1.1s linear infinite;
}

.rbsoft-loader img {
  width: calc(var(--loader-size) - 18px);
  height: calc(var(--loader-size) - 18px);
  display: block;
  object-fit: contain;
}

.rbsoft-loader--button img { width: 12px; height: 12px; }
.rbsoft-loader--page img { width: 30px; height: 30px; }

@keyframes rbsoft-loader-progress { to { stroke-dashoffset: -100; } }

@media (prefers-reduced-motion: reduce) {
  .rbsoft-loader-segment { animation: none; stroke-dashoffset: 0; }
}


.login-submit {
  height: 38px;
  border: 1px solid #00786c;
  border-radius: 4px;
  background: #008d7d;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.login-submit:hover,
.login-submit:focus-visible {
  border-color: #005f56;
  background: #00786c;
  outline: 0;
}

.login-panel > footer {
  padding: 11px 20px;
  border-top: 1px solid #d7dfdf;
  background: #f1f4f4;
  color: #6d7b7f;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 520px) {
  .login-screen { padding: 10px; }
  .login-panel { width: 100%; }
}

.auth-password-backdrop {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(31, 47, 54, .42);
}

.auth-password-backdrop.open { display: grid; }

.auth-password-modal {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid #aebbbb;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(25, 39, 44, .24);
}

.auth-password-head {
  padding: 15px 18px;
  border-bottom: 3px solid #00a18d;
  background: #26363e;
  color: #fff;
}

.auth-password-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.auth-password-head p {
  margin: 4px 0 0;
  color: #c6d1d4;
  font-size: 12px;
}

.auth-password-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.auth-password-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #35464b;
  font-size: 12px;
  font-weight: 700;
}

.auth-password-form input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #bec9c9;
  border-radius: 4px;
  background: #f9fbfb;
  color: #26363e;
  font: inherit;
  font-weight: 400;
}

.auth-password-form input:focus {
  border-color: #008d7d;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 141, 125, .12);
  background: #fff;
}

.auth-password-form .login-error,
.auth-password-footer { grid-column: 1 / -1; }

.auth-password-footer {
  display: flex;
  justify-content: flex-end;
  margin: 2px -18px -18px;
  padding: 11px 18px;
  border-top: 1px solid #d7dfdf;
  background: #f1f4f4;
}

.auth-password-footer .login-submit { min-width: 190px; }

.connection-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(31, 47, 54, .72);
  backdrop-filter: blur(2px);
}

.connection-backdrop.open { display: grid; }

.connection-dialog {
  width: min(480px, 100%);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid #c9a9a9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 31, 35, .3);
}

.connection-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f7eaea;
  color: #ad3636;
}

.connection-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.connection-dialog h2 { margin: 1px 0 5px; color: #9f3030; font-size: 16px; letter-spacing: 0; }
.connection-dialog p { margin: 0; color: #526267; font-size: 12px; line-height: 18px; }
.connection-wait { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid #e0e5e5; color: #78868a; font-size: 11px; text-align: center; }

.company-subscription-panel { margin-top: 0; }
.company-subscription-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.company-subscription-grid > [hidden] { display: none !important; }
.company-billing-note { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 8px 10px; border-left: 3px solid #008d7d; background: #f3f7f7; color: #536469; }
.company-billing-note strong { font-size: 12px; color: #304349; }
.company-billing-note span { font-size: 11px; line-height: 14px; }
.company-actions { min-width: 132px; }
.companies-table .action-col { width: 144px; min-width: 144px; }
.company-payment-action { color: #007c6f; font-weight: 800; }
.company-power-action { color: #a33a3a; }
.company-power-action.is-inactive { color: #008d7d; }
.company-payment-history { display: grid; gap: 8px; margin-top: 14px; }
.company-payment-history h4 { margin: 0; color: #304349; font-size: 12px; }
.company-payment-history .table-host { max-height: 260px; }

.company-onboarding-modal > .body {
  overflow-x: hidden;
  overflow-y: auto;
}

.company-onboarding-modal > .footer {
  flex: 0 0 58px;
  min-height: 58px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px 18px;
}

.company-onboarding-modal > .footer .btn {
  width: 138px;
  min-width: 138px;
  height: 34px;
  min-height: 34px;
}

.info-drawer.company-details.open {
  flex: 0 0 clamp(560px, 45vw, 720px) !important;
  width: clamp(560px, 45vw, 720px) !important;
  min-width: 560px !important;
}

.company-info-view { display: grid; gap: 12px; }

.company-info-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px solid #00a18d;
  background: #26363e;
  color: #fff;
}

.company-info-summary > div { min-width: 0; padding: 11px 12px; border-right: 1px solid rgba(255, 255, 255, .12); }
.company-info-summary > div:last-child { border-right: 0; }
.company-info-summary span { display: block; margin-bottom: 4px; color: #bdcacc; font-size: 10px; }
.company-info-summary strong { display: block; overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.company-info-summary .company-access-subscription-overdue,
.company-info-summary .company-access-manual { color: #ffb7b7; }
.company-info-summary .company-access-payment-pending { color: #ffe1a0; }

.company-info-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.company-info-section { min-width: 0; border: 1px solid #d4dddd; background: #fff; }
.company-info-section > h4 { margin: 0; padding: 8px 10px; border-bottom: 1px solid #d2dddd; background: #edf4f3; color: #007f71; font-size: 12px; }
.company-info-full { grid-column: 1 / -1; }
.company-info-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px 10px 8px; }
.company-info-fields > div { min-width: 0; padding: 8px 4px 7px; border-bottom: 1px solid #e6ebeb; }
.company-info-fields > div:nth-last-child(-n+2) { border-bottom: 0; }
.company-info-fields span { display: block; margin-bottom: 3px; color: #78868a; font-size: 10px; }
.company-info-fields strong { display: block; overflow-wrap: anywhere; color: #2e3d42; font-size: 12px; font-weight: 600; }
.company-info-fields .company-info-wide { grid-column: 1 / -1; border-bottom: 0; }
.company-module-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px; }
.company-module-chips span { padding: 4px 7px; border: 1px solid #c9d9d7; border-radius: 3px; background: #f3f8f7; color: #46615f; font-size: 11px; }
.company-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #d4dddd; border-bottom: 0; background: #edf4f3; }
.company-section-title span { color: #6d7d81; font-size: 10px; }
.company-data-boundary { display: grid; gap: 3px; padding: 9px 10px; border-left: 3px solid #008d7d; background: #eaf1f0; }
.company-data-boundary strong { color: #304349; font-size: 11px; }
.company-data-boundary span { color: #657579; font-size: 11px; line-height: 15px; }

@media (max-width: 620px) {
  .auth-password-backdrop { padding: 10px; }
  .auth-password-form { grid-template-columns: 1fr; }
  .company-subscription-grid { grid-template-columns: 1fr; }
  .company-info-summary,
  .company-info-layout,
  .company-info-fields { grid-template-columns: 1fr; }
  .company-info-full,
  .company-info-fields .company-info-wide { grid-column: auto; }
}

.company-onboarding-modal.modal {
  width: min(1040px, calc(100vw - 96px));
  max-height: calc(100vh - 80px);
}

.company-onboarding-form { display: grid; gap: 12px; }

.company-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-onboarding-grid .entry-form-panel,
.company-modules-panel { min-width: 0; }

.company-wide-field { grid-column: 1 / -1; }

.company-password-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #d5dfde;
  border-radius: 4px;
  background: #f6f8f8;
  color: #66767a;
  font-size: 11px;
  line-height: 16px;
}

.company-module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.company-module-option {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #d0dada;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.company-module-option:has(input:checked) {
  border-color: #83bdb5;
  background: #eef8f6;
}

.company-module-option input { width: 15px; height: 15px; margin: 0; accent-color: #008d7d; }
.company-module-option span { min-width: 0; display: grid; gap: 2px; }
.company-module-option strong { color: #304349; font-size: 12px; }
.company-module-option small { color: #78878a; font-size: 10px; }

.company-table-host .companies-table { width: 100%; min-width: 980px; table-layout: fixed; }
.companies-table th:nth-child(1) { width: 44px; }
.companies-table th:nth-child(2) { width: 92px; }
.companies-table th:nth-child(3) { width: 15%; }
.companies-table th:nth-child(4) { width: 14%; }
.companies-table th:nth-child(5) { width: 12%; }
.companies-table th:nth-child(6) { width: 145px; }
.companies-table th:nth-child(7) { width: 128px; }
.companies-table th:nth-child(8) { width: 116px; }
.companies-table th:nth-child(9) { width: 144px; }
.companies-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .company-onboarding-modal.modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .company-onboarding-grid { grid-template-columns: 1fr; }
  .company-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-drawer.company-details.open { min-width: 440px !important; width: 440px !important; flex-basis: 440px !important; }
}

@media (max-width: 520px) {
  .company-module-grid { grid-template-columns: 1fr; }
}

/* Developer platform tools */
.developer-tools-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #f4f7f7;
}

.developer-tools-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 1px;
  padding: 7px;
  border-bottom: 1px solid #c9d5d4;
  background: #dfe8e7;
}

.developer-tools-nav button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #f8fafa;
  color: #4f6266;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.developer-tools-nav button:hover { border-color: #9fbab6; background: #fff; color: #007f71; }
.developer-tools-nav button[aria-selected="true"] { border-color: #008d7d; background: #008d7d; color: #fff; }

.developer-tools-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.developer-tool-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-left: 3px solid #008d7d;
  background: #e8efee;
}

.developer-tool-section-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.developer-tool-section-head h3 { margin: 0 0 3px; color: #304349; font-size: 13px; }
.developer-tool-section-head p { margin: 0; color: #66777a; font-size: 11px; line-height: 14px; }

.developer-tool-section-head > .btn,
.developer-tool-section-head .developer-inline-action {
  flex: 0 0 auto;
}

.developer-tool-section-head .btn.primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #007f71;
  border-radius: 4px;
  background: #008d7d !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
  opacity: 1;
  visibility: visible;
  white-space: nowrap;
}

.developer-tool-section-head .btn.primary:hover,
.developer-tool-section-head .btn.primary:focus-visible {
  border-color: #006f64;
  background: #007c6f !important;
  color: #fff !important;
}

.developer-tool-section-head [data-tool-add]::before {
  content: "+";
  margin-right: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.developer-tool-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 3px; }
.developer-tool-title-row h3 { margin: 0; }
.developer-tool-mode {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid #b7c7c5;
  border-radius: 3px;
  background: #f7fafa;
  color: #53686b;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.developer-tool-mode[data-mode="manual"] { border-color: #79afa8; background: #edf7f5; color: #007b6e; }
.developer-tool-mode[data-mode="mixed"] { border-color: #98abb1; background: #eef3f4; color: #405c63; }
.developer-tool-mode[data-mode="automatic"] { border-color: #c4cecd; background: #f3f6f6; color: #6c7a7d; }

.developer-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.developer-kpi-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #ccd8d7;
  border-top: 3px solid #008d7d;
  background: #fff;
}

.developer-kpi-grid span,
.developer-kpi-grid small { display: block; color: #738286; font-size: 10px; }
.developer-kpi-grid strong { display: block; margin: 5px 0 3px; overflow: hidden; color: #273b40; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }

.developer-tool-table { width: 100%; min-width: 0; max-height: calc(100vh - 260px); }
.developer-tool-table .table-scroll { min-width: 0; }
.developer-tool-table table { width: 100%; min-width: 760px; table-layout: fixed; }
.developer-tool-table th,
.developer-tool-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-tool-table th.action-col,
.developer-tool-table td.action-col { width: 164px; }

.developer-tool-table td.action-col .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #9fbab6;
  border-radius: 4px;
  background: #edf5f4;
  color: #08766b;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  opacity: 1;
  visibility: visible;
  white-space: nowrap;
}

.developer-tool-table td.action-col .btn:hover,
.developer-tool-table td.action-col .btn:focus-visible {
  border-color: #008d7d;
  background: #008d7d;
  color: #fff;
}

.developer-tool-table td.action-col .btn.danger {
  border-color: #d8a6a6;
  background: #f8eaea;
  color: #9a3333;
}

.developer-tool-table td.action-col .btn.danger:hover,
.developer-tool-table td.action-col .btn.danger:focus-visible {
  border-color: #a63b3b;
  background: #a63b3b;
  color: #fff;
}
.developer-secondary-table { max-height: 220px; }

.developer-inline-action { display: grid; grid-template-columns: minmax(180px, 270px) auto; gap: 7px; align-items: center; }
.developer-inline-action select { width: 100%; min-height: 32px; border: 1px solid #b9c8c7; border-radius: 3px; background: #fff; color: #34474b; }
.developer-subtitle { margin: 12px 0 6px; color: #007f71; font-size: 12px; }
.developer-tool-note { margin: 8px 0 0; padding: 8px 9px; border-left: 3px solid #8ea5a2; background: #edf2f2; color: #637478; font-size: 11px; line-height: 15px; }

.developer-tool-modal.modal { width: min(760px, calc(100vw - 64px)); }
.developer-tool-form { display: grid; gap: 10px; }
.developer-tool-form .entry-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.developer-tool-form .entry-wide-field { grid-column: 1 / -1; }
.developer-tool-form textarea { resize: vertical; }

.developer-module-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 9px;
}

.developer-module-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #ced9d8;
  border-radius: 3px;
  background: #fff;
  color: #415559;
  font-size: 11px;
}

.developer-module-checks label:has(input:checked) { border-color: #78b5ad; background: #edf7f5; color: #007f71; }
.developer-module-checks input { width: 14px; height: 14px; margin: 0; accent-color: #008d7d; }
.developer-module-checks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.company-package-select { padding: 8px 9px 0; }
.company-package-select label { display: grid; grid-template-columns: 150px minmax(220px, 340px); align-items: center; gap: 8px; }
.company-package-select span { color: #5f7175; font-size: 11px; }
.company-package-select select { width: 100%; }

.platform-announcement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 9px 0;
  padding: 8px 10px;
  border-left: 3px solid #008d7d;
  background: #e6efee;
}
.platform-announcement[hidden] { display: none; }
.platform-announcement > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.platform-announcement strong { color: #007f71; font-size: 11px; }
.platform-announcement span { overflow: hidden; color: #4f6266; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-announcement button { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6c7c7f; font-size: 17px; line-height: 1; }
.platform-announcement button:hover { background: #d5e5e2; color: #007f71; }
.platform-announcement[data-priority="Vacib"] { border-left-color: #b98217; background: #fff7e7; }
.platform-announcement[data-priority="Vacib"] strong { color: #805d18; }
.platform-announcement[data-priority="Kritik"] { border-left-color: #b84444; background: #fbeaea; }
.platform-announcement[data-priority="Kritik"] strong { color: #993838; }

@media (max-width: 1100px) {
  .developer-tools-nav { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .developer-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .notification-panel { top: 40px; right: 6px; width: calc(100vw - 12px); max-height: calc(100vh - 46px); }
  .platform-announcement > div { grid-template-columns: 1fr; gap: 3px; }
  .platform-announcement span { white-space: normal; }
  .developer-tools-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-tool-section-head { align-items: stretch; flex-direction: column; }
  .developer-tool-section-head > .btn,
  .developer-tool-section-head .developer-inline-action { width: 100%; }
  .developer-tool-section-head .btn.primary { width: 100%; }
  .developer-inline-action { grid-template-columns: 1fr; }
  .developer-tool-modal.modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .developer-tool-form .entry-panel-grid,
  .developer-module-checks { grid-template-columns: 1fr; }
  .developer-tool-form .entry-wide-field { grid-column: auto; }
  .company-package-select label { grid-template-columns: 1fr; }
  .platform-announcement { grid-template-columns: 1fr; }
  .platform-announcement span { white-space: normal; }
}

/* Sidebar brand and bottom profile layout */
.sidebar > .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #22313a;
  overflow: hidden;
}

.sidebar > .brand .brand-mark {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: #0b9d8c;
  color: #fff;
  box-shadow: none;
  font-size: 10px;
}

.sidebar > .brand .brand-copy { min-width: 0; flex: 1 1 auto; }
.sidebar > .brand h1 { overflow: hidden; margin: 0; color: #f5fafb; font-size: 13px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar > .brand span { overflow: hidden; margin-top: 2px; color: #91a4ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar > .brand .sidebar-toggle { margin-left: auto; }

.sidebar > .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.sidebar > .sidebar-profile {
  flex: 0 0 auto;
  min-height: 62px;
  margin-top: auto;
  padding: 9px 10px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-bottom: 0;
  background: #1f2c33;
  box-shadow: 0 -5px 12px rgba(8, 16, 20, .12);
}

.sidebar > .sidebar-profile .profile-logout { margin-left: auto; }

.app.sidebar-collapsed .sidebar > .brand {
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
}

.app.sidebar-collapsed .sidebar > .brand .brand-copy { display: none; }
.app.sidebar-collapsed .sidebar > .brand .brand-mark { width: 28px; min-width: 28px; height: 28px; font-size: 8px; }
.app.sidebar-collapsed .sidebar > .brand .sidebar-toggle { margin-left: 0; }

/* Login workspace preview */
.login-screen {
  place-items: center end;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
  background: #dfe7e6;
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(229, 236, 235, .36);
  pointer-events: none;
}

.login-erp-preview {
  position: absolute;
  inset: 28px;
  z-index: 0;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #b5c3c2;
  border-radius: 8px;
  background: #edf2f1;
  box-shadow: 0 24px 70px rgba(32, 50, 55, .18);
  transform: perspective(1500px) rotateY(1.4deg) rotateX(.4deg) scale(.99);
  transform-origin: left center;
}

.login-preview-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #26363e;
}

.login-preview-logo {
  height: 62px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.login-preview-logo span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #0b9d8c;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.login-preview-logo i,
.login-preview-profile i,
.login-preview-topbar span,
.login-preview-title span {
  display: block;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}

.login-preview-logo i { width: 78px; }

.login-preview-nav {
  flex: 1 1 auto;
  padding: 22px 12px;
  display: grid;
  align-content: start;
  gap: 11px;
}

.login-preview-nav i {
  height: 31px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
}

.login-preview-nav i.active {
  border-left: 3px solid #20b8a5;
  background: rgba(255, 255, 255, .14);
}

.login-preview-profile {
  height: 60px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.login-preview-profile b {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #59a79d;
}

.login-preview-profile i { width: 82px; }

.login-preview-workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: 46px 42px minmax(0, 1fr);
}

.login-preview-topbar {
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #26363e;
}

.login-preview-topbar i {
  width: 128px;
  height: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .72);
}

.login-preview-topbar span {
  width: min(300px, 30vw);
  margin-left: auto;
  background: rgba(255, 255, 255, .13);
}

.login-preview-topbar b {
  width: 24px;
  height: 24px;
  border: 2px solid #d5a93a;
  border-radius: 50%;
}

.login-preview-toolbar {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c5d0cf;
  background: #f3f6f6;
}

.login-preview-toolbar span,
.login-preview-toolbar i,
.login-preview-title b,
.login-preview-title span {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: #a9b8b7;
}

.login-preview-toolbar span { width: 140px; }
.login-preview-toolbar i { width: 28px; height: 28px; border-radius: 50%; background: #0b9d8c; }

.login-preview-content {
  min-height: 0;
  padding: 18px 20px 22px;
  display: grid;
  grid-template-rows: auto auto minmax(150px, .9fr) minmax(180px, 1.1fr);
  gap: 14px;
  background: #edf2f1;
}

.login-preview-title { display: flex; align-items: center; justify-content: space-between; }
.login-preview-title b { width: 180px; height: 13px; background: #4e6267; }
.login-preview-title span { width: 104px; background: #b9c4c3; }

.login-preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
}

.login-preview-kpis > div {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 7px 10px;
  border: 1px solid #cad4d3;
  border-radius: 5px;
  background: #fff;
}

.login-preview-kpis i { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 4px; background: #d9ece9; }
.login-preview-kpis b { width: 65%; height: 7px; background: #9eafae; }
.login-preview-kpis span { width: 85%; height: 12px; background: #40565b; }

.login-preview-panels {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: 10px;
}

.login-preview-chart,
.login-preview-table,
.login-preview-ledger {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c6d1d0;
  border-radius: 5px;
  background: #fff;
}

.login-preview-chart header,
.login-preview-table header,
.login-preview-ledger header {
  height: 32px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #269887;
}

.login-preview-chart header b,
.login-preview-table header b,
.login-preview-ledger header b { width: 90px; height: 7px; background: rgba(255, 255, 255, .82); }
.login-preview-chart header i,
.login-preview-table header i,
.login-preview-ledger header i { width: 38px; height: 5px; background: rgba(255, 255, 255, .42); }

.login-preview-chart > div {
  height: calc(100% - 32px);
  padding: 18px 20px 14px;
  display: flex;
  align-items: end;
  gap: 12px;
}

.login-preview-chart span {
  flex: 1 1 0;
  height: var(--h);
  min-width: 12px;
  border-top: 3px solid #3e727a;
  background: #57929b;
}

.login-preview-table > div { padding: 8px 10px; display: grid; }
.login-preview-table span { height: 27px; border-bottom: 1px solid #dde4e3; }
.login-preview-table span::before { content: ""; display: block; width: 68%; height: 6px; margin-top: 10px; background: #b7c3c2; }

.login-preview-columns {
  height: 28px;
  padding: 0 11px;
  display: grid;
  grid-template-columns: 60px 1.2fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #c7d2d1;
  background: #e5eeec;
}

.login-preview-columns span { height: 5px; background: #849a98; }
.login-preview-rows { padding: 0 11px; display: grid; }
.login-preview-rows i { height: 29px; border-bottom: 1px solid #e0e6e5; }

.login-panel {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  border-color: #9eafae;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(25, 42, 47, .28);
}

.login-panel-head { min-height: 96px; padding: 19px 22px; }
.login-brand-mark { width: 52px; height: 52px; }
.login-form { padding: 26px 24px 22px; }
.login-form input { height: 42px; padding: 0 12px; }
.login-submit { height: 42px; }

@media (max-width: 520px) {
  .login-screen { place-items: center; padding: 12px; }
  .login-erp-preview { inset: 0; grid-template-columns: 82px minmax(0, 1fr); border: 0; border-radius: 0; opacity: .42; transform: none; }
  .login-preview-logo { padding: 12px; }
  .login-preview-logo i,
  .login-preview-profile i { display: none; }
  .login-preview-nav { padding-inline: 9px; }
  .login-preview-content { padding: 14px; }
  .login-preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-preview-panels { grid-template-columns: 1fr; }
  .login-preview-table,
  .login-preview-ledger { display: none; }
}

@media (min-width: 521px) and (max-width: 900px) {
  .login-screen { place-items: center; }
  .login-erp-preview { inset: 18px; opacity: .55; }
}

/* Framed split login composition */
.login-screen {
  place-items: center;
  padding: 24px;
  background: #e7eeee;
}

.login-screen::after { background: rgba(231, 238, 238, .12); }

.login-layout-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - 48px));
  height: min(650px, calc(100vh - 48px));
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.42fr);
  grid-template-areas: "panel preview";
  overflow: hidden;
  border: 3px solid #087f73;
  border-radius: 8px;
  background: #fbfdfd;
  box-shadow: 0 24px 64px rgba(31, 50, 55, .17);
}

.login-layout-shell .login-erp-preview {
  position: relative;
  inset: auto;
  grid-area: preview;
  align-self: stretch;
  margin: 46px 42px 46px 0;
  grid-template-columns: 138px minmax(0, 1fr);
  border-color: #bac8c7;
  border-radius: 6px;
  opacity: 1;
  box-shadow: 0 18px 42px rgba(35, 57, 62, .16);
  transform: none;
}

.login-layout-shell .login-panel {
  grid-area: panel;
  align-self: center;
  width: auto;
  margin: 42px 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.login-layout-shell .login-panel-head {
  min-height: 0;
  padding: 0 0 30px;
  gap: 12px;
  border: 0;
  background: transparent;
  color: #26363e;
}

.login-layout-shell .login-brand-mark {
  width: 44px;
  height: 44px;
  border: 1px solid #087f73;
  border-radius: 5px;
  background: #0b9d8c;
  color: #fff;
  box-shadow: 0 7px 18px rgba(11, 157, 140, .18);
}

.login-layout-shell .login-panel-head h1 {
  color: #26363e;
  font-size: 24px;
}

.login-layout-shell .login-panel-head p {
  margin-top: 5px;
  color: #718084;
  font-size: 12px;
}

.login-layout-shell .login-form {
  padding: 0;
  gap: 17px;
}

.login-layout-shell .login-form label { gap: 7px; color: #405157; }

.login-layout-shell .login-form input {
  height: 44px;
  border-color: #b5c3c2;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
}

.login-layout-shell .login-form input:focus {
  border-color: #087f73;
  background: transparent;
  box-shadow: 0 2px 0 rgba(8, 127, 115, .14);
}

.login-layout-shell .login-submit {
  width: 132px;
  margin-top: 7px;
  border-radius: 4px;
  justify-self: start;
}

.login-layout-shell .login-panel > footer {
  padding: 24px 0 0;
  border: 0;
  background: transparent;
  text-align: left;
}

@media (max-width: 900px) {
  .login-layout-shell {
    width: min(680px, calc(100vw - 36px));
    grid-template-columns: minmax(300px, .9fr) minmax(260px, 1.1fr);
  }
  .login-layout-shell .login-erp-preview {
    inset: auto;
    margin: 34px 28px 34px 0;
    grid-template-columns: 80px minmax(0, 1fr);
    opacity: .72;
  }
  .login-layout-shell .login-panel { margin: 34px 30px; }
  .login-preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-preview-table,
  .login-preview-ledger { display: none; }
  .login-preview-panels { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .login-screen { padding: 12px; }
  .login-layout-shell {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "panel";
    border-width: 2px;
  }
  .login-layout-shell .login-erp-preview { display: none; }
  .login-layout-shell .login-panel { width: auto; margin: 36px 28px 30px; }
  .login-layout-shell .login-panel-head { padding-bottom: 28px; }
  .login-layout-shell .login-submit { width: 100%; }
  .login-layout-shell .login-panel > footer { text-align: center; }
}

/* Landing-to-login state */
.login-landing-copy {
  grid-area: panel;
  align-self: center;
  margin: 42px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #26363e;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .22s ease, transform .22s ease;
}

.login-landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 54px;
}

.login-landing-brand span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #0b9d8c;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.login-landing-brand b { font-size: 13px; }

.login-landing-kicker {
  margin: 0 0 10px;
  color: #087f73;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.login-landing-copy h1 {
  margin: 0;
  color: #26363e;
  font-size: 38px;
  line-height: 41px;
  letter-spacing: 0;
}

.login-landing-summary {
  max-width: 31ch;
  margin: 17px 0 0;
  color: #66777b;
  font-size: 13px;
  line-height: 21px;
}

.login-landing-action {
  min-width: 150px;
  height: 42px;
  margin-top: 28px;
  padding: 0 18px;
  border: 1px solid #087f73;
  border-radius: 4px;
  background: #0b9d8c;
  color: #fff;
  font: inherit;
  font-weight: 800;
}

.login-landing-action:hover,
.login-landing-action:focus-visible {
  border-color: #006c61;
  background: #087f73;
  color: #fff;
  outline: 2px solid rgba(11, 157, 140, .18);
  outline-offset: 2px;
}

.login-layout-shell .login-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.login-layout-shell.login-active .login-landing-copy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-12px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.login-layout-shell.login-active .login-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.login-layout-shell .login-panel-head { position: relative; }

.login-back-button {
  position: absolute;
  top: 7px;
  right: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #68797d;
  font-size: 21px;
  line-height: 1;
}

.login-back-button:hover,
.login-back-button:focus-visible {
  background: #e5eeec;
  color: #087f73;
  outline: 0;
}

@media (max-width: 900px) {
  .login-landing-copy { margin: 34px 30px; }
  .login-landing-brand { margin-bottom: 38px; }
  .login-landing-copy h1 { font-size: 32px; }
}

@media (max-width: 640px) {
  .login-landing-copy { margin: 36px 28px 34px; }
  .login-landing-brand { margin-bottom: 40px; }
  .login-landing-copy h1 { font-size: 34px; }
  .login-landing-summary { max-width: 34ch; }
  .login-landing-action { width: 100%; }
}

/* Asymmetric typographic login */
.login-screen {
  padding: 24px;
  background: #dfe7e6;
}

.login-screen::after { display: none; }

.login-layout-shell {
  width: min(1120px, calc(100vw - 48px));
  height: min(640px, calc(100vh - 48px));
  min-height: 540px;
  grid-template-columns: minmax(0, 1.28fr) minmax(390px, .72fr);
  grid-template-areas: "landing panel";
  border: 1px solid #50636a;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(26, 43, 48, .2);
}

.login-landing-copy {
  position: relative;
  grid-area: landing;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: clamp(38px, 5vw, 66px);
  justify-content: space-between;
  overflow: hidden;
  background: #26363e;
  color: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.login-landing-copy::before {
  content: "SALA";
  position: absolute;
  right: -18px;
  bottom: 76px;
  color: transparent;
  font-size: clamp(118px, 14vw, 210px);
  font-weight: 900;
      line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  pointer-events: none;
}

.login-landing-copy::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 34%;
  background: #0b9d8c;
}

.login-landing-brand {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
}

.login-landing-brand span {
  background: #0b9d8c;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.login-landing-brand b { color: #eaf3f2; }

.login-landing-main {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: auto 0;
}

.login-landing-kicker {
  margin-bottom: 15px;
  color: #61c5b8;
  font-size: 11px;
}

.login-landing-copy h1 {
  max-width: 6ch;
  color: #fff;
  font-size: clamp(54px, 7vw, 88px);
  line-height: 1;
}

.login-landing-summary {
  max-width: 36ch;
  margin-top: 24px;
  color: #bcc9cc;
  font-size: 13px;
  line-height: 22px;
}

.login-signal-grid {
  position: absolute;
  z-index: 1;
  top: 62px;
  right: 58px;
  width: 142px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.login-signal-grid i {
  height: 7px;
  background: rgba(255, 255, 255, .12);
}

.login-signal-grid i:nth-child(3n + 1) { background: #0b9d8c; }
.login-signal-grid i:nth-child(5) { grid-column: span 2; }
.login-signal-grid i:nth-child(10) { grid-column: span 2; background: #d3a93f; }

.login-landing-index {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  gap: 13px;
  color: #fff;
}

.login-landing-index span {
  color: #61c5b8;
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
}

.login-landing-index b {
  padding-bottom: 2px;
  color: #93a6ab;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-layout-shell .login-panel,
.login-layout-shell.login-active .login-panel {
  position: relative;
  grid-area: panel;
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: clamp(44px, 5vw, 68px) clamp(38px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.login-layout-shell .login-panel::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 34px;
  height: 5px;
  background: #0b9d8c;
  box-shadow: 0 -9px 0 #d3a93f;
}

.login-layout-shell .login-panel-head { padding-bottom: 42px; }
.login-layout-shell .login-panel-head h1 { font-size: 26px; }
.login-layout-shell .login-form { gap: 19px; }
.login-layout-shell .login-submit { width: 100%; margin-top: 10px; }
.login-layout-shell .login-panel > footer { padding-top: 28px; text-align: center; }

@media (max-width: 800px) {
  .login-screen { align-items: center; padding: 14px; overflow-y: auto; }
  .login-layout-shell {
    width: min(520px, calc(100vw - 28px));
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "landing" "panel";
  }
  .login-landing-copy {
    min-height: 210px;
    padding: 27px 28px;
  }
  .login-landing-copy::before { right: -6px; bottom: 18px; font-size: 96px; }
  .login-landing-copy::after { width: 6px; height: 48%; }
  .login-landing-brand { margin-bottom: 26px; }
  .login-landing-copy h1 { font-size: 39px; }
  .login-landing-summary { max-width: 31ch; margin-top: 13px; font-size: 12px; line-height: 18px; }
  .login-signal-grid { top: 28px; right: 28px; width: 90px; gap: 5px; }
  .login-signal-grid i { height: 5px; }
  .login-landing-index { display: none; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { min-height: 390px; padding: 34px 30px 30px; }
  .login-layout-shell .login-panel-head { padding-bottom: 30px; }
}

@media (max-height: 700px) and (min-width: 801px) {
  .login-layout-shell { min-height: 500px; }
  .login-landing-copy,
  .login-layout-shell .login-panel { padding-block: 38px; }
  .login-layout-shell .login-panel-head { padding-bottom: 28px; }
}

/* Unified SaaS login */
.login-screen {
  padding: 28px;
  background: #f4f6f8;
}

.login-layout-shell {
  width: min(1080px, calc(100vw - 56px));
  height: min(650px, calc(100vh - 56px));
  min-height: 540px;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  grid-template-areas: "landing panel";
  border: 1px solid #c7d0d0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(29, 37, 45, .14);
}

.login-landing-copy {
  position: relative;
  grid-area: landing;
  align-self: stretch;
  margin: 0;
  padding: 46px 50px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 30px;
  overflow: hidden;
  background: #26363e;
  color: #fff;
}

.login-landing-copy::before,
.login-landing-copy::after,
.login-layout-shell .login-panel::after,
.login-signal-grid { display: none; }

.login-landing-brand {
  position: relative;
  z-index: 1;
  margin: 0;
  gap: 11px;
}

.login-landing-brand span,
.login-layout-shell .login-brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid #009b89;
  border-radius: 6px;
  background: #009b89;
  color: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
}

.login-landing-brand b {
  color: #fff;
  font-size: 15px;
}

.login-landing-main {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 470px;
  margin: 0;
}

.login-landing-kicker {
  margin: 0 0 14px;
  color: #62cabc;
  font-size: 10px;
  font-weight: 800;
}

.login-landing-copy h1 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-size: 46px;
  line-height: 50px;
}

.login-landing-summary {
  max-width: 43ch;
  margin: 20px 0 0;
  color: #c7d2dc;
  font-size: 13px;
  line-height: 21px;
}

.login-ops-visual {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  border: 1px solid rgba(255, 255, 255, .13);
  background: #2f3f49;
}

.login-ops-head {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #dbe6ef;
  font-size: 9px;
  font-weight: 700;
}

.login-ops-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #009b89;
  box-shadow: 0 0 0 4px rgba(0, 155, 137, .13);
}

.login-ops-row {
  min-height: 35px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.login-ops-row b { color: #83969f; font-size: 8px; }
.login-ops-row span,
.login-ops-row em { display: block; height: 5px; background: rgba(255, 255, 255, .14); }
.login-ops-row span i { display: block; width: 62%; height: 100%; background: #91a4ae; }
.login-ops-row:nth-child(3) span i { width: 78%; }
.login-ops-row:nth-child(4) span i { width: 48%; }
.login-ops-row em { background: rgba(0, 155, 137, .48); }

.login-ops-foot {
  height: 29px;
  padding: 0 12px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.login-ops-foot span { width: 8px; background: #007f71; }
.login-ops-foot span:nth-child(1) { height: 8px; }
.login-ops-foot span:nth-child(2) { height: 14px; }
.login-ops-foot span:nth-child(3) { height: 11px; }
.login-ops-foot span:nth-child(4) { height: 18px; }

.login-landing-index {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 9px;
}

.login-landing-index i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #009b89;
}

.login-landing-index b {
  padding: 0;
  color: #91a4ae;
  font-size: 9px;
}

.login-layout-shell .login-panel,
.login-layout-shell.login-active .login-panel {
  grid-area: panel;
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: 54px 58px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.login-panel-context {
  margin-bottom: 34px;
  color: #007f71;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.login-layout-shell .login-panel-head {
  min-height: 0;
  padding: 0 0 34px;
  gap: 13px;
  border: 0;
  background: transparent;
  color: #26363e;
}

.login-layout-shell .login-panel-head h1 {
  color: #1d252d;
  font-size: 25px;
}

.login-layout-shell .login-panel-head p {
  margin-top: 4px;
  color: #677483;
  font-size: 11px;
}

.login-layout-shell .login-form {
  padding: 0;
  gap: 17px;
}

.login-layout-shell .login-form label {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  color: #405157;
  font-size: 11px;
}

.login-layout-shell .login-form input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #c7d0d0;
  border-radius: 5px;
  background: #f9fbfb;
  color: #1d252d;
}

.login-layout-shell .login-form input:hover { border-color: #9eafae; }

.login-layout-shell .login-form input:focus {
  border-color: #009b89;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 155, 137, .11);
}

.login-layout-shell .login-submit {
  width: 100%;
  height: 44px;
  margin-top: 5px;
  border: 1px solid #007f71;
  border-radius: 5px;
  background: #009b89;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.login-layout-shell .login-submit:hover,
.login-layout-shell .login-submit:focus-visible {
  border-color: #006f63;
  background: #007f71;
  color: #fff;
}

.login-layout-shell .login-panel > footer {
  padding: 24px 0 0;
  border: 0;
  background: transparent;
  color: #78858e;
  text-align: left;
  font-size: 10px;
}

@media (max-width: 800px) {
  .login-screen { padding: 14px; overflow-y: auto; }
  .login-layout-shell {
    width: min(520px, calc(100vw - 28px));
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "landing" "panel";
  }
  .login-landing-copy {
    min-height: 205px;
    padding: 25px 28px;
    grid-template-rows: auto 1fr;
    gap: 22px;
  }
  .login-landing-main { align-self: end; }
  .login-landing-copy h1 { max-width: 13ch; font-size: 31px; }
  .login-landing-summary { max-width: 38ch; margin-top: 11px; font-size: 11px; line-height: 17px; }
  .login-ops-visual,
  .login-landing-index { display: none; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { min-height: 370px; padding: 32px 30px 28px; }
  .login-panel-context { margin-bottom: 25px; }
  .login-layout-shell .login-panel-head { padding-bottom: 27px; }
}

@media (max-width: 430px) {
  .login-screen { padding: 0; }
  .login-layout-shell { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .login-landing-copy { min-height: 190px; padding: 23px 24px; }
  .login-landing-copy h1 { font-size: 28px; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { padding-inline: 24px; }
}

/* Compact debt contact entry; full history remains in the Info view. */
.modal.entry-mode.debt-note-modal {
  width: min(720px, calc(100vw - 64px));
  min-height: 0;
  max-height: calc(100vh - 64px);
}

.modal.entry-mode.debt-note-modal .body {
  flex: 0 1 auto;
}

.modal.entry-mode.debt-note-modal .debt-note-form .entry-panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal.entry-mode.debt-note-modal .debt-note-input {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .modal.entry-mode.debt-note-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .modal.entry-mode.debt-note-modal .debt-note-form .entry-panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.entry-mode.debt-note-modal .debt-note-input {
    grid-column: auto;
  }
}

/* Shared accent for compact KPI and summary cards. */
.audit-summary > div,
.kpis > .kpi,
#dashboard .dashboard-metric-list > div,
.developer-kpi-grid > div,
.credit-summary-grid > div,
.cashbox-refund-summary > div,
.global-trace-summary > div,
.cash-refund-summary,
.account-balances-summary {
  position: relative;
}

.audit-summary > div::before,
.kpis > .kpi::before,
#dashboard .dashboard-metric-list > div::before,
.developer-kpi-grid > div::before,
.credit-summary-grid > div::before,
.cashbox-refund-summary > div::before,
.global-trace-summary > div::before,
.cash-refund-summary::before,
.account-balances-summary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 2px;
  background: #009b89;
  pointer-events: none;
}

.audit-summary > div {
  border-left: 0;
}

.account-balances-summary {
  border-left: 1px solid #bfcaca;
}

.developer-kpi-grid > div {
  border-top-width: 1px;
  border-top-color: #ccd8d7;
}

/* Dashboard overview panels use the same frame size as analytics panels. */
#dashboard .dashboard-overview > .dashboard-panel,
#dashboard .dashboard-analytics > .dashboard-panel {
  height: 238px;
  min-height: 238px;
}

#dashboard .dashboard-metric-list {
  flex: 1 1 auto;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

#dashboard .dashboard-overview,
#dashboard .dashboard-analytics,
#dashboard .dashboard-tables {
  column-gap: 8px;
}

/* Professional login composition */
.login-screen {
  padding: 24px;
  background: #182228;
}

.login-layout-shell {
  width: min(1180px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 48px));
  min-height: 560px;
  grid-template-columns: minmax(0, 1fr) 430px;
  grid-template-areas: "landing panel";
  overflow: hidden;
  border: 1px solid #46565c;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

.login-landing-copy {
  position: relative;
  isolation: isolate;
  grid-area: landing;
  min-width: 0;
  margin: 0;
  padding: 42px 46px 38px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  overflow: hidden;
  background-color: #1d292f;
  background-image: url("../images/login-architecture-v1.webp");
  background-position: center;
  background-size: cover;
  color: #fff;
}

.login-landing-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background: rgba(15, 23, 27, .5);
}

.login-landing-copy::after,
.login-signal-grid,
.login-ops-visual { display: none; }

.login-landing-brand {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: 0;
}

.login-landing-brand span,
.login-layout-shell .login-brand-mark {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  background: #009b89;
  color: #fff;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-landing-brand b {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
}

.login-landing-main {
  position: relative;
  z-index: 1;
  align-self: end;
  max-width: 540px;
  margin: 0 0 22px;
}

.login-landing-kicker {
  margin: 0 0 15px;
  color: #65d0c2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.login-landing-copy h1 {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: 0;
}

.login-landing-summary {
  max-width: none;
  margin: 18px 0 0;
  color: #d1dcdf;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}

.login-landing-index {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0;
}

.login-landing-index i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #1cc3af;
  box-shadow: 0 0 0 4px rgba(28, 195, 175, .15);
}

.login-landing-index b {
  padding: 0;
  color: #d1dcdf;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.login-layout-shell .login-panel,
.login-layout-shell.login-active .login-panel {
  position: relative;
  grid-area: panel;
  align-self: stretch;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 48px 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.login-layout-shell .login-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  display: block;
  background: #009b89;
}

.login-layout-shell .login-panel::after { display: none; }

.login-panel-context {
  margin: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #007f71;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.login-panel-context i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #75848a;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.login-panel-context i b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #009b89;
}

.login-layout-shell .login-panel-head {
  min-height: 0;
  padding: 0 0 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: #26363e;
}

.login-layout-shell .login-brand-mark {
  display: none;
  border-color: #009b89;
}

.login-layout-shell .login-panel-head h1 {
  color: #1d292f;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0;
}

.login-layout-shell .login-panel-head p {
  margin-top: 7px;
  color: #6d7c82;
  font-size: 11px;
  letter-spacing: 0;
}

.login-layout-shell .login-form {
  padding: 0;
  display: grid;
  gap: 18px;
}

.login-layout-shell .login-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  color: #34464c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.login-field-control {
  position: relative;
  height: 46px;
}

.login-field-control > svg {
  position: absolute;
  top: 15px;
  left: 14px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: #7c8d92;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
  pointer-events: none;
}

.login-layout-shell .login-form .login-field-control input {
  width: 100%;
  height: 46px;
  padding: 0 43px 0 41px;
  border: 1px solid #bdcaca;
  border-radius: 5px;
  background: #f8fafa;
  color: #1d292f;
  font-size: 12px;
  letter-spacing: 0;
}

.login-layout-shell .login-form .login-field-control input:hover {
  border-color: #91a4a3;
  background: #fff;
}

.login-layout-shell .login-form .login-field-control input:focus {
  border-color: #009b89;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 155, 137, .11);
}

.login-password-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #66777c;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  background: #e8efee;
  color: #007f71;
}

.login-password-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-password-toggle .login-eye-closed,
.login-password-toggle[aria-pressed="true"] .login-eye-open { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-closed { display: block; }

.login-layout-shell .login-submit {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #007f71;
  border-radius: 5px;
  background: #009b89;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-layout-shell .login-submit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-layout-shell .login-submit:hover,
.login-layout-shell .login-submit:focus-visible {
  border-color: #006f63;
  background: #007f71;
  color: #fff;
}

.login-layout-shell .login-submit:disabled {
  border-color: #7fa9a4;
  background: #7fa9a4;
  cursor: wait;
}

.login-layout-shell .login-panel > footer {
  padding: 25px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #77868b;
  text-align: left;
  font-size: 10px;
  letter-spacing: 0;
}

.login-layout-shell .login-panel > footer svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: #009b89;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .login-screen { padding: 16px; overflow-y: auto; }
  .login-layout-shell {
    width: min(560px, calc(100vw - 32px));
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "landing" "panel";
  }
  .login-landing-copy {
    min-height: 220px;
    padding: 26px 30px;
    grid-template-rows: auto 1fr;
    background-position: center 58%;
  }
  .login-landing-main { align-self: end; margin: 0; }
  .login-landing-kicker { margin-bottom: 9px; }
  .login-landing-copy h1 { max-width: 15ch; font-size: 31px; }
  .login-landing-summary { margin-top: 9px; font-size: 11px; }
  .login-landing-index { display: none; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { min-height: 390px; padding: 32px 34px 30px; }
  .login-layout-shell .login-panel::before { top: 0; right: 0; bottom: auto; width: auto; height: 3px; }
  .login-panel-context { margin-bottom: 28px; }
  .login-layout-shell .login-panel-head { padding-bottom: 28px; }
}

@media (max-width: 480px) {
  .login-screen { place-items: start stretch; padding: 0; background: #fff; }
  .login-layout-shell { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-landing-copy { min-height: 190px; padding: 23px 24px; }
  .login-landing-brand span { width: 36px; height: 36px; }
  .login-landing-copy h1 { font-size: 27px; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { min-height: 390px; padding: 30px 24px 28px; }
  .login-panel-context { margin-bottom: 25px; }
  .login-layout-shell .login-panel-head h1 { font-size: 25px; }
}

@media (max-height: 650px) and (min-width: 901px) {
  .login-screen { padding: 14px; }
  .login-layout-shell { height: calc(100vh - 28px); min-height: 500px; }
  .login-landing-copy { padding-block: 30px; }
  .login-layout-shell .login-panel,
  .login-layout-shell.login-active .login-panel { padding-block: 32px; }
  .login-panel-context { margin-bottom: 28px; }
  .login-layout-shell .login-panel-head { padding-bottom: 26px; }
}

/* Login authentication keeps the loader centered on the full viewport. */
body.auth-signing-in .remote-activity {
  position: fixed;
  inset: 0;
  z-index: 6200;
  width: 100vw;
  height: 100vh;
  background: transparent;
}

body.auth-signing-in .rbsoft-loader { --loader-size: 52px; }

/* rbsoft brand assets */
.sidebar > .brand .brand-logo {
  width: 138px;
  min-width: 0;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.sidebar > .brand .brand-logo img {
  display: block;
  object-fit: contain;
}

.sidebar > .brand .brand-logo-full {
  flex: 0 0 137px;
  width: 137px;
  min-width: 137px;
  max-width: 137px;
  height: 51px;
}

.sidebar > .brand .brand-logo-mark {
  display: none;
}

.app.sidebar-collapsed .sidebar > .brand .brand-logo {
  width: 22px;
  min-width: 22px;
  height: 28px;
  justify-content: center;
}

.app.sidebar-collapsed .sidebar > .brand .brand-logo-full {
  display: none;
}

.app.sidebar-collapsed .sidebar > .brand .brand-logo-mark {
  width: 21px;
  height: 25px;
  display: block;
}

.login-landing-brand img {
  width: 190px;
  max-width: min(58%, 230px);
  height: auto;
  display: block;
  object-fit: contain;
}

.login-layout-shell .login-brand-mark {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #34464c;
  border-radius: 5px;
  background: #1f2c33;
}

.login-layout-shell .login-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px) {
  .login-landing-brand img { width: 164px; }
}

@media (max-width: 480px) {
  .login-landing-brand img { width: 148px; }
}

/* Responsive application shell and synchronized ERP tables. */
.mobile-menu-toggle,
.mobile-sidebar-backdrop {
  display: none;
}

.erp-table-shell .table-fixed-head,
.erp-table-shell .table-fixed-foot {
  scrollbar-gutter: auto;
}

.erp-table-shell .table-body-scroll {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

@media (min-width: 901px) {
  .erp-table-shell .table-fixed-head table,
  .erp-table-shell .table-body-scroll table,
  .erp-table-shell .table-fixed-foot table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  html,
  body {
    height: 100%;
    min-height: 100%;
  }

  .app,
  .app.sidebar-collapsed {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
  }

  main {
    width: 100%;
    height: 100dvh;
    min-height: 0;
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(286px, calc(100vw - 48px));
    height: 100dvh;
    padding: 0;
    transform: translateX(-100%);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 14px 0 34px rgba(18, 29, 35, .22);
  }

  .app.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(20, 30, 36, .42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
  }

  .app.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar > .brand {
    min-height: 62px;
    display: flex;
    padding: 5px 10px 5px 12px;
  }

  .sidebar > .brand .brand-logo,
  .app.sidebar-collapsed .sidebar > .brand .brand-logo {
    width: 176px;
    min-width: 0;
    height: 50px;
    justify-content: flex-start;
  }

  .sidebar > .brand .brand-logo-full,
  .app.sidebar-collapsed .sidebar > .brand .brand-logo-full {
    width: 176px;
    height: 50px;
    display: block;
  }

  .sidebar > .brand .brand-logo-mark,
  .app.sidebar-collapsed .sidebar > .brand .brand-logo-mark {
    display: none;
  }

  .app.sidebar-collapsed .side-title {
    display: flex;
  }

  .app.sidebar-collapsed .side-title-label,
  .app.sidebar-collapsed .profile-summary,
  .app.sidebar-collapsed .profile-logout {
    display: inline-flex;
  }

  .app.sidebar-collapsed .nav {
    padding-inline: 7px;
  }

  .app.sidebar-collapsed .nav button {
    justify-content: flex-start;
    gap: 9px;
    padding-inline: 9px;
    font-size: 13px;
  }

  .app.sidebar-collapsed .sidebar-profile {
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
  }

  .app.sidebar-collapsed .profile-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .sidebar-toggle {
    display: none;
  }

  .mobile-menu-toggle {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible {
    background: rgba(0, 161, 141, .24);
    color: #fff;
    outline: 0;
  }

  .mobile-menu-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .topbar {
    flex: 0 0 44px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
    gap: 8px;
  }

  .topbar-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .topbar h2 {
    min-width: 0;
    font-size: 15px;
  }

  .topbar-tools {
    flex: 0 0 auto;
    width: auto;
    height: 28px;
    margin-top: 4px;
    gap: 6px;
  }

  .topbar-tools:has(.topbar-global-search.open) {
    flex-basis: auto;
    width: auto;
    min-width: 0;
  }

  .topbar-global-search.open {
    position: absolute;
    z-index: 3;
    right: 8px;
    left: 46px;
    width: auto;
    padding: 0 6px;
    background: #24323a;
  }

  .topbar-clock span {
    display: none;
  }

  .content {
    width: 100%;
    padding: 6px;
  }

  .workspace-toolbar {
    width: auto;
    min-height: 42px;
    height: auto;
    margin: -6px -6px 6px;
    padding: 6px;
    flex-wrap: nowrap;
  }

  .workspace-search {
    flex: 0 0 30px;
    width: 30px;
  }

  .workspace-search.open {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .workspace-actions {
    flex: 0 0 auto;
    min-width: 0;
  }

  .btn.add-record {
    min-width: 112px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .module-tabs,
  .cashbox-tabs,
  .settings-tabs {
    flex: 0 0 auto;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .module-filters {
    flex-wrap: nowrap;
    align-items: end;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .module-filter-field {
    flex: 0 0 132px;
  }

  .module-filter-meta {
    margin-left: 0;
  }

  .view:not(#dashboard) .table-scroll,
  #reports.active .table-scroll {
    max-width: 100%;
  }

  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    display: table-cell;
  }

  .erp-table-shell .table-fixed-head table,
  .erp-table-shell .table-body-scroll table,
  .erp-table-shell .table-fixed-foot table {
    width: var(--erp-table-min-width, 900px) !important;
    min-width: var(--erp-table-min-width, 900px) !important;
    max-width: none !important;
  }

  .erp-table-shell .table-body-scroll .data-table .action-col {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -1px 0 0 #d5dddd;
  }

  .erp-table-shell .table-body-scroll .data-table tbody tr:nth-child(even) .action-col {
    background: #f7f9f9;
  }

  .erp-table-shell .table-body-scroll .data-table tbody tr:hover .action-col,
  .erp-table-shell .table-body-scroll .data-table tbody tr.is-selected .action-col {
    background: #edf7f5;
  }

  .erp-table-shell .table-body-scroll {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  #dashboard.active {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #dashboard .dashboard-overview,
  #dashboard .two-col,
  #dashboard .dashboard-tables {
    grid-template-columns: minmax(0, 1fr);
  }

  #dashboard .dashboard-tables {
    flex: 0 0 auto;
  }

  #dashboard .dashboard-tables > .dashboard-panel {
    height: 320px;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal,
  .modal.entry-mode {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal .body,
  .modal.entry-mode .body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal .footer,
  .modal.entry-mode .footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }

  .content.editor-mode .operation-editor {
    height: 100%;
    min-height: 0;
  }

  .operation-form {
    min-height: 0;
  }

  .operation-document-band,
  .operation-summary,
  .operation-item-band {
    padding-inline: 9px;
  }

  .operation-item-table-wrap {
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  .operation-modal-footer {
    flex: 0 0 auto;
    padding: 8px;
  }
}

@media (max-width: 520px) {
  .topbar-tools {
    min-width: 24px;
  }

  .topbar-tools:has(.topbar-global-search.open) {
    min-width: 0;
  }

  .topbar-clock {
    display: none;
  }

  .notification-panel {
    top: 46px;
    right: 6px;
    left: 6px;
    width: auto;
    max-height: calc(100dvh - 52px);
  }

  .workspace-toolbar {
    flex-wrap: wrap;
  }

  .workspace-search.open {
    flex: 1 1 calc(100% - 122px);
  }

  .btn.add-record {
    min-width: 106px;
  }

  .operation-editor-head {
    min-height: 46px;
    flex-basis: 46px;
    padding: 7px 8px;
  }

  .operation-editor-head h3 {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .operation-modal-footer .btn {
    min-width: 0;
    padding-inline: 8px;
    font-size: 10px;
  }

  .info-drawer.open,
  .info-drawer.sales-details.open,
  .info-drawer-inner,
  .info-drawer.sales-details .info-drawer-inner {
    height: 100dvh;
  }
}