:root {
  --nav: #0f172a;
  --nav2: #17233a;
  --primary: #0d6efd;
  --orange: #ff4d0a;
  --bg: #f5f7fb;
  --border: #e4e9f2;
  --text: #101828
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.35 Inter, Segoe UI, Arial, sans-serif
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  background: linear-gradient(180deg, var(--nav), var(--nav2));
  color: #fff;
  padding: 12px 10px;
  z-index: 1040;
  display: flex;
  flex-direction: column
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  padding: 7px
}

.brand-mark {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: var(--orange);
  display: grid;
  place-items: center;
  font-size: 18px
}

.brand b,
.brand small {
  display: block
}

.brand small {
  font-size: 10px;
  color: #cbd5e1
}

.side-nav {
  margin-top: 15px;
  overflow: auto
}

.side-nav a,
.nav-group-toggle {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  color: #e2e8f0;
  text-decoration: none;
  padding: 9px 11px;
  margin: 2px 0;
  border-radius: 7px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit
}

.side-nav a:hover,
.side-nav a.active,
.nav-group-toggle:hover,
.nav-group-toggle.active {
  background: var(--orange);
  color: #fff
}

.side-nav i {
  font-size: 15px;
  width: 18px
}

.nav-group-toggle span {
  flex: 1
}

.nav-group-toggle .nav-chevron {
  width: auto;
  font-size: 11px;
  transition: transform .2s
}

.nav-group-toggle[aria-expanded=true] .nav-chevron {
  transform: rotate(180deg)
}

.nav-submenu {
  padding-left: 13px
}

.nav-submenu a {
  font-size: 12px;
  padding: 7px 9px
}

.nav-submenu a:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64748b;
  margin-left: -3px
}

.nav-submenu a.active:before {
  background: #fff
}

.user-box {
  margin-top: auto;
  background: #243149;
  padding: 9px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 9px
}

.user-box>i {
  font-size: 25px
}

.user-box span {
  flex: 1
}

.user-box b,
.user-box small {
  display: block
}

.user-box small {
  font-size: 10px;
  color: #cbd5e1
}

.user-box a {
  color: #fff
}

.app-main {
  margin-left: 220px;
  min-height: 100vh
}

.topbar {
  height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 8px 18px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 1030
}

.top-search {
  width: 330px;
  position: relative
}

.top-search i {
  position: absolute;
  left: 12px;
  top: 10px;
  color: #98a2b3
}

.top-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px 0 34px
}

.date-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff
}

.page-wrap {
  padding: 14px
}

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.page-title h1 {
  font-size: 20px;
  margin: 0
}

.page-title p {
  color: #667085;
  margin: 2px 0 0
}

.btn,
.form-control,
.form-select,
.input-group-text {
  font-size: 12px;
  min-height: 34px
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px
}

.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  box-shadow: 0 2px 7px #1018280a
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eef1f5;
  padding: 0 2px 8px;
  margin-bottom: 8px
}

.panel-head h2 {
  font-size: 14px;
  margin: 0
}

.panel-head a {
  font-size: 11px;
  text-decoration: none
}

.panel-tools {
  display: flex;
  gap: 6px;
  margin-bottom: 8px
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px
}

.stat-card small,
.stat-card strong {
  display: block
}

.stat-card small {
  color: #475467
}

.stat-card strong {
  font-size: 17px;
  margin-top: 3px
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px
}

.bg-purple {
  background: #7c3aed !important
}

.text-purple {
  color: #7c3aed !important
}

.chart-box {
  height: 210px
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px
}

.quick-grid a {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 5px;
  color: #344054;
  text-decoration: none;
  text-align: center;
  font-size: 11px
}

.quick-grid i {
  display: block;
  font-size: 22px;
  margin-bottom: 5px
}

.compact-table {
  margin: 0 !important;
  width: 100% !important
}

.compact-table th {
  background: #f8fafc;
  color: #344054;
  font-size: 10px;
  white-space: nowrap
}

.compact-table td,
.compact-table th {
  padding: 7px 8px;
  vertical-align: middle;
  border-color: #edf0f4
}

.compact-table td {
  font-size: 11px
}

.status-complete,
.status-pending {
  display: inline-block;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px
}

.status-complete {
  background: #dcfce7;
  color: #15803d
}

.status-pending {
  background: #fef3c7;
  color: #b45309
}

.btn-icon {
  border: 0;
  background: transparent;
  color: #155eef;
  padding: 4px 6px;
  text-decoration: none
}

.summary-list>div {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid #eef1f5
}

.success-field {
  color: #15803d !important;
  border-color: #86efac !important;
  font-weight: 700
}

.select2-container {
  width: 100% !important
}

.select2-container .select2-selection--single {
  height: 34px;
  border-color: #dee2e6
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 32px
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 32px
}

.input-group>.select2-container {
  flex: 1 1 auto;
  width: 1% !important
}

.modal-header,
.modal-footer {
  padding: 10px 13px
}

.modal-body {
  padding: 13px
}

.modal-title {
  font-size: 15px
}

.filter-bar {
  display: flex;
  align-items: end;
  gap: 8px
}

