/* Hour/Team table and data-entry specific styles extracted from style.css */

/* Team table */
#team-view table { background: var(--surface); }
#team-table col.col-hour { width: 40%; }
#team-table col.col-goal { width: 30%; }
#team-table col.col-each { width: 30%; }
#team-view .controls input[type="number"] { width: 100px; }

/* Plan table base */
table { width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; background: var(--surface); box-shadow: 0 4px 18px rgba(0,0,0,0.1); border-radius:8px; overflow:hidden; border: 1px solid var(--border); }
thead th { background: var(--surface); border-bottom: 2px solid var(--border); font-weight:700; color: var(--text); position: sticky; top: 0; z-index: 2; }
th, td { padding:12px 10px; vertical-align:middle; color: var(--text); text-align: center; }
tbody tr { border-bottom:1px solid var(--border); }

/* Sticky first column */
#table-wrap { position: relative; }
table td.hour-label, table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 2px 0 0 0 var(--border); }

/* Row animation and zebra */
tbody tr.row-in { opacity: 0; animation: row-in 350ms ease both; animation-delay: var(--stagger, 0ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
tbody tr:nth-child(even) { background: var(--hover); }

.hour-label { font-weight:700; text-align:center; }

/* Inputs */
input.hour-units { width: 120px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-weight: 500; text-align: center; }
input.hour-units:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.1); }
textarea.notes { width: calc(100% - 12px); height: 32px; padding: 6px; resize: none; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-family: inherit; line-height: 20px; overflow-y: auto; display: block; margin: 0; text-align: center; }
textarea.notes::-webkit-scrollbar { display: none; }
textarea.notes { -ms-overflow-style: none; scrollbar-width: none; }
textarea.notes:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.1); }

/* Remove number spinners */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Numeric cells */
.hour-goal, .cum-goal { text-align: center; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.hour-goal small, .cum-goal small { font-size: 0.85em; color: var(--muted); margin-left: 6px; font-weight: 500; }

/* Delta badges and excess */
.delta-negative { background: #dc2626; padding: 4px 12px; border-radius: 12px; font-size: 1em; margin-left: 8px; color: #ffffff !important; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(220,38,38,0.4); letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,0.1); }
.delta-positive { background: #15803d; padding: 4px 12px; border-radius: 12px; font-size: 1em; margin-left: 8px; color: #ffffff !important; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(21,128,61,0.4); letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,0.1); }
.delta-positive, .delta-negative { animation: badge-pop 180ms ease-out both; }
@keyframes badge-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.excess-large { display: inline-flex; align-items: center; background: var(--excess-bg); color: var(--excess-text); padding: 6px 12px; border-radius: 14px; font-weight: 700; margin-left: 12px; font-size: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); letter-spacing: 0.01em; }

.original-cum { color:#9fb0c8; font-size:0.85em; margin-left:6px; }

/* Final row emphasis */
tbody tr:last-child { font-weight:600; }

/* Mobile-specific tweaks for delta badges */
@media (max-width: 768px) {
    #hour-table td.hour-goal .delta-positive,
    #hour-table td.hour-goal .delta-negative {
        display: inline-flex; white-space: nowrap; font-size: 0.85em; padding: 2px 8px; margin-left: 6px; vertical-align: baseline;
    }
}
@media (max-width: 480px) {
    #hour-table td.hour-goal .delta-positive,
    #hour-table td.hour-goal .delta-negative {
        font-size: 0.8em; padding: 2px 7px; margin-left: 6px;
    }
}