/* ===== Navigation, primary actions, panels and controls: use the tokens defined in 01-tokens.css ===== */

/* Bring fixed navigation, primary actions, panels and controls into the same palette. */
.top, .shead { background: var(--hdr-bg); }
.panel, .card, .box { border-color: var(--b); }
button.primary, .btn.primary, .bn.on, .nav .on, #theme[aria-checked=true] .sw {
  background: var(--grad-blue);
}
:root:not([data-theme=light]) .bnav {
  background: rgba(0,7,45,.97);
  border-color: rgba(18,52,153,.65);
}
:root[data-theme=light] .bnav {
  background: rgba(255,255,255,.97);
  border-color: #D3DDF5;
}
:root:not([data-theme=light]) input,
:root:not([data-theme=light]) select,
:root:not([data-theme=light]) textarea {
  border-color: var(--inb);
  color: var(--t);
}
:root[data-theme=light] input,
:root[data-theme=light] select,
:root[data-theme=light] textarea {
  border-color: var(--inb);
  color: var(--t);
}

/* Fix 1: the selected bottom-navigation item shows only its round pill, not a square behind it */
.bn.on,
.nav .on {
  background: transparent !important;
  box-shadow: none !important;
}
/* Fix 2: Total All Sheets card and the Monthly Hours card use the Cosmic Dream gradient again */
.tc-card,
.primary {
  background: linear-gradient(135deg, #03024E 0%, #0135FC 100%) !important;
}

/* Inputs: the field box comes from its wrapper, so the input itself is transparent.
   The day-row cells keep their own dark box. */
:root:not([data-theme=light]) input,
:root:not([data-theme=light]) select,
:root:not([data-theme=light]) textarea,
:root[data-theme=light] input,
:root[data-theme=light] select,
:root[data-theme=light] textarea {
  background-color: transparent;
}
#rows input,
#rows select {
  background-color: var(--in);
}
/* Bottom navigation: a lighter navy, less dark */
:root:not([data-theme=light]) .bnav {
  background: rgba(10,36,114,.92);
}

/* Reminder time button and popup time picker (theme colours) */
.tmbtn {
  min-width: calc(110*var(--u));
  padding: calc(10*var(--u)) calc(14*var(--u));
  border-radius: calc(14*var(--u));
  border: 1px solid var(--b);
  background: var(--in);
  color: var(--t);
  font: inherit;
  font-weight: 800;
  font-size: calc(15*var(--u));
  cursor: pointer;
}
.tmbtn:disabled { opacity: .5; cursor: default; }
.tp-bg {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,4,20,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.tp-bg.on { opacity: 1; }
.tp-box {
  width: min(320px, 90vw);
  border-radius: 20px;
  background: var(--s);
  border: 1px solid var(--b);
  color: var(--t);
  padding: 14px 16px 16px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.6);
}
.tp-head { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.tp-show { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.tp-in {
  width: 74px; text-align: center; font-size: 30px; font-weight: 800;
  border-radius: 12px; border: 1px solid var(--b);
  background: var(--in); color: var(--t); padding: 6px 0;
}
.tp-in:focus { outline: 2px solid var(--p2); }
.tp-colon { font-size: 28px; font-weight: 800; }
.tp-wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-col {
  height: 220px; overflow-y: auto;
  scrollbar-width: none; border-radius: 14px; background: var(--in);
}
.tp-col::-webkit-scrollbar { display: none; }
.tp-pad { height: 88px; }
.tp-item {
  height: 44px; line-height: 44px; text-align: center;
  font-size: 20px; font-weight: 700; color: var(--m);
  cursor: pointer; user-select: none;
}
.tp-item.on {
  color: #fff; background: var(--grad-blue); border-radius: 12px;
  font-size: 22px; margin: 0 6px;
}
.tp-btns { display: flex; gap: 10px; margin-top: 14px; }
.tp-btns button {
  flex: 1; padding: 12px; border-radius: 14px; font: inherit; font-weight: 800;
  border: 1px solid var(--b); background: transparent; color: var(--t); cursor: pointer;
}
.tp-btns .tp-save { background: var(--grad-blue); color: #fff; border: 0; }

/* Light theme: the total card and the Monthly Hours card use a soft shadow, not a dark band under them */
:root[data-theme=light] .tc-card,
:root[data-theme=light] .primary {
  box-shadow: 0 4px 10px -6px rgba(15,23,42,.25);
}
/* Light theme: the earnings card is a deeper green, with light text */
:root[data-theme=light] .green {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  border: 1px solid #16a34a;
  color: #bbf7d0;
}
:root[data-theme=light] .green .label,
:root[data-theme=light] .green .sub-val {
  color: #f0fdf4;
}
:root[data-theme=light] .green .value,
:root[data-theme=light] .green #l2 + .value {
  color: #ffffff;
}

/* Rate and Earnings: advances in red, net payable in green (both themes) */
.rc-tbl .rc-v.rc-red { color: #f87171; }
.rc-tbl .rc-v.rc-green { color: #4ADE80; }
/* Summary: net payable stays green in light theme too */
:root[data-theme=light] .adv-t b { color: #16a34a !important; }
/* Light theme: no dark shadow boxes at the corners of the daily table, or behind the rate currency */
:root[data-theme=light] .dsec,
:root[data-theme=light] .dstrip,
:root[data-theme=light] .dpage {
  box-shadow: none;
}
.dsec { overflow: hidden; }
:root[data-theme=light] .dd,
:root[data-theme=light] .rate-wrap .dd {
  box-shadow: none;
}

/* Earnings card (Sheet · Earnings): the same deeper-green gradient in both themes */
.green {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  border: 1px solid #16a34a;
  color: #bbf7d0;
}
.green .label,
.green .sub-val {
  color: #f0fdf4;
}
.green .value,
.green #l2 + .value {
  color: #ffffff;
}