/* ============================================================
   table.css — Data table page styles
   ============================================================ */

body.table-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.table-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ghost-gray);
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.table-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.table-page-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-ben-franklin);
  margin: 0;
}

.table-count {
  font-size: 12px;
  color: var(--medium-gray);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.toolbar-right {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.toolbar-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--medium-gray);
}

.toolbar-select {
  padding: 6px 28px 6px 10px;
  background: var(--white);
  border: 1px solid var(--sidewalk);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--dark-gray);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a1a1a1' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
  min-width: 130px;
}

.toolbar-select:focus {
  border-color: var(--ben-franklin);
  box-shadow: 0 0 0 3px rgba(33,118,210,0.12);
}

.toolbar-search {
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--sidewalk);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--dark-gray);
  outline: none;
  width: 160px;
  transition: border-color 0.15s;
}

.toolbar-search:focus {
  border-color: var(--ben-franklin);
  box-shadow: 0 0 0 3px rgba(33,118,210,0.12);
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--dark-ben-franklin);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.toolbar-btn:hover { background: #0a3a6e; }

/* ============================================================
   SUMMARY STRIP
   ============================================================ */
.summary-strip {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 10px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--panel-border);
  overflow-x: auto;
}

.summary-card {
  flex: 1;
  min-width: 110px;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-align: center;
  border: 1px solid transparent;
}

.summary-card--very-high { background: var(--light-red);              border-color: rgba(204,48,0,0.2); }
.summary-card--high      { background: rgba(249,147,0,0.10);           border-color: rgba(249,147,0,0.25); }
.summary-card--moderate  { background: var(--light-bell);              border-color: rgba(243,198,19,0.3); }
.summary-card--low       { background: #e8fae6;                        border-color: #b9f2b1; }
.summary-card--neutral   { background: var(--ghost-gray);              border-color: var(--panel-border); }

.summary-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

.summary-card--very-high .summary-num { color: var(--love-park-red); }
.summary-card--high      .summary-num { color: #b06000; }
.summary-card--moderate  .summary-num { color: #7a5e00; }
.summary-card--low       .summary-num { color: var(--phanatic-green); }
.summary-card--neutral   .summary-num { color: var(--dark-ben-franklin); }

.summary-label {
  font-size: 10px;
  color: var(--medium-gray);
  line-height: 1.3;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ============================================================
   TABLE WRAPPER
   ============================================================ */
.table-wrapper {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--white);
  table-layout: fixed; /* prevents column-width shifts during data load */
}

/* Sticky header */
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th {
  background: var(--dark-ben-franklin);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.data-table th:last-child { border-right: none; }

.th-num { text-align: right; }
.th-action { text-align: center; }

.th-sortable { cursor: pointer; }

.th-sortable:hover { background: #163e72; }

.th-sortable.sort-asc  .sort-icon::after { content: " ↑"; }
.th-sortable.sort-desc .sort-icon::after { content: " ↓"; }
.sort-icon { opacity: 0.5; font-size: 10px; }
.th-sortable:hover .sort-icon,
.th-sortable.sort-asc .sort-icon,
.th-sortable.sort-desc .sort-icon { opacity: 1; }

/* Table rows */
.data-table tbody tr {
  border-bottom: 1px solid var(--ghost-gray);
  transition: background 0.1s;
  cursor: pointer;
}

.data-table tbody tr:hover { background: var(--light-blue); }

.data-table tbody tr.row-selected { background: #e8f0fb; }

.data-table td {
  padding: 9px 14px;
  color: var(--dark-gray);
  vertical-align: middle;
  white-space: nowrap;
}

.td-num    { text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.td-name   { font-weight: 600; color: var(--dark-gray); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-action { text-align: center; }
.td-mono   { font-family: 'Courier New', Courier, monospace; font-size: 11px; font-weight: 600; color: var(--dark-ben-franklin); white-space: nowrap; }
.td-blank  { color: var(--sidewalk); font-weight: 400; text-align: center; }

/* Risk badges */
.risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.risk-badge.very-high { background: var(--light-red);              color: var(--love-park-red); }
.risk-badge.high      { background: rgba(249,147,0,0.14);           color: #b06000; }
.risk-badge.moderate  { background: var(--light-bell);              color: #7a5e00; }
.risk-badge.low       { background: #d4f5d0;                        color: var(--phanatic-green); }

/* Road class tag */
.class-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.class-tag.major-arterial    { background: rgba(61,34,128,0.12);  color: var(--dark-ben-franklin); }
.class-tag.minor-arterial    { background: rgba(101,68,192,0.10); color: #3d2280; }
.class-tag.collector         { background: rgba(192,174,245,0.3); color: #3d2280; }
.class-tag.local             { background: var(--ghost-gray);     color: var(--dark-gray); }

/* Action button */
.btn-view-map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1.5px solid var(--ben-franklin);
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ben-franklin);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-view-map:hover {
  background: var(--ben-franklin);
  color: var(--white);
}

/* Empty / loading state */
.table-loading {
  text-align: center;
  color: var(--medium-gray);
  padding: 40px;
  font-style: italic;
}

.table-empty {
  text-align: center;
  color: var(--medium-gray);
  padding: 40px;
}

/* Speeding % bar cell */
.speeding-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.speeding-bar-wrap {
  width: 60px;
  height: 5px;
  background: var(--ghost-gray);
  border-radius: 3px;
  overflow: hidden;
}

.speeding-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.speeding-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}


/* ============================================================
   TABLE PERIOD SELECTOR
   ============================================================ */
.tbl-period-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  background: var(--ghost-gray);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 3px 4px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.tbl-period-group::-webkit-scrollbar {
  display: none;
}

.tbl-period-btn {
  flex: 0 0 auto;
  padding: 4px 11px;
  border: none;
  border-radius: 16px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--medium-gray);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}

.tbl-period-btn:hover:not(.active) {
  background: var(--white);
  color: var(--dark-gray);
}

.tbl-period-btn.active {
  background: var(--ben-franklin);
  color: var(--white);
}

/* ============================================================
   SUMMARY CARD COLORS
   ============================================================ */
.summary-card--red    { border-top: 3px solid #cc3000; }
.summary-card--orange { border-top: 3px solid #f99300; }
.summary-card--yellow { border-top: 3px solid #f3c613; }
.summary-card--green  { border-top: 3px solid #58c04d; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .table-toolbar { padding: 10px 14px; gap: 8px; }
  .toolbar-right { width: 100%; gap: 8px; }
  .tbl-period-group { flex-wrap: nowrap; gap: 2px; border-radius: 18px; }
  .tbl-period-btn { font-size: 10px; padding: 4px 8px; text-align: center; }
  .toolbar-search { width: 130px; }
  .summary-strip { padding: 8px 12px; gap: 6px; flex-wrap: wrap; }
  .summary-card { min-width: 80px; padding: 8px 10px; }
  .summary-num { font-size: 18px; }
  .summary-label { font-size: 9px; }
}

@media (max-width: 520px) {
  .table-page-title { font-size: 14px; }
  .toolbar-left { gap: 6px; }
  .toolbar-btn { padding: 6px 10px; font-size: 11px; }
  .tbl-period-btn { font-size: 9px; padding: 3px 7px; }
  .table-wrapper { -webkit-overflow-scrolling: touch; }
  .td-name { max-width: 120px; }
  .table-count { font-size: 11px; }
}