/* ---- timesheets (class.timesheets.php): the Hours to review queue on the Payments page, the
   employer's row drawer, the worker's Hours tile drawers. settings_row / settings_group come
   from global.css; these are the ts_ additions ---- */

/* the queue */
.ts_queue { }
.ts_queue .settings_group_title:first-of-type { margin-top: 18px; }
.ts_queue_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ts_queue_sum { flex: 1 1 260px; font-size: .95em; color: #16211f; }
.ts_queue_sum b { color: #16211f; }
.ts_sum_bad { color: #b42318 !important; }
.ts_queue_help { font-size: .8em; color: #6b7a7e; line-height: 1.5; margin-top: 4px; }
.ts_approve_all { flex: none; background: #0f7777; border-color: #0f7777; font-weight: 700; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; }
.ts_approve_all:disabled { opacity: .45; }
.ts_count { background: rgba(255,255,255,.22); border-radius: 10px; padding: 0 8px; font-size: .85em; }
.ts_group_tag { font-size: 10px; font-weight: 700; color: #6b7c7d; background: #e4eeee; border-radius: 8px; padding: 2px 8px; margin-left: 6px; letter-spacing: .04em; vertical-align: middle; }
.ts_row_shift { color: #6b7c7d; font-weight: 400; }
.ts_row_note { font-size: 12.5px; color: #b42318; margin-top: 3px; }
.ts_row_note i { margin-right: 3px; }
.ts_row_disputed .settings_row_icon { background: #fdecec; color: #b42318; }
.ts_row_approved .settings_row_icon, .ts_row_auto_approved .settings_row_icon { background: #e6f4ea; color: #1a7f37; }
.ts_state { flex: none; font-size: 11.5px; font-weight: 700; border-radius: 10px; padding: 3px 9px; margin-left: 10px; white-space: nowrap; }
.ts_state_wait { background: #fff4e5; color: #b45309; }
.ts_state_ok { background: #e6f4ea; color: #1a7f37; }
.ts_state_bad { background: #fdecec; color: #b42318; }
.settings_row_chevron { flex: none; color: #9fb0b2; margin-left: 8px; font-size: 13px; }
.ts_next_day { font-size: .78em; color: #6b7c7d; font-weight: 700; }
.ts_empty { display: flex; gap: 14px; align-items: flex-start; background: white; border: 1px solid #d3e2e3; border-radius: 12px; padding: 16px; color: #46575b; font-size: .92em; line-height: 1.5; }
.ts_empty i { font-size: 26px; color: #0f7777; flex: none; }

/* the timeline (display_timeline): two bars on an hour axis */
.ts_timeline { padding: 12px 14px 8px; border-top: 1px solid #e4eeee; }
.ts_tl_row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ts_tl_label { flex: 0 0 66px; font-size: 11px; font-weight: 700; color: #0f5e63; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.ts_tl_example { display: block; font-size: 9px; color: #8a9a9f; letter-spacing: .04em; }
.ts_tl_track { flex: 1 1 auto; position: relative; height: 26px; background: #f1f5f5; border-radius: 6px; overflow: hidden; }
.ts_tl_bar { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; font-size: 11px; font-weight: 700; }
.ts_tl_bar_sched { background: #0f7777; color: white; }
.ts_tl_bar_phone { background: #f59e0b; color: #3b2a00; }
.ts_tl_bar_example { background: repeating-linear-gradient(135deg, #fde7b3 0 6px, #fff3d6 6px 12px); border: 1px dashed #d99a06; color: #8a5a00; }
.ts_tl_axis_row { margin-bottom: 0; }
.ts_tl_axis { flex: 1 1 auto; position: relative; height: 18px; }
.ts_tl_tick { position: absolute; top: 0; width: 0; border-left: 1px solid #d3e2e3; height: 6px; }
.ts_tl_tick span { position: absolute; top: 7px; left: 0; transform: translateX(-50%); font-size: 9.5px; color: #8a9a9f; white-space: nowrap; }
.ts_tl_note { font-size: 11.5px; color: #6b7c7d; margin-top: 10px; line-height: 1.4; }
.ts_icon_pay { background: #e6f4ea !important; color: #1a7f37 !important; }
.ts_pay_amount { font-size: 1.15em; font-weight: 800; color: #1a7f37; }
.ts_row_pay { color: #1a7f37; font-weight: 700; }
.ts_row_nopay { color: #b45309; }

/* the drawers */
.ts_drawer_content { padding: 0; border: 0; background: transparent; }
.ts_person_card { background: white; border: 1px solid #d3e2e3; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06); }
.ts_person_name { font-size: 1.25em; font-weight: 800; color: #16211f; line-height: 1.2; }
.ts_person_sub { font-size: .9em; color: #6b7c7d; margin-top: 3px; }
.ts_person_state { margin-top: 10px; }
.ts_person_state .ts_state { margin-left: 0; }
.ts_approved_line { margin-top: 8px; font-size: .84em; font-weight: 700; color: #1a7f37; }
.ts_person_intro { font-size: .9em; color: #46575b; line-height: 1.5; margin-bottom: 6px; }
.ts_row_static, .ts_row_static:hover { cursor: default; background: white; }
.ts_icon_bad { background: #fdecec !important; color: #b42318 !important; }
.ts_note_text { white-space: normal; font-weight: 400; }
.ts_edit_group { padding: 12px 14px; }
.ts_edit_row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ts_edit_row label { flex: 0 0 44px; margin: 0; font-size: 12px; font-weight: 700; color: #0f5e63; letter-spacing: .06em; text-transform: uppercase; }
.ts_edit_row .form-control { flex: 1 1 0; min-width: 0; height: 38px; padding: 6px 8px; font-weight: 600; color: #16211f; border: 1px solid #c9d6d8; border-radius: 8px; box-shadow: none; }
.ts_edit_row .form-control:focus { border-color: #0f7777; box-shadow: none; }
.ts_edit_row input[type='date'] { flex: 1.35 1 0; }
.ts_edit_total { text-align: right; font-size: .9em; color: #46575b; margin: 2px 0 10px; }
.ts_edit_total b { color: #0f7777; }
.ts_edit_note_row { margin-bottom: 0; }
.ts_edit_note_row .form-control { font-weight: 400; }
.ts_edit_group textarea.form-control { border: 1px solid #c9d6d8; border-radius: 8px; box-shadow: none; resize: vertical; }
.ts_edit_group textarea.form-control:focus { border-color: #0f7777; box-shadow: none; }
.ts_drawer_buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.ts_edit_group .ts_drawer_buttons { margin-top: 10px; }
.ts_drawer_buttons .btn { font-weight: 700; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px; }
.ts_drawer_buttons .btn-primary { background: #0f7777; border-color: #0f7777; }
.ts_drawer_buttons .btn:disabled { opacity: .5; }
.ts_drawer_foot { font-size: .78em; color: #8a9a9f; line-height: 1.45; margin-top: 10px; text-align: right; }
@media (max-width: 480px)
{
  .ts_edit_row { flex-wrap: wrap; }
  .ts_edit_row label { flex-basis: 100%; }
}

/* ---- the grid (display_grid): the sheet look, for comparison ---- */
.ts_grid_head { margin-top: 28px; }
.ts_grid_wrap { }
.ts_grid_bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ts_grid_help { font-size: .8em; color: #6b7a7e; flex: 1 1 260px; }
.ts_grid_scroll { overflow-x: auto; background: white; border: 1px solid #d3e2e3; border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06); -webkit-overflow-scrolling: touch; }
.ts_grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; color: #1f2a2b; }
.ts_grid th, .ts_grid td { padding: 8px 10px; border-bottom: 1px solid #e4eeee; white-space: nowrap; vertical-align: middle; background: white; text-align: left; }
.ts_grid thead th { font-size: 11px; font-weight: 700; color: #0f5e63; letter-spacing: .06em; text-transform: uppercase; background: #f3f8f8; border-bottom: 1px solid #d3e2e3; position: sticky; top: 0; z-index: 2; }
.ts_grid .ts_g_num { text-align: right; }
.ts_grid tbody tr:last-child td { border-bottom: 0; }
.ts_grid tbody tr:hover td { background: #f6fbfb; }
.ts_g_pin_l { position: sticky; left: 0; z-index: 3; }
.ts_g_name { left: 0; font-weight: 600; box-shadow: 4px 0 6px -4px rgba(11, 61, 64, .18); min-width: 150px; }
.ts_g_pin_r { position: sticky; right: 0; z-index: 3; box-shadow: -4px 0 6px -4px rgba(11, 61, 64, .18); text-align: right; }
.ts_g_actions .btn { margin-left: 6px; font-weight: 700; }
.ts_g_actions .btn-xs { padding: 3px 9px; font-size: 12px; }
.ts_grid thead .ts_g_pin_l, .ts_grid thead .ts_g_pin_r { z-index: 4; background: #f3f8f8; }
.ts_grid_event { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; padding-left: 4px; }
.ts_grid_event_name { font-size: 15px; font-weight: 800; color: #16211f; }
.ts_grid_event_name span { font-weight: 400; color: #6b7c7d; font-size: 13px; margin-left: 6px; }
.ts_g_approve_event { background: #0f7777; border-color: #0f7777; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ts_g_row_void td { color: #9fb0b2; text-decoration: line-through; }
.ts_g_row_void td.ts_g_pin_r, .ts_g_row_void td:has(.ts_state) { text-decoration: none; }
.ts_g_keyed { background: #fff6dc !important; box-shadow: inset 0 0 0 1px #f3d98b; }
.ts_g_dim { color: #b8c4c6; }
.ts_g_norule { color: #b45309; font-weight: 700; }
.ts_g_rule { font-size: 10.5px; color: #6b7c7d; font-weight: 400; }
.ts_g_delta { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 6px; margin-left: 3px; }
.ts_g_good { background: #e6f4ea; color: #1a7f37; }
.ts_g_bad { background: #fdecec; color: #b42318; }
.ts_g_on { background: #f1f3f3; color: #6b7c7d; }
.ts_g_note { color: #b42318; margin-left: 5px; cursor: help; }
.ts_g_menu { position: fixed; z-index: 3000; background: white; border: 1px solid #d3e2e3; border-radius: 10px; box-shadow: 0 8px 24px rgba(11, 61, 64, .18); padding: 6px; min-width: 240px; }
.ts_g_menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: #1f2a2b; cursor: pointer; }
.ts_g_menu button:hover { background: #eaf4f4; }
.ts_g_menu button:disabled { color: #b8c4c6; cursor: default; background: transparent; }
.ts_g_menu button i { color: #0f5e63; width: 16px; text-align: center; }
.ts_g_menu .ts_g_menu_danger { color: #b42318; }
.ts_g_menu .ts_g_menu_danger i { color: #b42318; }
@media (max-width: 767px)
{
  .ts_g_actions .btn.ts_g_details { display: none; }   /* the ⋯ menu's Edit… opens the same drawer; outranks bootstrap's .btn */
  .ts_g_actions .btn { margin-left: 0; }
}