.filter-bar .form-control {
  max-width: 180px
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

.report-grid a {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: #1d2939
}

.report-grid>a>i {
  font-size: 25px;
  color: #155eef;
  display: block;
  margin-bottom: 10px
}

.report-grid span,
.report-grid small {
  display: block
}

.report-grid span {
  font-weight: 700
}

.report-grid small {
  margin-top: 12px;
  color: #667085
}

.mobile-nav {
  display: none
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 20% 20%, #dbeafe, transparent 30%), linear-gradient(135deg, #f8fafc, #eef2ff)
}

.login-card {
  width: min(390px, calc(100% - 28px));
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 24px 70px #1e293b26;
  border: 1px solid #e2e8f0
}

.login-logo {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 27px
}

.login-card h1 {
  font-size: 25px;
  margin: 15px 0 0
}

.login-card>p {
  color: #64748b
}

.demo-note {
  display: block;
  text-align: center;
  color: #64748b;
  margin-top: 15px
}

@media(max-width:991px) {
  .sidebar {
    transform: translateX(-100%);
    transition: .2s
  }

  .sidebar.open {
    transform: none
  }

  .app-main {
    margin-left: 0
  }

  .top-search {
    width: min(45vw, 330px)
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767px) {
  body {
    padding-bottom: 65px
  }

  .topbar {
    height: 52px;
    padding: 7px 9px
  }

  .top-search,
  .date-chip {
    display: none
  }

  .page-wrap {
    padding: 8px
  }

  .page-title h1 {
    font-size: 17px
  }

  .page-title p {
    font-size: 10px
  }

  .page-title .btn {
    font-size: 0
  }

  .page-title .btn i {
    font-size: 15px
  }

  .stat-card {
    min-height: 70px;
    padding: 8px
  }

  .stat-icon {
    width: 34px;
    height: 34px;
    font-size: 16px
  }

  .stat-card strong {
    font-size: 14px
  }

  .panel {
    padding: 8px
  }

  .form-control,
  .form-select,
  .btn,
  .input-group-text {
    min-height: 42px
  }

  .select2-container .select2-selection--single {
    height: 42px
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px
  }

  .select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px
  }

  .mobile-nav {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #0f172a;
    z-index: 1050;
    padding-bottom: env(safe-area-inset-bottom)
  }

  .mobile-nav a,
  .mobile-nav button {
    color: #fff;
    background: transparent;
    border: 0;
    text-decoration: none;
    text-align: center;
    font-size: 9px
  }

  .mobile-nav i {
    display: block;
    font-size: 17px
  }

  .mobile-nav span {
    display: block;
    margin-top: 3px
  }

  .mobile-nav .mobile-create {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--orange);
    display: grid;
    place-items: center;
    margin: -22px auto 0;
    border: 3px solid #fff
  }

  .mobile-create i {
    font-size: 22px
  }

  .mobile-cards thead {
    display: none
  }

  .mobile-cards,
  .mobile-cards tbody,
  .mobile-cards tr,
  .mobile-cards td {
    display: block;
    width: 100%
  }

  .mobile-cards tr {
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px #1018280a
  }

  .mobile-cards td {
    border: 0 !important;
    padding: 4px 2px !important;
    text-align: right;
    min-height: 25px
  }

  .mobile-cards td:before {
    content: attr(data-label);
    float: left;
    color: #667085;
    font-size: 10px
  }

  .mobile-cards td:last-child {
    border-top: 1px solid #eef1f5 !important;
    margin-top: 5px;
    padding-top: 7px !important
  }

  .dataTables_length {
    display: none
  }

  .filter-bar {
    flex-wrap: wrap
  }

  .filter-bar label {
    width: auto
  }

  .filter-bar .form-control {
    max-width: none;
    flex: 1
  }

  .report-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px
  }

  .report-grid a {
    padding: 12px
  }

  .chart-box {
    height: 180px
  }

  .modal-dialog {
    margin: 8px
  }

  .modal-body {
    max-height: 70vh;
    overflow: auto
  }
}

@media print {

  .sidebar,
  .topbar,
  .mobile-nav,
  .page-title .btn,
  .filter-bar {
    display: none !important
  }

  .app-main {
    margin: 0
  }

  .page-wrap {
    padding: 0
  }

  .panel {
    box-shadow: none;
    border: 0
  }
}

.rfid-modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 70px #0f172a38
}

.rfid-modal-content .modal-title i {
  color: #f97316;
  margin-right: 6px
}

.rfid-scan-details {
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden
}

.rfid-scan-details>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border)
}

.rfid-scan-details>div:last-child {
  border-bottom: 0
}

.rfid-scan-details span {
  color: #667085
}

.rfid-scan-details strong {
  font-size: 14px
}

.rfid-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.25fr;
  gap: 8px
}

.rfid-actions .btn {
  height: 44px;
  font-weight: 700;
  text-transform: uppercase
}

@media(max-width:575px) {
  .rfid-actions {
    grid-template-columns: 1fr 1fr
  }

  .rfid-actions .btn-light {
    grid-column: 1/-1;
    grid-row: 2
  }

  .rfid-scan-details>div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px
  }
}

.document-preview-body {
  background: #eef2f7;
  padding: 18px;
  max-height: 72vh;
  overflow: auto
}

.document-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: #667085
}

.document-sheet {
  width: 100%;
  max-width: 850px;
  min-height: 720px;
  margin: auto;
  background: #fff;
  padding: 34px;
  color: #172033;
  box-shadow: 0 4px 20px #0f172a1f
}

.document-header {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding-bottom: 18px;
  border-bottom: 2px solid #172033
}

.document-header h2,
.document-heading h1 {
  margin: 0
}

