/* GroundHog — main.css  */
/* Global reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  font-size: var(--font-size, 15px);
  color: var(--text-main, #1A1A2E);
  background: var(--surface, #F4F7FB);
  line-height: 1.6;
}

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg, #fff);
  border-right: 1px solid var(--border, #D0D9E8);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border, #D0D9E8);
}
.brand-icon { font-size: 1.5rem; }
.brand-name { font-size: 1.1rem; font-weight: 700; color: var(--primary, #0066CC); }

.nav-list { list-style: none; padding: .5rem 0; flex: 1; }
.nav-section {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #888);
  padding: 1rem 1rem .25rem;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  color: var(--text-main, #1A1A2E);
  text-decoration: none;
  border-radius: var(--radius, 8px);
  margin: .15rem .5rem;
  font-size: .92rem;
  transition: background .15s;
}
.nav-link:hover, .nav-link.active {
  background: var(--primary-light, #E8F0FB);
  color: var(--primary, #0066CC);
}
.nav-icon { font-size: 1rem; width: 1.2rem; }
.sidebar-footer { padding: .75rem 1rem; font-size: .75rem; color: var(--text-muted, #888); }

.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--sidebar-bg, #fff);
  border-bottom: 1px solid var(--border, #D0D9E8);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: .5rem; }
.breadcrumb-current { font-size: .9rem; color: var(--text-muted, #888); }
.topbar-right { display: flex; align-items: center; gap: .75rem; }

.content { padding: 1.5rem; max-width: 1400px; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: var(--radius, 8px);
  border: 1px solid transparent;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  font-weight: 500;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary, #0066CC); color: #fff; border-color: var(--primary, #0066CC); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--text-main); border-color: var(--border, #D0D9E8); }
.btn-ghost:hover:not(:disabled) { background: var(--surface, #F4F7FB); }
.btn-outline { background: transparent; color: var(--primary, #0066CC); border-color: var(--primary, #0066CC); }
.btn-outline:hover:not(:disabled) { background: var(--primary-light, #E8F0FB); }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger-ghost { background: transparent; color: #dc2626; border-color: #dc2626; }
.btn-danger-ghost:hover:not(:disabled) { background: #fef2f2; }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-xs { padding: .2rem .5rem; font-size: .78rem; }
.btn-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--text-muted, #888); }

/* ── Cards ── */
.card {
  background: var(--sidebar-bg, #fff);
  border: 1px solid var(--border, #D0D9E8);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #D0D9E8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title { font-size: 1rem; font-weight: 600; }
.card-body { padding: 1.25rem; }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.page-heading { font-size: 1.4rem; font-weight: 700; }
.header-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Forms ── */
.form-card {
  background: var(--sidebar-bg, #fff);
  border: 1px solid var(--border, #D0D9E8);
  border-radius: var(--radius, 8px);
  padding: 1.5rem;
}
.section-block { margin-bottom: 1.5rem; }
.section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border, #D0D9E8); }
.section-desc { font-size: .88rem; color: var(--text-muted, #888); margin-bottom: 1rem; }

.field-group { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.field-label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .35rem; }
.field-input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border, #D0D9E8);
  border-radius: calc(var(--radius, 8px) - 2px);
  background: var(--surface, #F4F7FB);
  color: var(--text-main, #1A1A2E);
  font-size: .92rem;
  transition: border-color .15s;
}
.field-input:focus { outline: none; border-color: var(--primary, #0066CC); }
.field-hint { font-size: .8rem; color: var(--text-muted, #888); margin-top: .25rem; }
.required { color: #dc2626; }
.field-required > .field-label::after { content: ' *'; color: #dc2626; font-weight: 700; }
.field-widget-hint { font-size: .72rem; color: var(--text-muted, #888); font-weight: normal; margin-left: .3rem; }
.hidden { display: none !important; }
.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: .75rem; padding: .25rem 0; }
.radio-label, .checkbox-label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border, #D0D9E8); }

/* ── Drop zone ── */
.drop-zone {
  border: 2px dashed var(--border, #D0D9E8);
  border-radius: var(--radius, 8px);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drag-active { border-color: var(--primary, #0066CC); background: var(--primary-light, #E8F0FB); }
.drop-icon { font-size: 2rem; margin-bottom: .5rem; }
.drop-text { font-size: .95rem; margin-bottom: .25rem; }
.drop-hint { font-size: .8rem; color: var(--text-muted, #888); }
.file-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.file-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; background: var(--surface, #F4F7FB); border-radius: calc(var(--radius, 8px) - 2px); font-size: .88rem; }
.file-name { flex: 1; }
.file-size { color: var(--text-muted, #888); font-size: .8rem; }
.btn-remove { background: none; border: none; cursor: pointer; color: #dc2626; font-size: .85rem; }
.file-badge { display: inline-block; background: var(--surface, #F4F7FB); border: 1px solid var(--border, #D0D9E8); border-radius: 4px; padding: .1rem .4rem; font-size: .78rem; margin: .1rem; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th { padding: .6rem 1rem; text-align: left; font-weight: 600; font-size: .8rem; background: var(--surface, #F4F7FB); border-bottom: 2px solid var(--border, #D0D9E8); white-space: nowrap; }
.data-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--border, #D0D9E8); vertical-align: top; }
.data-table tr:hover td { background: var(--surface, #F4F7FB); }
.row-active td { background: #f0fdf4 !important; }
.row-hidden td { opacity: .6; }
.row-required td:first-child { border-left: 3px solid var(--primary, #0066CC); }
.row-sub td { background: var(--surface, #F4F7FB) !important; }

/* ── Badges ── */
.badge-active { background: #dcfce7; color: #166534; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.badge-inactive { background: var(--surface, #F4F7FB); color: var(--text-muted, #888); padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; }
.badge-pending { background: #fef9c3; color: #713f12; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; }
.badge-parsing { background: #dbeafe; color: #1e40af; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; animation: pulse 1.5s infinite; }
.badge-repeatable { background: #fce7f3; color: #9d174d; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; }
.badge-error { background: #fee2e2; color: #991b1b; padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; cursor: help; }
.status-badge { padding: .15rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.status-draft { background: #fef9c3; color: #713f12; }
.status-completed { background: #dcfce7; color: #166534; }
.status-exported { background: #dbeafe; color: #1e40af; }
.meta-tag { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .5rem; font-size: .8rem; margin-left: .35rem; }
.project-id-badge { display: inline-block; background: var(--primary-light, #E8F0FB); color: var(--primary, #0066CC); border-radius: 4px; padding: .1rem .5rem; font-size: .8rem; font-family: monospace; }
.user-badge { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.user-role { padding: .1rem .4rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.role-admin { background: #fee2e2; color: #991b1b; }
.role-user { background: #dbeafe; color: #1e40af; }

/* ── Widget badges ── */
.widget-badge { padding: .1rem .4rem; border-radius: 4px; font-size: .75rem; font-family: monospace; }
.widget-text { background: #f3f4f6; }
.widget-select { background: #dbeafe; }
.widget-date { background: #fce7f3; }
.widget-radio { background: #dcfce7; }
.widget-checkbox { background: #fef9c3; }
.widget-textarea { background: #f3f4f6; }
.widget-number { background: #e0e7ff; }
.widget-file { background: #fef3c7; }
.widget-repeatable-group { background: #ede9fe; }
.widget-group { background: #f3f4f6; }

/* ── Tabs ── */
.tab-bar { display: flex; gap: .25rem; border-bottom: 2px solid var(--border, #D0D9E8); margin-bottom: 1rem; overflow-x: auto; }
.tab-btn { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: .5rem .9rem; font-size: .88rem; cursor: pointer; color: var(--text-muted, #888); white-space: nowrap; transition: all .15s; }
.tab-btn:hover { color: var(--primary, #0066CC); }
.tab-btn.active { color: var(--primary, #0066CC); border-bottom-color: var(--primary, #0066CC); font-weight: 600; }
.tab-count { background: var(--surface, #F4F7FB); border-radius: 99px; padding: .05rem .4rem; font-size: .75rem; margin-left: .3rem; }

/* ── Dashboard cards ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.project-card { background: #fff; border: 1px solid var(--border, #D0D9E8); border-radius: var(--radius, 8px); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; transition: box-shadow .15s; }
.project-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.project-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.project-name { font-size: 1rem; font-weight: 600; }
.project-name a { color: var(--text-main); text-decoration: none; }
.project-name a:hover { color: var(--primary, #0066CC); }
.project-desc { font-size: .85rem; color: var(--text-muted, #888); }
.project-stats { display: flex; gap: 1rem; }
.stat-item { text-align: center; }
.stat-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--primary, #0066CC); }
.stat-label { font-size: .75rem; color: var(--text-muted, #888); }
.project-card-actions { display: flex; gap: .5rem; margin-top: .25rem; }

/* ── Repeatable ── */
.repeatable-container { display: flex; flex-direction: column; gap: .75rem; }
.repeatable-row { border: 1px solid var(--border, #D0D9E8); border-radius: var(--radius, 8px); padding: 1rem; background: var(--surface, #F4F7FB); }
.repeatable-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.repeatable-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-card { background: #fff; border-radius: var(--radius, 8px); width: 520px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 1.25rem; overflow-y: auto; }
.modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .75rem; }

/* ── Alerts ── */
.alert { padding: .75rem 1rem; border-radius: var(--radius, 8px); margin-bottom: 1rem; font-size: .9rem; }
.alert-warning { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.error-msg { color: #cc2121; font-size: .88rem; padding: .5rem .75rem; background: #fee2e2; border-radius: 4px; margin: .5rem 0; }
.success-msg { color: #166534; font-size: .88rem; padding: .5rem .75rem; background: #dcfce7; border-radius: 4px; margin: .5rem 0; }
.validation-errors { background: #fee2e2; border: 1px solid #fca5a5; border-radius: var(--radius, 8px); padding: .75rem 1rem; margin: 1rem 0; color: #991b1b; font-size: .88rem; }
.validation-errors ul { margin-top: .5rem; padding-left: 1.25rem; }

/* ── Schema-specific ── */
.schema-section-header { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; margin-bottom: .75rem; }
.schema-section-header h3 { font-size: 1rem; }
.fhir-path { font-size: .75rem; color: var(--text-muted, #888); }
code { font-family: "Fira Code", "Consolas", monospace; font-size: .85em; background: var(--surface, #F4F7FB); padding: .1rem .3rem; border-radius: 3px; }

/* ── Misc ── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.empty-state p { color: var(--text-muted, #888); margin-bottom: 1.25rem; }
.empty-state-inline { padding: 1.5rem; text-align: center; color: var(--text-muted, #888); font-size: .9rem; }
.loading-state { text-align: center; padding: 3rem; color: var(--text-muted, #888); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 1rem; }

.json-viewer { background: #1e1e2e; color: #cdd6f4; padding: 1.25rem; border-radius: var(--radius, 8px); font-family: "Fira Code", monospace; font-size: .82rem; overflow-x: auto; white-space: pre; line-height: 1.6; max-height: 60vh; overflow-y: auto; }
.project-description { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.meta-item { display: flex; flex-direction: column; gap: .2rem; }
.meta-label { font-size: .75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ── Login ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--surface, #F4F7FB); }
.login-container { width: 100%; max-width: 400px; padding: 1rem; }
.login-card { background: #fff; border: 1px solid var(--border, #D0D9E8); border-radius: var(--radius, 8px); padding: 2rem; }
.login-brand { text-align: center; margin-bottom: 2rem; }
.login-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.login-title { font-size: 1.5rem; font-weight: 700; color: var(--primary, #0066CC); }
.login-subtitle { color: var(--text-muted, #888); font-size: .9rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }

/* Theme grid */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; padding: .5rem 0; }
.theme-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; cursor: pointer; transition: all .15s; }
.theme-card:hover { border-color: var(--primary); }
.theme-selected { border-color: var(--primary, #0066CC); background: var(--primary-light, #E8F0FB); }
.theme-swatch { width: 48px; height: 48px; border-radius: 50%; border: 3px solid; margin: 0 auto .5rem; }
.theme-name { display: block; font-size: .85rem; font-weight: 500; }
.theme-check { display: block; color: var(--primary); font-size: 1.1rem; }

/* Form container */
.form-container { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.form-body { min-height: 400px; }
.section-panel { padding: .25rem 0; }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }