/* =====================================================================
   Worker Time Tracker  —  pp-lovable redesign (CSS ONLY)
   Matches PrintingProxies.com's new design: white cards, #f7f8fb bg,
   gold buttons + dark ink, #e07b30 orange accents, soft shadows, Inter.

   Scoped under #clock-in-out-container so it never leaks to the theme.
   NO markup/id/class/JS changes — every selector here already exists.
   The few inline-styled wrappers are reached with :has() + !important.
   ===================================================================== */

:root{
  --wt-bg:#f7f8fb; --wt-card:#ffffff; --wt-text:#1a1a1a; --wt-muted:#5a5a5a;
  --wt-border:rgba(20,24,40,.10); --wt-soft:#fff7ef; --wt-soft-bd:#f0d4b0;
  --wt-orange:#e07b30; --wt-orange-h:#c96820;
  --wt-ink:#1d2233;
  --wt-green:#1f9d57; --wt-red:#d9534f;
  --wt-radius:16px; --wt-radius-sm:10px;
  --wt-shadow:0 2px 24px rgba(0,0,0,.07);
  --wt-font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- shell ---------- */
#clock-in-out-container{
  max-width:1180px; margin:0 auto; font-family:var(--wt-font); color:var(--wt-text);
}
#clock-in-out-container, #clock-in-out-container *{ box-sizing:border-box; }
#worker-time-tracker-container{ width:100%; }

/* tame the old global element rules (now scoped, can't touch theme header/footer) */
#clock-in-out-container h2{ font-size:20px; font-weight:700; color:var(--wt-text); margin:0 0 12px; }
#clock-in-out-container h3{ font-weight:600; color:var(--wt-text); }
#clock-in-out-container p{ color:var(--wt-text); }

/* ---------- buttons (gold = primary) ---------- */
#clock-in-out-container #clock-in-button,
#clock-in-out-container #clock-out-button,
#clock-in-out-container #submit-forgot-time,
#clock-in-out-container #clockOutForgot,
#clock-in-out-container #foodSubmit,
#clock-in-out-container #itemSubmit,
#clock-in-out-container .w-btn,
#clock-in-out-container .overlay .popup button{
  background:#e0992f !important;
  background:oklch(0.72 0.16 70) !important;
  color:var(--wt-ink) !important;
  border:0 !important; border-radius:var(--wt-radius-sm) !important;
  padding:10px 18px !important; font-size:15px !important; font-weight:600 !important;
  line-height:1.2; cursor:pointer; box-shadow:none !important;
  transition:background .15s ease, transform .05s ease, box-shadow .15s ease;
}
#clock-in-out-container #clock-in-button:hover,
#clock-in-out-container #clock-out-button:hover,
#clock-in-out-container #submit-forgot-time:hover,
#clock-in-out-container #clockOutForgot:hover,
#clock-in-out-container #foodSubmit:hover,
#clock-in-out-container #itemSubmit:hover,
#clock-in-out-container .w-btn:hover,
#clock-in-out-container .overlay .popup button:hover{
  background:#c9831f !important; background:oklch(0.66 0.16 70) !important;
}
#clock-in-out-container .w-btn:focus-visible,
#clock-in-out-container button:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(224,153,47,.32) !important;
}
#clock-in-out-container .w-btn:active,
#clock-in-out-container #clock-in-button:active,
#clock-in-out-container #clock-out-button:active{ transform:translateY(1px); }

/* destructive actions stay red (Remove / Hide) */
#clock-in-out-container #itemAction button[onclick^="removeItem"],
#clock-in-out-container #hideHistoryPayment{
  background:var(--wt-red) !important; color:#fff !important;
}
#clock-in-out-container #itemAction button[onclick^="removeItem"]:hover,
#clock-in-out-container #hideHistoryPayment:hover{ background:#c0392b !important; }

/* disabled state (clear, neutral) */
#clock-in-out-container button:disabled,
#clock-in-out-container .w-btn:disabled{
  background:#e7e9ee !important; color:#9aa1ad !important;
  cursor:not-allowed !important; box-shadow:none !important; transform:none !important;
}