.document-header h2 {
  font-size: 22px
}

.document-header p {
  margin: 3px 0;
  color: #667085
}

.document-heading {
  text-align: right
}

.document-heading h1 {
  font-size: 24px;
  text-transform: uppercase;
  color: #155eef
}

.document-party {
  padding: 18px 0
}

.document-party small {
  color: #667085;
  text-transform: uppercase
}

.document-party h3 {
  margin: 3px 0;
  font-size: 17px
}

.document-party p {
  margin: 2px 0;
  color: #475467
}

.document-table {
  width: 100%;
  border-collapse: collapse
}

.document-table th,
.document-table td {
  padding: 11px;
  border: 1px solid #d8dee8;
  text-align: right
}

.document-table th:first-child,
.document-table td:first-child {
  text-align: left
}

.document-table thead th {
  background: #172033;
  color: #fff
}

.document-table td small {
  display: block;
  color: #667085;
  margin-top: 3px
}

.document-table tfoot th {
  font-size: 15px;
  background: #f8fafc
}

.document-notes {
  margin-top: 18px;
  padding: 12px;
  background: #f8fafc;
  border-left: 3px solid #155eef
}

.document-notes p {
  margin: 4px 0
}

.document-sheet footer {
  text-align: center;
  margin-top: 50px;
  color: #98a2b3;
  border-top: 1px solid #e4e7ec;
  padding-top: 10px
}

.shared-document-page {
  background: #e5e7eb;
  padding: 25px
}

.shared-document-actions {
  max-width: 850px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.shared-document-actions a,
.shared-document-actions button {
  border: 0;
  border-radius: 6px;
  background: #155eef;
  color: #fff;
  padding: 9px 14px;
  text-decoration: none;
  font: 13px Arial;
  cursor: pointer
}

@media(max-width:767px) {
  .document-preview-body {
    padding: 6px
  }

  .document-sheet {
    padding: 16px;
    min-height: 0
  }

  .document-header {
    display: block
  }

  .document-heading {
    text-align: left;
    margin-top: 15px
  }

  .document-table th,
  .document-table td {
    padding: 7px;
    font-size: 10px
  }

  .document-sheet footer {
    margin-top: 25px
  }
}

@media print {
  .shared-document-actions {
    display: none
  }

  .shared-document-page {
    padding: 0;
    background: #fff
  }

  .document-sheet {
    box-shadow: none;
    max-width: none
  }
}

.customer-credit-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 10px;
  margin-top: 4px
}

.customer-credit-card>div {
  padding: 5px 8px;
  border-right: 1px solid #e4e7ec
}

.customer-credit-card>div:nth-child(4) {
  border-right: 0
}

.customer-credit-card small,
.customer-credit-card b {
  display: block
}

.customer-credit-card small {
  color: #667085;
  font-size: 10px
}

.customer-credit-card b {
  margin-top: 3px
}

.customer-credit-card.credit-exceeded {
  background: #fff1f2;
  border-color: #fda4af
}

.credit-warning {
  grid-column: 1/-1;
  margin: 2px 0 0;
  color: #be123c;
  font-weight: 700
}

.ledger-filter {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto;
  gap: 8px;
  align-items: end
}

.ledger-account-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 92px
}

.ledger-account-card h2 {
  font-size: 18px;
  margin: 3px 0
}

.ledger-account-card p {
  margin: 0;
  color: #667085
}

.ledger-balance-card {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.ledger-balance-card small,
.ledger-balance-card strong,
.ledger-balance-card span {
  display: block
}

.ledger-balance-card strong {
  font-size: 21px;
  margin: 3px 0
}

.ledger-balance-card.due {
  border-left: 4px solid #ef4444
}

.ledger-balance-card.clear {
  border-left: 4px solid #22c55e
}

.empty-ledger {
  text-align: center;
  padding: 55px 15px;
  color: #667085
}

.empty-ledger i {
  font-size: 38px;
  color: #98a2b3
}

.empty-ledger h3 {
  font-size: 17px;
  color: #344054;
  margin: 10px 0 3px
}

@media(max-width:767px) {
  .customer-credit-card {
    grid-template-columns: 1fr 1fr
  }

  .customer-credit-card>div {
    border-right: 0
  }

  .ledger-filter {
    grid-template-columns: 1fr 1fr
  }

  .ledger-filter>div:first-child {
    grid-column: 1/-1
  }

  .ledger-account-card {
    display: block
  }

  .ledger-account-card>div+div {
    margin-top: 10px
  }
}

.register-filter {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto auto;
  gap: 8px;
  align-items: end
}

.payroll-filter {
  grid-template-columns: minmax(190px, 2fr) repeat(4, minmax(135px, 1fr)) auto auto
}

.statement-print-page {
  background: #e9edf3;
  padding: 20px
}

.statement-print-actions {
  max-width: 1080px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.statement-print-actions button {
  border: 0;
  border-radius: 6px;
  background: #155eef;
  color: #fff;
  padding: 9px 15px;
  cursor: pointer
}

.statement-sheet {
  width: 100%;
  max-width: 1080px;
  min-height: 760px;
  margin: auto;
  background: #fff;
  padding: 30px 34px;
  color: #182230;
  box-shadow: 0 5px 24px #1018281f
}

.statement-brand {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 3px solid #17233a;
  padding-bottom: 15px
}

.statement-brand h1 {
  font-size: 23px;
  margin: 0 0 5px;
  text-transform: uppercase
}

.statement-brand p {
  margin: 2px 0;
  color: #475467;
  font-size: 11px
}

.statement-title {
  text-align: right
}

.statement-title h2 {
  color: #155eef;
  font-size: 22px;
  margin: 0 0 6px;
  text-transform: uppercase
}

.statement-title p {
  font-weight: 700;
  color: #344054
}

.statement-account-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin: 16px 0 12px
}

.statement-account,
.statement-closing {
  border: 1px solid #d9e0ea;
  border-radius: 7px;
  padding: 13px;
  background: #f8fafc
}

.statement-account>small,
.statement-closing>small {
  text-transform: uppercase;
  color: #667085;
  font-size: 9px;
  font-weight: 700
}

.statement-account h3 {
  font-size: 17px;
  margin: 4px 0 8px
}

.statement-account dl {
  display: grid;
  grid-template-columns: 75px 1fr;
  margin: 0;
  gap: 3px 8px;
  font-size: 10px
}

.statement-account dt {
  color: #667085
}

.statement-account dd {
  margin: 0;
  font-weight: 600
}

.statement-closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 5px solid #22c55e
}

