:root {
  --bg: #0f1420;
  --panel: #141b2a;
  --panel-2: #192235;
  --muted: #8aa0c3;
  --text: #e9f0f7;
  --accent: #4da3ff;
  --border: #22304a;
  --danger: #ff5c5c;
}

/* Skip Links for Screen Readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent);
  color: #071222;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.skip-link:hover {
  background: #66b3ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.app-header .brand { display: flex; align-items: center; gap: 12px; }
.app-header .brand img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.app-header h1 { font-size: 1.1rem; margin: 0; }
.app-header h1 .version { 
  font-size: 0.7rem; 
  color: var(--muted); 
  font-weight: 400; 
  margin-left: 6px;
  opacity: 0.8;
}


.header-actions { display: flex; gap: 8px; }

/* Card header actions */
.card-header .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Silent prefix styling */
.silent-prefix {
  color: var(--muted);
  font-size: 0.85em;
  opacity: 0.8;
}

/* Variable reference link styling */
.variable-reference-link {
  color: #d946ef;
  cursor: pointer;
  text-decoration: underline;
}

.variable-reference-link:hover {
  color: #c026d3;
}

/* Action value validation styling */
input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.2);
}

.error-text {
  color: var(--danger);
  font-size: 0.8em;
  margin-top: 4px;
}


