/* Define Color Variables for Consistency */
:root {
  --primary-blue-start: #5A9BF6;
  --primary-blue-end: #387EF5;
  --critical-orange-start: #FFA726;
  --critical-orange-end: #FB8C00;
  --light-container-start: #ffffff;
  --light-container-end: #f7f7f7;
  --dark-bg: #111111;
  --text-dark: #333333;
  --border-light: #cccccc;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica", Arial, sans-serif;
  background-color: #f0f2f5;
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Main Container (Light Gradient) */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(320px, 90%, 1200px);
  max-width: 800px;
  min-width: 340px;
  padding: 20px;
  background: linear-gradient(135deg, var(--light-container-start), var(--light-container-end));
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-medium);
  margin: 0 auto;
}

/* Title Section – Remains Dark */
.title-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #23272e, #181b20);
  border-radius: 16px;
}

.title-section .logo {
  width: 300px;
  height: auto;
  margin-right: 20px;
}
.title-section .heading {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
}

/* Input Section – Light Container with Gradient & Subtle Shadow */
.input-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: linear-gradient(135deg, var(--light-container-start), var(--light-container-end));
  border-radius: 8px;
  padding: 20px;
  gap: 10px;
  box-shadow: 0 2px 5px var(--shadow-light);
}

/* Input Fields */
.input-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-btn {
  white-space: nowrap;    /* Prevents “Upload PDF 🔼” from wrapping internally */
  flex-shrink: 0;         /* Don’t let the button shrink below its content width */
}

.input-field label {
  font-size: 16px;
  color: var(--text-dark);
}
.input-field input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #fff, #f9f9f9);
  color: var(--text-dark);
  box-shadow: inset 0 1px 3px var(--shadow-light);
}

/* Textarea Container */
.textarea-container {
  width: 100%;
}
.textarea-container textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #fff, #f9f9f9);
  color: var(--text-dark);
  resize: none;
  box-shadow: inset 0 1px 3px var(--shadow-light);
}

/* Button Container */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;   /* Ensures buttons are spaced nicely */
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

/* General Button Styles */
.button {
  font-family: "Tahoma", sans-serif;
  font-size: 1rem;
  border: none;
  border-radius: 8px;               /* More natural button shape */
  cursor: pointer;
  padding: 12px 24px;               /* Comfortable clickable area */
  text-align: center;
  font-weight: 500;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Responsive Adjustment for Smaller Screens */
@media (max-width: 600px) {
  .button-container {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .button {
    width: 100%;
  }
}

/* Primary Action Buttons (Blue Gradient) */
.fetch-btn,
.upload-btn,
.generate-btn {
  background: linear-gradient(135deg, var(--primary-blue-start), var(--primary-blue-end));
  color: #ffffff;
}

.upload-btn,
.fetch-btn,
.generate-btn {
  width: fit-content !important;
  font-weight: bold;
}

.fetch-btn:active,
.generate-btn:active,
.upload-btn:active {
  background: linear-gradient(135deg, #4a8de3, #316ad1);
}

/* Critical Action Button (Orange Gradient) */
.clear-btn {
  background: linear-gradient(135deg, var(--critical-orange-start), var(--critical-orange-end));
  color: #ffffff;
  min-width: 150px;
}
.clear-btn:hover {
  background: linear-gradient(135deg, #e6951d, #e07a00);
}

/* Vertical Stacking Container */
.flex-column-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 15px;
}

/* Summary Section */
#summary-container {
  display: none;
}
#summary-container.hidden {
  display: none;
}
#summary-container:not(.hidden) {
  display: block;
}
.summary-container {
  display: none;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border: 1px solid #dddddd;
  padding: 50px;
  width: 90%;
  max-width: 800px;
  margin-top: 20px;
  overflow-x: auto;
  color: var(--text-dark);
  margin: 0 auto;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
              0px 6px 6px rgba(0, 0, 0, 0.1);
}
.summary-container[dir="rtl"] {
  text-align: right;
  direction: rtl;
}
.summary-container.hidden {
  display: none;
}
.summary-container h2 {
  font-family: "Georgia", "Times New Roman", serif;
  margin-bottom: 25px;
  font-size: clamp(18px, 2vw, 22px);
  padding: 12px;
  color: var(--text-dark);
  font-weight: bold;
}
.summary-container br {
  padding: 12px;
  margin-bottom: 10px;
  display: block;
}
.summary-container li {
  font-family: "Georgia", "Times New Roman", serif;
  padding: 2px;
  line-height: 1.4;
  margin-bottom: 5px;
}
.summary-container #summary-output {
  font-family: "Georgia", "Times New Roman", serif;
  word-wrap: break-word;
  color: var(--text-dark);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
  padding: 15px;
  margin-right: 10px;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Responsive Tables */
