/* ============================================================
   BasinIQ — dashboard.css
   Deploy to: public_html/css/dashboard.css
   Loaded by: dashboard.html (in addition to main.css)
   ============================================================ */

/* ── Dashboard Layout ── */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 61px;
  background: var(--pitch);
}

/* ── Sidebar ── */
.sidebar {
  width: 240px;
  background: var(--deep);
  border-right: 1px solid var(--line);
  padding: 28px 0;
  flex-shrink: 0;
  position: fixed;
  top: 61px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  z-index: 50;
}

.sidebar-section {
  margin-bottom: 28px;
}

.sidebar-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  padding: 0 20px;
  margin-bottom: 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.sidebar-link:hover {
  color: white;
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.1);
}

.sidebar-link.active {
  color: white;
  background: rgba(26,72,117,0.2);
  border-left-color: var(--amber);
}

.sidebar-divider {
  height: 1px;
  background: var(--line);
  margin: 12px 20px;
}

/* ── Main content area ── */
.dashboard-main {
  flex: 1;
  margin-left: 240px;
  padding: 40px 48px 80px;
  min-height: calc(100vh - 61px);
}

/* ── Page header ── */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 20px;
}

.dashboard-header-left {}

.dashboard-title {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  color: white;
  line-height: 1.2;
  margin-bottom: 4px;
}

.dashboard-subtitle {
  font-size: 14px;
  color: var(--muted);
}

/* ── Stat cards row ── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.stat-card {
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  transition: border-color 0.2s;
}

.stat-card:hover {
  border-color: rgba(255,255,255,0.14);
}

.stat-card-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
}

.stat-card-value {
  font-family: 'DM Serif Display', serif;
  font-size: 34px;
  color: white;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.stat-card-sub a {
  color: var(--amber);
  text-decoration: none;
}

.stat-card-sub a:hover {
  text-decoration: underline;
}

/* ── Data table panels ── */
.data-table {
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 28px;
}

.data-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}

.data-table-title {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.data-table-meta {
  font-size: 13px;
  color: var(--muted);
}

/* ── Results table (shared with search page) ── */
table.results-table {
  width: 100%;
  border-collapse: collapse;
}

table.results-table th {
  text-align: left;
  padding: 11px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

table.results-table td {
  padding: 13px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
  vertical-align: middle;
}

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

table.results-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ── Empty state ── */
.empty-state {
  padding: 52px 24px;
  text-align: center;
  color: var(--muted);
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: 14px;
  opacity: 0.7;
}

.empty-state-title {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
}

.empty-state-desc {
  font-size: 14px;
  max-width: 360px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* ── Saved search row items ── */
.saved-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 16px;
  transition: background 0.15s;
}

.saved-search-row:last-child {
  border-bottom: none;
}

.saved-search-row:hover {
  background: rgba(255,255,255,0.02);
}

.saved-search-name {
  font-size: 15px;
  font-weight: 500;
  color: white;
  margin-bottom: 4px;
}

.saved-search-filters {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
}

.saved-search-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

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

/* ── Data assignment items ── */
.assignment-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}

.assignment-row:last-child {
  border-bottom: none;
}

.assignment-row:hover {
  background: rgba(255,255,255,0.02);
}

.assignment-field {
  font-size: 13px;
  font-weight: 500;
  color: white;
  margin-bottom: 3px;
}

.assignment-record {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.assignment-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}

/* ── Reliability badges (extended) ── */
.reliability-high       { background: rgba(74,222,128,0.12);  color: #4ade80; }
.reliability-medium     { background: rgba(240,170,80,0.12);  color: var(--gold); }
.reliability-low        { background: rgba(248,113,113,0.1);  color: #f87171; }
.reliability-unverified { background: rgba(106,138,170,0.12); color: var(--muted); }

/* ── Plan comparison table ── */
.plan-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}

.plan-compare th {
  text-align: center;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-bottom: 1px solid var(--line);
}

.plan-compare th:first-child { text-align: left; }

.plan-compare td {
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}

.plan-compare td:first-child {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
}

.plan-compare .check { color: #4ade80; font-size: 16px; }
.plan-compare .cross { color: rgba(255,255,255,0.15); font-size: 16px; }

.plan-current-col {
  background: rgba(26,72,117,0.12);
}

/* ── Group cards ── */
.group-card {
  background: var(--steel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.group-name {
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.group-meta {
  font-size: 13px;
  color: var(--muted);
}

.group-role {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.group-role-owner  { background: rgba(212,133,58,0.15); color: var(--amber); }
.group-role-admin  { background: rgba(42,106,173,0.15); color: #7cb9f4; }
.group-role-member { background: rgba(255,255,255,0.06); color: var(--muted); }

/* ── Settings form ── */
.settings-section {
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.settings-section-title {
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Notification / alert bar ── */
.dash-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 24px;
}

.dash-alert-info    { background: rgba(42,106,173,0.15);  border: 1px solid rgba(42,106,173,0.3);  color: #7cb9f4; }
.dash-alert-success { background: rgba(74,222,128,0.1);   border: 1px solid rgba(74,222,128,0.25); color: #4ade80; }
.dash-alert-warning { background: rgba(240,170,80,0.1);   border: 1px solid rgba(240,170,80,0.25); color: var(--gold); }

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.page-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}

.page-btn:hover   { background: var(--fog); color: white; border-color: var(--line); }
.page-btn.active  { background: var(--sky); color: white; border-color: var(--sky); }
.page-btn:disabled { opacity: 0.3; cursor: default; }

/* ── Responsive overrides ── */
@media (max-width: 1100px) {
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .assignment-row { grid-template-columns: 1fr 1fr auto; }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .dashboard-main { margin-left: 0; padding: 28px 20px 60px; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .settings-row { grid-template-columns: 1fr; }
  .dashboard-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .stat-cards { grid-template-columns: 1fr; }
  .assignment-row { grid-template-columns: 1fr; }
}