/* 1. Global fix for sizing math */
* { box-sizing: border-box; }

html, body { 
  overscroll-behavior-y: contain; 
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: #fafafa; /* Matches Tracker */
}

body { 
  font-family: system-ui, -apple-system, sans-serif; 
  padding: 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the content */
}

/* Constrain the content to 520px max-width */
.app-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.card { 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    padding: 16px; 
    background: #fff; 
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tabs { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 12px; 
    width: 100%;
}

.tab { 
    flex: 1; 
    padding: 10px; 
    border-radius: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
    font-size: 14px; 
    cursor: pointer;
}

.tab.active { 
    font-weight: 700; 
    background: #6797da; /* Your Tracker Blue */
    color: #fff; 
    border-color: #6797da; 
}

.row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-end; }
label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }

input, select, button { 
    width: 100%; 
    padding: 10px; 
    border-radius: 10px; 
    border: 1px solid #ccc; 
    font-size: 16px; 
    height: 44px; 
    outline: none;
}

.addBtn { 
    background: #6797da; 
    color: #fff; 
    border: none; 
    margin-top: 10px; 
    height: 44px; 
    font-weight: 600;
}

.tabPanel { display: none; }
.tabPanel.active { display: block; }

.topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pill { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-weight: 600; }

/* Ensure macro columns are narrow and aligned */
td, th {
    padding: 6px 4px; /* Slightly tighter padding */
    text-align: left;
}

/* Optional: Make macro headers a different color to distinguish them */
th:nth-last-child(-n+3) {
    color: #94a3b8; /* Dimmer color for P, C, F */
    font-size: 10px;
}

/* Tabular numbers ensure columns don't "wiggle" as values change */
td {
    font-variant-numeric: tabular-nums;
}

#body-history table {
    display: table !important; /* Force render */
    width: 100%;
    margin-top: 10px;
    color: #2d3436; /* Ensure dark text on light background */
}