/* ========================================
   NIGHT CLIENT - STANDARDIZED STYLESHEET
   ======================================== */

/* Import order is important - variables first, then base, then components */

/* 1. Color palette and theme system */
@import '_colors.css';

/* 2. Theme switcher utilities */
/* @import '_theme-switcher.css'; */

/* 3. Base styles and typography */
@import '_base.css';

/* 4. UI Components */
@import '_components.css';

/* 5. Layout and grid system */
@import '_layout.css';

/* 6. Component-specific styles */
@import 'range_slider.css';
@import 'loader.css';
@import 'fade.css';
@import 'checkbox.css';
@import 'file.css';

/* 7. Landing only */
@import 'landing.css';

/* 8. Service account table */
@import 'service_account_table.css';
/* ========================================
   ADDITIONAL CUSTOM STYLES
   ======================================== */

/* Service Account Specific Styles */
.service_account_inactive {
  /* Custom styles for inactive service accounts */
}

.service_account_service_logo {
  max-height: 1rem;
  align-self: center;
}

.service_account_up {
  display: flex;
  flex-direction: column;
}

.service_account_service {
  display: flex;
  justify-content: space-between;
}

.service_account_actions_subcontainer {
  display: flex;
  flex-direction: column;
}

.service_accounts_head {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding: 0;
}

.service_accounts_description {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl);
}

/* Document Styles */
.document {
  max-width: 67rem;
  text-align: justify;
  color: var(--color-text-secondary);
  font-size: 18px;
}

.document ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.document ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

.document ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

.document li ol > li {
  margin: 0;
}

.document li ol > li:before {
  content: counters(item, ".") " ";
}

/* Data Display Styles */
.data_subcontainer {
  display: flex;
  justify-content: space-between;
}

.data_subcontainer.column {
  flex-direction: column;
}

.data_text {
  display: block;
}

.data_label {
  color: var(--color-text-disabled);
  font-size: 14px;
  margin-bottom: var(--spacing-sm);
  display: inline-block;
  user-select: none;
}

.copy {
  cursor: copy;
}

/* Code and Monospace Text */
.code {
  font-family: monospace;
  cursor: pointer;
  font-size: 18px;
  word-wrap: break-word;
}

.grey_code_desc {
  margin: auto 0;
  color: var(--color-accent-yellow);
  font-family: monospace;
  font-size: 10px;
}

/* Table Styles */

.table_fixed tr.error {
  color: var(--color-error);
  pointer-events: none;
}

/* Process and Chart Styles */
.process_chart {
  margin: 0 auto;
}

.loader_progress_entry {
  display: flex;
  justify-content: space-between;
}

.loader_progress_bar {
  width: 100px;
}

.loader_progress_fields {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* Logo and Image Styles */
#logo_placeholder {
  display: block;
  margin: auto;
  max-height: 21rem;
}

#small_logo {
  display: block;
  margin-bottom: 3rem;
  place-self: center;
}

#small_logo_img {
  max-height: 4rem;
}

/* Log and Entry Styles */
.log_entry {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: smaller;
  color: var(--color-neutral-600);
}

/* Bookmarklet Styles */
#bookmarklet_url {
  text-decoration: none;
}

/* Complex Component Animation */
x-complex, x-cmplx { 
  animation-name: fade_in;
  animation-duration: 1s;
}

/* Model Thumbnail */
.model_thumbnail {
  border-radius: 50%;
  float: left;
}

/* Chart Canvas */
.chart_canvas {
  place-self: center;
}

/* Dashed Box */
.dashed_box {
  width: 750px;
  height: 400px;
  background: var(--dashed-background);
  align-content: center;
  justify-items: center;
}

.dashed_box_text {
  display: block;
  background: var(--color-bg-primary);
  padding: var(--spacing-md) var(--spacing-3xl);
  font-weight: 100;
  color: var(--color-neutral-400);
  font-family: monospace;
}

/* Action Styles */
.action_tr {
  cursor: pointer;
}


/* Padded Container */
.padded_container {
  padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl) var(--spacing-3xl);
}

/* Buttons Container */
.buttons {
  margin: var(--spacing-md) 0;
}

/* Dialog Styles */
#dialog_buttons {
  margin-top: var(--spacing-md);
}

.dialog_msg_container {
  padding: var(--spacing-md);
  background-color: var(--color-input-bg);
  border-radius: var(--radius-md);
  max-width: 50%;
  align-self: flex-end;
}

.dialog_msg_container.outgoing {
  align-self: flex-start;
}

.dialog_msg_username {
  margin-right: var(--spacing-md);
  font-weight: 500;
}

.dialog_msg_date {
  color: var(--color-neutral-600);
  font-size: small;
}

.dialog_msgs {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: var(--spacing-xl);
}

/* Balance Voucher Form */
#balance_voucher_form {
  display: flex;
  flex-direction: column;
}

#account_balances_activate {
  width: 20rem;
}

/* Radio Tab Styles */
.radio_tab {
  margin-right: var(--spacing-md);
}

.radio_tab input {
  width: 0;
  height: 0;
  margin: 0;
}

/* Tab Icon */
.tab_icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--spacing-sm);
}

/* Tab Radio and Add File */
.tab_radio, .add_file {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

/* More Toggles Customization */
.mt-transparent-violet {
  font-size: 9px;
}

.mt-transparent-violet label:before {
  background: var(--color-secondary-muted);
}

.mt-transparent-violet label {
  border: .2em solid var(--color-secondary);
}

.mt-transparent-violet input:checked + label {
  background: var(--color-secondary);
}

/* Main Header Styles */
.main_header {
  font-size: xx-large;
  color: var(--color-text-primary);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-neutral-600);
  text-stroke: 1px var(--color-neutral-600);
}

/* Service Account Data */
#service_account_data {
  width: 50%;
}

/* Access Token Count */
.access_token_count {
  color: var(--color-text-muted);
}

/* Account Display */
#account_display_name {
  font-size: 24px;
  font-weight: bolder;
  margin-bottom: var(--spacing-md);
}

#account_created_at {
  color: var(--color-text-muted);
}

/* Responsive Adjustments */
@media screen and (max-width: 728px) {
  #lovely_assist, .container {
    width: 80%;
  }
  
  #log {
    width: 30vw;
  }
  
  .dashed_box {
    width: 100%;
    height: auto;
    min-height: 200px;
  }
  
  .dashed_box_text {
    padding: var(--spacing-md);
  }
}