/* FEATURES — page-specific widgets that appear on only one screen.
   Sections: Team Leader accordion + members table + hourly heatmap,
             Sparklines, Calendar date picker, Daily entry form,
             History log, Date toggle, Upload guide, Google Sheets sync UI.
   If a specific dashboard widget looks broken, it's almost certainly here. */

/* TEAM LEADER ACCORDION (Daily Dashboard cards that expand) */
.tl-grid{display:flex;flex-direction:column;gap:10px}
.tl-card{background:var(--s1);border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:border-color .2s}
.tl-card.open{border-color:var(--ac)}
.tl-header{display:grid;grid-template-columns:20px 1.6fr repeat(4,auto) auto 20px;gap:12px;align-items:center;padding:13px 16px;cursor:pointer}
.tl-header:hover{background:rgba(255,107,0,.04)}
.tl-chevron{font-size:11px;color:var(--tx3);transition:transform .25s;text-align:center}
.tl-card.open .tl-chevron{transform:rotate(90deg);color:var(--ac)}
.tl-lead-info{display:flex;flex-direction:column;gap:2px}
.tl-lead-name{font-size:13px;font-weight:700}
.tl-lead-terr{font-size:11px;color:var(--tx2);font-family:var(--mono)}
.tl-stat{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:58px}
.tl-stat-val{font-family:var(--mono);font-size:13px;font-weight:700}
.tl-stat-lbl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3)}
.tl-stat-sub{font-size:10px;font-family:var(--mono)}
.tl-ach-strip{height:3px;margin:0 16px;border-radius:0}
.tl-body{display:none;border-top:1px solid var(--bd);background:var(--s2)}
.tl-card.open .tl-body{display:block}

/* TL — KPI pills inside accordion (when expanded) */
.tl-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.tl-kpi{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:11px 13px}
.tl-kpi-lbl{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.tl-kpi-val{font-family:var(--mono);font-size:17px;font-weight:700;line-height:1;margin-bottom:3px}
.tl-kpi-sub{font-size:10px;font-family:var(--mono)}
.tl-kpi.ck-bl .tl-kpi-val{color:var(--ac)}.tl-kpi.ck-gn .tl-kpi-val{color:var(--gn)}.tl-kpi.ck-yw .tl-kpi-val{color:var(--yw)}.tl-kpi.ck-or .tl-kpi-val{color:var(--or)}.tl-kpi.ck-cy .tl-kpi-val{color:var(--ac2)}.tl-kpi.ck-pu .tl-kpi-val{color:var(--ac3)}.tl-kpi.ck-rd .tl-kpi-val{color:var(--rd)}
.mtd-prog{margin-top:5px;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}

/* TL — search & sort row */
.tl-search-row{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd);align-items:center}
.tl-srch{flex:1;padding:7px 10px;background:var(--s3);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-size:12px;outline:none}
.tl-srch:focus{border-color:rgba(255,107,0,.4)}
.tl-sort-sel{padding:7px 10px;background:var(--s3);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-size:12px;outline:none}

/* TL — members table (the per-rep table inside an open accordion) */
.tl-members{padding:0 16px 16px}
.tl-mem-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2);padding:12px 0 8px}
.mem-tbl-wrap{max-height:420px;overflow:auto;border-radius:8px;border:1px solid var(--bd)}
.mem-tbl{width:100%;border-collapse:collapse;font-size:12px}
.mem-tbl th{padding:7px 9px;background:var(--s3);font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2);text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap;position:sticky;top:0;z-index:1}
.mem-tbl td{padding:7px 9px;border-bottom:1px solid rgba(44,44,44,.3);vertical-align:middle}
.mem-tbl tbody tr:last-child td{border-bottom:none}
.mem-tbl tbody tr:hover{background:rgba(255,107,0,.04)}

/* Availability pills (on time / late / off) */
.avail-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;font-family:var(--mono)}
.av-on{background:rgba(16,185,129,.1);color:var(--gn)}
.av-off{background:rgba(100,116,139,.1);color:var(--tx3)}
.av-late{background:rgba(245,158,11,.1);color:var(--yw)}

/* New / existing outlet badges */
.ne-badge{display:inline-flex;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;font-family:var(--mono)}
.ne-e{background:rgba(255,107,0,.1);color:var(--ac)}.ne-n{background:rgba(16,185,129,.1);color:var(--gn)}

/* Inline revenue mini-bar */
.rev-bar-wrap{display:flex;align-items:center;gap:6px}
.rev-bar{width:50px;height:4px;background:var(--bd);border-radius:2px;overflow:hidden;flex-shrink:0}
.rev-fill{height:100%;border-radius:2px}