/* PayPal / Pay actions = solid brand orange */
#clock-in-out-container .paypal-style-button{
  display:inline-block; padding:9px 16px; border-radius:var(--wt-radius-sm);
  background:var(--wt-orange); color:#fff; border:0; font-size:14px; font-weight:600;
  text-align:center; text-decoration:none; cursor:pointer; transition:background .15s ease;
}
#clock-in-out-container .paypal-style-button:hover,
#clock-in-out-container .paypal-style-button:focus{ background:var(--wt-orange-h); color:#fff !important; }

/* ---------- clock controls header ---------- */
#clock-in-out-container .clock-buttons{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  background:var(--wt-card); border:1px solid var(--wt-border); border-radius:var(--wt-radius);
  box-shadow:var(--wt-shadow); padding:18px 20px !important; margin:0 0 14px;
  font-size:20px !important;
}
#clock-in-out-container .clock-buttons #timer{ font-variant-numeric:tabular-nums; color:var(--wt-orange); }
#clock-in-out-container .clock-buttons button{ font-size:15px !important; }
/* the secondary "Forgot to clockout / Food" row + message row */
#clock-in-out-container .clock-buttons + div{ font-size:16px !important; }
#clock-in-out-container #clock-in-out-message{ color:var(--wt-green) !important; font-size:16px; }

/* ---------- totals / next-payment stat card ---------- */
#clock-in-out-container #total-hours-earnings{
  background:var(--wt-soft) !important; border:1px solid var(--wt-soft-bd);
  border-radius:var(--wt-radius); box-shadow:var(--wt-shadow);
  padding:16px 20px !important; margin:0 0 16px !important; color:var(--wt-text) !important;
}
#clock-in-out-container #total-hours-earnings .infoTitle,
#clock-in-out-container #total-hours-earnings p{
  margin:0 !important; font-size:18px !important; color:var(--wt-text) !important; text-align:center;
}
#clock-in-out-container #total-hours-earnings strong{ color:var(--wt-orange); font-weight:700; }

/* ---------- card containers for lists/tables ---------- */
#clock-in-out-container .clock-history,
#clock-in-out-container #clock-history,
#clock-in-out-container #clock-history2,
#clock-in-out-container #itemsList,
#clock-in-out-container #paymentsList,
#clock-in-out-container #payment-history{
  background:var(--wt-card) !important; border:1px solid var(--wt-border);
  border-radius:var(--wt-radius); box-shadow:var(--wt-shadow);
  padding:16px 18px !important; margin:0 0 16px;
}
#clock-in-out-container #clock-history:empty,
#clock-in-out-container #clock-history2:empty,
#clock-in-out-container #itemsList:empty,
#clock-in-out-container #paymentsList:empty,
#clock-in-out-container #daily-history:empty{ display:none; }
#clock-in-out-container .clock-history h2,
#clock-in-out-container .clock-history-list ~ h2,
#clock-in-out-container #clock-worker-history{ color:var(--wt-text) !important; margin-bottom:12px; }

/* ---------- flex "tables" (worker-li / history-li rows) ---------- */
#clock-in-out-container .worker-list,
#clock-in-out-container .clock-history-list,
#clock-in-out-container #clock-history-list{ list-style:none; padding:0; margin:0; }

#clock-in-out-container .worker-li,
#clock-in-out-container .history-li{
  display:flex; align-items:center; gap:10px; overflow:visible;
  border-bottom:1px solid var(--wt-border); padding:12px 8px; color:var(--wt-text);
}
#clock-in-out-container .worker-li:hover,
#clock-in-out-container .history-li:hover{ background:#fafbfc; }
#clock-in-out-container .worker-li:last-child,
#clock-in-out-container .history-li:last-child{ border-bottom:0; }
/* header row (first row carries the column labels) */
#clock-in-out-container .clock-history-list > .worker-li:first-child,
#clock-in-out-container .clock-history-list > .history-li:first-child,
#clock-in-out-container #clock-history-list > .history-li:first-child{
  background:var(--wt-bg); font-weight:700; color:var(--wt-text);
  border-radius:var(--wt-radius-sm); border-bottom:1px solid var(--wt-border);
}
/* distribute columns exactly like the original (flex:1 base; c1/c2 fixed below) */
#clock-in-out-container .worker-li div,
#clock-in-out-container .history-li div{ flex:1; min-width:0; }
#clock-in-out-container .worker-li .w-3{ display:flex; align-items:center; gap:10px; }

