/* App Modes */
body.mode-clock .card:not(#tcCard),
body.mode-clock .sheet > .card{ display:none !important; }
body.mode-clock #tcCard { display:block !important; margin-top:16px }

body.mode-flag #tcCard { display:none !important; }

/* Hide all main cards in reports mode, but allow cards inside reports content */
body.mode-reports .sheet > .card { display:none !important; }
body.mode-reports #reportsCard { display:block !important; margin-top:16px; }
/* Allow cards inside the reports content to be visible */
body.mode-reports #reportsCard .card { display:block !important; }

/* Hide App Mode controls ONLY inside the Clock Card */
#tcCard #uiModeSel,
#tcCard label[for="uiModeSel"] { display: none !important; }

/* Allow Settings modal cards in Clock Only mode */
body.mode-clock #settingsBack .card {
  display: block !important;
}

/* Allow Settings modal cards in Reports mode */
body.mode-reports #settingsBack .card {
  display: block !important;
}

/* Light theme timeclock card fixes */
[data-theme="light"] #tcCard {
  background: var(--card);
  color: var(--ink);
}

[data-theme="light"] #tcCard .card {
  background: var(--card);
  color: var(--ink);
}

[data-theme="light"] #tcCard input,
[data-theme="light"] #tcCard select {
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  color: var(--ink);
}

[data-theme="light"] #tcCard input:focus,
[data-theme="light"] #tcCard select:focus {
  border-color: var(--input-focus);
  background: var(--input-bg);
}