.statement-closing.due {
  border-left-color: #ef4444;
  background: #fff7f7
}

.statement-closing strong {
  font-size: 23px;
  margin: 5px 0
}

.statement-closing span {
  font-size: 10px;
  color: #667085
}

.statement-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px
}

.statement-summary>div {
  border: 1px solid #dce3ed;
  border-radius: 6px;
  padding: 9px;
  background: #f8fafc
}

.statement-summary small,
.statement-summary b {
  display: block
}

.statement-summary small {
  font-size: 9px;
  color: #667085;
  text-transform: uppercase
}

.statement-summary b {
  font-size: 13px;
  margin-top: 3px
}

.statement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px
}

.statement-table th,
.statement-table td {
  border: 1px solid #d8dee8;
  padding: 7px;
  text-align: right
}

.statement-table th:nth-child(-n+4),
.statement-table td:nth-child(-n+4) {
  text-align: left
}

.statement-table thead th {
  background: #17233a;
  color: #fff;
  text-transform: uppercase;
  font-size: 9px
}

.statement-table tbody tr:nth-child(even) {
  background: #f8fafc
}

.statement-table .opening-row {
  background: #eef4ff
}

.statement-table tfoot th {
  background: #e9eef6;
  font-size: 10px
}

.statement-table .no-transactions {
  text-align: center !important;
  padding: 25px;
  color: #667085
}

.statement-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d8dee8;
  color: #667085;
  font-size: 9px;
  padding-top: 9px;
  margin-top: 18px
}

@media(max-width:767px) {

  .register-filter,
  .payroll-filter {
    grid-template-columns: 1fr 1fr
  }

  .register-filter>div:first-child {
    grid-column: 1/-1
  }

  .statement-sheet {
    padding: 15px;
    min-height: 0
  }

  .statement-brand {
    display: block
  }

  .statement-title {
    text-align: left;
    margin-top: 12px
  }

  .statement-account-grid {
    grid-template-columns: 1fr
  }

  .statement-summary {
    grid-template-columns: 1fr 1fr
  }

  .statement-table {
    font-size: 8px
  }

  .statement-table th,
  .statement-table td {
    padding: 4px
  }

  .statement-print-page {
    padding: 5px
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 8mm
  }

  .statement-print-page {
    padding: 0;
    background: #fff
  }

  .statement-print-actions {
    display: none
  }

  .statement-sheet {
    max-width: none;
    box-shadow: none;
    padding: 0;
    min-height: 0
  }

  .statement-table thead {
    display: table-header-group
  }

  .statement-table tr {
    break-inside: avoid
  }

  .statement-footer {
    position: running(statementFooter)
  }

  body:has(.statement-sheet) .sidebar,
  body:has(.statement-sheet) .topbar,
  body:has(.statement-sheet) .mobile-nav,
  body:has(.statement-sheet) .page-title,
  body:has(.statement-sheet) .ledger-filter,
  body:has(.statement-sheet) .ledger-account-card,
  body:has(.statement-sheet) .ledger-balance-card,
  body:has(.statement-sheet) .panel-tools {
    display: none !important
  }
}

.table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #98a2b3
}

.table>:not(caption)>*>* {
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  padding: .42rem .55rem
}

.table>:not(caption)>*>*:last-child {
  border-right: 0
}

.table tbody tr:nth-child(even)>* {
  background: #f5f7fa
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #dfe5ec !important;
  color: #172033;
  border-color: #98a2b3;
  font-weight: 700
}

.table tfoot th {
  background: #e8edf3 !important;
  border-color: #98a2b3;
  font-weight: 800
}

.table tbody tr:hover>* {
  background: #fff7d6 !important
}

.attendance-filter {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) 1fr 1fr 1fr auto auto;
  gap: 8px;
  align-items: end
}

.salary-slip {
  color: #172033
}

.salary-slip-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #172033;
  padding-bottom: 12px;
  margin-bottom: 14px
}

.salary-slip-head h3,
.salary-slip-head h4 {
  margin: 0
}

.salary-slip-head p,
.salary-slip-head small {
  display: block;
  margin: 3px 0;
  color: #667085
}

.salary-employee {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px
}

.salary-employee>div {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  padding: 9px
}

.salary-employee small,
.salary-employee b {
  display: block
}