.summary-container table {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(16px, 2vw, 20px);
  border-collapse: collapse;
  line-height: 1.3;
  width: 100%;
  color: var(--text-dark);
  margin-bottom: 10px;
  table-layout: auto;
  padding: 8px;
  overflow-x: auto;
  display: block;
  max-width: none;
}
.summary-container th,
.summary-container td {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 8px;
  color: var(--text-dark);
  text-align: left;
  vertical-align: top;
  max-height: 300px;
  overflow-y: visible;
  white-space: normal;
  word-wrap: break-word;
}
.summary-container th {
  background-color: #D9D9D9;
  font-weight: bold;
  text-transform: capitalize;
}
.summary-container tr:nth-child(even) {
  background-color: #EEEEEE;
}
.summary-container p {
  font-family: "Georgia", "Times New Roman", serif;
  margin-bottom: 15px;
  line-height: 1.4;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-dark);
}

/* Full-Width Container Adjustments */
.main-container,
.summary-container {
  width: 100%;
  margin: 10px;
  padding: 10px;
}

/* Responsive Summary Container */
@media (max-width: 600px) {
  .summary-container {
    margin: 0 auto;
    padding: 15px;
    word-wrap: break-word;
    overflow-x: auto;
  }
}

/* Customization Container (Light Gradient) */
.customization-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 5px;
  background: linear-gradient(135deg, var(--light-container-start), var(--light-container-end));
  gap: 10px;
  box-shadow: 0 2px 5px var(--shadow-light);
  border-radius: 8px;
}
.modelSelection {
  flex: 1;
  min-width: 250px;
}
.langAndDepthSelection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 250px;
  gap: 8px;
}
.customization-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.customization-item label {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.radio-group label {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-dark);
}
.customization-item.modelSelection .radio-group label:has(input:disabled) {
  color: #939393;
}
.radio-group input[type="radio"] {
  margin-right: 5px;
  accent-color: var(--primary-blue-end);
}
.dropdown {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #fff, #f9f9f9);
  color: var(--text-dark);
  cursor: pointer;
}
.dropdown:focus {
  outline: none;
  border-color: var(--primary-blue-end);
}
@media (max-width: 600px) {
  .customization-container {
    flex-direction: column;
  }
  .modelSelection,
  .langAndDepthSelection {
    width: 100%;
  }
}

/* Dialog Box Styles */
dialog.completion-dialog {
  border: 2px solid var(--critical-orange-end);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  padding: 20px;
  width: 300px;
  text-align: center;
  background: linear-gradient(135deg, var(--dark-bg), #000);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 18px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dialog-content button {
  margin: 5px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-blue-start), var(--primary-blue-end));
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.dialog-content button:hover {
  background: linear-gradient(135deg, #4a8de3, #316ad1);
}
.dialog-content button#exit-dialog {
  background: linear-gradient(135deg, var(--critical-orange-start), var(--critical-orange-end));
}
.dialog-content button#exit-dialog:hover {
  background: linear-gradient(135deg, #e6951d, #e07a00);
}

/* Export/Copy Container */
.export-copy-container {
  display: flex;
  gap: 10px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 10px;
  background: linear-gradient(135deg, var(--light-container-start), var(--light-container-end));
  margin-top: 15px;
  width: 100%;
}
.export-copy-container .button {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: center;
}