/* Sparklines (tiny bar charts in the TL header row) */
.spark{display:inline-flex;align-items:flex-end;gap:1px;height:20px}
.spark-bar{width:5px;border-radius:1px 1px 0 0;flex-shrink:0}

/* Hourly heatmap (call distribution by hour, per rep, in TL view) */
.rep-hourly-row{display:flex;align-items:center;gap:3px;padding:3px 0}
.rep-hour-cell{flex:1;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--mono);font-weight:600;cursor:default;transition:opacity .15s;min-width:16px}
.rep-hour-cell:hover{opacity:.85}
.hour-label-row{display:flex;align-items:center;gap:3px;padding-bottom:2px}
.hour-lbl{flex:1;font-size:7px;font-family:var(--mono);color:var(--tx3);text-align:center;overflow:hidden;white-space:nowrap}

/* Daily entry form (manual data entry table, inside Update Daily Data modal) */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.entry-field{display:flex;flex-direction:column;gap:4px}
.entry-field label{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2);font-weight:600}
.entry-field input,.entry-field select{padding:8px 10px;background:var(--s3);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-family:var(--mono);font-size:12px;outline:none;transition:border-color .2s;width:100%}
.entry-field input:focus,.entry-field select:focus{border-color:var(--ac)}
.entry-table{width:100%;border-collapse:collapse}
.entry-table th{padding:8px;background:var(--s2);font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);border:1px solid var(--bd);text-align:center}
.entry-table td{padding:6px 8px;border:1px solid var(--bd)}
.entry-table td input{width:100%;padding:5px 7px;background:transparent;border:none;color:var(--tx);font-family:var(--mono);font-size:12px;outline:none;text-align:center}
.entry-table td input:focus{background:rgba(255,107,0,.08);border-radius:4px}
.entry-table tbody tr:hover{background:rgba(255,107,0,.03)}
.entry-table .sticky-col{position:sticky;left:0;background:var(--s1);z-index:2;font-weight:600;text-align:left!important}
.entry-table thead .sticky-col{background:var(--s2)}

/* History log items (Data History tab — currently hidden) */
.hist-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--bd);border-radius:8px;margin-bottom:8px;background:var(--s1)}
.hist-date{font-family:var(--mono);font-size:12px;color:var(--ac)}
.hist-info{font-size:12px;color:var(--tx2)}
.hist-vals{font-family:var(--mono);font-size:11px;color:var(--gn)}
.del-btn{background:none;border:none;color:var(--rd);cursor:pointer;font-size:14px;opacity:.5;transition:opacity .15s}
.del-btn:hover{opacity:1}

/* Date toggle pills + Upload Excel button (Daily Dashboard top row) */
.date-toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.date-toggle-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2)}
.date-pills{display:flex;gap:6px;flex-wrap:wrap}
.date-pill{padding:5px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:20px;color:var(--tx2);font-size:11px;font-family:var(--mono);cursor:pointer;transition:all .15s}
.date-pill:hover{border-color:var(--ac);color:var(--ac)}
.date-pill.active{background:rgba(255,107,0,.12);border-color:var(--ac);color:var(--ac);font-weight:700}
.upload-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(255,107,0,.08);border:1px dashed rgba(255,107,0,.35);border-radius:20px;color:var(--ac);font-size:11px;font-family:var(--mono);cursor:pointer;transition:all .2s}
.upload-btn:hover{background:rgba(255,107,0,.15);border-color:var(--ac)}
#xlUploadInput{display:none}
.parse-status{display:inline-flex;align-items:center;font-size:10px;font-family:var(--mono);padding:4px 10px;border-radius:4px}
.parse-ok{color:var(--gn);background:rgba(16,185,129,.1)}
.parse-err{color:var(--rd);background:rgba(239,68,68,.1)}
.parse-loading{color:var(--yw);background:rgba(245,158,11,.1)}

/* Drop zone (Update Daily Data modal — Excel upload tab) */
.drop-zone{border:2px dashed var(--bd2);border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:20px}
.drop-zone:hover,.drop-zone.drag{border-color:var(--ac);background:rgba(255,107,0,.05)}
.drop-icon{font-size:36px;margin-bottom:10px}
.drop-title{font-size:15px;font-weight:600;margin-bottom:4px}
.drop-sub{font-size:12px;color:var(--tx2)}
.file-input{display:none}

