/* ============================================================================
   dashboard.css — front splash page: next flight, seniority, block YTD,
   pay rate, this-month timecard credit/pay.
   ========================================================================== */
#page-dashboard .db-hello { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
#page-dashboard .db-hello h2 { font-family: var(--font-disp); font-size: 1.3rem; font-weight: 700; letter-spacing: .03em; }
#page-dashboard .db-card { position: relative; cursor: pointer; transition: border-color .15s; }
#page-dashboard .db-card:hover { border-color: var(--dim); }
/* Small corner badge shown while a card's fast/cached paint is being
   reconciled against a real (possibly slow) network check in the
   background -- see dashboard.js's showCardRefreshing(). Never blocks or
   replaces the card's own content. */
#page-dashboard .db-refresh-badge {
  position: absolute; top: .65rem; right: .75rem;
  width: .6rem; height: .6rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--amber);
  animation: db-spin .7s linear infinite;
}
#page-dashboard .db-label {
  font-family: var(--font-body); font-size: .63rem; font-weight: 600; color: var(--dim);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; display: block;
}
#page-dashboard .db-mini-route { display: flex; align-items: baseline; gap: .45rem; margin: .3rem 0 .1rem; }
#page-dashboard .db-mini-route .a { font-family: var(--font-disp); font-size: 1.6rem; font-weight: 700; line-height: 1; }
#page-dashboard .db-mini-route .arrow { color: var(--dim); font-size: .8rem; }
#page-dashboard .db-mini-times { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
#page-dashboard .db-mini-t { font-family: var(--font-mono); font-size: 1.05rem; line-height: 1.15; }
#page-dashboard .db-mini-times .to { text-align: right; }
#page-dashboard .db-mini-zulu { font-family: var(--font-mono); font-size: .6rem; color: var(--dim); }
#page-dashboard .db-dh-tag {
  font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  color: var(--amber); border: 1px solid rgba(242,179,61,.4); border-radius: 4px; padding: .1rem .35rem;
  vertical-align: middle;
}
#page-dashboard .db-dh-actions { display: flex; gap: .5rem; justify-content: flex-end; }

#page-dashboard .db-sen-top { display: flex; align-items: baseline; gap: .5rem; }
#page-dashboard .db-sen-num { font-family: var(--font-disp); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--amber); }
#page-dashboard .db-sen-sub { font-family: var(--font-mono); font-size: .68rem; color: var(--dim); margin-top: .35rem; }

#page-dashboard .db-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#page-dashboard .db-stat-v { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; line-height: 1.05; margin-top: .3rem; }
#page-dashboard .db-stat-sub { font-family: var(--font-mono); font-size: .6rem; color: var(--dim); margin-top: .25rem; line-height: 1.4; }

#page-dashboard .db-month-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .5rem; }
#page-dashboard .db-month-v { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; line-height: 1.05; }
#page-dashboard .db-month-foot {
  margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .62rem; color: var(--dim); display: flex; justify-content: space-between; gap: .5rem;
}
#page-dashboard .db-empty { text-align: center; color: var(--dim); font-size: .8rem; padding: .5rem 0; line-height: 1.6; }
#page-dashboard .db-spinner {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--amber);
  animation: db-spin .7s linear infinite; vertical-align: -1px; margin-right: .3rem;
}
@keyframes db-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #page-dashboard .db-spinner, #page-dashboard .db-refresh-badge { animation-duration: 1.4s; }
}

/* pay-data privacy mask -- tap-to-reveal cover over an Est. pay / Pay rate value */
#page-dashboard .db-mask { position: relative; }
#page-dashboard .db-mask-cover {
  position: absolute; inset: -.15rem -.3rem; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px);
  border: 1px dashed var(--line); border-radius: 6px; cursor: pointer;
}
#page-dashboard .db-mask-cover span {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600; color: var(--dim);
  letter-spacing: .04em; text-transform: uppercase;
}
#page-dashboard .db-mask.db-mask-revealed .db-mask-cover { display: none; }
#page-dashboard .db-hide-toggle {
  display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .72rem; color: var(--dim); cursor: pointer;
}
#page-dashboard .db-hide-toggle input { accent-color: var(--amber); }