/* ---------- inputs / selects ---------- */
#clock-in-out-container input[type="text"],
#clock-in-out-container input[type="email"],
#clock-in-out-container input[type="tel"],
#clock-in-out-container input[type="number"],
#clock-in-out-container input[type="time"],
#clock-in-out-container input[type="datetime-local"],
#clock-in-out-container select,
#clock-in-out-container .hrRate,
#clock-in-out-container .workerMe,
#clock-in-out-container .workerEmail,
#clock-in-out-container .workerPhone,
#clock-in-out-container .clockin,
#clock-in-out-container .clockout,
#clock-in-out-container .food{
  background:var(--wt-card); color:var(--wt-text);
  border:1px solid var(--wt-border) !important; border-radius:8px !important;
  padding:8px 10px; font-size:14px; max-width:100%; box-shadow:none;
}
#clock-in-out-container input:focus,
#clock-in-out-container select:focus{
  border-color:var(--wt-orange) !important; outline:none;
  box-shadow:0 0 0 3px rgba(224,123,48,.18) !important;
}
#clock-in-out-container .hrRate{ width:64px; font-size:13px; }
#clock-in-out-container .c1 input, #clock-in-out-container .c2 input{ width:100%; }

/* keep the original column widths (c1/c2 wide for the datetime inputs) */
#clock-in-out-container .c1, #clock-in-out-container .c2{ flex:0 0 20% !important; }

/* ---------- inventory submit box (inline-styled, reached via :has) ---------- */
#clock-in-out-container #worker-time-tracker-container > div:has(> div > #itemSelect),
#clock-in-out-container #worker-time-tracker-container > div:has(> #itemsList){
  background:var(--wt-card) !important; border:1px solid var(--wt-border) !important;
  border-radius:var(--wt-radius) !important; box-shadow:var(--wt-shadow) !important;
  padding:18px !important; font-size:16px !important; font-weight:400 !important;
  text-align:left !important;
}
#clock-in-out-container #worker-time-tracker-container > div:has(#itemSelect) > div:first-child{
  flex-wrap:wrap !important; gap:10px !important; justify-content:flex-start !important;
}
#clock-in-out-container #itemSubmit{ background:#e0992f !important; background:oklch(0.72 0.16 70) !important; }
#clock-in-out-container label[for="item"]{ font-size:16px !important; font-weight:600; }
/* the items list sits INSIDE the inventory card on /worker — flatten it */
#clock-in-out-container #worker-time-tracker-container > div:has(#itemSelect) #itemsList{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin-top:12px;
}

/* ---------- admin payment toolbar (inline-styled, reached via :has) ---------- */
#clock-in-out-container div:has(> #payment-by){
  flex-wrap:wrap !important; gap:8px !important; align-items:center;
}
#clock-in-out-container #getHistoryPayment{ background:#e0992f !important; background:oklch(0.72 0.16 70) !important; }

/* ---------- modal (overlay / popup) ---------- */
#clock-in-out-container .overlay{
  display:none; position:fixed; inset:0; width:100%; height:100%;
  background:rgba(15,18,25,.55); justify-content:center; align-items:center;
  z-index:99999; padding:16px;
}
#clock-in-out-container .popup{
  position:relative; background:var(--wt-card); padding:24px;
  border-radius:var(--wt-radius); text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.25); max-width:420px; width:100%;
}
#clock-in-out-container .popup h2{ margin:0 0 14px; }
#clock-in-out-container .popup p{ margin:0 0 14px; color:var(--wt-muted); }
#clock-in-out-container .popup input{ width:100%; margin-bottom:14px; }
#clock-in-out-container .close-btn{
  cursor:pointer; position:absolute; top:12px; right:14px; font-size:18px; line-height:1;
  color:var(--wt-muted); width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
#clock-in-out-container .close-btn:hover{ background:var(--wt-bg); color:var(--wt-text); }

/* ---------- pagination ---------- */
#clock-in-out-container .pagination{
  display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:16px 0 0;
  justify-content:center; gap:6px;
}
#clock-in-out-container .pagination a{
  display:inline-block; padding:8px 14px; text-decoration:none; color:var(--wt-text);
  background:var(--wt-card); border:1px solid var(--wt-border); border-radius:8px;
  transition:background .15s ease, border-color .15s ease;
}
#clock-in-out-container .pagination a:hover{ background:var(--wt-bg); border-color:var(--wt-orange); }
#clock-in-out-container .pagination a.current{
  background:var(--wt-orange); color:#fff; border-color:var(--wt-orange); pointer-events:none;
}

