/* ==========================================================================
   Time Entry — Calendar grid, entries, drag ghost, tap-to-place
   ========================================================================== */

.cal-card{background:#fff;border:1px solid var(--gray-200)}
.cal-hint{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--gray-200);background:var(--gray-50);font-size:11px;color:var(--gray-500)}
.cal-hint b{color:var(--gray-700);font-weight:600}
.snap-pill{display:inline-flex;align-items:center;gap:6px}
.snap-pill .pill{border:1px solid var(--gray-300);background:#fff;padding:2px 7px;font-family:'Consolas',monospace;font-size:10px;color:var(--gray-700)}

/* Full-period grids can be wide (semi-monthly = 15–16 day columns) → the calendar
   scrolls horizontally while the time gutter + day-header row stay pinned. */
.cal-scroll{max-height:calc(100vh - 200px);overflow:auto}
.cal-head{display:flex;position:sticky;top:0;z-index:4;background:#fff;border-bottom:1px solid var(--gray-200)}
.gutter-spacer{flex:0 0 52px;width:52px;position:sticky;left:0;z-index:6;background:#fff}
.day-headers{flex:1;display:flex}
.day-h{flex:1;padding:8px 6px;border-left:1px solid var(--gray-100);text-align:left;min-width:88px}
.day-h:first-child{border-left:0}
.day-h.today{background:var(--primary-bg);box-shadow:inset 0 3px 0 var(--primary)}
.day-h.weekend{background:var(--gray-50)}
.day-h.today.weekend{background:var(--primary-bg)}
.day-h .dn{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray-500)}
.day-h .dn .dd{font-size:14px;color:var(--gray-900);margin-left:4px}
.day-h.today .dn{color:var(--primary-dark)}
.day-h.today .dn .dd{color:var(--primary-dark)}
.day-h.today .today-tag{display:inline-block;margin-top:2px;font-size:8px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--primary);padding:0 4px}
.day-h .dt{font-size:10px;color:var(--gray-400);margin-top:1px;font-variant-numeric:tabular-nums}

.cal-body{display:flex;position:relative}
.time-gutter{flex:0 0 52px;width:52px;position:sticky;left:0;z-index:3;background:#fff}
.hour-lbl{position:absolute;right:6px;font-size:9.5px;color:var(--gray-400);transform:translateY(-50%)}
.day-cols{flex:1;display:flex}
.day-col{flex:1;position:relative;border-left:1px solid var(--gray-100);min-width:88px;
    background-image:repeating-linear-gradient(to bottom,
        var(--gray-100) 0, var(--gray-100) 1px,
        transparent 1px, transparent var(--px-hour));
    background-position:0 0;
}
.day-col:first-child{border-left:0}
.day-col.weekend{background-color:var(--gray-50)}
.day-col.today{background-color:rgba(74,109,167,.07);box-shadow:inset 1px 0 0 var(--primary-light),inset -1px 0 0 var(--primary-light)}
.day-col.dragover{background-color:var(--primary-bg)}

/* Entry block */
.entry{position:absolute;left:3px;right:3px;border-left:3px solid var(--primary);
    background:var(--primary-bg);padding:3px 6px;overflow:hidden;cursor:grab;
    border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.02);min-height:16px}
.entry:active{cursor:grabbing}
.entry .e-name{font-size:11px;font-weight:600;color:var(--gray-800);word-wrap:break-word;overflow-wrap:break-word;line-height:1.25}
.entry .e-meta{font-size:9.5px;color:var(--gray-600);margin-top:1px;font-variant-numeric:tabular-nums}
.entry .e-cmt{font-size:9px;color:var(--gray-500);margin-top:1px}
.entry .e-resize{position:absolute;left:0;right:0;bottom:0;height:6px;cursor:ns-resize}
.entry.tiny{padding:1px 6px}
.entry.tiny .e-meta,.entry.tiny .e-cmt{display:none}

/* Holiday entry block */
.entry.holiday{border-left-color:var(--warning)!important;background:var(--warning-light)!important;cursor:default}
.entry.holiday .e-name .lk{font-size:9px;color:var(--warning-dark);margin-left:4px;font-weight:600}
.entry .ot-badge{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--warning-dark);padding:0 4px;margin-left:5px;vertical-align:middle}

/* Drag ghost (calendar selection preview) */
.drag-ghost{position:absolute;left:3px;right:3px;background:rgba(74,109,167,.18);
    border:1px dashed var(--primary);pointer-events:none;border-radius:0;z-index:5}
.drag-ghost .g-time{font-size:10px;font-weight:600;color:var(--primary-dark);padding:2px 5px}

/* Hover time cursor — a guideline + label showing the time a new entry would start at */
.time-cursor{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--primary);pointer-events:none;z-index:4;display:none}
.time-cursor .tc-label{position:absolute;left:2px;top:-13px;background:var(--primary);color:#fff;font-size:9px;font-weight:600;padding:1px 4px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Tap-to-place (touch alternative to dragging a project in) */
.proj.armed{background:var(--primary-bg);box-shadow:inset 3px 0 0 var(--primary)}
.place-hint{display:none}
.place-hint.show{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--primary-light);color:var(--primary-dark);font-size:11px;font-weight:600;padding:7px 14px;border-bottom:1px solid var(--primary)}
.place-hint button{font:inherit;font-size:11px;border:1px solid var(--primary);background:#fff;color:var(--primary);padding:2px 8px;cursor:pointer;border-radius:0}