.card,
.cq-card,
flagship-card .card {
  padding: var(--space-3);
}

.card-grid,
.card-deck,
.row:has(> [class*="col"] > .card),
.row:has(> [class*="col"] > .cq-card) {
  container-type: inline-size;
  container-name: card-parent;
}

@container card-parent (width >= 768px) {
  .card,
  .cq-card,
  flagship-card .card {
    padding: var(--space-4);
  }
}

@container card-parent (width >= 1920px) {
  .card,
  .cq-card,
  flagship-card .card {
    padding: var(--space-5);
  }
}

@media (width >= 768px) {
  .card,
  .cq-card,
  flagship-card .card {
    padding: var(--space-4);
  }
}

@media (width >= 1920px) {
  .card,
  .cq-card,
  flagship-card .card {
    padding: var(--space-5);
  }
}

.card > .card-header,
.modal .card > .card-header {
  padding: var(--space-3) var(--space-4);
}

.card > .card-footer,
.modal .card > .card-footer {
  padding: var(--space-3) var(--space-4);
}

@media (width >= 768px) {
  .card > .card-header,
  .modal .card > .card-header {
    padding: var(--space-4) var(--space-5);
  }

  .card > .card-footer,
  .modal .card > .card-footer {
    padding: var(--space-4) var(--space-5);
  }
}

.modal .modal-header {
  padding: var(--space-4) var(--space-5);
}

.modal .modal-body {
  padding: var(--space-4);
}

.modal .modal-footer {
  padding: var(--space-3) var(--space-5);
}

@media (width >= 768px) {
  .modal .modal-header {
    padding: var(--space-5) var(--space-6);
  }

  .modal .modal-body {
    padding: var(--space-5);
  }

  .modal .modal-footer {
    padding: var(--space-4) var(--space-6);
  }
}

@media (width >= 1366px) {
  .modal .modal-body {
    padding: var(--space-6);
  }
}

.modal-body .card,
.modal-body .flagship-card {
  padding: 0;
}

.table > :not(caption) > * > * {
  padding: var(--space-2-5) var(--space-3);
}

@media (width >= 768px) {
  .table > :not(caption) > * > * {
    padding: var(--space-3) var(--space-4);
  }
}

@media (width >= 1366px) {
  .table > :not(caption) > * > * {
    padding: var(--space-3) var(--space-5);
  }
}

@media (width >= 1920px) {
  .table > :not(caption) > * > * {
    padding: var(--space-4) var(--space-5);
  }
}

.glass-table th,
.glass-table td {
  padding: var(--space-3) var(--space-4);
}

@media (width >= 768px) {
  .glass-table th,
  .glass-table td {
    padding: var(--space-3-5) var(--space-4);
  }
}

@media (width >= 1366px) {
  .glass-table th,
  .glass-table td {
    padding: var(--space-4) var(--space-5);
  }
}

.empty-state,
empty-state {
  padding: clamp(var(--space-6), 8vw, var(--space-12));
}

empty-state[density="compact"] {
  padding: var(--space-4);
}

empty-state[density="compact"] .empty-state-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

empty-state[density="compact"] .empty-state-icon {
  grid-row: 1 / span 2;
  margin: 0;
  font-size: var(--font-size-2xl);
}

empty-state[density="compact"] :is(.empty-state-title, .empty-state-description) {
  margin: 0;
  max-inline-size: none;
  text-align: start;
}

empty-state[density="compact"] [data-empty-state-action] {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media (width < 768px) {
  empty-state[density="compact"] .empty-state-container {
    grid-template-columns: auto minmax(0, 1fr);
  }

  empty-state[density="compact"] [data-empty-state-action] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.container,
.container-fluid,
.container-fluid-safe,
.container-max,
.page-container {
  padding-inline-start: max(var(--layout-gutter), var(--layout-safe-inset-left));
  padding-inline-end: max(var(--layout-gutter), var(--layout-safe-inset-right));
}

:is(.container, .container-fluid, .container-fluid-safe, .container-max, .single-gutter, .page-container)
  :is(.container, .container-fluid, .container-fluid-safe, .container-max, .single-gutter, .page-container) {
  padding-inline-start: 0;
  padding-inline-end: 0;
}


.card:not(.no-hover, .auth-panel):hover,
.cq-card:not(.no-hover, .auth-panel):hover,
flagship-card:not(.no-hover) .card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--color-brand-primary-rgb), 0.3);
  z-index: var(--z-local-raised);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

