/* Mac Light fixes & neutralizers (v r57.23.96) */
/* Prevent macOS prefers-color-scheme=dark from bleeding into our LIGHT theme */
html:not(.dark) .dark\:text-white,
html:not(.dark) .dark\:text-gray-50,
html:not(.dark) .dark\:text-gray-100,
html:not(.dark) .dark\:text-gray-200,
html:not(.dark) .dark\:text-gray-300,
html:not(.dark) .dark\:text-gray-400 { color: #0f172a !important; }

html:not(.dark) .dark\:border-gray-700,
html:not(.dark) .dark\:border-gray-800 { border-color: #e5e7eb !important; }

html:not(.dark) .dark\:bg-gray-800,
html:not(.dark) .dark\:bg-gray-900,
html:not(.dark) .dark\:bg-slate-800,
html:not(.dark) .dark\:bg-slate-900,
html:not(.dark) .dark\:bg-\[rgb\(35\ 57\ 100\)\] { background-color: transparent !important; }

/* Search panel & dropdowns on LIGHT */
html:not(.dark) [data-search-panel="true"]{ background-color:#ffffff !important; color:#0f172a !important; }
html:not(.dark) [data-search-panel="true"] input{ background-color:#ffffff !important; color:#0f172a !important; }

/* Generic modal card on LIGHT (settings, reports, etc.) */
html:not(.dark) .tt-modal{
  background-color:#ffffff !important;
  color:#0f172a !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.14) !important;
}

/* Calendar portal content (LIGHT & DARK) */
html:not(.dark) [data-tt-portal-content="true"]{
  background-color:#ffffff !important;
  color:#0f172a !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.15) !important;
}

html.dark [data-tt-portal-content="true"]{
  background-color: rgb(24 24 27) !important; /* zinc-900ish */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5) !important;
}

/* Flatpickr / date pickers – just in case */
html:not(.dark) .flatpickr-calendar,
html:not(.dark) .react-datepicker,
html:not(.dark) .datepicker {
  background:#ffffff !important; color:#0f172a !important;
  border: 1px solid rgba(0,0,0,.08) !important; border-radius:12px !important;
}

/* Selected task highlight should NOT force dark in LIGHT theme */
html:not(.dark) .dark\:bg-\[rgb\(35\ 57\ 100\)\],
html:not(.dark) .dark\:text-white{
  background-color: transparent !important;
  color: #0f172a !important;
}

/* --- Styles2 patch r57.23.129 --- */
/* 1) Top controls: calendar above total time on mobile, no excess gap */
@media (max-width: 640px){
  .tt-top-controls{ display:grid; grid-template-columns: 1fr !important; }
  .tt-top-controls > *{ width:100%; }
}

/* 2) Ungrouped list: make title occupy full first row; actions/time go to second line */
@media (max-width: 640px){
  .task-row .flex-1.min-w-0{ flex-wrap: wrap; }
  .task-row .task-name{ flex-basis: 100%; width: 100%; display: block; }
  .task-row .project-label{ margin-top: 2px; }
  .task-row .task-row-actions{ grid-column: 1 / -1; }
}

/* 3) Resume button disabled style when task done */
.task-row button.btn-resume-done{
  background: #e5e7eb; /* gray-200 */
  color: #6b7280;      /* gray-500 */
  border-color: #d1d5db; /* gray-300 */
  text-decoration: line-through;
  cursor: not-allowed;
}

/* 4) Grouped list: prevent overflow; wrap long words/tokens */
.name-container .task-name{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Desktop grouped: keep single line when short by default via layout, content will wrap naturally when long */

/* --- Styles2 unify grids r57.23.130 --- */
.task-row > .grid{ align-items: center; }
@media (max-width: 640px){
  .task-row > .grid{ grid-template-columns: 1fr !important; gap: .5rem !important; }
  .task-row .tt-time-spent{ order: 2; }
  .task-row .task-row-actions{ order: 3; justify-self: end; }
  .task-row .name-container .task-name{ width:100%; }
}

/* --- Styles2 r57.23.131: force consistent three-column layout in ungrouped --- */
.task-row > .grid{ grid-template-columns: 1fr auto auto; }
@media (max-width: 640px){
  .task-row > .grid{ grid-template-columns: 1fr !important; }
}

/* --- Styles2 r57.23.132: fix stray braces, no truncation, unify 3-col grid, mobile order --- */
.task-row .task-name{
  display:block;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-row > .grid{ grid-template-columns: 1fr auto auto; align-items: center; }

@media (max-width: 640px){
  .task-row > .grid{ grid-template-columns: 1fr !important; }
  .task-row > .grid > :nth-child(2){ order: 2; justify-self: end; }
  .task-row > .grid > :nth-child(3){ order: 3; justify-self: end; }
}

/* --- Styles2 r57.23.135: grouped layout unified with ungrouped --- */
/* nothing extra; relies on .task-row > .grid rules from previous patch */


/* === TaskTime V29 Sty4 fixes r57.23.137 === */

/* Project chip should hug content, not full width */
.task-row .project-label{
  display: inline-flex !important;
  align-self: flex-start;
  width: auto !important;
  max-width: max-content;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  background: #f2f2f2 !important;
  line-height: 1.1 !important;
}
html.dark .task-row .project-label{
  background: rgba(255,255,255,.08) !important;
}

/* Grouped view: subtle separators between rows */
.group-header + .p-2 .task-row{
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
  padding-bottom: .5rem;
}
html.dark .group-header + .p-2 .task-row{
  border-color: rgba(255,255,255,.1);
}
.group-header + .p-2 .task-row:last-child{
  border-bottom: none;
}

/* Light theme: visible checkmark color for native checkboxes */
html:not(.dark) input[type="checkbox"]:checked{
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
/* Ensure security modal checkboxes always clickable and visible */
.ttsec-check{
  position: relative;
  z-index: 1;
}


/* === Sty4 Part 2 === */
/* 1) Cookie bar: remove white frame around bottom banner */
.fixed.bottom-0.inset-x-0 .tt-modal{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Project chip positioned above task name */
.task-row .flex-1.min-w-0{
  flex-wrap: wrap;
  align-items: flex-start;
}
.task-row .project-label{
  flex-basis: 100%;
  margin-bottom: 4px !important;
}


/* === Sty4 Part 3 (r57.23.139) === */

/* (2) Reports select widening fallback */
.tt-modal select[min-w] { min-width: 260px !important; } /* safety no-op selector */

/* (3) Chip above task name: force wrap + full-line chip */
.task-row .flex.items-center.gap-2.flex-1.min-w-0{
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.task-row .project-label{
  display: inline-block !important;
  flex-basis: 100% !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-bottom: 4px !important;
}

/* (4) Ensure totals & active timers repaint smoothly */
@keyframes _ttTick { from{opacity:.9999;} to{opacity:1;} }
.tt-page[data-now]{ animation: _ttTick 1s linear infinite; }


/* === TT Style31: project label chip above name (ungrouped) === */
.task-row .flex.items-center.gap-2.flex-1.min-w-0{ flex-wrap: wrap; align-items: flex-start; }
.task-row .tt-name-stack{ display:flex; flex-direction:column; width:100%; }
.task-row .project-label{
  display:inline-block; flex-basis:100%; width:auto; max-width:fit-content;
  margin-bottom:4px; margin-top:2px;
  padding:2px 8px; border-radius:6px;
  background:#f2f2f2;
}
.dark .task-row .project-label{ background:#1f2937; color:#e5e7eb; }


/* === TT: project label chip above name (ungrouped) === */
.task-row .tt-name-stack{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.task-row .tt-name-stack .project-label{
  display:inline-block; align-self:flex-start;
  margin:2px 0 4px 0; padding:2px 8px; border-radius:6px;
  background:#f2f2f2;
}
.dark .task-row .tt-name-stack .project-label{ background:#1f2937; color:#e5e7eb; }


/* === TT: project label full-width above task name (grouped & ungrouped) === */
.task-row .tt-name-stack{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.task-row .tt-name-stack .project-label{
  display:block; width:100%;
  margin:2px 0 4px 0; padding:2px 8px; border-radius:6px;
  background:#f2f2f2;
}
.dark .task-row .tt-name-stack .project-label{ background:#1f2937; color:#e5e7eb; }

/* r15c: pin star position overrides */
.top-1\.5{top:-0.21rem!important}
.right-1\.5{right:0.075rem!important}