.salary-employee small {
  color: #667085;
  font-size: 10px;
  text-transform: uppercase
}

@media(max-width:767px) {
  .attendance-filter {
    grid-template-columns: 1fr 1fr
  }

  .attendance-filter>div:first-child {
    grid-column: 1/-1
  }

  .salary-slip-head {
    display: block
  }

  .salary-slip-head .text-end {
    text-align: left !important;
    margin-top: 10px
  }

  .salary-employee {
    grid-template-columns: 1fr 1fr
  }
}

@media print {
  .table thead th {
    position: static
  }

  .report-toolbar,
  .dataTables_wrapper .dt-layout-row:first-child,
  .dataTables_wrapper .dt-layout-row:last-child,
  .attendance-filter {
    display: none !important
  }

  .table tfoot {
    display: table-footer-group
  }

  .salary-slip {
    padding: 10mm
  }
}

:root {
  --erp-font-size: 14px;
  --erp-panel-padding: 14px;
  --erp-table-py: .42rem;
  --erp-table-px: .55rem;
  --erp-modal-padding: 1rem;
  --erp-control-height: 38px
}

.ui-font-small {
  --erp-font-size: 12px
}

.ui-font-normal {
  --erp-font-size: 14px
}

.ui-font-large {
  --erp-font-size: 16px
}

.ui-font-extra-large {
  --erp-font-size: 18px
}

body {
  font-size: var(--erp-font-size)
}

.panel,
.card-body {
  padding: var(--erp-panel-padding)
}

.table>:not(caption)>*>* {
  padding: var(--erp-table-py) var(--erp-table-px)
}

.modal-body {
  padding: var(--erp-modal-padding)
}

.btn,
.form-control,
.form-select {
  min-height: var(--erp-control-height)
}

.compact-erp {
  --erp-panel-padding: 8px;
  --erp-table-py: .22rem;
  --erp-table-px: .38rem;
  --erp-modal-padding: .65rem;
  --erp-control-height: 31px
}

.compact-erp .page-wrap {
  padding-top: 8px
}

.compact-erp .page-title {
  margin-bottom: 7px
}

.compact-erp .stat-card {
  padding: 8px
}

.compact-erp .modal-header,
.compact-erp .modal-footer {
  padding: .55rem .7rem
}

.compact-erp .btn {
  padding: .25rem .5rem
}

.compact-table td,
.dataTable td {
  font-size: calc(var(--erp-font-size) - 2px) !important
}

.compact-table th,
.dataTable th {
  font-size: calc(var(--erp-font-size) - 3px) !important
}

.dt-container,
.dt-container .form-control,
.dt-container .form-select,
.dt-info,
.dt-paging .page-link {
  font-size: calc(var(--erp-font-size) - 2px) !important
}

.source-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em
}

.source-direct {
  background: #fee2e2;
  color: #b42318
}

.source-token {
  background: #dbeafe;
  color: #175cd3
}

.source-rfid {
  background: #dcfce7;
  color: #15803d
}

.compact-stat span.text-muted {
  display: block;
  font-size: 10px;
  margin-top: 2px
}

.compliance-summary .stat-card {
  min-height: 66px
}

/* Mobile-first transaction entry */
.transaction-mobile-form {
  display: grid;
  gap: 9px
}

.transaction-core-grid,
.transaction-money-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px
}

.transaction-payment-grid,
.transaction-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.compact-field-group>.form-label {
  display: block
}

.segmented-control {
  display: flex;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc
}

.segmented-control label {
  flex: 1;
  margin: 0
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.segmented-control span {
  min-height: 38px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid #cbd5e1;
  font-weight: 700;
  cursor: pointer;
  color: #475467
}

.segmented-control label:last-child span {
  border-right: 0
}

.segmented-control input:checked+span {
  background: #155eef;
  color: #fff;
  box-shadow: inset 0 0 0 1px #155eef
}

.segmented-control label.disabled span {
  opacity: .45;
  cursor: not-allowed
}

.mobile-weight-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc
}

.rfid-inline-info {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 6px 9px;
  border-radius: 6px;
  background: #ecfdf3;
  color: #15803d;
  font-size: 11px
}

.rfid-inline-info b {
  margin-left: auto
}

.customer-credit-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 11px
}

.customer-credit-compact span+span {
  border-left: 1px solid #dbe4f0;
  padding-left: 12px
}

.customer-credit-compact .credit-warning {
  margin: 0 0 0 auto
}

.transaction-more {
  border: 1px solid #e4e9f2;
  border-radius: 8px
}

.transaction-more summary {
  padding: 8px 10px;
  cursor: pointer;
  color: #475467;
  font-weight: 700;
  list-style: none
}

.transaction-more summary i {
  float: right
}

.transaction-more[open] summary i {
  transform: rotate(180deg)
}

.transaction-more-grid {
  padding: 0 9px 9px
}

.compact-camera {
  padding: 0;
  border: 0
}

.compact-camera .camera-preview {
  display: none;
  height: 105px;
  margin-bottom: 6px
}

.compact-camera .camera-preview:has(img) {
  display: flex
}

.compact-camera .camera-upload {
  min-width: 45px;
  display: grid;
  place-items: center
}

.card-actions span {
  display: none
}

@media(max-width:991px) {
  body:has(.sidebar.open):before {
    content: "";
    position: fixed;
    inset: 0;
    background: #0f172a80;
    z-index: 1039
  }

  .sidebar {
    box-shadow: 12px 0 30px #0f172a35
  }
}

