/*
 * App-specific exceptions.
 * Keep this file small and prefer Bootstrap utilities before adding new hooks.
 */

/* ===== Usage Dashboard ===== */

.form-header-label {
  font-weight: 400;
  line-height: 22px !important;
  font-size: 14px;
  font-style: normal;
  color: var(--Blue-Blue-1, #036ac5);
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.usage-container {
  display: flex;
  padding: 30px 41px 40px 41px !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 20px;
  border: 3px solid var(--Blue-Blue-3, #2595df);
  background: #fff;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.form-header-input-group {
  display: flex;
  height: 75px;
  flex-direction: column;
  align-items: start;
  gap: 5px !important;
}

.form-header-input-group .form-select {
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  border-radius: 8px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23036AC5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color: var(--Blue-Blue-4, #2f5496);
}

.form-header-input-group .form-control {
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  border-radius: 8px;
  background-color: transparent;
}

.form-header-input-group .form-control:disabled {
  background-color: transparent;
}

.usage-overview-card .form-select {
  border-radius: 8px;
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23036AC5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.usage-overview-card .form-control {
  border-radius: 8px;
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  background-color: transparent;
}

.form-header-input-label {
  color: var(--Blue-Blue-4, #2f5496);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500 !important;
}

.data-form-field {
  padding: 10px 16px !important;
  height: 46px !important;
}

.form-header-input-group .form-control.usage-search-input-icon {
  background-image: url("/assets/images/icon-search.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding: 10px 40px 10px 16px !important;
}

.form-header-input-group .form-control.search-placeholder::placeholder {
  font-family: "Inter" !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--Blue-Blue-4, #2f5496);
  letter-spacing: 0.32px;
}

.form-label-usage-page {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0px;
}

.form-label-user {
  color: #356aad;
}

.reset-all-button-text {
  color: var(--Blue-Blue-4, #2f5496);
  font-family: "Poppins";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin: 0;
}

th.data-table-header-label {
  font-family: "Poppins" !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 22.5px !important;
  letter-spacing: 0.5px !important;
}

.page-count-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0px !important;
  color: var(--Blue-Blue-4, #2f5496);
}

/* Include `.table` so specificity beats Bootstrap `.table tbody .small { color: … !important }`. */
.usage-users-table .table thead > tr > th {
  background-color: #2f4f97 !important;
  color: #fff !important;
}

.usage-users-table {
  border-radius: 8px !important;
  border: 1.75px solid var(--Blue-Blue-1, #036ac5) !important;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.usage-users-table .table tbody,
.usage-users-table .table tbody > tr > td {
  color: var(--Blue-Blue-4, #2f5496) !important;
  font-family: Inter !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  border-bottom: 1px solid var(--Blue-Blue-4, #2f5496) !important;
}

.usage-view-details-btn {
  border: 1px solid var(--Blue-Blue-1, #036ac5) !important;
  color: #343434;
  background-color: #ffffff;
  height: 33px;
  padding: 0 10px;
  gap: 5px;
  border-radius: 80px;
  font-family: "Nunito";
  font-weight: 800;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0%;
  text-align: center;
}

.usage-card-body {
  display: flex;
  padding: 30px 41px !important;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 20px !important;
}

.usage-card-body-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}

.usage-users-table .table thead > tr {
  height: 42px;
}

.usage-users-table .table thead > tr > th {
  height: 42px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.usage-users-table .table tbody > tr > td {
  border-color: #d9e2f5;
  height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.users-count-text {
  color: var(--Blue-Blue-4, #2f5496);
  font-weight: 600;
  line-height: 24px;
  padding: 0 5px;
}

.usage-user-name {
  color: var(--Neutral-Black, #343434);
  font-family: Poppins;
  font-size: 20px !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 27px;
}

.usage-user-email {
  color: var(--Neutral-Gray-1, #62666d);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.usage-overview-card {
  color: var(--Blue-Blue-4, #2f5496);
  display: flex;
  padding: 15px 17px 12px 17px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  align-self: stretch;
  border-radius: 8px !important;
  border: 1.75px solid var(--Blue-Blue-1, #036ac5);
}

.table-pagination {
  border-top: solid 2px rgb(8, 58, 80);
}
.table-pagination select {
  border: none;
}
.table-pagination-btn {
  color: var(--Blue-Blue-4, #2f5496);
  background-color: var(--Neutral-White, #fff);
  border-radius: 4px;
  height: 31px;
  border: 1px solid #e5e7eb !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.table-pagination-btn:disabled {
  opacity: 0.5;
}

.pagination-bar {
  color: var(--Blue-Blue-4, #2f5496);
  border-top: 1.75px solid var(--Blue-Blue-1, #036ac5);
  gap: 40px;
  padding: 10px 20px;
}

/* Page header with background image */
.page-header-bg {
  background: linear-gradient(180deg, #000e26 0%, #7ea4ee 55%, #ffffff 100%);
}

.page-header-banner {
  position: relative;
  padding: 65px 0 80px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: url("/assets/images/users/user_banner.png") center top / cover no-repeat;
  height: 190px !important;
}

.usage-statistics-back-anchor {
  position: absolute;
  left: 100px;
  top: 24px;
  z-index: 1;
}

.page-header-text {
  height: 102px !important;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  padding: 0 0 0 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

/* Matches vertical space of the back link row on user-usage-page (padding + one line + gap before h1). */
.page-header-banner-lead-spacer {
  flex-shrink: 0;
  padding: 20px 0 0 44px;
  min-height: 24px;
  box-sizing: border-box;
}

.page-content-card {
  margin-top: -36px;
  position: relative;
  z-index: 1;
  border: 3px solid #2b8ec9;
  background-color: #f8f9fa;
}

/* Usage statistic section cards */
.usage-section-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
  border: 1.75px solid var(--Blue-Blue-1, #036ac5);
  overflow: hidden;
}

.return-btn-color {
  color: var(--Neutral-White, #fff);
}

.usage-section-card .card-header {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9.5px 16px;
}

.usage-section-card tbody {
  font-size: 14px;
}

.usage-table {
  margin-bottom: 0;
}

.usage-table thead th {
  padding: 13.5px 16px !important;
  background: var(--Blue-Blue-4, #2f5496);
  color: var(--Neutral-White, #fff);
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 22.5px;
}

.usage-table tbody td {
  padding-left: 16px !important;
  padding-right: 16px !important;
  color: var(--Blue-Blue-4, #2f5496);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-bottom: 1px solid var(--Blue-Blue-4, #2f5496);
}

/* Usage summary: scope layout + metrics under outer .usage-summary */
.usage-summary > .card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  padding: 20px 25px;
}

.usage-summary > .card-body .usage-metric-card {
  border-radius: 5px;
  border: 1px solid var(--Blue-Blue-1, #036ac5);
  min-height: 75px;
  height: 100%;
}

.usage-summary .usage-metric-value--requests {
  color: #1075fd;
}

.usage-summary .usage-metric-value--usage {
  color: #9534e5;
}

.usage-summary .usage-metric-value--guardrail {
  color: #00c950;
}

.usage-summary .usage-metric-value--total {
  color: #016630;
}

.usage-section-card .card-header .card-title {
  color: var(--Blue-Blue-1, #2f5496) !important;
  font-family: Poppins !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  margin-bottom: 0 !important;
}

.usage-summary-details {
  display: flex;
  padding: 16px 0 3px 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px !important;
  align-self: stretch;
}

.daily-usage-link {
  color: var(--Blue-Blue-4, #2f5496);
  font-weight: 700;
}

/* ===== End Usage Dashboard ===== */

[data-navbar-search-input] {
  inline-size: 12rem;
}

[data-social-link],
[data-scroll-button] {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

[data-scroll-button] {
  padding: 0;
}

[data-user-avatar] {
  inline-size: 5rem;
  block-size: 5rem;
}

[data-user-profile-shell] {
  padding-top: 180px;
}

[data-user-profile-banner] {
  block-size: 180px;
  object-fit: cover;
  object-position: center top;
}

[data-markdown-content] hr {
  display: none;
}

[data-attachments-list] {
  max-block-size: 13.75rem;
}

[data-attachment-card] {
  flex: 0 0 15rem;
  max-inline-size: 15rem;
}

[data-attachment-thumb] {
  inline-size: 3rem;
  block-size: 3rem;
  flex: 0 0 3rem;
}

[data-attachment-copy] {
  min-inline-size: 0;
  flex: 1 1 auto;
}

[data-markdown-content] h1,
[data-markdown-content] h2,
[data-markdown-content] h3,
[data-markdown-content] h4,
[data-markdown-content] h5,
[data-markdown-content] h6 {
  font-size: 1.2rem;
  font-weight: 500;
}

.font-inter {
  font-family: "Inter" !important;
}

.font-poppins {
  font-family: "Poppins" !important;
}

.font-smooth {
  -webkit-font-smoothing: antialiased !important;
}

.form-label {
  font-weight: 500;
  margin-bottom: 0;
}