/* Upload Button Hover */
.upload-btn:hover {
  background: linear-gradient(135deg, #4a8de3, #316ad1);
}

/* Disabled Button States */
/* Blue Buttons */
.fetch-btn:disabled,
.generate-btn:disabled,
.upload-btn:disabled {
  background: #a3c2f2 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}
/* Clear Button */
.clear-btn:disabled {
  background: #ffd8a9 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* Dark Mode Button Styles */
body.dark-mode .fetch-btn:disabled,
body.dark-mode .generate-btn:disabled,
body.dark-mode .upload-btn:disabled {
  background: #4a6282 !important;
  color: #a3a3a3 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

body.dark-mode .clear-btn:disabled {
  background: #8b5e35 !important;
  color: #a3a3a3 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .export-copy-container {
    flex-direction: column;
  }
  .export-copy-container .button {
    width: 100%;
  }
  .button-container {
    flex-direction: column;
    gap: 10px;
  }
  .button {
    width: 100%;
  }

  .input-field {
    display: flex;
    flex-wrap: wrap;        /* So the button can drop to next line if space is too small */
    align-items: center;
    gap: 10px;
  }
  
  .input-field input[type="file"] {
    /* If you don’t want the file input to be too wide, remove or reduce 'width: 100%' */
    flex: 1 1 auto;         /* Let the input grow/shrink, but not force the button off-screen */
  }

}

@media (max-width: 630px) {
  .title-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .title-section .logo {
    width: 300px;
    margin-right: 0;
  }
  .title-section .heading {
    margin-top: 10px;
    font-size: 22px;
  }
  
}

/* ==== Toggle Styles ==== */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #387EF5;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* ==== Dark Mode Styles ==== */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

/* Container */
body.dark-mode .main-container,
body.dark-mode .input-section,
body.dark-mode .customization-container,
body.dark-mode .export-copy-container {
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  color: #f0f0f0;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}

/* Titles */
body.dark-mode .title-section {
  background: linear-gradient(135deg, #23272e, #181b20);
}

/* Inputs & Textareas */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode .dropdown {
  background: #1c1c1c;
  color: #f0f0f0;
  border: 1px solid #666;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.05);
}

/* Labels */
body.dark-mode label {
  color: #ddd;
}

/* Buttons */
body.dark-mode .button {
  color: #fff;
}
body.dark-mode .fetch-btn,
body.dark-mode .generate-btn,
body.dark-mode .upload-btn {
  background: linear-gradient(135deg, #387EF5, #2e6ad4);
}
body.dark-mode .clear-btn {
  background: linear-gradient(135deg, #FB8C00, #e07900);
}
body.dark-mode .button:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Summary Container */
body.dark-mode .summary-container {
  background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
  color: #f0f0f0;
  border: 1px solid #444;
}

/* Tables in Summary */
body.dark-mode .summary-container table {
  color: #f0f0f0;
}
body.dark-mode .summary-container th {
  background-color: #333;
  color: #f0f0f0;
}
body.dark-mode .summary-container td {
  background-color: #222;
  color: #f0f0f0;
}
body.dark-mode .summary-container tr:nth-child(even) {
  background-color: #1a1a1a;
}

/* Dialog */
body.dark-mode dialog.completion-dialog {
  background: linear-gradient(135deg, #1a1a1a, #000);
  color: #f0f0f0;
  border: 2px solid #FB8C00;
}

/* Dark mode - AVS Report Content */
body.dark-mode #summary-output {
  color: #f0f0f0;
}

/* Ensure consistent text appearance inside paragraphs, lists, headings */
body.dark-mode #summary-output h1,
body.dark-mode #summary-output h2,
body.dark-mode #summary-output h3,
body.dark-mode #summary-output p,
body.dark-mode #summary-output li,
body.dark-mode #summary-output ul {
  color: #f0f0f0;
}

/* Fix table borders and background in report */
body.dark-mode .summary-container table {
  color: #f0f0f0;
  border-color: #777;
}

/* Keep dark mode styling on header cells */
body.dark-mode .summary-container th {
  border: 1px solid #777;
  color: #f0f0f0;
  background-color: #2d2d2d;
}

/* Only apply font and border to td, not background */
body.dark-mode .summary-container td {
  border: 1px solid #777;
  color: #f0f0f0;
  background-color: transparent;
}

/* Dark mode table row striping fix */
body.dark-mode .summary-container table tr:nth-child(odd) {
  background-color: #1e1e1e;
}

body.dark-mode .summary-container table tr:nth-child(even) {
  background-color: #2a2a2a;
}

body.dark-mode .summary-container th {
  background-color: #333333;
  color: #f0f0f0;
}

/* ===== Tabbed Input Card ===== */
.input-card {
  background: linear-gradient(135deg, var(--light-container-start), var(--light-container-end));
  border-radius: 8px;
  box-shadow: 0 2px 5px var(--shadow-light);
  padding: 16px;
  margin-bottom: 10px;
  width: 100%;
}
.tabs {
  display: flex;
  justify-content: flex-start;    /* Aligns tabs to the left */
  gap: 16px;                        /* Optional: adds space between tabs */
  margin-bottom: 6px;
  border-bottom: 2px solid var(--border-light);
  width: fit-content;              /* Shrinks tabs to content width */
  padding: 2px 2px;
  border-radius: 6px 6px 0 0;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}
.tab.active {
  border-color: var(--primary-blue-end);
  color: var(--primary-blue-end);
}
.tab-content {
  display: block;
  width: 100%;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
/* Adjust .input-field to keep label, input, button inline */
.input-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.input-field input[type="text"],
.input-field input[type="file"] {
  flex: 1;
}

/* ===== Dark Mode: Tabbed Input Card ===== */
body.dark-mode .input-card {
  background: #1c1c1c;
  color: #f0f0f0;
  box-shadow: 0 2px 5px rgba(255,255,255,0.05);
}

body.dark-mode .tabs {
  border-bottom: 2px solid #333a45;
  background: transparent;
}

body.dark-mode .tab {
  color: #bfc9d1;
  border-bottom: 2px solid transparent;
}
body.dark-mode .tab.active {
  border-color: var(--primary-blue-end);
  color: var(--primary-blue-end);
  background: none;
}

body.dark-mode .tab-content {
  background: transparent;
  color: #f0f0f0;
}

body.dark-mode .tab-pane {
  background: transparent;
  color: #f0f0f0;
}

body.dark-mode .input-field label {
  color: #bfc9d1;
}

body.dark-mode .input-field input,
body.dark-mode .input-field input[type="text"],
body.dark-mode .input-field input[type="file"] {
  background: #23272e;
  color: #f0f0f0;
  border: 1px solid #444a55;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.05);
}

@media (max-width: 450px) {
  .input-card .input-field {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .input-card .input-field .button,
  .input-card .input-field button,
  .input-card .input-field input[type="submit"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}