@media(max-width:767px) {
  .transaction-mobile-form {
    gap: 7px
  }

  .transaction-core-grid {
    grid-template-columns: 1fr 1fr
  }

  .transaction-core-grid>div:nth-child(2),
  .transaction-core-grid>div:nth-child(3) {
    grid-column: 1/-1
  }

  .transaction-money-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px
  }

  .transaction-payment-grid,
  .transaction-more-grid {
    grid-template-columns: 1fr
  }

  .mobile-weight-grid {
    grid-template-columns: 1fr 1.45fr 1fr;
    gap: 5px;
    padding: 6px
  }

  .transaction-mobile-form .form-label {
    margin-bottom: 2px;
    font-size: 10px
  }

  .transaction-mobile-form .form-control,
  .transaction-mobile-form .form-select,
  .transaction-mobile-form .btn {
    min-height: 40px
  }

  .transaction-mobile-form .select2-container .select2-selection--single {
    height: 40px
  }

  .transaction-mobile-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 38px
  }

  .transaction-mobile-form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px
  }

  .segmented-control span {
    min-height: 42px;
    padding: 6px 4px
  }

  .customer-credit-compact {
    overflow-x: auto;
    gap: 8px;
    white-space: nowrap
  }

  .customer-credit-compact span+span {
    padding-left: 8px
  }

  .customer-credit-compact .credit-warning {
    font-size: 0
  }

  .customer-credit-compact .credit-warning i {
    font-size: 12px
  }

  .transaction-mobile-form+.modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 3
  }

  .modal:has(.transaction-mobile-form) .modal-dialog {
    margin: 0;
    min-height: 100%;
    align-items: stretch
  }

  .modal:has(.transaction-mobile-form) .modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0
  }

  .modal:has(.transaction-mobile-form) .modal-body {
    padding: 8px;
    max-height: calc(100vh - 112px)
  }

  .modal:has(.transaction-mobile-form) .modal-header,
  .modal:has(.transaction-mobile-form) .modal-footer {
    padding: 7px 9px
  }

  .transaction-list-panel {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none
  }

  .transaction-list-panel .panel-tools {
    display: none
  }

  .transaction-cards tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    padding: 10px !important;
    background: #fff
  }

  .transaction-cards td {
    grid-column: 1/-1
  }

  .transaction-cards .card-primary,
  .transaction-cards .card-party,
  .transaction-cards .card-amount,
  .transaction-cards td[data-label=Source],
  .transaction-cards td[data-label=Status] {
    display: block
  }

  .transaction-cards .card-primary {
    grid-column: 1;
    font-size: 13px !important;
    font-weight: 800;
    text-align: left
  }

  .transaction-cards .card-primary:before {
    display: none
  }

  .transaction-cards .card-party {
    grid-column: 1;
    text-align: left
  }

  .transaction-cards .card-party:before {
    display: none
  }

  .transaction-cards .card-amount {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 14px !important;
    font-weight: 800;
    display: flex;
    align-items: center
  }

  .transaction-cards .card-amount:before {
    display: none
  }

  .transaction-cards td[data-label=Source],
  .transaction-cards td[data-label=Status] {
    grid-column: auto;
    text-align: left
  }

  .transaction-cards td[data-label=Source]:before,
  .transaction-cards td[data-label=Status]:before {
    display: none
  }

  .transaction-cards .card-secondary {
    display: none
  }

  .transaction-cards .card-actions {
    display: flex;
    justify-content: space-around;
    grid-column: 1/-1 !important
  }

  .transaction-cards .card-actions:before {
    display: none
  }

  .transaction-cards .card-actions .btn-icon {
    flex: 1;
    min-height: 38px;
    border-right: 1px solid #edf0f4
  }

  .transaction-cards .card-actions .btn-icon:last-child {
    border-right: 0
  }

  .transaction-cards .card-actions span {
    display: inline;
    margin-left: 4px
  }

  .register-filter {
    display: none
  }
}

.sidebar {
  width: 240px;
  transition: width .2s, transform .2s
}

.app-main {
  margin-left: 240px;
  transition: margin-left .2s
}

.sidebar-collapsed .sidebar {
  width: 70px
}

.sidebar-collapsed .app-main {
  margin-left: 70px
}

.sidebar-collapsed .brand>span:last-child,
.sidebar-collapsed .side-nav span,
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .user-box span,
.sidebar-collapsed .user-box>a {
  display: none
}

.sidebar-collapsed .brand,
.sidebar-collapsed .side-nav a,
.sidebar-collapsed .nav-group-toggle,
.sidebar-collapsed .user-box {
  justify-content: center
}

.sidebar-collapsed .side-nav i {
  width: auto
}

.sidebar-collapsed .nav-submenu {
  padding-left: 0
}

.sidebar-collapsed .side-nav a,
.sidebar-collapsed .nav-group-toggle {
  position: relative
}

.sidebar-collapsed .side-nav a:hover:after,
.sidebar-collapsed .nav-group-toggle:hover:after {
  content: attr(title);
  position: absolute;
  left: 62px;
  top: 4px;
  background: #111827;
  color: #fff;
  padding: 7px 9px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 1100
}

.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf0f4;
  margin-bottom: 8px
}

.compact-stat {
  min-height: 68px
}

