/* 10-oct — Time Clock v0.9: Joe's grid, polished (ESQUELETO_RELOJ_JOE_PULIDO rev 4, approved, with Luis's changes).
   Loaded after style.css; everything is scoped to .c2 so the rest of the app does not move.
   Card: car + timer on one line → notes → top triad → vehicle search. Under it: task grid → bottom triad.
   Luis: Notes, Switch task, Switch vehicle and the search share ONE height (the search bar's, --k9-ctl). */
.c2{--k9-ctl:52px}
.c2 .c2-unit{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.c2 .c2-clock{padding:12px;border-radius:20px}
.c2 .c2-clock.off{background:radial-gradient(120% 140% at 0% 0%,#3b4250 0%,#232831 55%,#15181d 100%);color:#fff}

/* car + timer: one line (Luis: a little bigger) */
.c2 .c2-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;margin:0;padding:10px;border:0;border-radius:14px;background:rgba(255,255,255,.14);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s,transform .14s}
.c2 .c2-head:hover{background:rgba(255,255,255,.22)}.c2 .c2-head:active{transform:scale(.99)}.c2 .c2-head.static{cursor:default}
.c2 .c2-clock.off .c2-head{background:rgba(255,255,255,.08)}
.c2 .c2-head .c2-car{display:block;margin:0;padding:0;border:0;background:none;min-width:0;width:auto}
.c2 .c2-head .c2-car b{display:block;font:600 26px/1.15 Oswald,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:clip}
.c2 .c2-head .c2-car small{display:block;font:600 16px/1.2 Inter,sans-serif;opacity:.88;white-space:normal}
.c2 .c2-head .c2-car small.hint{font:800 13px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.c2 .c2-head .c2-timer{margin:0;font:700 38px/1 Oswald,sans-serif;letter-spacing:0;text-align:right}
.c2 .c2-clock.off .c2-head .c2-car b,.c2 .c2-clock.off .c2-head .c2-car small,.c2 .c2-clock.off .c2-timer{color:#9aa3ad}

/* notes: the search bar's height */
.c2 .c2-note{margin-top:8px}
.c2 .c2-note #noteBox{min-height:var(--k9-ctl);display:flex;align-items:center;padding:0 12px!important;border-radius:14px!important;box-shadow:none}
.c2 .c2-note #clockNoteText{font-size:15px!important}
.c2 .c2-note .clk-btn.is-off{min-height:var(--k9-ctl);display:flex;align-items:center;border-radius:14px;padding:0 12px}

/* top triad: Switch task (amber) · Switch vehicle (grey) */
.c2 .c2-tri{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.c2 .c2-tri.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.c2 .c2-tri .c2-btn{height:var(--k9-ctl);min-height:var(--k9-ctl);border-radius:14px;font-size:15px;flex-direction:column;gap:1px;padding:4px 8px;line-height:1.15}
.c2 .c2-tri .c2-btn small{font:500 10.5px/1.1 Inter,sans-serif;opacity:.85}
.c2 .c2-tri .c2-btn.re{flex-direction:row;gap:7px}
.c2 .c2-btn.tsk{background:var(--amber);color:var(--amber-ink)}
.c2 .c2-btn.sv{background:#d5dbe3;color:var(--ink)}
.c2 .c2-btn.re{background:var(--c2-green);color:#fff;animation:k9ring 1.8s ease-out infinite}
.c2 .c2-tri .c2-btn.off{background:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}

/* vehicle search: drops its list down when tapped */
.c2 .c2-clock .c2-picker{position:relative;z-index:1;padding:0;margin-top:8px}
.c2 .c2-clock .c2-search{display:block;height:var(--k9-ctl);padding:0 14px;font-size:15px;border:2px solid var(--amber);border-radius:14px;background:#fff;color:var(--ink)}
.c2 .c2-clock .c2-search:focus{outline:none;box-shadow:0 0 0 4px rgba(240,165,0,.28)}
.c2 .c2-sugg{max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height .32s cubic-bezier(.2,.7,.2,1),opacity .2s,transform .25s;background:#fff;color:var(--ink);border-radius:12px;margin-top:6px}
.c2 .c2-picker.open .c2-sugg,.c2 .c2-unit.picking .c2-sugg,.c2 .c2-unit.searching .c2-sugg{max-height:380px;opacity:1;transform:none;overflow:auto}
.c2 .c2-sugg:not(:has(.c2-cr, .t-mut)){display:none}
.c2 .c2-picker #clockCarList{margin:0}
.c2 .c2-sh{position:sticky;top:0;z-index:1;margin:0;padding:10px 14px 6px;background:#fff;font:800 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Luis: "Assigned to you" rows easy to tap — tall, car on top, customer under, number right */
.c2 .c2-cr{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:0;padding:10px 14px;border:0;border-top:1px solid #eef1f4;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transform:none}
.c2 .c2-cr:hover{background:#eceff3}.c2 .c2-cr:active{background:#e3e7ec;transform:none}
.c2 .c2-cr-t{display:flex;flex-direction:column;flex:1;min-width:0}
.c2 .c2-cr-t b{font:600 16px/1.2 Inter,sans-serif}.c2 .c2-cr-t b i{font-style:normal;font-weight:500;color:var(--muted)}
.c2 .c2-cr-t small{font-size:13px;color:var(--muted)}
.c2 .c2-cr em{font:700 13px Inter,sans-serif;font-style:normal;color:var(--muted);background:#f2f4f7;border-radius:8px;padding:4px 8px;white-space:nowrap}
.c2 .c2-cr .clk-today{margin-left:0!important}
.c2 #clockCarSearchNotice:empty{display:none}

/* task grid: locked while working (only the current task lit); Switch task lights the rest */
.c2 .c2-tasks{padding:14px 2px 0}
.c2 .c2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.c2 .c2-t{min-height:54px;font-size:14.5px}
.c2 .c2-t.sm{min-height:44px;font-size:13.5px}
.c2 .c2-t.off{opacity:1;background:var(--off,#e9ecf0);color:#9aa3ad;border-color:transparent}
.c2 .c2-tasks.lock .c2-t:not(.on){background:var(--off,#e9ecf0);color:#9aa3ad;border-color:transparent;cursor:not-allowed;pointer-events:none}
.c2 .c2-tasks.open .c2-t:not(.on),.c2 .c2-t.lit{border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,165,0,.28);animation:k9nudge 1.8s ease-in-out infinite}
.c2 .c2-unit.picking .c2-t:not(.off){border-color:var(--amber)}

/* bottom triad: Break · Photos · Clock out (Clock in when out) */
.c2 .c2-acts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.c2 .c2-acts .c2-btn{min-height:56px;font-size:14px;border-radius:13px;gap:7px;padding:8px 6px;white-space:nowrap}
.c2 .c2-acts .c2-btn .c2-i{width:22px;height:22px}
.c2 .c2-btn.blue{background:#2563eb;color:#fff}
.c2 .c2-btn.cam .c2-i{transition:transform .2s}.c2 .c2-btn.cam:hover .c2-i{transform:scale(1.12) rotate(-6deg)}
.c2 .c2-acts .c2-btn.off,.c2 .c2-acts .c2-btn:disabled{background:var(--off,#e9ecf0);color:#9aa3ad}
.c2 .c2-acts .c2-btn.ci{animation:c2ring 2.2s ease-out infinite}

@keyframes k9ring{0%{box-shadow:0 0 0 0 rgba(47,125,81,.55)}70%{box-shadow:0 0 0 12px rgba(47,125,81,0)}100%{box-shadow:0 0 0 0 rgba(47,125,81,0)}}
@keyframes k9nudge{0%,100%{transform:none}50%{transform:translateY(-2px)}}
@media (min-width:901px){.c2 .c2-head .c2-timer{font-size:44px}}
/* one line: the full name, or the short one when it does not fit (set in OsEzyClockDesk.mount) */
.c2 .c2-head .c2-car b span{white-space:nowrap}
.c2 .c2-head .c2-car b.k9-short .c2-full{display:none}.c2 .c2-head .c2-car b.k9-short .c2-short{display:inline}
/* the note keeps the search bar's height even when its text takes two lines */
.c2 .c2-note #noteBox{height:var(--k9-ctl);min-height:var(--k9-ctl)!important;overflow:hidden}.c2 .c2-note #clockNoteText{font-size:14px!important;line-height:1.2}