/* The Tool Bakery — Overtime Pay Calculator (modern UI) */
.ttb-tool { --bg:#0b0d10; --card:#12161c; --muted:#8b95a7; --edge:#1f2630; --brand:#5eead4; --text:#e5e7eb; --accent:#93c5fd;
  color:var(--text); background:linear-gradient(180deg,#0b0d10,#0b0d10 60%,#0d1117);
  border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.ttb-header h2 { font-size:1.6rem; margin:0 0 6px 0; }
.ttb-sub { color:var(--muted); margin:0 0 14px 0; }

.ttb-form { display:flex; flex-direction:column; gap:14px; }
.ttb-card { background:var(--card); border:1px solid var(--edge); border-radius:16px; padding:16px; }
.ttb-card h3 { margin:0 0 10px 0; font-size:1.05rem; letter-spacing:.2px; }
.ttb-card.mini { padding:12px; border-radius:14px; }
.ttb-k { color:var(--muted); font-size:.82rem; }
.ttb-v { font-size:1.05rem; font-weight:600; margin-top:4px; }

.ttb-grid { display:grid; gap:10px; }
.ttb-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ttb-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); align-items: end;}
.ttb-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ttb-grid.seven { grid-template-columns:repeat(7,minmax(0,1fr)); align-items:center; }
@media (max-width:900px){ .ttb-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:720px){
  .ttb-grid.two,.ttb-grid.three,.ttb-grid.four,.ttb-grid.seven{grid-template-columns:1fr;}
}

label span { display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; }
input[type="text"],input[type="number"],select {
  width:100%; padding:10px 12px; background:#0c1117; border:1px solid var(--edge);
  border-radius:12px; color:var(--text); outline:none;
}
input[type="checkbox"] { transform:scale(1.05); }

.ttb-actions { display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; }
.ttb-btn { padding:10px 14px; border-radius:14px; border:1px solid var(--edge); background:#0c1117; color:var(--text); cursor:pointer; }
.ttb-btn:hover { border-color:#314050; box-shadow:0 4px 16px rgba(0,0,0,.25) inset; }
.ttb-btn.primary { background:linear-gradient(180deg,#10b981,#0ea5e9); border:0; color:#041016; font-weight:700; }
.ttb-btn.ghost { background:transparent; }
.ttb-btn.outline { background:transparent; border:1px dashed #2b3643; color:var(--accent); }

.ttb-results { margin-top:10px; }
.ttb-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding: 16px 0;}
@media (max-width:900px){ .ttb-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .ttb-cards{grid-template-columns:1fr;} }

.ttb-daily-head, .ttb-daily-row { padding:6px 0; border-bottom:1px dashed var(--edge); }
.mt-12 { margin-top:12px; }

/* Breakdown table */
#ot-breakdown table { width:100%; border-collapse:separate; border-spacing:0; }
#ot-breakdown th, #ot-breakdown td { padding:10px; text-align:left; border-bottom:1px solid var(--edge); font-size:.92rem; }
#ot-breakdown th { color:var(--muted); font-weight:600; }
#ot-breakdown .t-right { text-align:right; }

/* Print */
@media print {
  .ttb-actions, form .ttb-card { break-inside: avoid; }
}

/* Breakdown sub-row styling */
#ot-breakdown .subrow td { border-bottom: 1px solid var(--edge); }
#ot-breakdown .prem-details {
  color: var(--muted);
  font-size: .85rem;
  padding-top: 4px;
  white-space: normal;
}
#ot-breakdown .prem-details .sep { margin: 0 8px; }