/* Buttons */
button {
  border: 0; outline: 0; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  padding: 8px 12px; border-radius: 10px; transition: 120ms ease;
}
button.primary { background: var(--accent); color: #071222; font-weight: 600; }
button.ghost { background: transparent; border: 1px solid var(--border); }
button.ghost:hover { opacity: .9; }
button.small { padding: 6px 10px; font-size: 0.9rem; }
button:hover { opacity: .9; }

/* Tabs */
.tabs {
  display: flex; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.tabs button { 
  background: transparent; 
  border: 1px solid var(--border); 
  transition: all 150ms ease;
  position: relative;
}
.tabs button:hover { 
  border-color: var(--accent);
  transform: translateY(-1px);
}
.tabs button.active { 
  background: var(--panel-2); 
  border-color: #00ffff; /* cyan outline */
  border-width: 2px;
  box-shadow: 
    0 0 0 2px rgba(0, 255, 255, 0.2),
    0 0 8px rgba(0, 255, 255, 0.3);
  transform: translateY(-1px);
  color: var(--text);
  font-weight: 600;
}

/* Layout */
.pane { padding: 16px; }
.columns { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.sidebar { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.content { display: flex; flex-direction: column; gap: 16px; }

.row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.card h3 { margin: 0; font-size: 1rem; }

/* Lists */
.list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.list-item {
  width: 100%; text-align: left; padding: 10px 12px; background: #10182a;
  border: 1px solid var(--border); border-radius: 10px;
}
.list-item.row-item {
  cursor: pointer;
}
.list-item.selected { border-color: var(--accent); }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions .badge.type { margin-left: 0; }
.row-actions .badge.type.sm,
.row-actions .badge.type.xs {
  margin-left: 0;
}
.title { font-weight: 600; }
.meta { color: var(--muted); font-size: .9rem; }
.meta .value {
  color: var(--text);
}
.empty { color: var(--muted); padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }

/* Details/Items */
.item-detail { background: #10182a; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.item-detail summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.detail-grid {
  display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
  background: #0e1525; border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 8px;
}
.detail-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.detail-grid input {
  background: #0c1220; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 8px;
}

/* Checkbox Styling */
.checkbox-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  user-select: none;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-container .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox-container .checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark:after {
  display: block;
}

.checkbox-container:hover .checkmark {
  border-color: var(--accent);
}

/* Family question styling */
.family-question {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

/* Bracketed text styling for response visual fields */
.bracketed-text {
  color: #ff6b1a;
  font-weight: bold;
}

/* Drag Insert Styles */
.drag-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    transform: translate(0, 0);
}

.drag-card-content {
    background: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.drag-icon {
    font-size: 1.2em;
    animation: pulse 1.5s infinite;
}

.drag-hint {
    font-size: 0.8em;
    opacity: 0.9;
    margin-left: 8px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.drop-zone {
    height: 6px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #007bff 10%, 
        #007bff 90%, 
        transparent 100%);
    margin: 12px 16px;
    border-radius: 3px;
    position: relative;
    opacity: 1;
    animation: dropZoneGlow 1.5s infinite;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.drop-zone::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #007bff;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: dropDotPulse 1.5s infinite;
}

@keyframes dropZoneGlow {
    0%, 100% { 
        opacity: 0.7;
        transform: scaleY(1);
    }
    50% { 
        opacity: 1;
        transform: scaleY(1.2);
    }
}

@keyframes dropDotPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* Cursor changes during drag */
body.drag-insert-active {
    cursor: grabbing !important;
}

body.drag-insert-active * {
    cursor: grabbing !important;
}

/* Variable Reference Modal Styling */
.variable-reference-modal {
  max-width: 900px;
  width: 90vw;
}

.variables-table-container {
  margin: 16px 0;
  overflow-x: auto;
}

.variables-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.variables-table th,
.variables-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.variables-table th {
  background: var(--panel-2);
  font-weight: 600;
  color: var(--text);
}

.variables-table td {
  background: var(--panel);
  color: var(--text);
}

.variables-table tr:hover td {
  background: var(--panel-2);
}

.variable-name {
  font-family: monospace;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.variable-description {
  line-height: 1.4;
}

.variable-example {
  font-family: monospace;
  color: var(--muted);
  font-style: italic;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}

.page-info {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Usage Example Section */
.usage-example-section {
  margin-top: 24px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.usage-example-section h4 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 1.1rem;
}

.example-note {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0 0 12px 0;
}

.example-script {
  background: var(--bg);
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin: 12px 0;
  font-family: monospace;
  line-height: 1.6;
}

.script-line {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.speaker-label {
  font-weight: bold;
  color: var(--accent);
  min-width: 80px;
}

.challenge {
  color: var(--text);
}

.separator {
  color: var(--muted);
  font-weight: bold;
}

.response {
  color: var(--text);
}

.copilot-challenge {
  padding: 4px 0;
}

.pilot-response {
  padding: 4px 0;
  margin-left: 16px;
}

.example-explanation {
  margin-top: 16px;
}

.example-explanation p {
  margin: 8px 0;
  color: var(--text);
}

.spoken-output {
  background: var(--bg);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: monospace;
  color: var(--accent);
  font-weight: 500;
  margin: 8px 0;
}

/* Tab Navigation */
.tab-navigation {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  font-weight: 500;
}

.tab-button:hover {
  color: var(--text);
  background: var(--panel-2);
}

.tab-button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--panel-2);
}

.tab-content {
  min-height: 300px;
}

.tab-pane {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tab-description {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--panel-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.tab-description p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

/* UI Example Section */
.ui-example-section {
  margin-top: 24px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.ui-example-section h4 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 1.1rem;
}

/* Mock checklist item - using same styles as real checklist items */
.mock-checklist-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
}

.mock-checklist-item .item-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mock-checklist-item .item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mock-checklist-item .title {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}

.mock-checklist-item .response-subtext {
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mock-checklist-item .visual-help-icon {
  color: var(--accent);
  font-size: 0.7rem;
  cursor: help;
}
.vars { grid-column: 1 / -1; }
.vars .pill { display: inline-block; padding: 4px 8px; margin: 2px 6px 0 0; background: #12213c; border: 1px solid var(--border); border-radius: 100px; }
.vars-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.var-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
}
.var-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns for rows 2 and 3 */
  gap: 12px;
}

/* Row 1: Variable Name (full width) */
.var-name-row {
  grid-column: 1 / -1; /* Span full width */
}

/* Row 2: Category and Type (2 columns) */
.var-category,
.var-type {
  grid-column: span 1; /* Each takes half width */
}

/* Row 3: Values (conditional based on type) */
.var-action-value,
.var-validation-low,
.var-validation-high {
  grid-column: span 1; /* Each takes half width */
}
.vars label { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.var-delete {
  align-self: flex-start;
  min-width: 40px;
  padding: 6px 10px;
}
.var-row input {
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
}

/* Sidebar header row */
.header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

/* Contenteditable helper */
.editable { outline: none; border-bottom: 1px dashed transparent; }
.editable:focus { border-bottom: 1px dashed var(--accent); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9999; }
.modal.show { display: flex; }
.modal-content {
  width: 100%; max-width: 800px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header, .modal-footer { padding: 12px; background: var(--panel-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-footer { border-top: 1px solid var(--border); border-bottom: 0; }
.modal-body { 
  padding: 12px; 
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.grid-rows { display: grid; gap: 10px; }
.grid-rows select {
  width: 100%; padding: 8px; background: #0c1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
.grid-rows input[type="file"] {
  width: 100%;
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.95rem;
}

/* Modal input styling to match dark theme */
.grid-rows input[type="text"],
.grid-rows select {
  width: 100%;
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  transition: border-color 120ms ease;
}

.grid-rows input[type="text"]:focus,
.grid-rows select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.15);
}

.grid-rows input[type="text"]::placeholder {
  color: var(--muted);
}
.muted { color: var(--muted); margin-top: 8px; }
.muted.small { font-size: 0.85rem; margin-top: 4px; }

/* Community Catalog Wizard Styles */
.catalog-wizard-modal {
  max-width: 900px;
}

.wizard-progress {
  padding: 20px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.wizard-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
  z-index: 1;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  padding: 0 12px;
  z-index: 2;
  position: relative;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.wizard-step.active .step-number {
  background: var(--accent);
  color: white;
}

.wizard-step.completed .step-number {
  background: #10b981;
  color: white;
}

.step-title {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.wizard-step.active .step-title {
  color: var(--accent);
}

.wizard-step.completed .step-title {
  color: #10b981;
}

.wizard-step-content {
  padding: 24px 0;
}

.wizard-step-content h4 {
  margin: 0 0 8px 0;
  font-size: 1.3rem;
  color: var(--text);
}

.step-description {
  color: var(--muted);
  margin: 0 0 24px 0;
  font-size: 0.95rem;
}

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

.simulator-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.simulator-option:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

.simulator-option.selected {
  border-color: var(--accent);
  background: rgba(77, 163, 255, 0.1);
}

.simulator-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.simulator-info {
  flex: 1;
}

.simulator-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 4px;
}

.simulator-desc {
  font-size: 0.85rem;
  color: var(--muted);
}

.input-group {
  max-width: 400px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 500;
}

.input-group input {
  width: 100%;
  padding: 12px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.input-group input:focus {
  outline: none;
  border-color: var(--accent);
}

.input-help {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 6px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

.radio-option input[type="radio"] {
  margin: 0;
}

.radio-option span {
  color: var(--text);
  font-weight: 500;
}

.developer-dropdown, .airline-input {
  max-width: 400px;
}

.developer-dropdown label, .airline-input label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 500;
}

.developer-dropdown select, .airline-input input {
  width: 100%;
  padding: 12px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.developer-dropdown select:focus, .airline-input input:focus {
  outline: none;
  border-color: var(--accent);
}

.wizard-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wizard-navigation button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .catalog-wizard-modal {
    max-width: 95vw;
    margin: 10px;
  }
  
  .wizard-steps {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .wizard-steps::before {
    display: none;
  }
  
  .simulator-grid {
    grid-template-columns: 1fr;
  }
  
  .step-title {
    font-size: 0.8rem;
  }
}

/* Responsive */
@media (max-width: 1100px){
  .row { grid-template-columns: 1fr; }
  .columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .modal-content {
    max-width: 95vw;
    max-height: 90vh;
    margin: 10px;
  }
  
  .modal-content.item-type-help-modal {
    max-width: 95vw;
    max-height: 85vh;
  }
  
  .item-type-help {
    padding: 4px;
    gap: 16px;
  }
  
  .item-type-section {
    padding: 12px;
  }
}

.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;

  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
}

.search-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.15);
}

.search-row i {
  color: var(--muted);
  font-size: 0.95rem;
}

.search-row input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  padding: 6px 4px;
  font-size: 0.95rem;
}

.search-row input::placeholder {
  color: var(--muted);
}

/* Stack name + meta + notes vertically in the collection row */
.row-item .col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.row-item .col .badge {
  margin-left: 0;
}

/* Compact toggle "chip" for Shared */
.chip {
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.2;
}
.chip.on {
  background: var(--accent);
  color: #071222;
  border-color: var(--accent);
}

/* Notes input styling to match dark theme */
.note-input {
  width: 100%;
  margin-top: 4px;
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.95rem;
}
.note-input::placeholder { color: var(--muted); }

/* Display name styling */
.displayname {
  color: #00ffff; /* cyan color */
  font-weight: 500;
}

/* Searchable Dropdown Styling */
.searchable-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #0c1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms ease;
  min-height: 44px;
}

.dropdown-trigger:hover {
  border-color: var(--accent);
  background: #0e1525;
}

.dropdown-trigger .placeholder {
  color: var(--muted);
}

.dropdown-trigger i {
  color: var(--muted);
  transition: transform 120ms ease;
}

.searchable-dropdown.open .dropdown-trigger i {
  transform: rotate(180deg);
}

.dropdown-content {
  position: fixed;
  background: #0c1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1001;
  max-height: 400px;
  overflow: hidden;
  min-width: 300px;
}

.dropdown-search {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: #0e1525;
}

.dropdown-search input {
  width: 100%;
  padding: 8px 12px;
  background: #0c1220;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}

.dropdown-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.15);
}

.dropdown-options {
  max-height: 250px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 120ms ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-option:hover {
  background: #0e1525;
}

.dropdown-option.selected {
  background: var(--accent);
  color: #071222;
}

.dropdown-option.selected .aircraft-icao,
.dropdown-option.selected .airline-icao,
.dropdown-option.selected .developer {
  color: #071222;
}

.option-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.aircraft-icao {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.airline-icao {
  background: var(--panel-2);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.option-meta {
  font-size: 0.85rem;
}

.developer {
  color: var(--muted);
  font-style: italic;
}

/* Scrollbar styling for dropdown */
.dropdown-options::-webkit-scrollbar {
  width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
  background: #0c1220;
}

.dropdown-options::-webkit-scrollbar-thumb {
  background: #2a344a;
  border-radius: 3px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
  background: #3a475f;
}

/* Aircraft Card Styling (matching dropdown options) */
.list-item.aircraft-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: #10182a;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}

.list-item.aircraft-card:hover {
  border-color: var(--accent);
  background: #0e1525;
}

.list-item.aircraft-card.selected {
  border-color: var(--accent);
  background: rgba(77, 163, 255, 0.1);
}

.list-item.aircraft-card .aircraft-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.list-item.aircraft-card .aircraft-icao {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 80px); /* Reserve space for badges */
  margin-right: 8px;
}

/* Container for badges to keep them in top-right */
.list-item.aircraft-card .aircraft-badges {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.list-item.aircraft-card .airline-icao {
  background: var(--panel-2);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.list-item.aircraft-card .aircraft-meta {
  font-size: 0.85rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-item.aircraft-card .developer {
  color: var(--muted);
  font-style: italic;
}

.list-item.aircraft-card .aircraft-meta .delete-btn {
  opacity: 0.6;
  transition: opacity 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 6px;
  font-size: 0.8rem;
}

.list-item.aircraft-card .aircraft-meta .delete-btn:hover {
  opacity: 1;
  color: var(--danger);
}

/* Warning Modal Styling */
.warning-message {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.warning-message i {
  color: #ffc107;
  font-size: 1.2em;
  margin-top: 2px;
}

.warning-message p {
  margin: 0;
  color: #856404;
}

.recommendation {
  background: rgba(13, 202, 240, 0.1);
  border: 1px solid rgba(13, 202, 240, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.recommendation i {
  color: #0dcaf0;
  font-size: 1.1em;
  margin-top: 2px;
}

.recommendation p {
  margin: 0;
  color: #055160;
}

.modal-body ul {
  margin: 16px 0;
  padding-left: 20px;
}

.modal-body li {
  margin-bottom: 4px;
  color: var(--text);
}

.modal-footer .danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-footer .danger:hover:not(:disabled) {
  background: #c82333;
}

.modal-footer .danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Remove duplicate aircraft card spacing - handled in .list-item.aircraft-card above */

/* Edit button styling */
.edit-btn {
  padding: 0;
  margin: 0;
  opacity: 0.4;
  transition: opacity 120ms ease;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  min-width: auto;
  width: auto;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

.edit-btn:hover {
  opacity: 0.8;
}

/* Editing state styling */
.title.editing,
.editable.editing {
  position: relative;
}

.title.editing span[contenteditable],
.editable.editing span[contenteditable] {
  background: rgba(77, 163, 255, 0.1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  min-width: 100px;
}

/* Item summary layout adjustments */
.item-summary {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.item-summary .item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  align-items: flex-start;
}

.item-summary .title {
  display: block;
  text-align: left;
}

/* Response subtext styling */
.response-subtext {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin-left: 0;
  margin-top: 2px;
  text-align: left;
  align-self: flex-start;
}

.response-subtext.editing .response-editor {
  position: relative;
}

.response-subtext.editing .response-editor span[contenteditable] {
  background: rgba(77, 163, 255, 0.1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
  outline: none;
  min-width: 300px;
  width: 100%;
  color: var(--text);
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.response-subtext.editing .response-editor .placeholder {
  position: absolute;
  top: 4px;
  left: 8px;
  color: var(--muted);
  font-style: italic;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

/* Ensure pencil icon aligns with text */
.item-summary .edit-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

/* Name row layout for collections */
.name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px; /* Reduced from 6px for more compact layout */
}

/* For draggable items, center name row vertically - higher specificity */
.list-item.row-item.draggable .name-row {
  margin-bottom: 0 !important; /* Remove vertical margin to prevent extra space */
  display: flex !important;
  align-items: center !important; /* Center the pencil icon and title vertically */
  height: 40px; /* Give it a fixed height to align with the buttons */
  gap: 6px; /* Space between elements */
}

/* Ensure title text and pencil align to the same vertical center line */
.list-item.row-item.draggable .name-row .title,
.list-item.row-item.draggable .name-row .title > span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  line-height: 40px; /* Visually center text within the 40px row */
}

.list-item.row-item.draggable .name-row .edit-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
}

/* Keep original last-updated positioning */

.name-row .edit-btn {
  margin: 0;
  margin-top: 0;
  align-self: center;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-left: 6px;
}
.badge.magenta {
  background: #ff3be7;      /* magenta */
  color: #170017;
  border-color: #b61fb0;
}

/* Badge states for Default Override */
.badge.green {
  background: #8ff5b9;        /* light green */
  color: #0b2a1a;
  border-color: #3ddc88;
}
.badge.blue {
  background: #4da3ff;        /* blue */
  color: #071222;
  border-color: #3a7bc8;
}
.badge.orange {
  background: #ff8c42;        /* orange */
  color: #2a1600;
  border-color: #e07a35;
}
.badge.gray {
  background: #2b344a;        /* muted gray - default for admin portal */
  color: var(--muted);
  border-color: #3a475f;
}

/* Red styling specifically for "Not Activated" badges in My Checklists view */
.badge.gray[title*="Toggle default override"],
.badge.gray[title*="default override"] {
  background: #dc2626;        /* red */
  color: #ffffff;
  border-color: #b91c1c;
}

/* Admin disable button active state */
.row-actions button.ghost.active,
button.ghost.active {
  background: #ff8c42;
  color: #2a1600;
  border-color: #e07a35;
}

.row-actions button.ghost.active:hover,
button.ghost.active:hover {
  background: #ff7a2e;
  border-color: #d0692a;
}

/* Admin portal search box styling */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box .search-icon {
  position: absolute;
  left: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  z-index: 1;
  pointer-events: none;
}

.search-box input {
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px 8px 35px;
  font-size: 0.9rem;
  min-width: 200px;
  outline: none;
  transition: border-color 120ms ease;
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.1);
}

.search-box input::placeholder {
  color: var(--muted);
  font-style: italic;
}

/* Aircraft meta button grouping */
.aircraft-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aircraft-meta .button-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Aircraft badge styling */
.aircraft-badge {
  margin: 8px 0;
  display: flex;
  justify-content: flex-start;
}

/* Simulator badges */
.badge.sim-msfs2024 {
  background: #87ceeb; /* light blue */
  color: #0a2a3a;
  border-color: #5fb3d4;
}

.badge.sim-msfs2020 {
  background: #1e3a8a; /* dark blue */
  color: #ffffff;
  border-color: #1e40af;
}

.badge.sim-xplane12 {
  background: #000000; /* black */
  color: #ffffff;
  border-color: #333333;
}

.badge.sim-xplane11 {
  background: #4b5563; /* dark gray */
  color: #ffffff;
  border-color: #6b7280;
}

.badge.sim-p3d4 {
  background: #d1d5db; /* light gray */
  color: #000000;
  border-color: #9ca3af;
}

.badge.sim-p3d5 {
  background: #ffffff; /* white */
  color: #000000;
  border-color: #e5e7eb;
}

.badge.sim-all {
  background: #8b5cf6; /* purple */
  color: #ffffff;
  border-color: #7c3aed;
}

/* Item Type Badges */
.badge.type { margin-left: 8px; }

/* Basic CR — light green */
.badge.type-basic-cr {
  background: #8ff5b9;
  color: #0b2a1a;
  border-color: #3ddc88;
}

/* No CR — lime green */
.badge.type-basic-auto {
  background: #b6ff2e;
  color: #173100;
  border-color: #7bd300;
}

/* Advanced CR — light orange */
.badge.type-adv-cr {
  background: #ffc980;
  color: #2a1600;
  border-color: #e0a85a;
}

/* Full Automatic — neon orange */
.badge.type-full-auto {
  background: #ff7a00;
  color: #201000;
  border-color: #cc5f00;
}

.badge,
.badge.type {
  text-align: center;
  white-space: normal;   /* allow wrapping */
  line-height: 1.2;      /* nicer multi-line spacing */
}

/* Size variants for badges */
.badge.sm {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.1;
  text-align: center;   /* keeps wrapped text centered */
}

/* (Optional) extra-small */
.badge.xs {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.05;
  text-align: center;
}

/* Disabled state for all buttons (dark theme) */
button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Keep primary color when disabled (just dim via opacity above) */
button.primary:disabled { background: var(--accent); color: #071222; }

/* Inputs disabled state */
input:disabled,
select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Informational callout in modal */
.callout {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #0e1525;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.callout.info {
  /* slight accent glow */
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.10) inset;
}

.callout i {
  color: var(--accent);
}

/* Optional: while busy, block accidental clicks inside modal */
.modal-content[aria-busy="true"] {
  pointer-events: none;          /* prevents extra clicks */
}
.modal-content[aria-busy="true"] .modal-header button,
.modal-content[aria-busy="true"] .modal-footer button {
  pointer-events: auto;          /* but keep header/foot buttons responsive */
}

.error {
  color: var(--danger);
  font-size: 0.95rem;
}

/* Checklist Category Badges */
.badge.category-normal {
  background: #4da3ff;
  color: #071222;
  border-color: #3a7bc8;
}

.badge.category-abnormal {
  background: #ff8c42;
  color: #2a1600;
  border-color: #e07a35;
}

.badge.category-cold-weather {
  background: #42d4ff;
  color: #0a2a3a;
  border-color: #35a8cc;
}

.badge.category-emergency {
  background: #ff5c5c;
  color: #2a0000;
  border-color: #cc4a4a;
}

/* Item Type Help Modal Styling */
.modal-content.item-type-help-modal {
  max-width: 900px;
  max-height: 85vh;
}

.item-type-help {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px;
}

.item-type-section {
  background: #0e1525;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.type-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.type-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
}

.type-description {
  color: var(--text);
  line-height: 1.6;
}

.type-description p {
  margin: 0 0 12px 0;
}

.type-description p:last-child {
  margin-bottom: 0;
}

.example {
  background: #0c1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}

.example strong {
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.example-dialog {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-pilot {
  color: var(--accent);
  font-weight: 500;
}

.pilot {
  color: var(--text);
  font-style: italic;
}

.tip {
  background: rgba(77, 163, 255, 0.1);
  border: 1px solid rgba(77, 163, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}

.tip strong {
  color: var(--accent);
}

/* Item Editor Styling */
.item-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.item-summary .badge {
  flex-shrink: 0;
}

.type-section {
  grid-column: 1 / -1;
}

.type-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.badge.clickable {
  cursor: pointer;
  transition: all 120ms ease;
  border: 2px solid transparent;
  background: #1a2332;
  color: var(--text);
  border-color: #2a344a;
}

.badge.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.badge.clickable.active {
  border-color: transparent !important;
}

/* Ensure active badges show their proper colors */
.badge.clickable.active.type-basic-cr {
  background: #8ff5b9 !important;
  color: #0b2a1a !important;
}

.badge.clickable.active.type-basic-auto {
  background: #b6ff2e !important;
  color: #173100 !important;
}

.badge.clickable.active.type-adv-cr {
  background: #ffc980 !important;
  color: #2a1600 !important;
}

.badge.clickable.active.type-full-auto {
  background: #ff7a00 !important;
  color: #201000 !important;
}

.pronunciation-section,
.pronunciation-toggle {
  grid-column: 1 / -1;
}

.pronunciation-toggle button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.type-fields {
  grid-column: 1 / -1;
}

.type-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.type-fields textarea {
  min-height: 80px;
  resize: vertical;
  background: #0c1220;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
}

.type-fields textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.15);
}

/* Variable Section Styling */
.var-item {
  margin-bottom: 24px;
  padding: 16px;
  background: #0e1525;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.var-title {
  margin-bottom: 16px;
}

.var-title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.var-title h4 {
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}

.var-title hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}

.var-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.var-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns for rows 2 and 3 */
  gap: 12px;
  width: 100%;
}

.var-delete {
  min-width: 32px;
  padding: 4px 8px;
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* Responsive adjustments for variables */
@media (max-width: 768px) {
    .var-content {
        flex-direction: column;
        gap: 16px;
    }
    
    .var-grid {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    
    .var-delete {
        align-self: flex-end;
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .var-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive adjustments for variables */
@media (max-width: 480px) {
    .var-item {
        padding: 12px;
    }
    
    .var-grid {
        gap: 12px;
    }
    
    .var-grid label {
        font-size: 0.9rem;
    }
}

/* Ensure dropdowns match dark theme */
.var-grid select,
.detail-grid select,
.var-grid input,
.detail-grid input {
    background: #0c1220;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95rem;
    transition: border-color 120ms ease;
    width: 100%;
    box-sizing: border-box;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

/* Tutorial Styles */
.tutorial-highlight {
    animation: tutorialPulse 2s ease-in-out infinite;
}

@keyframes tutorialPulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(77, 163, 255, 0.6);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(77, 163, 255, 0.8);
        transform: scale(1.02);
    }
}

.tutorial-tooltip {
    animation: tooltipFadeIn 0.3s ease;
}

@keyframes tooltipFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px) scale(0.95);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

.tutorial-overlay {
    animation: overlayFadeIn 0.3s ease;
    /* Fallback for browsers that don't support clip-path */
    mask: none;
    -webkit-mask: none;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tutorial Button */
.tutorial-btn {
    border-color: #4da3ff !important;
    color: #4da3ff !important;
    background: rgba(77, 163, 255, 0.1) !important;
}

.tutorial-btn:hover {
    background: rgba(77, 163, 255, 0.2) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.3);
}



.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    max-width: 400px;
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
}

.toast.success {
    background: #0d4a1a;
    border: 1px solid #16a34a;
    color: #dcfce7;
}

.toast.error {
    background: #4a0d0d;
    border: 1px solid #dc2626;
    color: #fecaca;
}

.toast.info {
    background: #0d1a4a;
    border: 1px solid #2563eb;
    color: #dbeafe;
}

.toast i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast.success i {
    color: #22c55e;
}

.toast.error i {
    color: #ef4444;
}

.toast.info i {
    color: #3b82f6;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive toast adjustments */
@media (max-width: 768px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        max-width: none;
        margin-bottom: 8px;
        padding: 14px 16px;
    }
}

/* Authentication styles */
.empty {
    color: var(--muted);
    padding: 12px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.empty p {
    margin: 0 0 16px 0;
    font-size: 1rem;
}

.empty button {
    margin: 0 auto;
}

/* Error Message Styling */
.error-message {
    background: rgba(255, 92, 92, 0.1);
    border: 1px solid rgba(255, 92, 92, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.error-message i {
    color: var(--danger);
    font-size: 1rem;
}

.var-grid select:focus,
.detail-grid select:focus,
.var-grid input:focus,
.detail-grid input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.15);
}

/* Admin Portal */
.admin-portal {
  text-align: center;
  padding: 40px 20px;
}

.admin-portal h2 {
  color: var(--accent);
  font-size: 2rem;
  margin-bottom: 20px;
}

.admin-portal .empty {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  max-width: 600px;
  margin: 0 auto;
}

.admin-portal .empty p {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 10px 0;
}

.admin-portal .loading-spinner {
  text-align: center;
  margin: 20px 0;
  color: var(--accent);
}

/* Admin Portal Background Override */
body.admin-portal-active {
  background: #1a0f0f !important; /* Dark red/maroon background */
  transition: background-color 0.3s ease;
}

body.admin-portal-active .app-header {
  background: #2d1a1a !important; /* Slightly lighter red for header */
  border-bottom-color: #4d2a2a !important;
  transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

body.admin-portal-active .tabs {
  background: #2d1a1a !important; /* Slightly lighter red for tabs */
  border-bottom-color: #4d2a2a !important;
  transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

body.admin-portal-active .pane {
  background: #1a0f0f !important; /* Dark red/maroon for main content */
  transition: background-color 0.3s ease;
}

/* Admin Portal Layout Overrides */
.admin-portal .columns {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 16px !important;
}

.admin-portal .sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  min-width: 280px;
}

.admin-portal .content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Admin Portal Aircraft Cards - More Specific Styling */
.admin-portal .list-item.aircraft-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: #10182a;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  position: relative;
}

.admin-portal .list-item.aircraft-card:hover {
  border-color: var(--accent);
  background: #0e1525;
}

.admin-portal .list-item.aircraft-card.selected {
  border-color: var(--accent);
  background: rgba(77, 163, 255, 0.1);
}

.admin-portal .list-item.aircraft-card .aircraft-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.admin-portal .list-item.aircraft-card .aircraft-icao {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 80px); /* Reserve space for badges */
  margin-right: 8px;
}

/* Container for badges to keep them in top-right */
.admin-portal .list-item.aircraft-card .aircraft-badges {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.admin-portal .list-item.aircraft-card .airline-icao {
  background: var(--panel-2);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.admin-portal .list-item.aircraft-card .aircraft-meta {
  font-size: 0.85rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-portal .list-item.aircraft-card .developer {
  color: var(--muted);
  font-style: italic;
}

.admin-portal .list-item.aircraft-card .delete-btn {
  opacity: 0.6;
  transition: opacity 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 6px;
  font-size: 0.8rem;
  background: transparent;
  border: none;
  color: var(--muted);
}

.admin-portal .list-item.aircraft-card .delete-btn:hover {
  opacity: 1;
  color: var(--danger);
}

/* Global Default Read-Only Styles */
.read-only {
  opacity: 0.7;
  pointer-events: none;
}

.read-only .edit-btn,
.read-only .help-btn {
  pointer-events: auto;
}

.help-btn {
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s ease;
}

.help-btn:hover {
  color: #66b3ff;
}

/* Disabled state for read-only elements */
button:disabled,
input:disabled,
select:disabled,
.badge.clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Read-only form fields */
.read-only input,
.read-only select,
.read-only .contenteditable {
  background-color: var(--panel-2);
  color: var(--muted);
  border-color: var(--border);
}

/* Help button styling */
.help-btn {
  font-size: 0.9rem;
  padding: 2px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.help-btn:hover {
  background-color: rgba(77, 163, 255, 0.1);
  transform: scale(1.1);
}

/* Enhanced read-only styling */
.read-only .list-item {
  border-left: 3px solid var(--accent);
  background-color: rgba(77, 163, 255, 0.05);
}

.read-only .card-header {
  background-color: rgba(77, 163, 255, 0.1);
}

/* Global default badge styling */
.badge.magenta {
  background-color: magenta;
  color: white;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

/* Discord link styling */
a[href*="discord"] {
  color: magenta !important;
  text-decoration: none;
}

a[href*="discord"]:hover {
  text-decoration: underline;
}

/* Enhanced PDF Loading Experience */
.pdf-loading-container {
  background: linear-gradient(135deg, #0c1220 0%, #1a2332 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  text-align: center;
}

.loading-header {
  margin-bottom: 24px;
}

.loading-header i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}

.loading-header h4 {
  color: var(--text);
  font-size: 1.4rem;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.loading-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  font-style: italic;
}

/* Progress Bar */
.progress-container {
  margin: 24px 0;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: var(--panel-2);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  animation: progressGlow 3s ease-in-out infinite;
}

@keyframes progressGlow {
  0%, 100% { 
    box-shadow: 0 0 0 rgba(77, 163, 255, 0);
  }
  50% { 
    box-shadow: 0 0 8px rgba(77, 163, 255, 0.3);
  }
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #66b3ff 100%);
  border-radius: 6px;
  transition: width 0.8s ease;
  position: relative;
  min-width: 4px; /* Ensure there's always a visible bar */
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  margin-top: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Loading Messages */
.loading-messages {
  margin: 16px 0;
  text-align: left;
  max-height: 140px; /* Much more compact - about half the previous height */
  overflow: hidden;
}

.message-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin: 2px 0;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  opacity: 0.4;
  transition: all 0.3s ease;
  transform: translateX(-10px);
  animation: messageFloat 4s ease-in-out infinite;
}

@keyframes messageFloat {
  0%, 100% { transform: translateX(-10px) translateY(0); }
  50% { transform: translateX(-10px) translateY(-2px); }
}

.message-item.active {
  opacity: 1;
  background: rgba(77, 163, 255, 0.1);
  border-color: var(--accent);
  transform: translateX(0);
  box-shadow: 0 2px 8px rgba(77, 163, 255, 0.2);
}

.message-item i {
  color: var(--accent);
  font-size: 0.85rem;
  width: 16px;
  text-align: center;
}

.message-item span {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Important Notice */
.important-notice {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.important-notice i {
  color: #ffc107;
  font-size: 0.9rem;
}

.important-notice span {
  color: #b8860b;
  font-weight: 500;
}

/* Completion Notice */
.completion-notice {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.completion-notice i {
  color: #22c55e;
  font-size: 0.9rem;
}

.completion-notice span {
  color: #15803d;
  font-weight: 500;
}

/* Item Actions Section in Expanded Checklist Items */
.item-actions-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.item-actions-section button {
  min-width: 140px;
}

/* Visual Help Icon for Response Subtext */
.visual-help-icon {
  font-size: 0.75rem;
  color: #3b82f6; /* Blue color matching save button */
  margin-right: 6px;
  cursor: help;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  display: inline-block;
  vertical-align: middle;
  position: relative; /* For tooltip positioning */
  line-height: 1;
  font-weight: bold;
}

.visual-help-icon:hover {
  opacity: 1;
}

/* Bootstrap-style tooltip */
.visual-help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 0;
  background: #000;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  width: auto;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-top: 8px;
}

.visual-help-icon::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 8px;
  border: 4px solid transparent;
  border-bottom-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  z-index: 1000;
  pointer-events: none;
  margin-top: 4px;
}

.visual-help-icon:hover::after,
.visual-help-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Secondary text styling for form labels */
.secondary-text {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
  opacity: 0.8;
}

/* Help icon styling for column headers */
.help-icon {
  font-size: 1rem;
  color: var(--accent);
  margin-left: 8px;
  cursor: help;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  vertical-align: middle;
  display: inline-block;
  position: relative;
}

/* Optional text styling for form labels */
.optional-text {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
}

/* Required text styling for form labels */
.required-text {
  font-size: 0.8rem;
  color: #e74c3c;
  font-weight: 400;
  margin-left: 8px;
}


/* Unsaved changes warning badge */
.unsaved-changes-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #f1c40f;
  border: 1px solid #f1c40f;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0 16px;
  animation: fadeIn 0.3s ease-in;
  opacity: 0.8;
}

.unsaved-changes-warning i {
  color: #f1c40f;
  font-size: 0.9rem;
}

/* Save Changes button styling */
.save-changes-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

/* Last Updated timestamp styling */
.last-updated {
  position: absolute;
  bottom: 6px;
  right: 12px;
  font-size: 0.6rem;
  opacity: 0.7;
  color: var(--muted);
}

/* Ensure card containers have relative positioning for absolute timestamps */
.list-item.row-item,
.item-detail {
  position: relative;
  padding-bottom: 24px; /* Extra space at bottom for timestamp */
}

.last-updated .muted.small {
  font-size: 0.6rem;
  color: var(--muted);
  opacity: 0.7;
}

.save-changes-btn.has-unsaved-changes {
  background: #2ecc71;
  border-color: #2ecc71;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 0.8; transform: translateY(0); }
}




/* Contenteditable placeholder styling */
.contenteditable-placeholder {
  position: relative;
  min-width: 200px;
  display: inline-block;
}

/* Wider width for checklist item names */
.contenteditable-placeholder.item-name {
  min-width: 300px;
}

.contenteditable-placeholder[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--muted);
  opacity: 0.7;
  pointer-events: none;
  font-style: italic;
  z-index: 1;
  font-size: 0.7rem;
  line-height: 1.2;
}

.help-icon:hover {
  opacity: 1;
}

/* Simple tooltip for help icons */
.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 300px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.help-icon::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
}

.help-icon:hover::after,
.help-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Alert styles for important information */
.alert {
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert i {
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
  color: #93c5fd;
}

.alert-info i {
  color: #3b82f6;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: #f59e0b;
  color: #fcd34d;
}

.alert-warning i {
  color: #f59e0b;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
  color: #fca5a5;
}

.alert-danger i {
  color: #ef4444;
}

/* Restore Draft Modal Styling */
.modal-content.restore-draft-modal {
  max-width: 700px;
  max-height: 80vh;
}

.draft-explanation {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.draft-explanation p {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.draft-explanation p.note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0;
}

.draft-explanation i {
  color: var(--accent);
  margin-right: 6px;
}

.loading-indicator {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.loading-indicator i {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: block;
  color: var(--accent);
}

.no-drafts {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.no-drafts i {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
  opacity: 0.5;
}

.draft-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.draft-item {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-2);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.draft-item:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.draft-item.selected {
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--accent);
}

.draft-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.draft-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.draft-time i {
  color: var(--accent);
}

.draft-stats {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--muted);
  align-items: center;
}

.draft-stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.draft-stats i {
  color: var(--accent);
  font-size: 0.8rem;
}





/* Responsive adjustments for restore draft modal */
@media (max-width: 768px) {
  .modal-content.restore-draft-modal {
    max-width: 95vw;
    max-height: 85vh;
  }
  
  .draft-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .draft-stats {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .draft-explanation {
    padding: 12px;
  }
  
  .draft-item {
    padding: 12px;
  }
  
  .draft-stats {
    flex-direction: column;
    gap: 4px;
  }
}

/* Speech and Pronunciation Section Styling */
.speech-section {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--panel-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.speech-section label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  color: var(--text);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  font-weight: normal;
}

.radio-option:hover {
  background: var(--panel);
}

.radio-option input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.radio-option span {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.3;
}

.pronunciation-section {
  margin-bottom: 16px;
}

.pronunciation-button-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pronunciation-input {
  margin-bottom: 12px;
}

.pronunciation-input label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}

.pronunciation-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.9rem;
}

.pronunciation-input input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.2);
}

.pronunciation-input .secondary-text {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: normal;
}

/* Drag Handle Styles */
.drag-handle {
  cursor: grab;
  color: var(--muted);
  padding: 8px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  margin-right: 4px; /* Reduced from 8px to give more space to content */
  opacity: 0.5;
  flex-shrink: 0;
}

.drag-handle:hover {
  color: var(--accent);
  background: rgba(77, 163, 255, 0.1);
  opacity: 1;
  transform: scale(1.1);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Draggable item modifications - higher specificity to override .row-item */
.list-item.row-item.draggable {
  display: flex;
  align-items: stretch !important; /* allow middle column to take full height */
  transition: all 0.2s ease;
  justify-content: flex-start !important; /* Override space-between for draggable items */
  gap: 8px;
  align-self: stretch; /* ensure full height for inner alignment */
}

/* Higher specificity to override .row-item .col */
.list-item.row-item.draggable .col {
  flex: 1; /* Take up remaining space */
  min-width: 0; /* Allow text to wrap/truncate properly */
  position: static !important; /* let timestamp position against card, not column */
  display: flex !important; /* Override the column flex-direction from .row-item .col */
  flex-direction: row !important; /* Make this behave like item-summary */
  align-items: center !important; /* Vertically center inline content */
  align-self: stretch; /* fill full card height so centering works */
}

.list-item.row-item.draggable .row-actions {
  flex-shrink: 0; /* Don't shrink the actions */
  margin-left: auto; /* Push to the right */
  display: flex; align-items: center; /* ensure vertical centering */
  align-self: center; /* center within stretched parent */
}

/* Keep drag handle centered when parent items stretch */
.list-item.row-item.draggable .drag-handle {
  align-self: center;
}

/* Keep original padding for draggable cards - higher specificity */
.list-item.row-item.draggable {
  padding: 10px 12px; /* Back to original padding */
  min-height: 60px !important; /* Ensure enough height to prevent button overlap with timestamp */
  position: relative; /* anchor for absolute timestamp */
  padding-bottom: 24px; /* space for timestamp */
}

/* Position last-updated back to bottom right */
.list-item.draggable .last-updated {
  bottom: 4px;
  right: 8px; /* Back to bottom right corner */
}

.list-item.draggable:hover .drag-handle {
  opacity: 0.8;
}

.list-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
  z-index: 1000;
  background: var(--panel-2);
}

/* Item detail draggable modifications */
.item-detail.draggable {
  transition: all 0.2s ease;
}

.item-detail.draggable summary {
  display: flex;
  align-items: center;
  padding-left: 0;
}

.item-detail.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
  z-index: 1000;
  background: var(--panel-2);
}

/* Drop zone indicator */
.drop-zone-indicator {
  height: 20px; /* Increased from 4px to make it easier to drop on */
  background: transparent; /* Invisible background - visual line is in ::before */
  border-radius: 2px;
  margin: 4px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
  cursor: copy; /* Show drop cursor when hovering over drop zone */
  width: 100%; /* Ensure full width coverage */
  z-index: 1000; /* Above other elements */
  pointer-events: auto; /* Ensure it can receive drops */
}

.drop-zone-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 4px; /* Visual line remains 4px */
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none; /* Allow clicks to pass through to parent */
  animation: dropGlow 1.5s ease-in-out infinite;
}

.drop-zone-indicator.visible {
  opacity: 1;
  /* Subtle background for easier targeting - can be removed later */
  background: rgba(77, 163, 255, 0.05); /* Very light blue background */
}

@keyframes dropGlow {
  0%, 100% { 
    opacity: 0.7;
    transform: translateY(-50%) scaleY(1);
  }
  50% { 
    opacity: 1;
    transform: translateY(-50%) scaleY(1.5);
  }
}

/* Drag feedback */
.drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.8;
  transform: rotate(2deg);
  transition: none;
  padding: 8px;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List modifications for drag and drop */
.list.sortable {
  position: relative;
}

/* During drag operation */
body.dragging {
  cursor: grabbing;
  user-select: none;
}

body.dragging * {
  cursor: grabbing !important;
}

/* Disable text selection during drag */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.loading-content {
  text-align: center;
  color: var(--text);
  max-width: 400px;
  padding: 40px;
}

.loading-spinner {
  margin-bottom: 24px;
}

.loading-spinner i {
  font-size: 3rem;
  color: var(--accent);
  animation: fa-spin 1s infinite linear;
}

.loading-content h2 {
  margin: 0 0 16px 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
}

.loading-content p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .radio-group {
    gap: 6px;
  }
  
  .pronunciation-button-container {
    flex-direction: column;
    gap: 6px;
  }
  
  .drag-handle {
    min-width: 20px;
    padding: 6px 4px;
  }
  
  .loading-content {
    padding: 20px;
  }
  
  .loading-spinner i {
    font-size: 2.5rem;
  }
  
  .loading-content h2 {
    font-size: 1.7rem;
  }
  
  .loading-content p {
    font-size: 1rem;
  }
}

/* Automation icon styles */
.automation-icon {
  color: #ff8c00; /* Orange color */
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.9;
}

.automation-icon:hover {
  opacity: 1;
}

/* Responsive aircraft ICAO display for very long strings */
/* Live save button styling */
.live-save-button {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.live-save-button button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .list-item.aircraft-card .aircraft-icao,
  .admin-portal .list-item.aircraft-card .aircraft-icao {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .list-item.aircraft-card .aircraft-icao,
  .admin-portal .list-item.aircraft-card .aircraft-icao {
    font-size: 0.8rem;
  }
}

/* Fieldset styling for accessibility */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 8px;
  padding: 0;
}

/* Enhanced accessibility focus indicators */
[role="radio"]:focus,
[role="option"]:focus,
[role="button"]:focus,
.badge.clickable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* User Lookup Modal Styles */
.modal-content.large {
  max-width: 1200px;
  width: 95%;
}

.search-form {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.search-form .form-row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.search-form label {
  flex: 1;
  min-width: 0;
}

.search-form button {
  flex-shrink: 0;
  height: 40px;
}

.lookup-results {
  margin-top: 24px;
}

.results-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.results-header h4 {
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.empty-results {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-style: italic;
}

.users-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.user-section {
  border-bottom: 1px solid var(--border);
}

.user-section:last-child {
  border-bottom: none;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--card-bg);
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-header:hover {
  background: var(--hover-bg);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.discord-handle {
  color: var(--accent);
  font-weight: 500;
}

.user-id {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.user-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aircraft-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.user-header i.fa-chevron-down {
  transition: transform 0.2s;
}

.user-header i.fa-chevron-down.expanded {
  transform: rotate(180deg);
}

.user-aircraft {
  background: var(--bg-primary);
}

.aircraft-table {
  width: 100%;
  border-collapse: collapse;
}

.aircraft-table th {
  background: var(--card-bg);
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.aircraft-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.aircraft-table tbody tr:last-child td {
  border-bottom: none;
}

.aircraft-row {
  background: var(--hover-bg) !important;
  font-weight: 600;
  color: var(--text-primary);
}

.family-icaos {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: normal;
}

.collection-details {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 4px;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.activated {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.deactivated {
  background: var(--muted-bg);
  color: var(--text-secondary);
}

.conflict-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.aircraft-table tbody tr.conflict {
  background: var(--warning-bg) !important;
}

.aircraft-table tbody tr.conflict td {
  border-color: var(--warning);
}

@media (max-width: 768px) {
  .search-form .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .aircraft-table {
    font-size: 0.9rem;
  }
  
  .aircraft-table th,
  .aircraft-table td {
    padding: 8px;
  }

/* Removed old text highlighting CSS - now using badges instead */

/* Collection Status Badges - Override existing badge styles */
.aircraft-table .collection-status {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 4px;
}

.aircraft-table .collection-status .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.aircraft-table .collection-status .badge-success {
  background-color: #00d2a3 !important;
  color: #ffffff !important;
  border: 1px solid #00b894 !important;
}

.aircraft-table .collection-status .badge-secondary {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border: 1px solid #5a6268 !important;
}

.aircraft-table .collection-status .badge-warning {
  background-color: #ff8c00 !important;
  color: #ffffff !important;
  border: 1px solid #e07600 !important;
}

/* Override any conflicting badge styles */
.aircraft-table .collection-status .badge.badge-success,
.aircraft-table .collection-status .badge.badge-secondary,
.aircraft-table .collection-status .badge.badge-warning {
  background: none !important;
}

.aircraft-table .collection-status .badge-success {
  background-color: #00d2a3 !important;
}

.aircraft-table .collection-status .badge-secondary {
  background-color: #6c757d !important;
}

.aircraft-table .collection-status .badge-warning {
  background-color: #ff8c00 !important;
}

/* Reviews and Star Rating Styles */
.collection-reviews-summary {
  transition: opacity 0.2s ease;
}

.collection-reviews-summary:hover {
  opacity: 0.8;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.star-rating .fa-star {
  color: #fbbf24;
}

.star-rating .fa-star.empty {
  color: var(--border);
}

.star-rating .fa-star-half-stroke {
  color: #fbbf24;
}

/* Review Form Star Input */
.review-star-input .fa-star {
  transition: transform 0.2s ease, color 0.2s ease;
}

.review-star-input .fa-star:hover {
  transform: scale(1.1);
}

/* Review Card Hover */
.review-card {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.review-card:hover {
  border-color: var(--accent) !important;
}

/* Rating Breakdown Bar Animation */
.rating-bar {
  transition: width 0.5s ease;
}

/* Owner Reply Styling */
.owner-reply-section {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.owner-reply-display {
  background: rgba(77, 163, 255, 0.05);
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.owner-reply-edit {
  background: rgba(77, 163, 255, 0.1);
  padding: 12px;
  border-radius: 6px;
  border: 2px solid var(--accent);
}

.owner-badge {
  background: #10b981;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}

/* Review timestamp styling */
.review-timestamp {
  color: var(--muted);
  font-size: 0.8rem;
}

.review-edited {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
}

/* Variable Grid Layout Updates */
.var-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 100px; /* Category, Type, Test button */
  gap: 12px;
  align-items: start;
}

.var-name-row {
  grid-column: 1 / -1; /* Full width for variable name */
}

.var-action-value {
  grid-column: 1 / -1; /* Full width for action value */
}

.var-category {
  grid-column: 1;
}

.var-type {
  grid-column: 2;
}

.var-test {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-self: center;
}

.var-test .helper-text {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
  margin-top: 4px;
}

/* Test Button Column Style */
.test-btn-column {
  background: var(--accent);
  color: #071222;
  border: 1px solid var(--accent);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  width: 100%;
}

.test-btn-column:hover:not(:disabled) {
  background: #66b3ff;
  border-color: #66b3ff;
}

.test-btn-column:disabled {
  background: var(--border);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Legacy inline test button (remove old styles) */
.action-value-container {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.action-value-container input {
  flex: 1;
}

.test-btn {
  display: none; /* Hide old inline buttons */
}