/*
Design System - RSoft Gestao
Unified frontend language for all screens.
*/

:root {
  --primary: #2e2e33;
  --primary-dark: #1c1c20;
  --primary-light: #44444d;
  --accent: #cba14a;
  --accent-2: #e3c26a;

  --bg: #f5f5f7;
  --surface: #ffffff;

  --text-primary: #2c2c2c;
  --text-secondary: #7f8c8d;
  --divider: #e2e3e7;

  --success: #27ae60;
  --error: #e74c3c;
  --warning: #f39c12;
  --info: #3498db;

  --primary-rgb: 46, 46, 51;
  --primary-dark-rgb: 28, 28, 32;
  --primary-light-rgb: 68, 68, 77;
  --accent-rgb: 203, 161, 74;
  --accent-2-rgb: 227, 194, 106;
  --success-rgb: 39, 174, 96;
  --error-rgb: 231, 76, 60;
  --warning-rgb: 243, 156, 18;
  --info-rgb: 52, 152, 219;

  --ds-font-display: "Sora", "Trebuchet MS", sans-serif;
  --ds-font-sans: "Manrope", "Segoe UI", sans-serif;
  --ds-font-mono: "Consolas", "Courier New", monospace;

  --ds-color-bg: var(--bg);
  --ds-color-bg-soft: #ececf0;
  --ds-color-surface: var(--surface);
  --ds-color-surface-soft: #f9f9fb;
  --ds-color-surface-ink: #f0f0f4;
  --ds-color-border: var(--divider);

  --ds-color-text: var(--text-primary);
  --ds-color-text-muted: var(--text-secondary);
  --ds-color-text-inverse: #f6f6f8;

  --ds-color-primary-50: #efeff1;
  --ds-color-primary-100: #dadade;
  --ds-color-primary-200: #b8b8c2;
  --ds-color-primary-300: #9494a1;
  --ds-color-primary-400: #6e6e7e;
  --ds-color-primary-500: var(--primary-light);
  --ds-color-primary-600: #3a3a42;
  --ds-color-primary-700: var(--primary);
  --ds-color-primary-800: #252529;
  --ds-color-primary-900: var(--primary-dark);

  --ds-color-secondary-500: var(--accent-2);
  --ds-color-secondary-700: var(--accent);

  --ds-color-success: var(--success);
  --ds-color-warning: var(--warning);
  --ds-color-error: var(--error);
  --ds-color-info: var(--info);

  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 28px;
  --ds-space-8: 32px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 18px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 5px 14px rgba(var(--primary-dark-rgb), 0.08);
  --ds-shadow-md: 0 14px 30px rgba(var(--primary-dark-rgb), 0.14);
  --ds-shadow-lg: 0 24px 48px rgba(var(--primary-dark-rgb), 0.2);
}

body[data-theme="dark"],
body[data-background-color="dark"],
body[data-background-color="dark2"] {
  --ds-color-bg: var(--primary-dark);
  --ds-color-bg-soft: #252529;
  --ds-color-surface: var(--primary);
  --ds-color-surface-soft: #252529;
  --ds-color-surface-ink: #303038;
  --ds-color-border: var(--primary-light);

  --ds-color-text: #f5f5f7;
  --ds-color-text-muted: #bdc3c7;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--ds-font-sans);
  color: var(--ds-color-text);
  background:
    radial-gradient(circle at 10% 8%, rgba(var(--accent-rgb), 0.16), transparent 28%),
    radial-gradient(circle at 88% 5%, rgba(var(--primary-rgb), 0.1), transparent 30%),
    linear-gradient(160deg, #f5f5f7 0%, #f8f8fa 42%, #efeff2 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(var(--primary-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

a {
  color: var(--ds-color-primary-700);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--ds-color-primary-800);
}

.wrapper {
  min-height: 100vh;
}

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

.container,
.page-inner {
  position: relative;
}

.page-inner {
  padding-top: 20px;
  padding-bottom: 28px;
}

.app-page .page-inner.ds-page-shell {
  padding-top: 26px;
  padding-bottom: 34px;
}

.app-page .page-inner.ds-page-shell > .row {
  row-gap: 18px;
}

.app-page .card.card-round:not(.auth-card):not(.auth-brand-card) {
  position: relative;
  overflow: hidden;
}

.app-page .card.card-round:not(.auth-card):not(.auth-brand-card)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 95px;
  pointer-events: none;
  opacity: 0.22;
  background: radial-gradient(circle at right top, rgba(var(--accent-rgb), 0.28), transparent 70%);
}

