@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
[data-disabled-nav] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

[data-disabled-nav]:hover {
  background-color: transparent !important;
}

.aml-analytics {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem;
}

.aml-analytics__charts,
.aml-analytics__tables {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Tables lead in the left column; charts follow on the right. */
.aml-analytics__tables {
  grid-column: 1;
  grid-row: 1;
}

.aml-analytics__charts {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 1279px) {
  .aml-analytics {
    grid-template-columns: minmax(0, 1fr);
  }

  .aml-analytics__tables,
  .aml-analytics__charts {
    grid-column: 1;
    grid-row: auto;
  }
}

.aml-analytics__empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.aml-analytics__section {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
}

.aml-analytics__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.aml-analytics__control-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.aml-analytics__select {
  width: auto;
  padding-right: 1.75rem;
}

.aml-analytics__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #16213e;
  margin-bottom: 0.75rem;
}

.aml-analytics__subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  margin: -0.5rem 0 0.75rem;
}

.aml-analytics__table--trend {
  margin-top: 1rem;
}

.aml-analytics__table--trend th,
.aml-analytics__table--trend td {
  white-space: nowrap;
}

.aml-analytics__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.aml-analytics__table th {
  background-color: #16213e;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.625rem;
}

.aml-analytics__table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid #e5e7eb;
}

.aml-analytics__table tbody tr:nth-child(even) {
  background-color: #f4f6fa;
}

.aml-analytics__description {
  color: #6b7280;
}

select[id^='aml_cft_board_analytics_'][id$='_range'] {
  width: auto;
  min-width: 8rem;
  padding-right: 2.0rem;
}

.aml-analytics__num,
.aml-analytics__table th.aml-analytics__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aml-analytics__total td {
  font-weight: 700;
  background-color: #eef1f6;
  border-top: 2px solid #16213e;
}

.aml-analytics__pct--good {
  color: #2e7d32;
  font-weight: 600;
}

.aml-analytics__pct--warn {
  color: #b45309;
  font-weight: 600;
}

.aml-analytics__pct--bad {
  color: #c62828;
  font-weight: 600;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */