/* ==========================================================
   Detail Tracking (theme side) — the on/off toggle and the
   "still running" note. The actual tracker (pages, sections, timers)
   renders inline via the WP Time Tracker plugin's own admin.css —
   no popup, no separate stylesheet needed for that part.
   ========================================================== */

/* Top task fields (Project, Task, Assigned To, Date, Created By,
   % Completed) — three columns, label and value sitting side by side
   inline, exactly as originally designed. */
.dt-fields-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 20px;
	margin-bottom: 16px;
}
.dt-field {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
}
.dt-field .data-text {
	width: 100% !important;
}
.dt-field .data-title {
	display: inline !important;
	width: auto !important;
	background: none !important;
	padding: 0 !important;
	white-space: nowrap;
	font-weight: 600;
}
@media (max-width: 900px) {
	.dt-fields-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.dt-fields-grid { grid-template-columns: 1fr; }
}

/* One shared width for the whole page column — top fields, Detail
   Tracking, Details, action buttons, and Submit Log all line up
   consistently instead of each section having its own separate width. */
.dt-page-wrap { width:85vw; max-width:85vw; margin-left: calc(50% - 42.5vw); }

.dt-box { background:#fafafa; border:1px solid #ddd; border-radius:6px; font-family:Arial,Helvetica,sans-serif; }

/* ---- Details (task description) field — label above the text box,
   full width to match the Detail Tracking / time-tracking table below
   it. Scoped to the .data-title/.data-text that sit directly inside
   .dt-page-wrap (the Details field only) — the six top fields
   (Project, Task, Assigned To, etc.) live inside .dt-fields-grid >
   .dt-field instead, so this does not touch them. ---- */
.dt-page-wrap > .data-title {
	display: block;
	font-weight: 600;
	margin: 16px 0 6px;
}
.dt-page-wrap > .data-text {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px 16px;
	line-height: 1.5;
	margin-top:0;
}

.dt-head { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; background:#f0f0f0; border-bottom:1px solid #ddd; border-radius:6px 6px 0 0; }
.dt-title { font-weight:bold; font-size:13.5px; color:#7a3d10; letter-spacing:0.2px; }

.dt-toggle { width:36px; height:19px; background:#ccc; border-radius:99px; position:relative; display:inline-block; cursor:pointer; transition:background .15s; }
.dt-toggle.on { background:#d9601f; }
.dt-toggle .dt-knob { width:14px; height:14px; background:#fff; border-radius:50%; position:absolute; top:2.5px; left:2.5px; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:left .15s; }
.dt-toggle.on .dt-knob { left:19px; }

/* Non-admins see the current state but can't interact with it */
.dt-toggle-locked { cursor:not-allowed; opacity:0.55; }
.dt-toggle-locked:hover { opacity:0.55; }

.dt-off-msg { padding:12px 16px; font-size:11.5px; color:#888; border-radius:0 0 6px 6px; }

.dt-on-body { padding:14px 16px; display:flex; flex-direction:column; gap:10px; background:#fff7ef; border-radius:0 0 6px 6px; }

/* ---- Per-user totals on the Task Log report ---- */
.task_log_totals {
	background:#fdeee2; border:1px solid #e8c9a0; border-radius:5px;
	padding:10px 14px; margin-bottom:14px; font-size:13px; color:#7a3d10;
}

/* ---- Submit Log row — Start/Reset buttons, Time/Progress, and the
   description box. The theme's own stylesheet gives .right-section a
   flat 500px and (going by the trailing <div class="clear">) almost
   certainly floats these three sections rather than using flexbox —
   which is exactly why a plain width change alone doesn't work:
   floated columns each size to their own content, they don't
   automatically share whatever space is left over the way this needs.
   Converting the row to flex here instead, so .left-section and
   .middle-section keep their natural width and .right-section
   genuinely grows to fill whatever's left — the same responsive
   behavior already used elsewhere on this page. Overridden here
   rather than in the theme's own CSS, which this file doesn't
   otherwise touch. ---- */
.task_log {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
}
.task_log .left-section,
.task_log .middle-section {
	float: none !important;
	flex: 0 0 auto !important;
}
.task_log .right-section {
	float: none !important;
	flex: 1 1 260px !important;
	width: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.task_log .right-section .form-textarea {
	width: 100% !important;
	box-sizing: border-box !important;
}
.task_log .clear {
	display: none !important;
}