.app-page .card .card-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-filter-row {
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 247, 0.94));
  padding: 12px;
  margin: 2px 0 8px;
}

.ds-filter-row .col-form-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.app-page input[type="date"] {
  appearance: auto;
  -webkit-appearance: auto;
  padding-right: 34px;
  cursor: pointer;
}

.app-page input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.app-page #salesChart,
.app-page #productsPie,
.app-page #clientsAreaStack {
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 245, 247, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.sidebar,
.sidebar[data-background-color="dark"],
.sidebar[data-background-color="dark2"],
.main-header .logo-header,
.main-header {
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
}

.sidebar,
.sidebar[data-background-color="dark"],
.sidebar[data-background-color="dark2"] {
  border-right: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: 14px 0 36px rgba(var(--primary-dark-rgb), 0.32);
}

.sidebar .sidebar-wrapper,
.sidebar[data-background-color="dark"] .sidebar-wrapper,
.sidebar[data-background-color="dark2"] .sidebar-wrapper {
  background: transparent !important;
}

.sidebar .logo-header,
.sidebar[data-background-color="dark"] .logo-header,
.sidebar[data-background-color="dark2"] .logo-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar .btn-toggle,
.main-header .btn-toggle {
  color: var(--accent-2);
}

.sidebar .nav-section {
  margin-top: 20px;
}

.sidebar .text-section {
  color: rgba(255, 255, 255, 0.64) !important;
  font-family: var(--ds-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.sidebar .nav-secondary .nav-item > a,
.sidebar[data-background-color="dark"] .nav-secondary .nav-item > a,
.sidebar[data-background-color="dark2"] .nav-secondary .nav-item > a {
  margin: 3px 10px;
  border-radius: 10px;
  color: rgba(245, 245, 247, 0.86) !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sidebar .nav-secondary .nav-item > a i,
.sidebar .nav-secondary .nav-item > a p,
.sidebar .nav-secondary .nav-item > a .caret,
.sidebar .nav-secondary .nav-item > a .sub-item {
  color: inherit !important;
}

.sidebar .nav-secondary .nav-item > a:hover,
.sidebar .nav-secondary .nav-item.active > a,
.sidebar .nav-secondary .nav-item .collapse.show + a,
.sidebar[data-background-color="dark"] .nav-secondary .nav-item > a:hover,
.sidebar[data-background-color="dark"] .nav-secondary .nav-item.active > a,
.sidebar[data-background-color="dark"] .nav-secondary .nav-item .collapse.show + a,
.sidebar[data-background-color="dark2"] .nav-secondary .nav-item > a:hover,
.sidebar[data-background-color="dark2"] .nav-secondary .nav-item.active > a,
.sidebar[data-background-color="dark2"] .nav-secondary .nav-item .collapse.show + a {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.12));
  color: #ffffff !important;
  transform: translateX(2px);
}

.sidebar .nav .nav-collapse li > a {
  margin: 2px 14px;
  border-radius: 9px;
  color: rgba(245, 245, 247, 0.78) !important;
}

.sidebar .nav .nav-collapse li > a:hover {
  background-color: rgba(var(--accent-rgb), 0.14);
  color: #ffffff !important;
}

.ds-logout-link,
.ds-logout-link i,
.ds-logout-link p {
  color: var(--error) !important;
}

.ds-logout-link:hover {
  background: rgba(var(--error-rgb), 0.14) !important;
}

.ds-main-header {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 12px 28px rgba(var(--primary-dark-rgb), 0.28);
}

.ds-main-header-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 0 18px;
}

.ds-main-header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 320px);
}

.ds-main-header-right {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 40vw;
}

.ds-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  white-space: nowrap;
}

.ds-brand-lockup.logo {
  width: auto;
  height: auto;
  justify-content: flex-start;
  position: static !important;
  left: auto !important;
  transform: none !important;
}

.ds-brand-logo {
  height: 7.1rem !important;
  width: auto;
}

.ds-env-chip,
.ds-matrix-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ds-radius-pill);
  padding: 4px 10px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ds-env-chip {
  background-color: rgba(var(--info-rgb), 0.2);
  border: 1px solid rgba(var(--info-rgb), 0.44);
}

.ds-matrix-chip {
  color: var(--accent-2);
}

.ds-header-toggle {
  position: absolute !important;
  top: 0;
  left: 18px;
  right: auto !important;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 100;
}

.ds-user-auth {
  font-size: 0.94rem;
  font-weight: 700;
  color: #f5f5f7 !important;
  text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.45);
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-user-auth:hover {
  background-color: rgba(var(--accent-rgb), 0.16);
}

.card,
.ds-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--divider);
  box-shadow: var(--ds-shadow-md);
  background: linear-gradient(180deg, var(--surface), #fbfbfc);
  backdrop-filter: blur(2px);
}

.card-header {
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  background: transparent;
}

.card-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ds-font-display);
  letter-spacing: 0.01em;
}

.card-title {
  color: var(--text-primary);
  font-weight: 700;
}

.form-control:not(.select2-search__field),
.form-select,
textarea,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.ds-input,
.ds-select,
.ds-textarea {
  border-radius: var(--ds-radius-md) !important;
  border: 1px solid var(--ds-color-border) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  min-height: 42px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control:not(.select2-search__field):focus,
.form-select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.75) !important;
  box-shadow: 0 0 0 0.22rem rgba(var(--accent-rgb), 0.2) !important;
  outline: none;
}

.select2-dropdown {
  border-radius: 12px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.16) !important;
  overflow: hidden;
  box-shadow: var(--ds-shadow-md);
}

.select2-results__option--highlighted[aria-selected] {
  background-color: rgba(var(--accent-rgb), 0.18) !important;
  color: var(--text-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
  display: flex;
  align-items: center;
  min-height: 42px !important;
  padding: 4px 10px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  margin: 0 !important;
}

.select2-container--bootstrap-5 .select2-search--inline {
  float: none;
}

.select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 1.45rem !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 8ch !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 2055 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.16) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.btn,
.ds-btn {
  border-radius: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.btn:hover,
.ds-btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.ds-btn:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.34);
  outline-offset: 2px;
}

.btn-primary,
.ds-btn-primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(130deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 8px 20px rgba(var(--primary-dark-rgb), 0.32);
}

.btn-primary:hover,
.ds-btn-primary:hover {
  background: linear-gradient(130deg, var(--primary) 0%, var(--primary-light) 100%);
}

.btn-secondary,
.ds-btn-secondary {
  border-color: transparent;
  color: var(--primary-dark);
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
}

.btn-outline-dark {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: var(--primary);
}

.table {
  color: var(--text-primary);
  border-color: var(--divider);
}

.table > :not(caption) > * > * {
  border-bottom-width: 1px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: #f2f2f6;
}

.table thead th {
  border-bottom: 1px solid var(--divider);
  font-family: var(--ds-font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(var(--accent-rgb), 0.12);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 10px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text-primary);
  padding: 6px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: transparent !important;
  background: linear-gradient(130deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: rgba(var(--accent-rgb), 0.35) !important;
  background: rgba(var(--accent-rgb), 0.16) !important;
  color: var(--text-primary) !important;
}

.modal-content,
.ds-modal-content {
  border-radius: 16px;
  border: 1px solid var(--divider);
  box-shadow: var(--ds-shadow-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
}

.modal-header,
.modal-footer {
  border-color: rgba(var(--primary-rgb), 0.16);
}

footer.footer,
.auth-footer {
  border-top: 1px solid var(--divider);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
}

footer .copyright {
  color: var(--text-secondary);
}

.loading-screen {
  background:
    radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.14), transparent 35%),
    radial-gradient(circle at 88% 16%, rgba(var(--primary-rgb), 0.14), transparent 34%),
    var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.loading-icon {
  border: 4px solid rgba(var(--primary-rgb), 0.28);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  animation: ds-spin 1s linear infinite;
}

@keyframes ds-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.auth-page {
  min-height: 100vh;
  background:
    linear-gradient(140deg, #1f2427 0%, #2a3034 52%, #3a2c25 100%);
}

.auth-page::before {
  opacity: 0;
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-container {
  max-width: 1160px;
  padding-top: 48px;
  padding-bottom: 120px;
}

.auth-inner {
  padding-top: 24px;
}

.auth-card {
  background: linear-gradient(175deg, #ffffff, #f8f8fa);
  border: 1px solid var(--divider);
}

.auth-subtitle {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.auth-brand-card {
  color: #f7f7fa;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background:
    linear-gradient(145deg, rgba(var(--primary-dark-rgb), 0.94), rgba(var(--primary-rgb), 0.94)),
    radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.28), transparent 55%);
}

.auth-brand-title {
  color: var(--accent-2);
  font-size: 1.55rem;
}

.auth-brand-copy {
  color: rgba(245, 245, 247, 0.86);
  line-height: 1.6;
}

.auth-logo.logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 210px;
  margin: 0 auto;
}

.auth-submit {
  min-height: 46px;
}

.cursor-pointer {
  cursor: pointer;
}

.text-color-deleted {
  color: var(--error) !important;
}

.ds-text-xs { font-size: 0.75rem; }
.ds-text-sm { font-size: 0.875rem; }
.ds-text-md { font-size: 1rem; }
.ds-text-lg { font-size: 1.125rem; }
.ds-text-xl { font-size: 1.25rem; }
.ds-text-2xl { font-size: 1.5rem; }
.ds-text-3xl { font-size: 1.875rem; }
.ds-text-4xl { font-size: 2.25rem; }
.ds-text-5xl { font-size: 3rem; }

.ds-font-regular { font-weight: 400; }
.ds-font-medium { font-weight: 500; }
.ds-font-semibold { font-weight: 600; }
.ds-font-bold { font-weight: 700; }

.ds-text-primary { color: var(--ds-color-primary-700); }
.ds-text-secondary { color: var(--ds-color-secondary-700); }
.ds-text-muted { color: var(--ds-color-text-muted); }
.ds-text-success { color: var(--success); }
.ds-text-warning { color: var(--warning); }
.ds-text-error { color: var(--error); }
.ds-text-info { color: var(--info); }

.ds-bg-primary { background-color: var(--ds-color-primary-700); color: #fff; }
.ds-bg-secondary { background-color: var(--ds-color-secondary-700); color: #fff; }
.ds-bg-success { background-color: var(--ds-color-success); color: #fff; }
.ds-bg-warning { background-color: var(--ds-color-warning); color: var(--primary-dark); }
.ds-bg-error { background-color: var(--ds-color-error); color: #fff; }
.ds-bg-info { background-color: var(--ds-color-info); color: #fff; }
.ds-bg-surface { background-color: var(--ds-color-surface); }
.ds-bg-muted { background-color: var(--ds-color-surface-soft); }

.ds-m-0 { margin: var(--ds-space-0); }
.ds-m-1 { margin: var(--ds-space-1); }
.ds-m-2 { margin: var(--ds-space-2); }
.ds-m-3 { margin: var(--ds-space-3); }
.ds-m-4 { margin: var(--ds-space-4); }
.ds-m-5 { margin: var(--ds-space-5); }
.ds-m-6 { margin: var(--ds-space-6); }
.ds-m-7 { margin: var(--ds-space-7); }
.ds-m-8 { margin: var(--ds-space-8); }

.ds-mt-1 { margin-top: var(--ds-space-1); }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-3 { margin-top: var(--ds-space-3); }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-5 { margin-top: var(--ds-space-5); }
.ds-mt-6 { margin-top: var(--ds-space-6); }

.ds-mb-1 { margin-bottom: var(--ds-space-1); }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-3 { margin-bottom: var(--ds-space-3); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-5 { margin-bottom: var(--ds-space-5); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }

.ds-p-0 { padding: var(--ds-space-0); }
.ds-p-1 { padding: var(--ds-space-1); }
.ds-p-2 { padding: var(--ds-space-2); }
.ds-p-3 { padding: var(--ds-space-3); }
.ds-p-4 { padding: var(--ds-space-4); }
.ds-p-5 { padding: var(--ds-space-5); }
.ds-p-6 { padding: var(--ds-space-6); }
.ds-p-7 { padding: var(--ds-space-7); }
.ds-p-8 { padding: var(--ds-space-8); }

.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-5 { gap: var(--ds-space-5); }

.ds-border { border: 1px solid var(--ds-color-border); }
.ds-rounded-sm { border-radius: var(--ds-radius-sm); }
.ds-rounded-md { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }

@media (max-width: 991px) {
  body::before {
    opacity: 0.18;
  }

  .page-inner {
    padding-top: 12px;
  }

  .ds-user-auth {
    font-size: 0.82rem;
    padding: 6px 8px;
  }

  .ds-main-header-shell {
    min-height: 64px;
    padding: 0 10px;
  }

  .ds-main-header-center {
    max-width: calc(100% - 180px);
  }

  .ds-main-header-right {
    right: 10px;
    max-width: 44vw;
  }

  .ds-header-toggle {
    left: 10px;
  }

  .auth-container {
    padding-top: 24px;
  }

  .auth-footer {
    position: static !important;
  }

  .app-page .page-inner.ds-page-shell {
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .ds-filter-row {
    padding: 10px;
  }

  .ds-filter-row > [class^="col-"],
  .ds-filter-row > [class*=" col-"] {
    width: 100%;
  }
}