/*
 * Timeclock NRW 12 – Frontend Styles
 * Intentionally theme-independent (own typography, sizes, spacing).
 */

/*
 * Theme tokens
 * - Light is the default
 * - Dark follows the user's OS/browser appearance via prefers-color-scheme
 */
:root{
  /* Light */
  --tc-bg: #f6f7f9;
  --tc-card: #ffffff;
  --tc-card-2: #fbfbfd;
  --tc-text: #1f2328;
  --tc-muted: rgba(31,35,40,0.70);
  --tc-border: rgba(31,35,40,0.12);
  --tc-shadow: 0 10px 26px rgba(31,35,40,0.10);

  --tc-dot: rgba(31,35,40,0.28);
  --tc-dot-active: rgba(31,35,40,0.72);

  --tc-radius: 18px;
  --tc-radius-lg: 24px;
  --tc-pad: 12px;
  --tc-max: 980px;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Dark */
    --tc-bg: #0b0b0c;
    --tc-card: #131316;
    --tc-card-2: #1a1a1e;
    --tc-text: #f5f5f7;
    --tc-muted: rgba(245,245,247,0.72);
    --tc-border: rgba(245,245,247,0.12);
    --tc-shadow: 0 12px 30px rgba(0,0,0,0.35);

    --tc-dot: rgba(245,245,247,0.28);
    --tc-dot-active: rgba(245,245,247,0.85);
  }
}

/* Reset / predictable typography inside the app */
.tc-app, .tc-app *{
  box-sizing:border-box;
}

.tc-app{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--tc-text);
  background: var(--tc-bg);
  border-radius: var(--tc-radius-lg);
  padding: 10px;
  max-width: var(--tc-max);
  margin: 16px auto;
  box-shadow: var(--tc-shadow);

  /* allow sticky nav to stick within the tc-app */
  position: relative;

  /* space for sticky dots so content doesn't get covered */
  padding-bottom: 42px;
}

/* Slider */
.tc-slider{
  display:flex;
  gap: 8px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 10px;
  padding-bottom: 10px;
}
.tc-slider::-webkit-scrollbar{ height: 0; }

.tc-slide{
  scroll-snap-align: start;
  min-width: 100%;
  background: linear-gradient(180deg, var(--tc-card), var(--tc-card-2));
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: clamp(12px, 3vw, 18px);

  /* Each slide stays scrollable while dots are sticky */
  max-height: calc((var(--tc-vh, 1vh) * 100) - 180px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* extra space so last lines are not hidden behind sticky dots */
  padding-bottom: 64px;
}

.tc-slide-title{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Dots */
.tc-slider-nav{
  display:flex;
  justify-content:center;
  padding: 8px 0 2px;

  /* Sticky within tc-app: stays visible while user scrolls the page,
     but moves with the tc-app once it leaves the viewport. */
  position: sticky;
  bottom: 10px;
  z-index: 5;
  pointer-events: none;
}
.tc-dots{ display:flex; gap: 8px; pointer-events: auto; }
.tc-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--tc-dot);
  cursor:pointer;
}
.tc-dot.is-active{ background: var(--tc-dot-active); }

/* Punch slide */
.tc-punch{ text-align:center; }
.tc-punch-user{
  font-size: 14px;
  color: var(--tc-muted);
  margin-bottom: 10px;
}
.tc-punch-clock{
  font-size: clamp(52px, 12vw, 78px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 6px 0 6px;
}

.tc-punch-saldo{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,0.04);
  margin: 4px 0 14px;
}
.tc-punch-saldo-emoji{ font-size: 18px; }
.tc-punch-saldo-number{ font-size: 22px; font-weight: 700; letter-spacing:-0.01em; }
.tc-punch-saldo-unit{ font-size: 13px; color: var(--tc-muted); margin-left: -4px; }

.tc-punch-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px;
  margin: 6px 0 14px;
}

.tc-pill{
  display:inline-flex;
  gap: 6px;
  align-items:baseline;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,0.03);
  font-size: 13px;
  color: var(--tc-muted);
}
.tc-pill strong{ color: var(--tc-text); font-weight:600; }

