/* ==========================================================================
   Dashboard — manage local JSON entries
   ========================================================================== */

.dash-shell{ max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }
.dash-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-head h1{ font-size: 22px; margin-bottom: 2px; }
.dash-head p{ margin: 0; color: var(--fg-muted); font-size: 13.5px; }
.dash-actions{ display: flex; gap: 8px; flex-wrap: wrap; }

.dash-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 22px; }
.dash-stat{ padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); }
.dash-stat .num{ font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--accent); }
.dash-stat .label{ font-size: 11.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }

.dash-toolbar{ display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.dash-toolbar .search-bar{ max-width: 320px; flex: 1; }

.dash-table-wrap{
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-raised);
}
.dash-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th{
  text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fg-muted); padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-sunken); white-space: nowrap;
}
.dash-table td{ padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dash-table tr:last-child td{ border-bottom: 0; }
.dash-table tr:hover td{ background: var(--bg-sunken); }
.dash-table .row-name{ font-weight: 600; }
.dash-table .row-actions{ display: flex; gap: 6px; justify-content: flex-end; }
.dash-cat-tag{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.dash-cat-tag .dot{ width: 8px; height: 8px; border-radius: 50%; }

.dash-empty{ padding: 60px 20px; }

.dash-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-form-grid .full{ grid-column: 1 / -1; }
.dash-form-section{ margin-bottom: 4px; }

.import-drop{
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 26px; text-align: center; color: var(--fg-muted); font-size: 13px;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.import-drop:hover, .import-drop.drag{ border-color: var(--accent); background: var(--bg-sunken); }
.import-drop svg{ width: 26px; height: 26px; margin: 0 auto 10px; opacity: .6; }

@media (max-width: 640px){
  .dash-form-grid{ grid-template-columns: 1fr; }
  .dash-table thead{ display: none; }
  .dash-table, .dash-table tbody, .dash-table tr, .dash-table td{ display: block; width: 100%; }
  .dash-table tr{ border-bottom: 1px solid var(--border); padding: 10px 14px; }
  .dash-table td{ border: 0; padding: 3px 0; }
  .dash-table .row-actions{ justify-content: flex-start; margin-top: 8px; }
}