@media (width < 768px) {
  .card:hover,
  .cq-card:hover,
  flagship-card .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

metric-card:hover .metric-card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-brand-primary-rgb), 0.25);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

@media (width < 768px) {
  metric-card:hover .metric-card {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}



.btn-sm {
  padding: var(--space-2) var(--space-3);
  min-height: var(--btn-height-sm);
}

.btn-lg {
  padding: var(--space-2) var(--space-3);
  min-height: var(--btn-height-lg);
}

@media (width >= 1366px) {
  .btn-lg {
    padding: var(--space-3) var(--space-5);
  }
}

.btn-group .btn {
  margin: 0;
}


.form-control,
.form-select {
  padding: var(--space-2-5) var(--space-3);
  min-height: var(--touch-target-min);
}

.form-control.form-control-sm,
.form-select.form-select-sm {
  font-size: var(--font-size-base);
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
}

@media (width >= 768px) {
  .form-control,
  .form-select {
    padding: var(--space-3) var(--space-4);
  }

  .form-control.form-control-sm,
  .form-select.form-select-sm {
    padding: 0.25rem 0.5rem;
  }
}

.input-group {
  gap: var(--space-2);
}

.input-group .input-group-text {
  padding: var(--space-2-5) var(--space-3);
}

@media (width >= 768px) {
  .input-group .input-group-text {
    padding: var(--space-3) var(--space-4);
  }
}


h1, .h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
}

h2, .h2 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
}

h3, .h3 {
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
}

h4, .h4 {
  font-size: clamp(1.125rem, 3vw, 1.25rem);
}

body {
  font-size: clamp(0.9375rem, 2vw, 1rem);
}


.mb-responsive {
  margin-bottom: var(--space-3);
}

@media (width >= 768px) {
  .mb-responsive {
    margin-bottom: var(--space-4);
  }
}

@media (width >= 1366px) {
  .mb-responsive {
    margin-bottom: var(--space-5);
  }
}


.page-container {
  padding-block: var(--space-3);
}

@media (width >= 768px) {
  .page-container {
    padding-block: var(--space-4);
  }
}

@media (width >= 1366px) {
  .page-container {
    padding-block: var(--space-5);
  }
}

.section {
  padding-block: var(--space-6);
}

@media (width >= 768px) {
  .section {
    padding-block: var(--space-8);
  }
}

@media (width >= 1366px) {
  .section {
    padding-block: var(--space-10);
  }
}

@media (width >= 1920px) {
  .section {
    padding-block: var(--space-12);
  }
}


.navbar {
  padding: var(--space-2) var(--space-3);
  min-height: var(--navbar-height-mobile);
}

@media (width >= 768px) {
  .navbar {
    padding: var(--space-3) var(--space-4);
    min-height: var(--navbar-height);
  }
}

.navbar .dropdown-menu {
  padding: var(--space-2);
}

.navbar .dropdown-item {
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target-min);
}


.pagination {
  gap: var(--space-1);
}

.page-link {
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

@media (width < 768px) {
  .page-link {
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--font-size-sm);
  }
}


.badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-2xs);
}

@media (width >= 768px) {
  .badge {
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--font-size-xs);
  }
}

.chip {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

@media (width < 768px) {
  .chip {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-xs);
  }
}


.toast {
  padding: var(--space-3);
  max-width: min(90vw, var(--toast-max-width));
}

@media (width < 768px) {
  .modal:not(.settings-modal) {
    padding-top: var(--space-3);
    padding-inline-start: max(var(--layout-gutter), var(--layout-safe-inset-left));
    padding-inline-end: max(var(--layout-gutter), var(--layout-safe-inset-right));
    padding-bottom: max(var(--layout-gutter), var(--layout-safe-inset-bottom));
  }

  .modal:not(.settings-modal):has(> .modal-dialog.modal-fullscreen-sm-down) {
    padding: 0;
  }

  .modal.fade:not(.settings-modal) .modal-dialog {
    transform: translate3d(0, 104%, 0);
    opacity: 1;
  }

  .modal.show:not(.settings-modal) .modal-dialog {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .modal:not(.settings-modal) .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: calc(var(--app-viewport-height) - var(--space-3));
    display: flex;
    align-items: flex-end;
    pointer-events: none;
  }

  .modal:not(.settings-modal) .modal-content {
    width: 100%;
    max-height: min(86vh, calc(var(--app-viewport-height) - var(--space-10)));
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    border-bottom: 0;
    overflow: auto;
    pointer-events: auto;
  }
}

@media (width >= 768px) {
  .toast {
    padding: var(--space-4);
  }
}


