/**
 * Meetings View CSS - Phase 5
 *
 * Comprehensive styling for the meetings modularized interface.
 * Includes:
 * - Responsive 2-column layout (desktop) / stacked (mobile)
 * - List pane with search/filter
 * - Detail pane with tabs
 * - Tab content styling
 * - Modal styling
 * - Responsive breakpoints (1024px, 768px, 600px, 480px)
 */

/* ============================================================================
   Layout & Structure
   ============================================================================ */

.meetings-layout,
.meeting-list-pane,
.meeting-detail-pane {
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --border-color: var(--color-border-light);
  --border-color-hover: var(--color-border);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --accent-color: var(--color-primary);
  --accent-color-hover: var(--color-primary-dark);
  --accent-color-transparent: var(--color-primary-50);
  --status-scheduled: var(--color-info-50);
  --status-scheduled-text: var(--color-info-dark);
  --status-progress: var(--color-warning-50);
  --status-progress-text: var(--color-warning-dark);
  --status-approved: var(--color-success-50);
  --status-approved-text: var(--color-success-dark);
  --status-archived: var(--color-bg-tertiary);
  --status-archived-text: var(--color-text-secondary);
  --status-failed: var(--color-error-50);
  --status-failed-text: var(--color-error);
}

.meetings-layout {
  display: grid;
  grid-template-columns: minmax(320px, var(--meetings-list-width, 360px)) 12px minmax(0, 1fr);
  gap: 1px;
  height: 100%;
  background: var(--border-color, #2a2a2a);
  border-radius: 8px;
  overflow: hidden;
}

.meeting-list-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #1a1a1a);
  border-right: 1px solid var(--border-color, #2a2a2a);
  max-height: 100%;
  overflow-y: auto;
}

.meeting-detail-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #121212);
  max-height: 100%;
  overflow-y: auto;
}

