/* Styles for pages using @intelation/ui */

/* Import Tailwind for project-specific utility classes */
@import 'tailwindcss';

/* ============================================
   DESIGN TOKEN OVERRIDES
   Override @intelation/ui CSS variables here
   ============================================ */

/* Global App Content Width */
:root {
  --app-content-max-width: 1400px;
}

/* Content Wrapper */
.contentWrapper {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Privacy Test Layout - Override content wrapper padding */
.privacy-test-layout .contentWrapper {
  padding: 10px;
}

/* Privacy Test Layout - Override layout content container padding-top via CSS variable */
.privacy-test-content-wrapper {
  --layout-padding: 10px;
}

/* More specific override for just padding-top */
.layout__content-container:has(.privacy-test-content-wrapper) {
  padding-top: 10px;
}

/* Privacy Test Dashboard Cards - Equal Height with Bottom-Aligned Buttons */
.privacy-test-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.privacy-test-card-wrapper {
  display: flex;
  flex-direction: column;
}

.privacy-test-card-wrapper > .card,
.privacy-test-card-wrapper > div[class*="card"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.privacy-test-card-wrapper .card__body,
.privacy-test-card-wrapper div[class*="card__body"] {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.privacy-test-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 0;
}

.privacy-test-card-items {
  flex: 1 1 auto;
  min-height: 0;
}

.privacy-test-card-button-container {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding-top: 1rem;
}

@media (max-width: 768px) {
  .privacy-test-cards-container {
    grid-template-columns: 1fr;
  }
}

/* Header Navigation Gap Override - Reduce gap between nav items */
:root {
  --layout-headerNavGap: 0.5rem;
}

/* Additional specificity for header navigation gap */
.header .header__navigation .header__nav-list {
  gap: 0.5rem;
}

/* Header Profile Icon Wrapper - Remove fixed dimensions for flexible icon sizing */
.header__profile-icon-wrapper {
  width: auto;
  height: auto;
}

.header__profile-icon-wrapper > * {
  width: auto;
  height: auto;
}

/* Profile icon styling */
.profile-icon {
  width: 20px;
  height: 20px;
}

/* Global body styles - loaded after @intelation/ui for proper override */
body {
  background: rgba(227, 222, 222, 1);
  /*background-image: url(/images/main-background.png); */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Text Anonymization Page Styles */
.settings-header {
  font-family: Manrope;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0px;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title {
  font-family: Manrope;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.helper-text {
  font-family: Manrope;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.checkbox-label label {
  font-family: Manrope;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0px;
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: var(--color-violet);
  border-color: var(--color-violet);
}

.entity-checkbox-custom label {
  font-family: Manrope;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0px;
}

.entity-checkbox-custom input[type="checkbox"]:checked {
  background-color: var(--color-violet);
  border-color: var(--color-violet);
}

/* AnonymizationPageLayout Styles */
.anon-nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s;
  background-color: transparent;
}

.anon-nav-button:hover {
  background-color: var(--color-background-navigationActive);
}

.anon-nav-button.active {
  background-color: var(--color-background-navigationActive);
}

.anon-nav-button-label {
  font-family: Manrope;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: var(--color-text-primary);
}

.anon-nav-button.active .anon-nav-button-label {
  color: var(--color-primary);
}

.anon-page-title {
  font-family: Manrope;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.anon-page-description {
  font-family: Manrope;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Component Headers */
.component-section-title {
  font-family: Manrope;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.component-description {
  font-family: Manrope;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  margin: 0;
}

.component-subsection-title {
  font-family: Manrope;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

/* Recent Activity Styles */
.recent-activity-item {
  padding: 12px;
  border-bottom: 1px solid var(--color-border-primary);
  transition: background-color 0.2s;
}

.recent-activity-item:last-child {
  border-bottom: none;
}

.recent-activity-item:hover {
  background-color: var(--color-background-navigationActive);
}

.recent-activity-meta {
  font-family: Manrope;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-secondary);
}

.recent-activity-link {
  font-family: Manrope;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-primary);
}

.recent-activity-expanded-content {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  font-size: 14px;
  font-family: monospace;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.expand-collapse-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 20px;
  color: var(--color-text-primary);
  line-height: 1;
  display: flex;
  align-items: center;
}

.expand-collapse-button:hover {
  opacity: 0.7;
}

.recent-activity-container {
  padding: 0 24px 24px 24px;
}

.recent-activity-container .button,
.recent-activity-container button,
.privacy-test-sample-button {
  background-color: var(--color-background-white) !important;
  border: 1px solid var(--color-gray-500) !important;
  color: var(--color-gray-500) !important;
}

.privacy-test-sample-button:hover:not(:disabled) {
  background-color: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-600) !important;
  color: var(--color-gray-600) !important;
}

/* Text Anonymization Styles */
.text-anonymization-wrapper {
  padding: 12px 24px 0 24px;
}

.text-anonymization-input {
  border: 1px solid var(--color-border-primary);
  background-color: transparent;
  height: 180px;
}

.privacy-test-input {
  border: 1px solid var(--color-border-primary);
  background-color: transparent;
}

.privacy-test-textarea {
  border: 1px solid var(--color-border-primary);
  background-color: transparent;
  width: 100%;
}

.violet-action-button {
  background-color: var(--color-violet) !important;
  box-shadow: 0px 2px 4px 0px rgba(105, 108, 255, 0.4) !important; /* TODO: Add violet-shadow token */
  color: var(--color-custom-white) !important;
  font-family: Manrope !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: 0px !important;
  text-transform: capitalize !important;
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
  justify-content: flex-start !important;
  border: none !important;
  padding: 0 16px !important;
}

.violet-action-button:hover:not(:disabled) {
  background-color: var(--color-violet) !important;
  color: var(--color-custom-white) !important;
  box-shadow: 0px 6px 12px 0px rgba(105, 108, 255, 0.5) !important; /* Enhanced shadow for hover */
}

.violet-action-button:active:not(:disabled) {
  background-color: var(--color-violet-active) !important;
  box-shadow: 0px 1px 2px 0px rgba(68, 71, 204, 0.4) !important; /* TODO: Add active shadow token */
}

.violet-action-button span {
  font-size: 13px !important;
  font-family: Manrope !important;
  font-weight: 600 !important;
}

/* Center-aligned button for primary actions */
.button-center-aligned {
  justify-content: center !important;
}

/* Global override: Match all outline buttons with lg size to standard height */
button[class*="outline"][class*="lg"],
button.outline-lg-override {
  height: 30px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: Manrope !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Standardized button height and styling for action buttons */
.action-button-standard {
  height: 30px !important;
  font-family: Manrope !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.action-button-standard:hover:not(:disabled) {
  background-color: var(--color-violet) !important;
  border-color: var(--color-violet) !important;
  color: var(--color-custom-white) !important;
  box-shadow: 0px 6px 12px 0px rgba(105, 108, 255, 0.5) !important; /* Enhanced shadow for hover */
}

.action-button-standard:active:not(:disabled) {
  background-color: var(--color-violet-active) !important;
  border-color: var(--color-violet-active) !important;
  color: var(--color-custom-white) !important;
  box-shadow: 0px 1px 2px 0px rgba(68, 71, 204, 0.4) !important; /* TODO: Add active shadow token */
}

.section-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.decryption-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.helper-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.decryption-section .helper-text,
.decryption-section [class*="helper"] {
  font-family: Manrope;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
}

.password-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--color-border-primary);
  background-color: var(--color-background-white);
  font-family: Manrope;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0px;
}

.encrypted-text-input {
  font-family: Manrope;
  font-weight: 500;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0px;
  border: 1px solid var(--color-border-primary) !important;
  background-color: var(--color-background-white) !important;
}

.success-box {
  background-color: var(--color-success-alpha);
  border: 1px solid var(--color-success);
  padding: 16px;
  border-radius: 8px;
}

.success-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-success);
  margin: 0;
}

.result-box {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-primary);
  padding: 16px;
  border-radius: 6px;
}

.result-text {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
  font-size: 14px;
  color: var(--color-text-primary);
}

.entity-box {
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-primary);
}

.entity-text {
  font-size: 14px;
  color: var(--color-text-primary);
}

.entity-explanation {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.decryption-section {
  border: none;
  border-radius: 0;
  margin-top: 24px;
  margin-bottom: 24px;
  background-color: var(--color-background-navigationActive);
  color: var(--color-text-secondary);
}

.decryption-accordion .accordion,
.decryption-accordion .accordion-item {
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--color-background-navigationActive) !important;
  color: var(--color-text-secondary);

}

.decryption-section p,
.decryption-section label,
.decryption-section h1,
.decryption-section h2,
.decryption-section h3,
.decryption-section h4,
.decryption-section h5,
.decryption-section h6 {
  color: var(--color-text-secondary);
}

/* Settings Summary Styles */
.settings-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  opacity: 1;
}

.settings-summary-label {
  font-family: Manrope;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-secondary);
}

.settings-summary-value {
  font-family: Manrope;
  font-weight: bold;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-text-primary);
}

/* Template Manager Styles */
.template-active-badge {
  font-family: Manrope;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.template-description {
  font-family: Manrope;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.template-link {
  font-family: Manrope;
  font-size: 12px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

/* Form Labels */
.form-label {
  font-family: Manrope;
  font-size: 12px;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 4px;
}

/* Breadcrumb Styles */

/* Remove gap/spacing from breadcrumb list items */
.intelation-breadcrumb__list {
  gap: 0 !important;
}

.breadcrumb {
  margin-bottom: 1.5rem;
}

.breadcrumb span,
.breadcrumb a,
.breadcrumb button {
  font-family: Manrope;
  font-weight: 600;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0px;
}


.header__navigation .header__nav-item .header__nav-link {
    background: none;
    border: none;
    border-radius: .375rem;
    color: var(--color-text-inverse);
    cursor: pointer;
    font-family: var(--fontFamily-sans);
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-semibold);
    letter-spacing: var(--letterSpacing-wider);
    line-height: 18px;
    padding: .75rem 1rem;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
}
.link--underline .link__content {
      text-decoration: none;

}
.list-item {
    display: flex;
}

/* Privacy Test - Data Retention Page Styles */
/* Force FileUpload component to take full width */
.privacy-test-file-upload-wrapper {
  width: 100% !important;
}

.privacy-test-file-upload-wrapper > * {
  width: 100% !important;
  max-width: 100% !important;
}

.privacy-test-file-upload-wrapper [class*="fileupload"],
.privacy-test-file-upload-wrapper [class*="FileUpload"],
.privacy-test-file-upload-wrapper > div {
  width: 100% !important;
  max-width: 100% !important;
}

.file-upload__dropzone {
  border: none !important;
  background-color: transparent !important;
}

/* Override file upload item colors to use neutral background variations */
.file-upload__item--completed {
  background-color: rgba(248, 248, 250, 1) !important;
  border-color: rgba(231, 231, 255, 1) !important;
}

.file-upload__item--error {
  background-color: rgba(254, 242, 242, 1) !important;
  border-color: rgba(254, 226, 226, 1) !important;
}

.file-upload__item--pending,
.file-upload__item {
  background-color: rgba(248, 248, 250, 1) !important;
  border-color: rgba(231, 231, 255, 1) !important;
}

/* Remove bottom space when only one file is uploaded */
.privacy-test-file-upload-wrapper [class*="file-upload__list"]:has(.file-upload__item:only-child),
.privacy-test-file-upload-wrapper [class*="fileUploadList"]:has([class*="file-upload__item"]:only-child),
.privacy-test-file-upload-wrapper > div > div:has(.file-upload__item:only-child) {
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.privacy-test-file-upload-wrapper .file-upload__item:only-child {
  margin-bottom: 0 !important;
}

/* ============================================================================
 * SEMANTIC CSS CLASSES - REUSABLE ACROSS APPLICATION
 * ============================================================================ */

/* Container Classes */
.card-flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.upload-section {
  background-color: rgba(231, 231, 255, 1);
  border-radius: 8px;
  padding: 1.5rem;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll-container {
  overflow-x: auto;
}

.empty-state-container {
  text-align: center;
  padding: 3rem 0;
  color: var(--color-text-tertiary);
}

/* Button Classes */
.action-button-primary {
  background-color: rgba(105, 108, 255, 1) !important;
  color: var(--color-custom-white) !important;
  border-color: rgba(105, 108, 255, 1) !important;
  box-shadow: 0px 2px 4px 0px rgba(105, 108, 255, 0.4) !important;
  width: 100%;
  height: 52px;
}

.action-button-clear {
  width: 100%;
  height: 52px;
  background: transparent !important;
  border-radius: 4px;
  border-width: 1px;
  opacity: 1;
  font-family: Manrope;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  color: rgba(34, 48, 62, 0.7) !important;
}

.pagination-button {
  background-color: var(--color-violet);
  color: var(--color-custom-white);
  border: none;
  cursor: pointer;
}

.pagination-button:disabled {
  background-color: var(--color-gray-300);
  cursor: not-allowed;
}

/* Typography Classes */
.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.label-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.text-sm {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.text-xs {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.metadata-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: 0.125rem;
}

/* Interactive Elements */
.interactive-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-violet);
  text-decoration: none;
  cursor: pointer;
}

.interactive-link:hover {
  text-decoration: underline;
}

.interactive-link:focus {
  outline: 2px solid var(--color-violet);
  outline-offset: 2px;
}

/* Badge Size Override */
.badge-sm {
  font-size: var(--font-size-xs) !important;
}

/* Utility Classes */
.textarea-flex {
  flex: 1;
  min-height: 200px;
}

.margin-top-sm {
  margin-top: 0.75rem;
}

.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.page-number {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
}

/* Grid Layout Classes */
.grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .grid-2-col {
    grid-template-columns: 1fr;
  }
}

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-stretch {
  align-items: stretch;
}

.margin-top-xs {
  margin-top: 0.5rem;
}