.alert {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (width >= 768px) {
  .alert {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
}


.list-group-item {
  padding: var(--space-3);
  min-height: var(--touch-target-min);
}

@media (width >= 768px) {
  .list-group-item {
    padding: var(--space-3) var(--space-4);
  }
}


.accordion-button {
  padding: var(--space-3);
  min-height: var(--touch-target-min);
}

@media (width >= 768px) {
  .accordion-button {
    padding: var(--space-3) var(--space-4);
  }
}

.accordion-body {
  padding: var(--space-3);
}

@media (width >= 768px) {
  .accordion-body {
    padding: var(--space-4);
  }
}


.dropdown-menu {
  padding: var(--space-2);
}

.dropdown-item {
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target-min);
}

@media (width >= 768px) {
  .dropdown-menu {
    padding: var(--space-2);
  }

  .dropdown-item {
    padding: var(--space-2-5) var(--space-3);
  }
}


.nav-tabs .nav-link {
  padding: var(--space-2-5) var(--space-3);
  min-height: var(--touch-target-min);
}

@media (width >= 768px) {
  .nav-tabs .nav-link {
    padding: var(--space-3) var(--space-4);
  }
}

.tab-content {
  padding: var(--space-3) 0;
}

@media (width >= 768px) {
  .tab-content {
    padding: var(--space-4) 0;
  }
}



img:not(.cloud-tile__thumb) {
  max-width: 100%;
  height: auto;
}



@media print {
  .card,
  .modal-body,
  .table > :not(caption) > * > * {
    padding: var(--space-2);
  }

  .btn,
  .dropdown,
  .nav-tabs,
  .pagination {
    display: none;
  }

  .card,
  .table {
    page-break-inside: avoid;
  }
}


@media (prefers-contrast: more) {
  .card,
  .btn,
  .form-control,
  .table {
    border-width: 2px;
  }

  *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}


@media (prefers-color-scheme: dark) {
}


@media (width < 768px) {
  .modal.show .modal-dialog:not(.modal-fullscreen) .modal-content {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, var(--space-4));
  }
  .modal.show .modal-dialog:not(.modal-fullscreen) .modal-content::before {
    content: '';
    display: block;
    max-width: var(--space-9);
    height: var(--space-1);
    background: var(--color-border, var(--color-border));
    border-radius: var(--radius-sm);
    margin: var(--space-2) auto var(--space-1);
    opacity: 0.6;
  }
}


img:not(.cloud-tile__thumb),
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

p img,
span img,
a img {
  display: inline-block;
}

@media (width < 768px) {
  input,
  textarea,
  select,
  .form-control,
  .form-select {
    font-size: max(16px, var(--font-size-base));
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .safe-area-top {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .safe-area-left {
    padding-left: max(var(--layout-gutter), env(safe-area-inset-left));
  }

  .safe-area-right {
    padding-right: max(var(--layout-gutter), env(safe-area-inset-right));
  }
}

@media (width < 768px) {
  .navbar-collapse {
    max-width: 100%;
  }

  .navbar-toggler {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}

.form-check-input {
  flex-shrink: 0;
}

@media (width < 768px) {
  .modal-dialog:not(.modal-fullscreen) {
    max-width: 100%;
    margin: 0;
  }
}


.cq-dashboard,
.container-fluid:has(> .row > [class*="col"]) {
  container-type: inline-size;
  container-name: dashboard;
}

.cq-dashboard > .row > [class*="col"],
.container-fluid > .row > [class*="col"]:has(.card) {
  container-type: inline-size;
  container-name: panel;
}

@container panel (width < 768px) {
  .card .card-body {
    padding: var(--space-2);
  }

  .card .card-title {
    font-size: var(--font-size-sm);
  }

  .card .btn {
    width: 100%;
    justify-content: center;
  }
}

@container panel (width >= 768px) and (width < 1366px) {
  .card .card-body {
    padding: var(--space-3);
  }
}


img[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.card:empty,
.card[aria-busy="true"] {
  min-height: var(--height-xs);
  contain-intrinsic-block-size: auto var(--height-xs);
}

.accordion-collapse {
  contain-intrinsic-block-size: auto var(--height-xs);
}

.dropdown-menu[aria-expanded="true"] {
  contain-intrinsic-block-size: auto var(--height-sm);
}

.toast-container:empty {
  min-height: 0;
  contain-intrinsic-block-size: 0;
}

.list-group:empty,
.list-group[aria-busy="true"] {
  min-height: var(--height-xs);
  contain-intrinsic-block-size: auto var(--height-xs);
}