.pane-splitter {
  cursor: col-resize;
  background:
    linear-gradient(180deg, transparent, rgba(0, 102, 204, 0.22), transparent),
    var(--bg-secondary, #1a1a1a);
  border-left: 1px solid var(--border-color, #2a2a2a);
  border-right: 1px solid var(--border-color, #2a2a2a);
  touch-action: none;
}

.pane-splitter:hover {
  background:
    linear-gradient(180deg, transparent, rgba(0, 102, 204, 0.35), transparent),
    var(--bg-secondary, #1a1a1a);
}

/* ============================================================================
   List Pane
   ============================================================================ */

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  background: var(--bg-secondary, #1a1a1a);
}

.list-title-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.meeting-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--accent-color, #5865f2);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

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

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.btn-icon:hover {
  background: var(--accent-color, #5865f2);
  color: white;
  border-color: var(--accent-color, #5865f2);
}

.btn-icon:focus-visible,
.detail-tab:focus-visible,
.detail-action-menu-item:focus-visible,
.row-action-menu-item:focus-visible,
.btn-vote:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color, #5865f2) 78%, white);
  outline-offset: 2px;
}

/* Search & Filter */

.search-container {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-color, #5865f2);
  background: var(--bg-primary, #121212);
}

.filter-container {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #aaa);
}

.filter-select {
  padding: 6px 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 4px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent-color, #5865f2);
}

/* Meeting Table */

.meeting-table-wrapper {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 12px 16px;
  background: var(--bg-tertiary, #2a2a2a);
  border-bottom: 1px solid var(--border-color, #3a3a3a);
  position: sticky;
  top: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meeting-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  cursor: pointer;
  transition: background 0.2s ease;
  align-items: center;
}

.meeting-item:hover {
  background: var(--bg-tertiary, #2a2a2a);
}

.meeting-item.selected {
  background: var(--accent-color-transparent, rgba(88, 101, 242, 0.1));
  border-left: 3px solid var(--accent-color, #5865f2);
  padding-left: 13px;
}

.meeting-item[role="row"] {
  outline: none;
}

.meeting-item[role="row"]:focus-visible {
  outline: 2px solid var(--accent-color, #5865f2);
  outline-offset: -2px;
}

/* Table Columns */

[data-label]::before {
  content: attr(data-label);
  display: none;
}

.col-location {
  font-weight: 500;
  color: var(--text-primary, #fff);
}

.col-date,
.col-status,
.col-attendees {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.badge-scheduled {
  background: var(--status-scheduled, rgba(100, 150, 255, 0.2));
  color: var(--status-scheduled-text, #64a6ff);
}

.badge-in-progress {
  background: var(--status-progress, rgba(255, 150, 100, 0.2));
  color: var(--status-progress-text, #ff9664);
}

.badge-approved {
  background: var(--status-approved, rgba(100, 255, 150, 0.2));
  color: var(--status-approved-text, #64ff96);
}

.badge-archived {
  background: var(--status-archived, rgba(150, 150, 150, 0.2));
  color: var(--status-archived-text, #999);
}

/* Empty State */

.empty-state {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 20px;
  border-radius: 16px;
  border: 1px dashed var(--border-color, #2a2a2a);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.05), rgba(18, 18, 18, 0.02));
  color: var(--text-secondary, #aaa);
}

.empty-state p {
  margin: 8px 0;
  font-size: 14px;
}

/* ============================================================================
   Detail Pane
   ============================================================================ */

.meeting-detail-header {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  background: var(--bg-secondary, #1a1a1a);
}

.detail-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.title-content {
  display: grid;
  gap: 8px;
}

.detail-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color, #5865f2);
}

.detail-title h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.detail-meta-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-primary, #121212);
  border: 1px solid var(--border-color, #2a2a2a);
}

.meta-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.meta-value {
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.5;
}

.meta-subvalue {
  color: var(--text-secondary, #aaa);
  font-size: 13px;
}

.meta-empty {
  color: var(--text-tertiary, #666);
  font-style: italic;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  background: var(--accent-color-transparent, rgba(88, 101, 242, 0.1));
  color: var(--accent-color, #5865f2);
  border-radius: 4px;
  font-size: 12px;
  margin-right: 4px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  position: relative;
  flex-wrap: wrap;
}

.detail-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #2a2a2a);
  background:
    linear-gradient(180deg, rgba(0, 102, 204, 0.06), transparent),
    var(--bg-primary, #121212);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

.detail-action-menu.hidden {
  display: none;
}

.detail-action-menu-item {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary, #fff);
  text-align: left;
  cursor: pointer;
}

.detail-action-menu-item:hover {
  background: var(--bg-tertiary, #2a2a2a);
}

/* Tab Bar */

.detail-tab-bar {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  background: var(--bg-secondary, #1a1a1a);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 5;
}

.detail-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-primary, #121212);
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}

.detail-tab:hover {
  color: var(--text-primary, #fff);
  background: var(--bg-tertiary, #2a2a2a);
}

.detail-tab.active {
  color: var(--text-primary, #fff);
  background: var(--accent-color, #5865f2);
  border-color: var(--accent-color, #5865f2);
}

.tab-icon {
  font-size: 16px;
}

/* Tab Content */

.detail-panels {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 36px;
}

.detail-panel {
  display: none;
}

.detail-panel.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

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

/* ============================================================================
   Tab Content Styling
   ============================================================================ */

/* Minutes Editor */

.minutes-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.surface-primary-actions,
.surface-secondary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.surface-secondary-actions .btn {
  opacity: 0.88;
}

.editor-input {
  flex: 1;
  min-height: 400px;
  padding: 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  resize: vertical;
  line-height: 1.5;
}

.editor-input:focus {
  outline: none;
  border-color: var(--accent-color, #5865f2);
  background: var(--bg-primary, #121212);
}

.word-count {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

.audio-upload-zone {
  padding: 24px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 2px dashed var(--border-color, #3a3a3a);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-upload-zone:hover {
  border-color: var(--accent-color, #5865f2);
  background: var(--accent-color-transparent, rgba(88, 101, 242, 0.05));
}

.audio-upload-zone.dragover {
  border-color: var(--accent-color, #5865f2);
  background: var(--accent-color-transparent, rgba(88, 101, 242, 0.1));
}

.zone-title {
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 8px;
}

.zone-text {
  color: var(--text-secondary, #aaa);
  margin-bottom: 4px;
  font-size: 13px;
}

.zone-formats {
  font-size: 12px;
  color: var(--text-tertiary, #666);
}

.transcription-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color, #5865f2);
  font-size: 13px;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #3a3a3a);
  border-top-color: var(--accent-color, #5865f2);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.version-history {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #2a2a2a);
}

.history-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 12px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  padding: 10px 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 4px;
  font-size: 12px;
}

.history-date {
  font-weight: 600;
  color: var(--accent-color, #5865f2);
}

.history-author {
  color: var(--text-secondary, #aaa);
  font-size: 11px;
}

.history-preview {
  color: var(--text-tertiary, #666);
  margin-top: 4px;
}

/* Action Items */

.actions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.actions-list-container {
  flex: 1;
  overflow-y: auto;
}

.actions-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.action-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), var(--bg-tertiary, #2a2a2a));
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.status-not-started {
  background: var(--status-archived);
  color: var(--status-archived-text);
}

.status-in-progress {
  background: var(--status-progress);
  color: var(--status-progress-text);
}

.status-completed {
  background: var(--status-approved);
  color: var(--status-approved-text);
}

.col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.row-action-menu {
  position: relative;
}

.row-action-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 132px;
  padding: 8px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 102, 204, 0.06), transparent),
    var(--bg-primary, #121212);
  border: 1px solid var(--border-color, #2a2a2a);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  z-index: 8;
}

.row-action-menu-panel.hidden {
  display: none;
}

.row-action-menu-item {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary, #fff);
  text-align: left;
  cursor: pointer;
}

.row-action-menu-item:hover {
  background: var(--bg-tertiary, #2a2a2a);
}

/* Motions */

.motions-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.motions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.motion-item {
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), var(--bg-tertiary, #2a2a2a));
  border-radius: 12px;
  border-left: 3px solid var(--accent-color, #5865f2);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

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

.motion-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  flex: 1;
}

.motion-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 12px;
}

.motion-votes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color, #2a2a2a);
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  margin: 12px 0;
  font-size: 12px;
}

.vote-count {
  color: var(--text-secondary, #aaa);
}

.motion-result {
  font-size: 12px;
  margin-bottom: 12px;
}

.result-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.result-pending {
  background: var(--status-archived);
  color: var(--status-archived-text);
}

.result-passed {
  background: var(--status-approved);
  color: var(--status-approved-text);
}

.result-failed {
  background: var(--status-failed);
  color: var(--status-failed-text);
}

.motion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.motion-row-menu {
  position: relative;
}

.btn-vote {
  padding: 6px 12px;
  background: var(--accent-color-transparent, rgba(88, 101, 242, 0.1));
  border: 1px solid var(--accent-color, #5865f2);
  border-radius: 4px;
  color: var(--accent-color, #5865f2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-vote:hover {
  background: var(--accent-color, #5865f2);
  color: white;
}

/* Audit Log */

.audit-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.audit-log {
  flex: 1;
  overflow-y: auto;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.audit-entry {
  padding: 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border-left: 3px solid var(--accent-color, #5865f2);
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 12px;
}

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

.entry-action {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
}

.action-created {
  background: rgba(100, 200, 255, 0.2);
  color: #64c8ff;
}

.action-updated {
  background: rgba(255, 180, 100, 0.2);
  color: #ffb464;
}

.action-approved {
  background: rgba(100, 255, 150, 0.2);
  color: #64ff96;
}

.action-archived {
  background: rgba(150, 150, 150, 0.2);
  color: #999;
}

.entry-timestamp {
  color: var(--text-secondary, #aaa);
  font-size: 11px;
}

.entry-user {
  display: flex;
  gap: 6px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
}

.user-label {
  font-weight: 600;
}

.entry-changes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #2a2a2a);
}

.changes-label {
  display: block;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  margin-bottom: 6px;
}

.change-item {
  color: var(--text-tertiary, #666);
  margin: 4px 0;
  padding-left: 12px;
}

/* Public Summary */

.summary-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ============================================================================
   Modal Styling
   ============================================================================ */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.modal.visible {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: var(--bg-primary, #121212);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  width: 24px;
  height: 24px;
  transition: color 0.2s ease;
}

.btn-close:hover {
  color: var(--text-primary, #fff);
}

.modal-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #2a2a2a);
  background: var(--bg-secondary, #1a1a1a);
  border-radius: 0 0 8px 8px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-color, #5865f2);
  background: var(--bg-primary, #121212);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Courier New', monospace;
}

/* ============================================================================
   Buttons (if not imported from global)
   ============================================================================ */

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-color, #5865f2);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-color-hover, #4753d9);
}

.btn-secondary {
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #3a3a3a);
  color: var(--text-primary, #fff);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border-color, #3a3a3a);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary, #aaa);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-primary, #fff);
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  .meetings-layout {
    grid-template-columns: 1fr;
  }

  .pane-splitter {
    display: none;
  }

  .meeting-list-pane {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-right: none;
  }

  .meeting-list-pane.visible {
    display: flex;
  }

  .meeting-detail-pane {
    width: 100%;
  }

  .detail-tab-bar {
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
  }

  .detail-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 0;
  }

  .tab-label {
    display: none;
  }

  .meeting-item {
    grid-template-columns: 1fr 1fr;
  }

  .table-header {
    grid-template-columns: 1fr 1fr;
  }

  .col-status,
  .col-attendees {
    display: none;
  }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  .meetings-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .meeting-list-pane {
    border-right: none;
  }

  .meeting-item {
    grid-template-columns: 1fr;
  }

  .table-header {
    display: none;
  }

  [data-label]::before {
    display: inline;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    margin-right: 8px;
    min-width: 80px;
  }

  .col-location {
    padding: 4px 0;
  }

  .detail-tab-bar {
    justify-content: space-between;
    padding: 0;
  }

  .detail-tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 11px;
    text-align: center;
  }

  .tab-icon {
    display: block;
    margin-right: 0;
  }

  .tab-label {
    display: none;
  }

  .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .actions-table {
    grid-template-columns: 1fr;
  }

  .motion-item {
    padding: 12px;
  }

  .filter-container {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .filter-select {
    width: 100%;
  }

  .detail-meta {
    grid-template-columns: 1fr;
  }

  .list-header {
    padding: 12px;
  }

  .detail-panels {
    padding: 12px;
  }

  .meeting-detail-header {
    padding: 12px;
  }
}

/* Extra small: < 480px */
@media (max-width: 480px) {
  .meetings-layout {
    border-radius: 0;
  }

  .list-title-section {
    min-width: 0;
    flex: 1;
  }

  .list-title {
    font-size: 16px;
  }

  .list-actions {
    gap: 4px;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .detail-title h1 {
    font-size: 18px;
  }

  .detail-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .editor-input {
    min-height: 200px;
  }

  .motion-votes {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .motion-item {
    padding: 10px;
  }

  .action-item-row {
    grid-template-columns: 1fr;
  }

  [data-label]::before {
    min-width: 70px;
    font-size: 11px;
  }
}

/* ============================================================================
   Utilities
   ============================================================================ */

.hidden {
  display: none !important;
}

.error {
  color: #ff6464;
  padding: 16px;
  background: rgba(255, 100, 100, 0.1);
  border-radius: 6px;
  text-align: center;
}

/* Focus management for accessibility */
*:focus-visible {
  outline: 2px solid var(--accent-color, #5865f2);
  outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color, #2a2a2a);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-color-hover, #3a3a3a);
}