.tc-punch-actions{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Buttons */
.tc-btn{
  appearance:none;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,0.05);
  color: var(--tc-text);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor:pointer;
  /* allow 2 buttons to fit without disappearing on narrow slides */
  min-width: 0;
  flex: 1 1 160px;
  max-width: 220px;
}
.tc-btn:active{ transform: translateY(1px); }
.tc-btn-primary{
  background: rgba(245,245,247,0.9);
  color: #0b0b0c;
}

/* Responsive table (div-based) */
.tc-table{
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  overflow:hidden;
  background: rgba(255,255,255,0.02);
}

.tc-thead{
  display:none;
}

.tc-tr{
  display:grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--tc-border);
}
.tc-tr:first-child{ border-top: 0; }

.tc-td{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--tc-text);
  min-width: 0;
  word-break: break-word;
}
.tc-td:before{
  content: attr(data-label);
  color: var(--tc-muted);
  flex: 0 0 45%;
}

.tc-empty{ color: var(--tc-muted); margin: 8px 0 0; }
.tc-muted{ color: var(--tc-muted); font-size: 12px; margin-left: 6px; }
.tc-prot-details{ font-size: 12px; color: var(--tc-muted); white-space: pre-wrap; text-align:right; }

/* Summary cards (Slide 2) */
.tc-summary-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.tc-card{
  background: linear-gradient(180deg, var(--tc-card), var(--tc-card-2));
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 10px;
  box-shadow: var(--tc-shadow);
}
.tc-card-title{
  font-size: 12px;
  color: var(--tc-muted);
  margin-bottom: 6px;
}
.tc-card-val{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

@media (min-width: 720px){
  .tc-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Larger screens: show header row */
@media (min-width: 720px){
  .tc-app{ padding: 14px; }
  /* Always show exactly one slide per view, even on large screens */
  .tc-slide{ min-width: 100%; }
  .tc-thead{ display:block; }
  /* allow wide tables with many columns to stay in one row (scroll instead of wrapping) */
  .tc-table{ overflow-x: hidden; }

  .tc-thead .tc-tr{
    grid-template-columns: repeat(var(--tc-cols, 6), minmax(0, 1fr));
    background: rgba(255,255,255,0.03);
    border-top: 0;
  }
  .tc-tbody .tc-tr{
    grid-template-columns: repeat(var(--tc-cols, 6), minmax(0, 1fr));
  }
  .tc-td{ display:block; }
  .tc-td:before{ content:none; }
  .tc-prot-details{ text-align:left; }
}

/* Floating action button (re-uses existing markup) */
.tc-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245,245,247,0.92);
  color: #0b0b0c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 9999;
}
.tc-fab:active{ transform: scale(0.98); }

/* Modal (existing markup) – make it match the dark look */
.tc-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 9998;
}
.tc-modal *{ box-sizing: border-box; }
.tc-modal textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: var(--tc-text);
  resize: vertical;
}
.tc-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 94vw);
  border-radius: 18px;
  padding: 16px;
  display: none;
  z-index: 9999;
  background: linear-gradient(180deg, var(--tc-card), var(--tc-card-2));
  color: var(--tc-text);
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow);
}
.tc-modal h4{ margin: 0 0 10px; font-size: 16px; }
.tc-modal label{ display:block; font-size: 13px; color: var(--tc-muted); margin: 10px 0 6px; }
.tc-modal input, .tc-modal select{
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,0.04);
  color: var(--tc-text);
}
.tc-modal .row{ display:flex; gap: 10px; flex-wrap: wrap; }
.tc-modal .actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 12px; }
.tc-msg{ margin-top: 10px; font-size: 13px; color: var(--tc-muted); }
.tc-hidden{ display:none !important; }

/* User-friendly info tooltip icon */
.tc-tip{
  display:inline-block;
  margin-left:6px;
  font-size:12px;
  line-height:1;
  cursor:help;
  opacity:0.75;
}
.tc-tip:hover{ opacity:1; }