.day-book-feed>div {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #edf0f4
}

.day-book-feed time {
  color: #667085
}

.return-source-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #dce3ed;
  border-radius: 8px
}

.return-source-card small,
.return-source-card b {
  display: block
}

.outstanding-green {
  background: #ecfdf3
}

.outstanding-yellow {
  background: #fffbeb
}

.outstanding-orange {
  background: #fff7ed
}

.outstanding-red {
  background: #fff1f2
}

@media(max-width:991px) {
  .sidebar {
    width: 220px
  }

  .app-main,
  .sidebar-collapsed .app-main {
    margin-left: 0
  }

  .sidebar-collapsed .sidebar {
    width: 220px
  }

  .sidebar-collapsed .brand>span:last-child,
  .sidebar-collapsed .side-nav span,
  .sidebar-collapsed .nav-chevron,
  .sidebar-collapsed .user-box span,
  .sidebar-collapsed .user-box>a {
    display: initial
  }
}

@media(max-width:767px) {
  .return-source-card {
    grid-template-columns: 1fr 1fr
  }

  .report-toolbar .btn {
    font-size: 0
  }

  .report-toolbar .btn i {
    font-size: 14px
  }
}

.report-print-header,
.report-print-footer {
  display: none
}

@media print {

  .report-toolbar,
  .filter-bar {
    display: none !important
  }

  .report-print-header,
  .report-print-footer {
    display: block
  }

  .report-print-header {
    text-align: center;
    border-bottom: 2px solid #17233a;
    margin-bottom: 10px
  }

  .report-print-header h2,
  .report-print-header h3,
  .report-print-header p {
    margin: 3px
  }

  .report-print-footer {
    text-align: center;
    border-top: 1px solid #aaa;
    margin-top: 10px;
    padding-top: 6px;
    font-size: 9px
  }

  .compact-table thead {
    display: table-header-group
  }

  .compact-table tr {
    break-inside: avoid
  }
}

.camera-capture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.camera-capture {
  border: 1px solid #dce3ed;
  border-radius: 8px;
  padding: 8px
}

.camera-preview {
  height: 115px;
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  overflow: hidden
}

.camera-preview i {
  font-size: 24px
}

.camera-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

@media(max-width:575px) {
  .camera-capture-grid {
    grid-template-columns: 1fr
  }
}

.document-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px
}

.document-images figure {
  margin: 0;
  border: 1px solid #d8dee8;
  padding: 7px
}

.document-images img {
  width: 100%;
  height: 160px;
  object-fit: cover
}

.document-images figcaption {
  text-align: center;
  font-size: 10px;
  margin-top: 5px;
  color: #667085
}

.amount-debit {
  color: #dc2626 !important;
  font-weight: 700
}

.amount-credit {
  color: #16a34a !important;
  font-weight: 700
}

.report-thumb {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #d8dee8
}

.token-status {
  display: inline-block;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700
}

.token-status-open {
  background: #fef3c7;
  color: #b45309
}

.token-status-pending {
  background: #ffedd5;
  color: #c2410c
}

.token-status-loading {
  background: #dbeafe;
  color: #1d4ed8
}

.token-status-loaded,
.token-status-completed {
  background: #dcfce7;
  color: #15803d
}

.token-status-closed {
  background: #dcfce7;
  color: #15803d
}

.token-status-cancelled {
  background: #fee2e2;
  color: #dc2626
}

.token-print-frame {
  width: 100%;
  height: 570px;
  border: 0;
  background: #f3f4f6
}

.dashboard-row-green {
  background: #f0fdf4
}

.dashboard-row-red {
  background: #fff5f5
}

.dashboard-row-green:hover {
  background: #dcfce7 !important
}

.dashboard-row-red:hover {
  background: #fee2e2 !important
}

.dashboard-badge-green {
  background: #dcfce7;
  color: #15803d
}

.dashboard-badge-red {
  background: #fee2e2;
  color: #dc2626
}

.dashboard-row-green td:nth-child(7) {
  color: #15803d;
  font-weight: 700
}

.dashboard-row-red td:nth-child(7) {
  color: #dc2626;
  font-weight: 700
}

.day-book-positive {
  border-left: 3px solid #22c55e;
  background: #f0fdf4
}

.day-book-negative {
  border-left: 3px solid #ef4444;
  background: #fff5f5
}

.day-book-positive b {
  color: #15803d
}

.day-book-negative b {
  color: #dc2626
}

.stat-card-link {
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s
}

.stat-card-link:hover {
  color: inherit;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #10182818
}

.dashboard-collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  color: #172033;
  text-align: left
}

.dashboard-collapse-toggle span {
  font-weight: 800
}

.dashboard-collapse-toggle small {
  margin-right: auto;
  color: #667085
}

.dashboard-collapse-toggle[aria-expanded=true]>.bi-chevron-down {
  transform: rotate(180deg)
}

.day-book-feed>div {
  grid-template-columns: 55px 1fr auto 38px
}

.day-book-print-btn {
  padding: 3px 7px;
  min-height: 26px
}

.quantity-mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.quantity-mode-selector label {
  margin: 0;
  cursor: pointer
}

.quantity-mode-selector input {
  position: absolute;
  opacity: 0
}

.quantity-mode-selector span {
  display: block;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 8px 13px;
  background: #fff;
  font-weight: 600
}