/* CALENDAR DATE PICKER */
.date-picker-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;position:relative}
.dp-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2)}
.dp-trigger{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:var(--s1);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-size:13px;font-family:var(--mono);cursor:pointer;transition:all .2s;user-select:none}
.dp-trigger:hover{border-color:var(--ac);color:var(--ac)}
.dp-caret{transition:transform .2s;color:var(--tx3)}
.dp-trigger.open .dp-caret{transform:rotate(180deg)}
.dp-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--s2);border:1px solid var(--bd2);border-radius:12px;padding:14px;z-index:300;box-shadow:0 16px 48px rgba(0,0,0,.6);min-width:260px}
.dp-dropdown.show{display:block;animation:fadeUp .15s ease}
.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-month-label{font-family:var(--display);font-size:16px;letter-spacing:1px;color:var(--tx)}
.dp-nav-btn{background:var(--s3);border:1px solid var(--bd);color:var(--tx2);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.dp-nav-btn:hover{border-color:var(--ac);color:var(--ac)}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.dp-weekdays span{text-align:center;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);padding:3px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dp-day{width:100%;aspect-ratio:1;border-radius:6px;border:none;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:600;transition:all .15s;position:relative;display:flex;align-items:center;justify-content:center}
.dp-day.empty{background:transparent;cursor:default}
.dp-day.no-data{background:transparent;color:var(--tx3);cursor:default}
.dp-day.no-data:hover{background:transparent}
.dp-day.has-data{background:var(--s3);color:var(--tx);cursor:pointer}
.dp-day.has-data:hover{background:rgba(255,107,0,.15);color:var(--ac);border:1px solid rgba(255,107,0,.3)}
.dp-day.active{background:var(--ac) !important;color:#000 !important;font-weight:700}
.dp-day.has-data::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--ac);opacity:.7}
.dp-day.active::after{background:#000}
.dp-footer{display:flex;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
.dp-legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--tx3)}
.dp-legend-dot{width:8px;height:8px;border-radius:50%}
.dp-legend-dot.has-data{background:var(--ac)}
.dp-legend-dot.no-data{background:var(--s3);border:1px solid var(--bd2)}

/* Upload guide (currently-hidden "How to Update" page) */
.upload-guide{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:20px;margin-bottom:20px}
.upload-guide-title{font-family:var(--display);font-size:18px;letter-spacing:1px;color:var(--tx);margin-bottom:4px}
.upload-guide-sub{font-size:12px;color:var(--tx2);margin-bottom:18px}
.guide-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.guide-step{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:14px;position:relative;padding-left:48px}
.guide-step-num{position:absolute;left:14px;top:14px;width:24px;height:24px;background:var(--ac);color:#000;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.guide-step-title{font-size:12px;font-weight:700;margin-bottom:4px}
.guide-step-desc{font-size:11px;color:var(--tx2);line-height:1.5}
.guide-file-tag{display:inline-block;padding:2px 7px;background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.25);border-radius:4px;font-size:10px;font-family:var(--mono);color:var(--ac);margin:2px 0}
.guide-schedule{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.guide-sched-item{flex:1;min-width:180px;background:var(--s2);border-radius:8px;padding:12px}
.guide-sched-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ac);margin-bottom:6px}
.guide-sched-steps{font-size:11px;color:var(--tx2);line-height:1.8}

/* Google Sheets sync UI (status pill in header + connection bar in modal) */
.gs-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-family:var(--mono);transition:all .3s}
.gs-pill.syncing{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:var(--yw)}
.gs-pill.ok{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:var(--gn)}
.gs-pill.err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--rd)}
.gs-err-msg{display:none;padding:10px 14px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:7px;color:var(--rd);font-size:12px;margin-bottom:14px}
.gs-err-msg.show{display:block}
.gs-ok-msg{display:none;padding:10px 14px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:7px;color:var(--gn);font-size:12px;margin-bottom:14px}
.gs-ok-msg.show{display:block}
.gs-connected-bar{display:none;padding:10px 14px;background:rgba(255,107,0,.06);border:1px solid rgba(255,107,0,.2);border-radius:7px;margin-bottom:14px;font-size:12px;align-items:center;justify-content:space-between;gap:10px}
.gs-connected-bar.show{display:flex}
.gs-setup{background:var(--s3);border:1px solid var(--bd);border-radius:8px;padding:14px;margin-bottom:18px;font-size:12px}
.gs-setup-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ac);margin-bottom:10px}
.gs-step{display:flex;gap:10px;margin-bottom:7px;align-items:flex-start}
.gs-step-n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ac);background:rgba(255,107,0,.15);border-radius:4px;padding:1px 6px;flex-shrink:0;margin-top:2px}
.gs-step-txt{color:var(--tx2);line-height:1.5}
.gs-step-txt a{color:var(--ac);text-decoration:none}
.gs-step-txt code{font-family:var(--mono);background:var(--s2);padding:1px 5px;border-radius:3px;font-size:10px;color:var(--tx)}