/* ---------- status dot / badges / tooltip ---------- */
#clock-in-out-container span.indicator{
  width:14px; height:14px; border-radius:50%; background:var(--wt-green);
  line-height:1; display:inline-flex; flex:0 0 auto; cursor:pointer;
  box-shadow:0 0 0 3px rgba(31,157,87,.18);
}
#clock-in-out-container .tooltipp{ position:relative; display:inline-block; }
#clock-in-out-container .tooltipp .tooltiptext{
  visibility:hidden; width:140px; background:#1d2233; color:#fff; opacity:.96;
  font-size:13px; font-weight:600; text-align:center; border-radius:8px; padding:6px 8px;
  position:absolute; z-index:10; bottom:130%; left:50%; transform:translateX(-50%);
}
#clock-in-out-container .tooltipp:hover .tooltiptext{ visibility:visible; }
#clock-in-out-container .is_paid{ white-space:nowrap; }

/* ---------- collapsible inventory sections ---------- */
#clock-in-out-container .item-status h3{
  cursor:pointer; background:var(--wt-bg); padding:12px 14px; border:1px solid var(--wt-border);
  border-radius:var(--wt-radius-sm); margin:0 0 8px; font-size:15px; display:flex;
  align-items:center; justify-content:space-between; gap:8px;
}
#clock-in-out-container .collapsible-section{ display:none; margin:0; padding:0; }

/* ---------- DataTables payment table -> match cards ---------- */
#clock-in-out-container #paymentsTable{ width:100% !important; border-collapse:separate; border-spacing:0; }
#clock-in-out-container #paymentsTable thead th{
  background:var(--wt-bg); color:var(--wt-text); border-bottom:1px solid var(--wt-border);
  font-weight:700; padding:12px 10px;
}
#clock-in-out-container #paymentsTable tbody td{ border-bottom:1px solid var(--wt-border); padding:10px; color:var(--wt-text); }
#clock-in-out-container .dataTables_wrapper{ overflow-x:auto; }

/* ---------- spinner (functional — keep) ---------- */
.spinner{
  display:inline-block; width:25px; height:25px;
  border:3px solid rgba(255,255,255,.35); border-radius:50%; border-top-color:#fff;
  animation:spin 1s ease-in-out infinite; -webkit-animation:spin 1s ease-in-out infinite;
}
@keyframes spin{ to{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } }
@-webkit-keyframes spin{ to{ -webkit-transform:rotate(360deg); } }

/* =====================================================================
   RESPONSIVE  —  tablet / mobile (no horizontal page overflow)
   ===================================================================== */
@media (max-width:1024px){
  #clock-in-out-container{ padding:0 4px; }
}
@media (max-width:900px){
  /* tables scroll horizontally as one aligned unit inside their card */
  #clock-in-out-container .clock-history,
  #clock-in-out-container #clock-history,
  #clock-in-out-container #clock-history2,
  #clock-in-out-container #itemsList,
  #clock-in-out-container #paymentsList,
  #clock-in-out-container #payment-history{
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px !important;
  }
  #clock-in-out-container .worker-li,
  #clock-in-out-container .history-li,
  #clock-in-out-container #clock-history-list > li,
  #clock-in-out-container .clock-history-list > li{ min-width:740px; }
}
@media (max-width:767px){
  #clock-in-out-container .clock-buttons{ font-size:18px !important; padding:14px !important; }
  #clock-in-out-container #total-hours-earnings .infoTitle{ font-size:16px !important; }
  /* keep the inventory submit controls usable when stacked */
  #clock-in-out-container #worker-time-tracker-container > div:has(#itemSelect) > div:first-child{
    flex-direction:column; align-items:stretch !important;
  }
  #clock-in-out-container #itemQty{ width:100% !important; margin-left:0 !important; }
  #clock-in-out-container .paypal-style-button{ font-size:13px; padding:8px 12px; }
  #clock-in-out-container .w-btn,
  #clock-in-out-container #clock-in-button,
  #clock-in-out-container #clock-out-button{ padding:9px 14px !important; font-size:14px !important; }
}