.quantity-mode-selector input:checked+span {
  border-color: #0d6efd;
  background: #eaf2ff;
  color: #0b5ed7;
  box-shadow: 0 0 0 2px #0d6efd20
}

.loading-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 700
}

.loading-status-pending {
  background: #ffedd5;
  color: #c2410c
}

.loading-status-loading {
  background: #dbeafe;
  color: #1d4ed8
}

.loading-status-loaded,
.loading-status-completed {
  background: #dcfce7;
  color: #15803d
}

.loading-status-cancelled {
  background: #fee2e2;
  color: #dc2626
}

.smart-command-panel {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #fff, #f5f7ff)
}

.smart-command-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px
}

.smart-command-head h2 {
  font-size: 14px;
  margin: 0;
  color: #1d4ed8
}

.smart-command-head p {
  margin: 2px 0 0;
  color: #667085;
  font-size: 11px
}

.smart-command-input .form-control {
  font-size: 14px
}

.smart-command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px
}

.smart-command-examples span {
  font-size: 10px;
  font-weight: 800;
  color: #667085;
  text-transform: uppercase
}

.smart-command-examples button {
  border: 1px solid #dbe4f0;
  background: #fff;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  color: #344054
}

.smart-command-result {
  margin-top: 8px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px
}

.smart-ok {
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0
}

.smart-warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a
}

.smart-error {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3
}

@media(max-width:767px) {
  .smart-command-panel {
    padding: 10px !important;
    border-radius: 10px;
    margin-top: 4px
  }

  .smart-command-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px
  }

  .smart-command-head h2 {
    font-size: 13px;
    line-height: 1.1
  }

  .smart-command-head p {
    display: none
  }

  .smart-command-head .btn {
    margin: 0;
    min-height: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 0;
    border-radius: 7px
  }

  .smart-command-head .btn i {
    font-size: 14px
  }

  .smart-command-head .btn:after {
    content: "Clear";
    font-size: 11px;
    margin-left: 4px
  }

  .smart-command-input {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr)46px;
    gap: 0
  }

  .smart-command-input .btn,
  .smart-command-input .form-control {
    height: 42px;
    min-height: 42px
  }

  .smart-command-input .smart-command-mic {
    border-radius: 8px 0 0 8px;
    border-right: 0;
    background: #fff
  }

  .smart-command-input .form-control {
    border-radius: 0;
    font-size: 13px;
    padding: 0 10px;
    min-width: 0
  }

  .smart-command-input .smart-command-send {
    border-radius: 0 8px 8px 0;
    font-size: 0;
    padding: 0;
    display: grid;
    place-items: center
  }

  .smart-command-input .smart-command-send i {
    font-size: 17px;
    margin: 0
  }

  .smart-command-examples {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 7px;
    padding-bottom: 2px;
    scrollbar-width: none
  }

  .smart-command-examples::-webkit-scrollbar {
    display: none
  }

  .smart-command-examples span {
    flex: 0 0 auto;
    font-size: 9px;
    align-self: center
  }

  .smart-command-examples button {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 10px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .smart-command-result {
    font-size: 11px;
    padding: 6px 8px;
    margin-top: 6px
  }

  .input-group>.form-control,
  .input-group>.form-floating,
  .input-group>.form-select {
    width: 100%;
  }
}

.global-ai-widget {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 1065
}

.global-ai-fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #155eef, #7c3aed);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 12px 28px #155eef45
}

.global-ai-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(380px, calc(100vw - 22px));
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  box-shadow: 0 18px 55px #10182830;
  padding: 12px
}

.global-ai-widget.open .global-ai-panel {
  display: block
}

.global-ai-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px
}

.global-ai-head b,
.global-ai-head small {
  display: block
}

.global-ai-head b {
  color: #1d4ed8
}

.global-ai-head small {
  font-size: 11px;
  color: #667085
}

.global-ai-head-actions {
  display: flex;
  gap: 5px
}

.global-ai-head button {
  border: 0;
  background: #f1f5f9;
  border-radius: 7px;
  width: 30px;
  height: 30px
}

.global-ai-mentions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: none
}

.global-ai-mentions::-webkit-scrollbar {
  display: none
}

.global-ai-mentions button {
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  color: #344054
}

.global-ai-guide {
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  border-radius: 10px;
  padding: 7px;
  margin: 2px 0 7px;
  max-height: 185px;
  overflow: auto
}

.global-ai-guide>div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px dashed #dbe4f0
}

.global-ai-guide>div:last-child {
  border-bottom: 0
}

.global-ai-guide b {
  color: #1d4ed8;
  font-size: 11px
}

.global-ai-guide span {
  font-size: 11px;
  color: #475467
}

.global-ai-panel textarea {
  width: 100%;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  padding: 9px;
  resize: none;
  font-size: 13px;
  outline: none
}

.global-ai-panel textarea:focus {
  border-color: #155eef;
  box-shadow: 0 0 0 3px #155eef18
}

.global-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 7px
}

.global-ai-result {
  margin-top: 8px;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px
}

@media(max-width:767px) {
  .global-ai-widget {
    right: 10px;
    bottom: 74px
  }

  .global-ai-fab {
    width: 48px;
    height: 48px;
    font-size: 19px
  }

  .global-ai-panel {
    bottom: 58px;
    width: calc(100vw - 20px);
    padding: 10px
  }

  .global-ai-panel textarea {
    font-size: 13px
  }
}
.modal .modal-content{
      border: 2px solid red;
    background: aliceblue;
}