/* File: src/styles/styles.css */


:root {
  --app-brightness: 1; /* default */
}

/* apply to whole app; swap 'body' for your app container if you prefer */
body {
  filter: brightness(var(--app-brightness));
  transition: filter 120ms ease;
}

/* (optional) quick styles for the control */
.brightness-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
}


.logo {
	height: 30px;
	}

.gdrive-container{
	border: solid 1px gray;
  	border-radius: 6px;
  	display: flex;
  	padding: 4px;
  	flex-direction: row;
  	align-items: center;
  	justify-content: space-between;
	}

.gdrive-container 
 .button {
	padding: 2px 3px;
	margin: 0px 3px;
	}

.gdrive-icons{
	height: 18px;
	margin: 0px 2px;
	}


.brightness-control .sun {
  font-size: 14px;
  line-height: 1;
  opacity: .8;
}

.brightness-control input[type="range"] {
  width: 120px;
  margin: 0 4px;
}

.brightness-control .val {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: .8;
  min-width: 36px;
  text-align: right;
}




/* ===== Reset / Base ===== */
html, body {
  margin: 0;
  Font-size: 15px;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #b7c2c6; /* your preference */
  color: #111827;
}

.version-banner {
	width: 100%;
	color: white;
	text-align: center;
	}

.version-banner.dev {
	background: #1d4ed8;
	}

.version-banner.live {
	background: green;
	}


/* Fixed column widths (tweak as you like) */
:root {
  --tr-time-w: 132px;   /* time input width */
  --tr-pill-w: 110px;   /* pill width next to time */
  --tr-right-w: 115px;  /* done + actions area */
  Background: white;
}


/* root & toolbar stretch full width */



.page-root {
  	height: 100vh;
  	display: flex;
  	flex-direction: column;
  	width: auto;
	}

.toolbar {
	width: auto;
	margin: 10px 10px 0px 10px;
	padding: 0px;
	overflow: hidden;
  border-radius: 10px;
	}


.split-pane {
	width: auto;
	overflow: clip;
	margin: 0px 10px 10px 10px;
  padding-top: 10px;
	}


.card { width: auto; }





/* ===== Headings ===== */
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }


.check-update-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.check-for-update {
  position: absolute;
  width: 130px;
  left: auto;
  right: auto;
  top: auto;
  bottom: 90px;
  pointer-events: auto;
}


/* ===== Buttons (base + variants) ===== */

button {
  padding: 0.5rem .75rem;
  margin-right: 0.02rem;
  margin-left: 0.02rem;
  background-color: #2563eb;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
button:hover { background-color: #1d4ed8; }

button:disabled,
button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Solid variants you already use */
button.secondary { background-color: #334155; }
button.secondary:hover { background-color: #1f2937; }
button.quiet { background-color: #eef2f7; color: #0f172a; border-color: #e2e8f0; }
button.quiet:hover { background-color: #e9eef6; }

/* High-contrast outline (readable even before hover) */
.btn-outline {
  background: #804dd1;
  color: #fff;
  border-color: #cbd5e1; /* slate-300 */
}
.btn-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8; /* slate-400 */
}

/* Pills you’re using for client badges */
.pill {
  display:inline-block;	
  Position: relative;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}





/* ======= Inputs / small bits ====== */
.input { border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; font-size:11px; background:#fff; }
.badge { background:#eef2ff; color:#3730a3; padding:4px 8px; border-radius:999px; font-size:11px; }




/* ===== Cards ===== */
.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 6px 14px -8px rgba(2, 6, 23, 0.2);
  padding: 1rem;
}
.card .card-day { 
	padding: 16px 10px; 
	margin-bottom: 24px; 
	background: #eee;
	box-shadow: 0 6px 34px -8px rgba(2, 6, 23, 0.2);
}



/* ===== Timeline container (scrolling region) ===== */
.scroll-container {
  height: calc( 100dvh - 130px );
  overflow-y: auto;
  padding: 10px 5px 10px 15px;
  background: transparent; /* container itself is not a card */
}

/* Small, invisible markers we observe */
.sentinel { height: 1px; width: 100%; }

/* Loading banners while adding older/newer days */
.loading-banner {
  position: sticky;
  top: 0;
  background: rgba(248,250,252,.9);
  color: #64748b;
  text-align: center;
  font-size: 11px;
  padding: 6px 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed #e5e7eb;
  backdrop-filter: blur(4px);
}

/* ===== Tasks ===== */
.task { margin: 0.3rem 0; padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; background: #f3f4f6; }
.task.completed { text-decoration: line-through; background: #d1fae5; }

/* ===== Availability line ===== */
.availability { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }

/* ===== Simple reveal animation helpers (optional) ===== */
.day.hidden { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.4s ease; }
.day.revealed { opacity: 1; max-height: 500px; transition: opacity 0.4s ease, max-height 0.4s ease; }

/* ===== Layout utilities ===== */
.row { display:flex; align-items:center; gap:6px; }
.row.between { justify-content: space-between; }
.mb-8 { margin-bottom: 16px; }
.stack-4 > * + * { margin-top: 8px; }
.h2 { font-size: 20px; font-weight: 600; color:#0f172a; }
.text-muted { color:#64748b; }



/* ===== Past fading (two levels) ===== */
.faded { opacity: 1; }          /* last 7 days */
.faded-strong { opacity: 1; }   /* older than last week */


.card.card-day.faded-strong h2,
.card.card-day.faded h2 {
  opacity: .33;
  font-style: italic;
} 

.card.card-day.faded-strong .mmmdd-header,
.card.card-day.faded .mmmdd-header {
  margin-left: -3px;
} 



/* ===== Thin scrollbar ===== */
.thin-scrollbar::-webkit-scrollbar { width: 8px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: rgba(100,116,139,.5); border-radius: 999px; }
/* FIXED: needed a second color & proper rgba */
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.5) transparent; }



/* ===== Drawer (footer) for New Project ===== */
.drawer {
  position: fixed; left:0; right:0; bottom:0;
  max-height: 70vh; background:#fff; border-top:1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px; z-index: 60;
}
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.drawer-body { overflow-y:auto; padding:16px; max-height: calc(70vh - 56px); }




/* ===== Modal for Snapshot ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(2,6,23,.45); display:flex; align-items:center; justify-content:center; z-index:70; }
.modal { background:#fff; border:1px solid #e5e7eb; border-radius:18px;  max-height:80vh; overflow:auto; box-shadow:0 6px 24px -8px rgba(2,6,23,.08); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; }
.modal-body { padding:16px; }

/* ===== Tooltip + mobile project drawer (TaskRow) ===== */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:125%; white-space:nowrap; background:#111827; color:#fff;
  font-size:11px; padding:4px 8px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.tooltip-wrap:hover .tooltip { opacity: 1; }

.project-inline { background:#f8fafc; border:1px dashed #e5e7eb; border-radius:11px; padding:8px 10px; margin-top:8px; }
.hide-link { font-size:11px; color:#2563eb; cursor:pointer; margin-left:8px; }


/* --- Available work block bar --- */
.avail-bar {
  padding: 8px 11px;
  border: 1px dotted #16a34a;
  background: rgba(22,163,74,0.08);
  color: #065f46;
  border-radius: 10px;
  font-size: 11px;
}

/* Stronger fade for >1 week past */
.faded-strong { opacity: 1; }

.card.card-day.faded h2 {
  opacity: .33;
  font-style: italic;
} 

.card.card-day.faded .mmmdd-header {
  margin-left: -3px;
} 


/* Loading banners */
.loading-banner {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  padding: 4px 0 8px;
}

/* Modal (centered) + backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal {
  width: min(720px, 95vw);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(2,6,23,.18);
  padding: 16px 18px;
}

/* Inputs & table niceties already exist; add a light table */
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td {
  border: 1px solid #e5e7eb; padding: 8px 10px; font-size: 11px;
}
.simple-table th { background: #f8fafc; text-align: left; }

/* --- small UI helpers for TaskRow --- */

.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 11px; border-radius: 999px;
  background:#e8efff; color:#1e40af; font-weight:600; font-size:11px;
  border:1px solid #cfe0ff;
}
.pill-personal { background:#f5eaff; color:#6b21a8; border-color:#ead8ff; }

.project-inline { display:inline-flex; align-items:center; gap:6px; color:#334155; }
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#e2e8f0; color:#111; font-style:italic; font-weight:700; font-size:11px;
  cursor:default;
}

/* mini popover used by +client */
.popover {
  position: absolute;
  z-index: 30;
  margin-top: 8px;
  padding: 11px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  box-shadow: 0 10px 30px rgba(2,6,23,.1);
}

/* --- Task row layout (no bullets) --- */
.task-row {
  display: grid;
  grid-template-columns: 20px 120px 110px 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  padding: 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.task-row.completed .title-input { text-decoration: line-through; color: #6b7280; }

.time-input {
	width: 85px; 
	border: 1px solid #e5e7eb; 
	border-radius: 10px 10px 10px 10px; 
	font-size: 11px;
	padding: 8px 8px; 
	}

.title-input { 
	border: 1px solid #e5e7eb; 
	border-radius: 10px; 
	font-size: 14px;
	padding: 8px 8px; 
	}

/* pills */
.pill {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  border: 1px solid #e5e7eb;
}
.pill-personal { background: #f1e9ff; color:#5b21b6; border-color:#e9d5ff; }
.pill-client { background: #e9f1ff; color:#1d4ed8; }
.pill-client:hover { background:#dbeafe; }

/* project label + info */
.project-label { color:#475569; font-size:9px; }
.info-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px; margin-left: 6px;
  border-radius: 999px; background:#e5e7eb; color:#111; font-style: italic;
}


.input.choose-proj {
	margin-top: 0px!important;
	max-width: 100px;
	}


/* actions */
.actions { display:flex; gap:8px; justify-content:flex-end; }
.btn-danger { 
	background:#ef4444; 
	color:#fff; 
	width: 22px;
	max-width: 22px;
	min-width: 22px;
	border-radius: 4px!important;
	}
.btn-danger:hover { background:#dc2626; }

/* free time bar + deadline */
.avail-bar {
  background: #ecfdf5;
  border: 2px dotted #10b981;
  color: #065f46;
  padding: 10px 11px;
  border-radius: 11px;
}
.deadline-bar {
  background: #fff1f2;
  border: 2px dotted #ef4444;
  color: #991b1b;
  padding: 10px 11px;
  border-radius: 11px;
}

/* Drawer (bottom sheet) */
.drawer { position: fixed; left:0; right:0; bottom:0; top:0;
  background: rgba(2,6,23,.4); display:flex; align-items:flex-end; z-index: 50; }
.drawer-inner { background:#fff; width:100%; max-height:80vh; border-radius: 16px 16px 0 0; padding: 16px; overflow:auto; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.drawer h3 { margin:0; }

/* small utilities used above */
.row { display:flex; align-items:center; }
.row.wrap { flex-wrap: wrap; }
.row.gap > * + * { margin-left: 8px; }
.row.end { justify-content:flex-end; }
.ml-auto { margin-left:auto; }
.space-y-4 > * + * { margin-top: 1rem; }
.input.small { width: 70px; }
.flex1 { flex:1 1 0; } .flex2 { flex:2 1 0; } .flex3 { flex:3 1 0; }

/* =========================
   PATCH (append at end only)
   ========================= */

/* 1) Make time boxes a bit smaller (keeps your current look) */
.time-input {
  width: 150px;           /* was 180px */
  padding-right: 6px;     /* reduce extra empty space on right */
}
.title-input {
  min-width: 160px;       /* gives a little flex room without overflowing */
}

/* 2) Kill bullets everywhere we render task lists (sometimes browser defaults sneak in) */
ul.stack-4,
ul.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3) Inline client picker (for the “+ client” pill on ad-hoc work rows) */
.client-picker {
  position: absolute;
  left: 12px;
  right: 12px;
  top: -255px;
  height: 260px;
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  padding: 12px;
}
.client-picker .picker-head {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 8px;
  color: #0f172a;
}
.client-picker .picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.client-picker .search {
  width: 280px;
}

.client-picker .stack-4 {
  width: 280px;
  background:rgb(255, 255, 255);
}

.pill-client,
.pill.pill-add { cursor: pointer; color: white; background-color: #1d4ed8;}

.pill-add.pill-add-work { cursor: pointer; color: #1d4ed8; background-color: #1d4ed8;}
.pill-add.pill-add-work:hover { cursor: pointer; color: #1d4ed8; background-color: #dbeafe;}

.pill-add.pill-add-meeting { cursor: pointer; color: white; background-color: #1d4ed8;}
.pill-add.pill-add-meeting:hover { cursor: pointer; color: white; background-color: #1d4ed8;}

/* 4) New Project drawer layout helpers (clean grid; keeps your drawer visuals) */
.np-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px; /* client chooser | project | hard date */
  gap: 10px;
  align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr 220px 80px 100px;  /* title | soft date | hours | actions */
  gap: 10px;
  align-items: center;
}
.np-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* 5) Availability + deadline bars (make sure our styles win if duplicates exist) */
.avail-bar {
  background: #ecfdf5 ;
  border: 2px dotted #10b981 ;
  color: #065f46 ;
  padding: 10px 11px ;
  border-radius: 11px ;
}
.deadline-bar {
  background: #fff1f2 ;
  border: 2px dotted #ef4444 ;
  color: #991b1b ;
  padding: 10px 11px ;
  border-radius: 11px ;
}

/* ==== TASK ROW LAYOUT & INPUTS (override) ==== */
.task-row {
  display: grid;
  grid-template-columns: 120px minmax(120px, auto) 1fr max-content max-content; /* time | pill | title | resched | delete */
  gap: 10px;
  align-items: center;
}

/* Make sure both class spellings are covered */
.input-time, .time-input {
  width: 80px;
  border: 1px solid #e5e7eb;
  border-radius: 8px 0px 0px 8px; 
  font-size: 11px;
  padding: 8px 6px;
}

/* Keep buttons from stretching weirdly */
.btn { white-space: nowrap; }

/* ==== BACKDROP & DRAWER (override any earlier rules) ==== */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
  z-index: 50;
}

/* The actual white sheet panel */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 70vh;
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  z-index: 60;
}

/* Keep your NP grid helpers */
.np-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 10px; align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr 220px 80px 100px;
  gap: 10px; align-items: center;
}

/* ==== Bottom sheet & content ==== */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 360px;                    /* target height */
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  z-index: 60;
  overflow: hidden; /* keep children contained */
}
.drawer-content {
  height: 100%;
  max-width: 920px;                 /* keep UI contained on narrow windows */
  margin: 0 auto;
  padding: 14px 16px;
  overflow-y: auto;
  box-sizing: border-box;
}
.drawer-titlebar { padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }

/* ==== Responsive project grid ==== */
.np-grid {
  display: grid;
  grid-template-columns: minmax(180px,220px) 1fr minmax(180px,220px);
  gap: 10px; align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: 1fr minmax(160px,220px) 84px 100px;
  gap: 10px; align-items: center;
}
@media (max-width: 880px) {
  .np-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .np-row { grid-template-columns: 1fr 1fr; }
  .np-row > :nth-child(3), .np-row > :nth-child(4) { justify-self: end; }
}

/* Prevent horizontal bleed */
.drawer-content * { max-width: 100%; box-sizing: border-box; }


/* === New Project bottom-sheet: keep timeline scrollable underneath === */

/* 1) Make the scrim purely visual so wheel/touch scroll passes through */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
            /* <-- lets the page scroll under the scrim */
  z-index: 50;
}

/* 2) Bottom sheet panel (pinned to bottom, contained, mobile-first) */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff ;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -12px 30px -12px rgba(2,6,23,.25);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  max-height: 60vh;               /* ~360–400px on most laptops */
  overflow-y: auto;               /* scroll within the sheet if content is tall */
  z-index: 60;
  padding: 14px 16px;
}

/* 3) Contain the grid and make it responsive */
.np-grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0,1fr) minmax(0, 220px);
  gap: 10px;
  align-items: center;
}
.np-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px 90px 110px;  /* title | date | hours | actions */
  gap: 10px; align-items: center;
}
@media (max-width: 820px) {
  .np-grid { grid-template-columns: 1fr; }
  .np-row  { grid-template-columns: 1fr; }
}

/* 4) Prevent any form/input from overflowing horizontally */
.drawer .input, .drawer select, .drawer input[type="date"], .drawer input[type="number"] {
  min-width: 0; width: 100%;
}

/* === clean tabs for PersonalScheduleModal (not buttons) === */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab {
  appearance: none; border: 1px solid #e5e7eb; background:#fff;
  border-radius: 10px; padding: 8px 12px; font-size: 11px;
  color:#0f172a; cursor:pointer;
}
.tab:hover { background:#f8fafc; }
.tab-active {
  background:#2563eb; color:#fff; border-color:#2563eb;
}

/* Softer action buttons */
.btn-resched {
  background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0;
}
.btn-resched:hover { background: #e2e8f0; }

.btn-danger {
  background: #fee2e2; padding-bottom: 8px; color: #991b1b; border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fecaca; }

.btn-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; line-height: 1; font-size: 16px;
}

/* Completed state visuals */
.task-row.completed .title-input { text-decoration: line-through; color: #6b7280; background: #ddd; border: 1px solid #CECED0 }
.task-row.completed .btn-resched,
.task-row.completed .btn-danger { opacity: 0.5; pointer-events: none; }
.task-row.completed .input.time-input { background: #ddd; border: 1px solid #aaa }
.task-row.completed .pill { border: 1px solid #aaa }
.task-row.completed { background: #ddd; border: 1px solid #aaa }

/* Deadline row visuals */
.task-row.deadline-row {
  background: #fff1f2;
  border: 2px dotted #ef4444;
  color: #991b1b;
}
.deadline-time-cell { opacity: 0.65; }

/* Purple variant for personal actions */
.btn-personal {
  background: #804dd1; color: #fff; border: 1px solid transparent;
}
.btn-personal:hover { background: #48129c; }



.card { background: #ddd; }

.timeline-card { background: #bbb; }



/* 

========================

Halfway Point

========================

*/



/* === Task row: add separate client + project columns === */
.task-row {
  display: grid;
  grid-template-columns:
    120px                  /* time or red deadline pill */
    minmax(110px, auto)    /* client pill column (or "Personal") */
    minmax(80px, auto)    /* project pill column */
    1fr                    /* title */
    max-content            /* action 1 */
    max-content;           /* action 2 */
  gap: 10px;
  align-items: center;
}

/* Client pill styles */
.pill-client {
  background: #eef2ff;     /* soft indigo */
  color: #3730a3;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
}
.pill-client-outline {
  background: #fff;
  color: #334155;
  border: 1px dashed #94a3b8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
}

/* Project pill (if you don’t already have one) */
.pill-project {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #cffafe;
  border-radius: 999px;
  padding: 6px 6px;
  font-size: 11px;
  text-align: center;
  width: 70px;
}

/* Hide a control but keep it programmatically clickable */
.visually-hidden {
  position: absolute ;
  opacity: 0 ;
  width: 0 ;
  height: 0 ;
  pointer-events: none ;
}

/* (Keep the calmer buttons + completed/deadline styles you already added) */


/* =========================
   APPEND-ONLY PATCH (safe)
   ========================= */

/* New pill for Events (distinct from Personal) */
.pill-event {
  background: #804dd1;      /* amber-100 */
  color: #92400e;           /* amber-800 */
  border: 1px solid #fde68a;/* amber-300 */
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
}

.pill .pill-personal .pill-personal-event {
	text-align: left;
}


/* Optional: Milestone row background (similar to deadline but amber) */
.task-row.milestone-row {
  background: #fff7ed;        /* amber-50/100 */
  border: 2px dotted #f59e0b; /* amber-500 */
  color: #92400e;             /* amber-800 */
}

/* Project spacer so the title column doesn’t “jump” when no project pill */
.project-spacer {
  display: inline-block;
  width: 70px;                /* matches .pill-project width */
}

/* Keep buttons from stretching oddly in grid cells */
.btn { white-space: nowrap; }

/* Slightly softer, neutral reschedule styling (in case not defined above) */
.btn-resched {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.btn-resched:hover { background: #e2e8f0; }

/* Icon-sized danger button (matches the TaskRow delete “×” use) */
.btn-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1; font-size: 16px;
}

/* Tabs for PersonalScheduleModal (button-free look) */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab {
  appearance: none;
  border: 1px solid #e5e7eb;
  background:#fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color:#0f172a; cursor:pointer;
}
.tab:hover { background:#f8fafc; }
.tab-active { background:#2563eb; color:#fff; border-color:#2563eb; }

/* Hidden input (used for native date-picker trigger on deadlines/milestones) */
.visually-hidden {
  position: absolute ;
  opacity: 0 ;
  width: 0 ;
  height: 0 ;
  pointer-events: none ;
}

/* Base tier */
.avail-bar.base { background: #eef7ff; }

/* Extended: 10pm–12am + 12am–1am */
.avail-bar.extended { background: #f5f0ff; }

/* Emergency: 1am–5am */
.avail-bar.emergency { background: #fff0f0; border: 1px dashed #e11; }


/* === Tiered time blocks (visuals) ======================================= */
/* Base (green) already looks right for you; keep it roomy. */
.avail-bar.base {
  /* keep your existing green styles; override minimal bits: */
  opacity: 1;
}

/* Extended (orange theme, ~66% opacity) — slimmer */
.avail-bar.extended {
  background: #EFE7DC;   /* very light orange fill */
  border: 1px dashed rgba(112, 71, 0, 0.66);
  color: #704700;                         /* muted orange-brown text */
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;                          /* requested overall ~33% */
}

/* Emergency (orange theme, ~33% opacity) — slim but a bit louder */
.avail-bar.emergency {
  background: #efe0dc;
  border: 1px dashed rgba(112, 71, 0, 0.33);
  color: #b87e6c;
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;                          /* requested overall ~66% */
}

/* If you need even tighter rows on non-base tiers, you can also shrink font: */
.avail-bar.extended, .avail-bar.emergency {
  font-size: 10px;                        /* smaller than base block text */
  line-height: 1;
}

.avail-bar {   
  line-height: 2;
}

/* Meeting & Event pills */
.pill.solid { color: #fff; }
.pill-meeting { background:#0f2a5f;}         /* navy */
.pill-event { background:#804dd1; }      /* purple */

/* Red outline when a row overlaps something else */
.task-row.overlap {
  box-shadow: 0 0 0 2px rgba(220,38,38,0.7) inset; /* red */
}

/* Final deadline badge (time field replacement) */
.pill-deadline {
  background: rgba(220,38,38,0.08);
  color: #7f1d1d;
  width: 140px;
  border: 1px dashed rgba(220,38,38,0.6);
}

/* make personal (non-event) readable */
.pill.pill-personal { color:#5b21b6; background:#ede9fe; border-color:#ddd6fe; }

/* meeting pill stays navy/white; event stays purple/white */
.pill.solid { color:#fff; }
.pill-meeting { background:#1d4ed8 ; }
.pill-event { background:#804dd1 ; }

/* overlap outline */
.task-row.overlap { box-shadow: 0 0 0 2px rgba(220,38,38,0.7) inset; }

/* inline client picker (small popover) */
.client-popover{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 8px);
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px;
}
.client-popover .picker-head{ font-weight:700; }
.client-popover .picker-actions{ gap:8px; align-items:center; margin-top:6px; }
.client-popover .w-100{ width:100%; }

/* compact client picker */
.client-popover{
  position:absolute;
  left:16px; right:auto; top:calc(100% + 8px);
  width:min(360px, 90vw);
  z-index:40; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); padding:12px;
}
.client-popover .picker-head{ font-weight:700; }
.client-popover .picker-actions{ gap:8px; align-items:center; margin-top:6px; }
.client-popover .btn{ width:100%; text-align:left; } /* list buttons fill popover width */

/* pills */
.pill.pill-personal{ color:#5b21b6; background:#ede9fe; border-color:#ddd6fe; }
.pill.solid{ color:#fff; }
.pill-meeting{ background:#0f2a5f ; }
.pill-event{ background:#804dd1 ; }

/* milestone look (shares red outline family but separate label) */
.milestone-row{ border-color:#f9caca; }
.pill-milestone{
  background:#fde2e2; color:#7f1d1d; border:1px dashed #ef4444;
}

.pill-add.pill-add-work { font-size: 11px; cursor: pointer; color: #3730a3; background-color: #eef2ff;}
.pill-add.pill-add-work:hover { cursor: pointer; color: #3730a3; background-color: #eef2ff;}


.pill-add.pill-add-meeting { border-radius: 0; font-size: 11px; cursor: pointer; color: white; background-color: #1d4ed8;}
.pill-add.pill-add-meeting:hover { cursor: pointer; color: white; background-color: #1d4ed8;}

.pill-meeting { font-size: 11px; cursor: auto; color: white; background-color: #1d4ed8; }

.pill.pill-personal.pill-personal-event {font-size: 11px; color: white; background-color: #7F4ED1; border:1px solid #7F4ED1; border-radius: 0;}

/* ==== Responsive title field stretch (append-only) ==== */

/* Make the grid’s 4th column (title) elastic and guarantee it can shrink */
.task-row {
  grid-template-columns:
    120px                  /* time or deadline pill */
    minmax(110px, auto)    /* client/personal pill */
    minmax(70px, auto)     /* project pill (or spacer) */
    minmax(auto, 1fr)     /* TITLE ← stretches/shrinks */
    max-content            /* Done + actions (column 1) */
    max-content;           /* extra actions (column 2, if used) */
}

/* Ensure the input actually fills its grid cell */
.title-input {
  width: 100%;
  min-width: 0;            /* allow shrinking inside grid */
}

/* Keep the Done label compact so it doesn’t push the title too early */
.actions .done-wrap {
  white-space: nowrap;
}



/* ===== TaskRow three-column layout ===== */
.task-row.threecols {
  display: flex ;           /* override older grid if present */
  align-items: center;
  gap: 5px;
  padding-left: 0px;
  padding-right: 0px;
  width: auto;
  position: relative;
}


.pill.pill-milestone,
.pill-deadline {width:108px;}

.pill.pill-milestone {background-color:#e86c00; color:white;}
.pill-deadline {background-color:#cc0000; color:white;}

.task-row .row-left {
  display: flex;
  position: relative;
  gap: 5px;
  width: 146px;
}

.task-row .time-input { width: var(--tr-time-w); min-width: var(--tr-time-w); }
.task-row .pill { min-width: var(--tr-pill-w); justify-content: center; }

/* Middle flex column: title grows; project mark sticks to the right */
.task-row .row-mid {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}

.task-row .title-input {
  flex: 1 1 auto;
  min-width: 0;    /* allow shrink within flex */
  width: 100%;
}

/* Project "i" badge lives on the right inside the middle column */
.project-mark {
  display: flex;
  Background-color: white;
  outline: 1px solid #e2e8f0;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  font-size: 9px;
  border-radius: 6px;
  padding: 0px 2px 03px 2px;
  Line-height: 8px;
  position: relative;
}
.project-mark:hover {
  color: white;
  background-color: #e2e8f0;
  outline: 1px solid #e2e8f0;
}


.pm-label { color: #475569; }
.pm-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 999px;
  outline: 1px solid #fff;
  background: #e2e8f0; color: #111827; font-style: italic; font-weight: 600; font-size: 9px;
}

/* Right column fixed */
.task-row .row-right {
  display: flex;
  align-items: center;
  justify-content:center;
  gap: 6px;
  width: 30px;
}

/* Right column fixed */
.marker-lane .task-row .row-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: auto;
}

.task-row .done-wrap { 
	display: flex; 
	flex-direction: column;
	align-items: center; 
	gap: 0px; 
	white-space: nowrap; 
	font-size: 9px;
	line-height: 8px;
	}

/* Hide the inline date input; open via button */
.hide-date-input {
  position: absolute;
  opacity: 0;

  width: 0; height: 0;
}


/* Pill variants (keeps your existing theme, adds event) */
.pill-personal-event {height: 12px; width: 80px; min-width: 80px; max-width: 80px; border-radius: 99px; background: #6c2bd9; color: #fff; } /* deep purple */
.pill-spacer { visibility: hidden; }

.pill.pill-personal { width: 100px; min-width: 100px; max-width: 100px; }

/* +client pill color distinctions (work vs meeting) */
.pill-add.pill-work { 
	color: #0f172a; 
	background: #e2e8f0; 
	width: 125px;
	font-weight: 400;
	margin-bottom: 0px;
	}     

 /* light #1d4ed8-like work look */

.pill-add.pill-meeting { 
	color: #fff; 
	background: #1d4ed8; 
	width: 125px;  
	}     
	 /* navy for meetings */

/* Keep overlap outline you already use */
.task-row.overlap {
  outline: 2px solid rgba(220, 38, 38, 0.7);
}

.pill {width: 120px;}
.pill.pill-personal.pill-personal-event {min-width: 100px; max-width: 100px; width: 100px;}


.btn.btn-resched{ width: 100%; font-size: 9px; margin-top: 0px; padding: 8px 0px; margin-bottom: 0px;}

.task-row {padding-top: 4px; padding-bottom: 4px; }

.btn.btn-danger.btn-icon {margin-bottom: 0px; padding-bottom: 8px;}
 
/* ===== DnD slot preview (append-only) =============================== */
.task-wrap {
  position: relative;
  transition: margin .12s ease;
}

/* When the cursor is in the TOP half of a row, show a slot ABOVE it */
.task-wrap.slot-before {
  margin-top: 60px;          /* space above this row */
}

/* When the cursor is in the BOTTOM half of a row, show a slot BELOW it */
.task-wrap.slot-after {
  margin-bottom: 60px;       /* space below this row */
}

/* Optional: subtle dashed separator line inside the slot (purely visual) */
.task-wrap.slot-before::before,
.task-wrap.slot-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  border-top: 2px dashed rgba(99,102,241,.25); /* indigo-ish, low alpha */

}
.task-wrap.slot-before::before { top: -12px; }
.task-wrap.slot-after::after   { bottom: -12px; }

/* === Locked pill icon (append-only) ================================= */
.pill-lock {
  height: 14px;           /* ~8–10px per your spec */
  width: auto;
  font-size: 10.5px;
  margin-left: 0px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.95;
  position: absolute;
  right: 5px;

}

/* Ensure the affected pills and the +client button align icon & text cleanly */
.pill-client.pill-meeting,
.pill-personal.pill-personal-event,
.pill.pill-add.pill-meeting {
  display: inline-flex;
  font-size: 10.5px;
  text-align: left;
  justify-content: left;
  align-items: left;
  width: 100px;
  min-width: 100px;
  max-width: 10px;
  gap: 9px;               /* keeps icon nicely spaced */
}

.pill.pill-add.pill-meeting {
  	width: 125px;
	min-width: 125px;
	max-width: 125px;
	border-radius: 2px;
	height: auto;
	color: white;
	font-weight: 300;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 11px;
  border: 1px solid #1d4ed8;
	position: relative;
	text-align: left;
	justify-content: left;
}


.pill-client.pill-meeting {
	border-radius: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 10px;
	text-align: left;
	justify-content: left;
}


.pill-personal,
.pill-event,
.pill-client,
.pill-meeting,
.pill-work {
	width: 88px!important;
	min-width: 88px!important;
	max-width: 88px!important;
	margin-right: 0px!important;
	padding-right: 6px!important;
	padding-left: 6px!important;
	font-size: 10px!important;
}

.pill-add.pill-meeting,
.pill-add.pill-work {
	width: 100px!important;
	min-width: 100px!important;
	max-width: 100px!important;
	margin-right: 0px!important;
	padding-right: 6px!important;
	padding-left: 6px!important;
	font-size: 10px!important;
}

.pill-personal-event {
  height: auto!important;
  border-radius: 2px!important;
}



/* ===== Milestone row styling (append-only) ========================== */


.marker-lane {
  margin-top: 6px;
  padding: .5px 5px!important;
  border-radius: 15px;
  background: rgb(255, 255, 255);
  box-shadow: 0 0px 15px -2px rgba(255, 0, 0, .5);
}

/* Distinguish from .deadline-row (which you already use for final) */
.task-row.threecols.milestone-row {
  background: #ffe29e;   /* soft amber wash */
  border: 2px dotted orange;
  padding: 5px 4px;
  margin: 0px!important;
  width: auto;
  border-radius: 90px;
  --tr-time-w: 100px!important;
  --tr-pill-w: 120px!important;
  --tr-right-w: 104px!important;
}

.marker-lane .input.title-input {
  padding: 5px 8px;
  color: black;
  opacity: .75;
}

.task-row.threecols.deadline-row {
  background: #ffdbdb;   /* soft amber wash */
  border: 2px solid red;
  border-radius: 90px;
  padding: 5px 4px;
  margin: 0px!important;
  width: auto;
  --tr-time-w: 100px!important;
  --tr-pill-w: 120px!important;
  --tr-right-w: 104px!important;
}
 
.task-row.threecols.deadline-row
 .row-left,
.task-row.threecols.milestone-row
 .row-left {
 	width: 105px!important;
	}

.task-row.threecols.deadline-row
 .input.title-input.deadline,
.task-row.threecols.milestone-row
 .input.title-input.deadline {
	color: rgba(186, 68, 0, .9);
	border: 2px solid rgba(186, 68, 0, 0.05)!important; 
	background-color: rgba(186, 68, 0, 0.05)!important;
	}


.task-row.threecols.deadline-row
 .pill.pill-client.pill-work,
.task-row.threecols.milestone-row
 .pill.pill-client.pill-work {
	color: rgba(186, 68, 0, .9);
	border: 2px solid rgba(186, 68, 0, 0.1)!important; 
	background-color: rgba(186, 68, 0, 0.15)!important;
	}

/* Final deadline pill (replaces time input in that row) */
.pill-deadline {
  background: #ef4444;     /* red */
  color: #fff;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 6px 2px;
  font-weight: 700;
  font-size: 8px;
  max-Width: 105px!important;
  min-Width: 105px!important;
  Width: 105px!important;
  margin-right: 0px!important;
  text-align: center;
}

/* Optional: Milestone pill (for when we render milestone rows) */
.pill-milestone {
  background: #fffbeb;      /* amber-50 */
  color: #92400e;           /* amber-800 */
  border: 1px solid #fed7aa;/* amber-200 */
  border-radius: 999px;
  padding: 6px 2px;
  max-Width: 105px!important;
  min-Width: 105px!important;
  Width: 105px!important;
  margin-right: 0px!important;
  font-size: 8px;
  text-align: center;
}


.new-deadline { 
	margin-left: 0px!important; 
	text-align: right; 
	width: auto!important; 
	padding: 6px 6px!important; 
	border-radius: 100px; 
	border: 2px solid rgba(256, 256, 256, 1)!important; 
	background-color: rgba(256, 256, 256, 0.6)!important;
	}

/* ===== Overlap outline (append-only) =============================== */
.task-row.overlap {
  outline: 2px solid #ef4444;        /* red */
  outline-offset: 2px;
}

/* If a parent sets overflow hidden, this ensures the outline is visible */
.task-row.threecols {
  overflow: visible;
}


.modal-body li span + span {
  opacity: 0.9; /* the “ — done” tail */
}



/* --- Import/Export modal hard-centering + overlay z-index --- */
.backdrop {
  position: fixed ;
  inset: 0 ;
  z-index: 999 ;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;               /* above backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
         /* allow click-through except modal */
}

.modal-layer .modal {
  pointer-events: auto;
  max-height: 90vh;
  overflow: auto;
  width: min(1100px, calc(100vw - 64px)); /* respect your .xl sizing */
  margin: 0;
}



/* ===== DnD tween-row layout (overrides) ===== */
.card-day .task-wrap {      /* structural wrapper around each TaskRow */
  margin: 0 ;
  padding: 0 ;
}

.card-day .task-wrap {       /* remove legacy spacing; rows sit flush */
  margin-top: 5px ;
  margin-bottom: 5px ;
  position: relative;
  z-index: 1;               /* sits above tween rows */
}

.card-day .avail-bar {      /* availability bars also flush */
  margin-top: 5px ;
  margin-bottom: 5px ;
}



/* Label that appears when a task is dragged over the tween row */
.card-day .tween-row .tween-label {
  opacity: 0;
  transition: opacity 250ms ease;
  font-weight: 600;
  color: #475569;
}

/* Optional: subtle hover aid when using mouse (non-drag) */
@media (hover:hover) {
  .card-day .tween-row:hover .tween-label {
    opacity: 0.33;
  }
}

/* While dragging, make tween rows the “top” interactive surface. 
   We toggle this class from JS if you ever want to boost hit-testing,
   but it’s safe to leave as-is; z-index of rows is already correct. */
.card-day.dragging .tween-row {
  z-index: 2;
}

/* Overlap highlight (kept here so it can’t be overridden upstream) */
.card-day .task-row.overlap {
  outline: 2px solid #e11d48;     /* red */
  outline-offset: -2px;
  border-radius: 12px;
}

/* === DnD visual polish (append) === */
.task-wrap { margin-top: 0; margin-bottom: 0; } /* task rows themselves have no outside spacing */
.task-row { position: relative; z-index: 1; }
.task-row.is-dragging { opacity: 0.5; } /* ~65% transparent while dragging */

.drag-active .tween-row { z-index: 2; } /* tween targets float above rows while dragging */

.tween-row .tween-label {
  /* baseline styles are set inline; keep text unselectable just in case */
  user-select: none;
}

/* Ensure modals/drawers sit above the backdrop */
.modal-overlay, .overlay, .backdrop { z-index: 1000 ; }
.modal, .drawer, .project-modal, .modal-drawer, .new-project-drawer { z-index: 1001 ; }



/* ====== DnD: tween rows (invisible gap targets) ====== */
/* Parent hover target — controls expansion only */
.tween-row {
  position: relative;
  height: auto;                 /* collapsed by default */
  margin-top: -20px;         /* overlap above task by 20px */
  margin-bottom: -20px;      /* overlap below task by 20px */
  padding-top: 20px;         /* creates a 10px visible gap total when collapsed */
  padding-bottom: 20px;
  z-index: 0;                /* sits under tasks until a drag begins */
    transition: height 250ms ease;
}

/* During a drag, tween rows float above task rows so only THEY catch drops */
.scroll-container.drag-active .tween-row {
  z-index: 2;
}



/* Ensure task rows render above base content, under tween when dragging */
.task-wrap {
  position: relative;
  z-index: 1;
}

/* The row being dragged becomes ~65% transparent */
.task-row.dragging {
  opacity: 0.5;    /* 65% transparent */
}

/* ====== New Project drawer above its backdrop ====== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;    /* scrim */
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;    /* above backdrop */
}

/* Optional: if your drawer already handles its own layout, keep this light */
.drawer .drawer-content {
  position: relative;
}

/* (If you have a different naming for the bottom drawer, keep the z-index rule) */


/* Drag ghost visual */
.drag-ghost {
  opacity: 0.5;               /* ghost is 50% */
  border-radius: 10px;
  background: inherit;        /* keep whatever the row shows */
}

/* Already present, but just to be explicit for the left-behind row */
.task-row.dragging {
  opacity: 0.5;              /* ~35% */
}




/* --- DnD authoritative overrides (append) --- */
.task-row.is-dragging { opacity: .5 ; }

.drag-ghost {
  background: #fff ;   /* stop inheriting gray */
  opacity: .5 ;         /* the “floating” copy */
  border-radius: 14px;

}


/* When any drag is active, tween rows float above tasks and accept events */
.scroll-container.drag-active .tween-row {
  z-index: 2;
  pointer-events: auto;
}


/* ====== DnD tween rows (append-only) ====== */

/* During a drag, lift all tween rows above task rows */
.dragging-active .tween-row { z-index: 2 ; }

/* Ghost (the element following the cursor) */
.drag-ghost {
  opacity: 0.5 ;
  background: transparent ;
  box-shadow: none ;
}

/* Origin row fades while dragging */
.task-row.dragging { opacity: 0.75; }

/* Tween base — note: we set inline styles for height/margins/padding,
   but these keep a consistent baseline if any inline style is reset. */
.tween-row {
  position: relative;
  height: auto;
  margin-top: -20px;
  margin-bottom: -20px;
  padding-top: 20px;
  padding-bottom: 20px;
   transition: height 250ms ease;
  pointer-events: auto; /* accept dragenter/leaves */
}

/* ==== DnD tween rows (refactor to class-based expansion) ==== */
.tween-row {
  position: relative;
  height: auto;                  /* collapsed by default */
  overflow: visible;
  z-index: 1;                   /* below tasks unless dragging */
}

.scroll-container.drag-active .tween-row {
  /* active only during an actual drag */
  pointer-events: auto;
}



/* Lift tween rows slightly above tasks while dragging */
.scroll-container.drag-active .tween-row { z-index: 2; }


/* Drag visuals:
   - the row left behind fades to ~35%
   - the floating ghost is 50% and transparent background */
.task-row.dragging { opacity: 0.75; }
.drag-ghost { opacity: 0.75; background: transparent; }

/* Make sure task rows are above tweens when not dragging */
.card-day .task-row { position: relative; z-index: 1; }

/* Ensure the scroll-container toggles .drag-active (Timeline already does) */

/* ==== DnD tween rows (insert at end of styles.css) ==== */
.tween-row {
  position: relative;
  height: auto;                    /* collapsed by default */
  overflow: visible;
  z-index: 1;                   /* below tasks unless dragging */
}

.dragging-active .tween-row {
  /* only becomes interactive while a drag is happening */
  pointer-events: auto;
}


/* Lift tween rows *slightly* over normal task rows during drag */
.dragging-active .tween-row { z-index: 2; }

/* ==== FINAL: simple tween DnD behavior (parent is drop target) ==== */

/* Baseline tween row (collapsed, invisible hit area, no pointer events) */
.card-day .tween-row {
  position: relative;
  background: transparent ;
  height: auto;
  padding: 20px 0 ;     /* creates the overlap window */
  margin: -20px 0 ;     /* so the tween sits between rows */
  z-index: 0;
  pointer-events: auto;
}

/* While dragging, tween rows are interactive and layered above tasks */
.dragging-active .tween-row {
  pointer-events: auto ;
  z-index: 2;
}

/* Dark overlay + label lives inside the tween (parent handles drop) */
.card-day .tween-row .tween-label {
  color: black;
  inset: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
              /* parent is the drop target */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 300;
  Font-size: 18px;
  user-select: none;
  transition: opacity 250ms ease;
}

/* Show the label only when the row is active during a drag */
.dragging-active .tween-row.active .tween-label {
  display: flex;
  opacity: 1;
}

/* Task layering (dragging origin fades and sits above tweens visually) */
.task-row { position: relative; z-index: 1; }
.task-row.dragging { opacity: 0.75; z-index: 3 ; }

/* ==== KILL SWITCH: make all tween rows droppable ==== */
.card-day.card-day .tween-row,
.card-day .tween-row,
.tween-row {
  pointer-events: auto;
}


/* ==== KILL SWITCH: make all tween labels po-none ==== */
.tween-row .tween-label {
  pointer-events: none!important;
}


/* === DnD tween-row: child-driven expansion (FINAL, append-only) === */

/* Keep stacking sane: tasks above base, tween rows above tasks only while dragging */
.card-day { position: relative; isolation: isolate; }
.task-row { position: relative; z-index: 1; }
.task-row.dragging { opacity: .5; pointer-events: none; z-index: 3; }

/* Parent tween: auto height, overlap window via padding + negative margin
   Net height is 0 when the label is 0px tall; becomes label's height when expanded. */
.tween-row {
  position: relative;
  z-index: 0;
  height: auto;          /* override any earlier height:0 */
  margin: -20px 0;       /* overlap the adjacent task rows by 20px */
  padding: 20px 0;       /* the overlap window */
  pointer-events: auto;  /* parent is the drop target */
}

/* During a task drag, all tween rows float above tasks and can receive drops */
.scroll-container.dragging-active .tween-row { z-index: 2; }

/* Child overlay that grows/collapses; parent remains the drop target */
.tween-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0px;             /* collapsed by default */
  overflow: hidden;      /* prevents text from changing height when collapsed */
  opacity: 0;
  border-radius: 10px;
  background: red; /* subtle, not too dark */
  user-select: none;
  pointer-events: none;  /* the child never steals dragover/drop */
  transition: height 250ms ease, opacity 250ms ease;
}

/* Only the hovered tween expands while dragging */
.scroll-container.dragging-active .tween-row.active .tween-label {
  height: 50px;          /* visual gap target */
  opacity: 1;
}

.task-row.dragging { opacity: .5; pointer-events: none; z-index: 3; }

/* Prevent child images from hijacking drags in Chrome/Edge */
.task-row img { -webkit-user-drag: none; user-drag: none; }

/* === DnD: parent stays auto; only the label grows === */
.tween-row {
  height: auto;                 /* parent never clamps height */
}

.scroll-container.dragging-active .tween-row { z-index: 2; }

.tween-row .tween-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0px;                    /* collapsed by default */
  overflow: hidden;             /* text never affects height */
  opacity: 0;
  pointer-events: none;         /* parent handles drop */
  transition: height 250ms ease, opacity 250ms ease;
}

/* Only the active tween shows an actual gap */
.scroll-container.dragging-active .tween-row.active .tween-label {
  height: 50px;                 /* visual gap */
  opacity: 1;
}

/* When a client picker/popover is present, lift that row above neighbors */
.task-wrap:has(.client-picker),
.task-wrap:has(.client-popover) {
  z-index: 10;   /* higher than other task-wraps (1) and tween-rows (2) */
}

/* Keep the popover itself high, just in case */
.client-picker,
.client-popover {
  z-index: 100;
}

.btn.btn-personal-task,
.btn.btn-work-task,
.btn.btn-meeting,
.btn.btn-event {
	 height: 28px;
	 font-weight: 400!important;
 	 padding: 0px;
	 padding-right: 8px;
	 padding-left: 6px;
	 }

.btn.btn-personal-task {
	color: #5b21b6;
 	background: #EDE9FE;
 	border: 2px solid #ddd6fe;
	border-radius: 60px;
	}


.btn.btn-work-task {
	color: #3730a3;
	background: #eef2ff;
 	border: 2px solid #e0e7ff;
	border-radius: 60px;
	}

.btn.btn-meeting {
	 color: #fff;
 	 background: #1d4ed8;
 	 border: 2px solid #1d4ed8;
	 border-radius: 2px;
	height: 28px;
	}

.btn.btn-event {
	color: #fff;
 	 background: #7F4ED1;
 	 border: 2px solid #7F4ED1;
	 border-radius: 2px;
	height: 28px;
	}


/* === Availability bars: expand on drag hover (250ms) ================== */
.avail-bar {
  transition: padding 250ms ease, background-color 250ms ease, opacity 250ms ease;
}

/* Available (green) — default 10px → 30px + color shift while hovering a drag */
/* NEW – only show the fat green hover while *any* drag is active */
/* Let the available lane grow like extended/emergency when hovered */
.avail-bar.available.is-drag-hover,
.avail-bar.avail.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  background: #cfeadd !important; /* or whatever green you want */
}

/* Emergency — 4px/3px → 30px/30px and opacity 0.33 → 1.0 */
.avail-bar.emergency.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  opacity: 1 !important;
}

/* Extended — opacity 0.66 → 1.0 and 30px/30px padding */
.avail-bar.extended {
  opacity: 0.66; /* ensure default */
}
.avail-bar.extended.is-drag-hover {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  opacity: 1 !important;
}




.card-day > header {
  position: sticky;
  border-radius: 10px 10px 0px 0px;
  top: -12px;
  width: auto;
  background: #eee;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
  z-index: 3;
  /* soft shadow divider so it reads as a bar */
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}






/* Middle strip fills space between h2 (left) and .row (right) */
.compression-view-btns {
  flex: 1 1 auto;              /* <-- makes it expand */
  display: flex;
  align-items: center;
  gap: 0px;
  min-width: 0;
}

/* Buttons + icon bars */
.cvb-btn {
  appearance: none;
  padding: 0px;
  border-radius: 4px;
  background-color: transparent;
  border: 0px solid transparent;
  margin-right: 0px;
  margin-bottom: -3px;
  width: 36px;
  height: auto; 
  cursor: pointer;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  color: black;  
  opacity: .5;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.cvb-btn:hover {
  opacity: 1.0;
  background-color: transparent;

}

/* Bars inside each icon */
.cvb-icon {
  display: flex;
  width: 36px;
  padding: 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

.cvb-icon.cvb-thin {

}

.cvb-icon.cvb-medium {

}

.cvb-icon.cvb-thick {

}


.cvb-icon em {
  display: block;
  height: 100%;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* Padding rules scoped to THIS day's stack only (header's next sibling) */
.stack-4 .task-row {           /* default */
  padding-top: 6px;
  padding-bottom: 6px;
  Padding-left: 8px;
  Padding-right: 8px;
}



/* THINNEST VERSION */

.avail-bar.extended.lane.compress-thin .btn.btn-resched,
.avail-bar.emergency.lane.compress-thin .btn.btn-resched,
.stack-4.compress-thin .btn.btn-resched {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.avail-bar.extended.lane.compress-thin .task-row,
.avail-bar.emergency.lane.compress-thin .task-row,
.stack-4.compress-thin .task-row {
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 8px;
}

.avail-bar.extended.lane.compress-thin .pill,
.avail-bar.extended.lane.compress-thin .input,
.avail-bar.emergency.lane.compress-thin .pill,
.avail-bar.emergency.lane.compress-thin .input,
.stack-4.compress-thin .pill,
.stack-4.compress-thin .input {
  padding-top: 3px;
  padding-bottom: 3px;
}


.avail-bar.extended.lane.compress-thin .task-row .done-wrap,
.avail-bar.extended.lane.compress-thin .task-row .done-wrap,
.avail-bar.emergency.lane.compress-thin .task-row .done-wrap,
.avail-bar.emergency.lane.compress-thin .task-row .done-wrap,
.stack-4.compress-thin .task-row .done-wrap { 
  font-size: 8.5px;
  line-height: 3px;
  Margin-top: -1px;
  Margin-bottom: 3px;
}

.avail-bar.extended.lane.compress-thin .btn.btn-danger.btn-icon,
.avail-bar.emergency.lane.compress-thin .btn.btn-danger.btn-icon,
.stack-4.compress-thin .btn.btn-danger.btn-icon {
  padding-top: 2px;
  padding-bottom: 3px;
  height: 22px;
}

.avail-bar.extended.lane.compress-thin .project-mark,
.avail-bar.emergency.lane.compress-thin .project-mark,
.stack-4.compress-thin .project-mark {
  flex-direction: row;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px !important;
} 

.stack-4.compress-thin .task-row.threecols {
}
 
.task-row.threecols{
    margin: 0px 6px 0px 12px!important;
}

/* DEFAULT/NORMAL VERSION */

.avail-bar.extended.lane.compress-normal .task-row,
.avail-bar.emergency.lane.compress-normal .task-row,
.stack-4.compress-normal .task-row {
  padding-top: 6px;
  padding-bottom: 6px;
}



/* THICK VERSION */

.avail-bar.extended.lane.compress-thick .task-row,
.avail-bar.emergency.lane.compress-thick .task-row,
.stack-4.compress-thick .task-row {
  padding-top: 14px;
  padding-bottom: 14px;
}




/* If you have more specific padding rules elsewhere, add !important:
   e.g., .stack-4.compress-thin .task-row { padding-top:0 !important; ... } */

.pill.pill-client.pill-meeting {
	border-radius: 2px;
	}





/* Let lane bars act as containers with a header and items inside */
.avail-bar.lane {
  padding: 10px 12px;          /* ensure interior spacing */
  box-sizing: border-box;
}

.avail-bar.lane .lane-label {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
  pointer-events: none;        /* header isn’t a drop target */
}

.avail-bar.lane .lane-body > .task-wrap {
  margin-top: 8px;             /* space tasks from header */
}


.input.title-input.deadline {padding: 6px 10px;}





/* NOW MARKER SECTION */
/* NOW MARKER SECTION */
/* NOW MARKER SECTION */
/* NOW MARKER SECTION */

/* Now marker */
.now-marker {
  position: absolute;
  left: 8px;                 /* place at left (over the #1d4ed8 circle in your mock) */
  z-index: 0;                    /* sit above task rows */
  pointer-events: none;
  transform: translateY();
  transition: transform 250ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 7px;
}

/* #1d4ed8 circle */
.now-circle {
  margin-left: 22px;
  margin-top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #ED7D31; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* red state for overlaps */
.now-circle.overlap {
  background: #e04444;
  box-shadow: 0 2px 10px rgba(224,68,68,0.25);
}

/* label pill */
.now-label {
  background: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* subtle overlay highlight (optional) */
.now-highlight {
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -75px;
  height: 75px;
  background: linear-gradient(0deg, rgba(255, 108, 0, 0.25),rgba(255, 120, 0, 0));
  border-bottom: 2.5px solid #ff9500;
  pointer-events: none;
}

.pull-loader {
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  color: #111;
  font-weight: 600;
  font-size: 18px;
  border-radius: 12px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}



/* make generic helpers safe inside flex/grid containers */
.row { min-width: 0; }


@media only screen and (max-width: 820px) {
  
  .action-bar-drawer {
      height: 45px!important;
      top: -14px!important;
   }

  .btn.actionbar-btns {
    padding: 6px 5px!important;
    margin: 0px;
    min-width: 0px!important;
  }

  .btn.actionbar-btns.reschedule-actionbar{
   padding-right: 0px!important; 
   padding-left: 0px!important; 
  }

  .task-row .row-left {
        z-index: 30;
  }
  .row-right {
    z-index: 31;
  }
  
  .close-action-bar {
    padding: 0px;
    margin: 0px;
    min-width: 0px!important;
    width: 35px!important;   
  }

  .card {
    padding-left: 8px!important;
    padding-right: 8px!important;
    margin-left: 8px!important;
    margin-right: 8px!important;
    Width: auto;
	}

  .btn,
  .button {
    padding: 8px 4px!important;
    margin: 3px;
    font-size: 12px;
	}


    .container {
        padding: 0px;
        margin: 0px!important;
      }

    .pill {
      width: 100px!important;
    }

}


/* Split layout */
.split-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.split-root.horizontal {
  display: grid;
  grid-template-columns: var(--pane-a, 1fr) var(--splitter, 8px) var(--pane-b, 1fr);
  grid-template-rows: 1fr;
}

.split-root.vertical {
  display: grid;
  grid-template-rows: var(--pane-a, 1fr) var(--splitter, 10px) var(--pane-b, 1fr);
  grid-template-columns: 1fr;
}

.split-pane {
  min-width: 0; min-height: 0; /* enable scrolling inside */
  overflow: hidden;
}

.split-panes.horizontal {
	gap:0px;
	}


/* Splitter + handle */
.splitter {
  background: white;
  position: relative;
  cursor: col-resize;
}

.split-resizer {
	background: rgba(0,0,0,.1)!important;
	position: relative;
	width: 6px!important;
	}

.split-resizer .handle {
 	background: #eee!important;
	min-width: 16px;
	min-width: 18px;
	}

.split-root.vertical .splitter { cursor: row-resize; }

.splitter .handle {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}


.split-root.horizontal .splitter .handle { 
	width: 100%!important; 
	}

.split-root.vertical .splitter .handle { 
	height: 100%!important; 
	}

/* Desktop/tablet thin bar */
.split-root.horizontal .splitter::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 4px; height: 100%; border-radius: 2px; background: #e5e7eb;
}

/* Mobile — big circular grab target on the right edge */
.split-root.vertical .splitter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 6px; width: 100%!important; background: #e5e7eb; border-radius: 3px;
}
.split-root.vertical .splitter .nub {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #f1f5f9; box-shadow: 0 2px 6px rgba(0,0,0,.1);
  display: grid; place-items: center; font-size: 16px; user-select: none;
}

/* DnD scroll zones inside the active (80%) pane */
.pane-scroll-zone-top,
.pane-scroll-zone-bottom {
  position: absolute; left: 0; right: 0; height: 20%;
  pointer-events: none;
}
.pane-scroll-zone-top { top: 0; }
.pane-scroll-zone-bottom { bottom: 0; }

.dur-field { position: relative; display: inline-block; }
.dur-field .dur-ghost {
  background: white;
  Padding: 5px;
  position: absolute;
  Left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums;
}


.todo-row {
	display: flex;
	width: 100%;	
	text-align: right;
	}

.todo-time-title {
	display: flex;
	width: 100%;
	}

.todo-sched-delete {
	width: 140px;
	}


.pill.pill-add.pill--personal { 
		background: transparent;
		color: #7F4ED1;  
		border: #7F4ED1 solid 1px; 
		padding: 2px 6px;
		width: 44px
		}

.pill.pill-add.pill--work { 
		background: transparent;
		color: #1d4ed8; 
		border: #1d4ed8 solid 1px; 
		padding: 2px 6px;
		width: 26px
		}


/* Add this to your CSS */
.dragging-native {
  opacity: 0.5;
  background: #eef2ff;
}

.input.time-input { 
	font-size: 10.5px; 
	border-radius: 6px; 
	}

.pill.pill-duration {
	padding-left: 0px;
	padding-right: 0px;
	width: 38px;
	max-width: 38px;
	min-width: 38px;
	border-radius: 0px 6px 6px 0px; 
	margin-left: -45px;
	font-size: 10px;
	background: #f0f0f0;
	font-weight: 400;
	color: #222;

	}

.move-deliverable-btns {
	height:24px;	
	}

.btn.btn-icon-only.top {
	max-height: 12px!important;
	padding:0px 6px;
	font-size: 6px;
	display: block;
	margin: .5px 0px;
	background: #aaa;
	}

.btn.btn-icon-only.bottom {
	max-height: 12px!important;
	padding:0px 6px;
	font-size: 6px;
	display: block;
	margin: .5px 0px;
	background: #aaa;
	}

.btn.btn-danger.deleteproj { min-width: 90px;}


.task-row.is-selected {
  background-color: #e0e7ff!important; /* A light #1d4ed8 or purple */
  box-shadow: 0 0 0 2px #4f46e5!important; /* A darker border */
}

.card.daycard .row.between { padding-left: 5px; }

.card.row.between { 
	background: #fff!important;
	overflow: hidden;
	border: 0px;
  	border-radius: 10px;
	background: #fff;
	}

/* Headnav & dropdown fixes */
.toolbar, .headnav, .headnav .left, .headnav .right { overflow: visible; }
.headnav { position: sticky; top: 0; z-index: 2000; }

/* Generic icon button (matches your IconButton) */
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
.icon-button:hover { background: #f5f7fb; }

/* Details-based dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }

/* Menu panel */
.dropdown .dropdown-menu {
  position: absolute;
  min-width: 260px;
  max-width: 92vw;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  z-index: 3000;
  margin-top: 8px;
  transform-origin: top right;
  display: none;
}

/* Open state */
.dropdown[open] .dropdown-menu { display: block; }

/* Alignment */
.dropdown[data-align="right"] .dropdown-menu { right: 0; }
.dropdown[data-align="left"]  .dropdown-menu { left: 0; }

/* Small helpers */
.group-title { font-weight: 600; margin: 4px 0 8px; font-size: 13px; color: #444; }
.muted { color: #6b7280; font-size: 12px; }
.headnav .spacer { flex: 1 1 auto; }

/* Make sure menus aren’t hidden by parents */
.headnav .right, .headnav .left { position: relative; }















/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline expanded gap ===== */
/* ===== Sub-timeline (final, unified) ===== */
.avail-bar.gap-expanded {
  overflow: visible;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, .25) inset,
    /* cyan dotted border illusion base */
    0 0 18px 0 rgba(16, 185, 129, .18);
  /* inner cyan glow */
}

/* dotted cyan ring (matches avail lane aesthetic) */
.avail-bar.gap-expanded::before {
  opacity: .9;
}

/* hide the big inline label while expanded */
.avail-bar.gap-expanded .lane-label {
  display: none !important;
}

/* ruler container (RIGHT-side ruler) */
.gap-ruler {
  width: 100%;
  transition: height 180ms cubic-bezier(.2, .8, .2, 1);
  padding-right: 15%;
  /* reserves room for cancel area column */
}

/* each 5-min band wrapper */
.gap-ruler .tick-band {
  position: relative;
}

/* ----- Lines (drawn full width, labels right-aligned) ----- */
.gap-ruler .ruler-line {
  position: absolute;
  left: 0;
  right: 15%;
  /* stop before cancel column */
  height: 100%;
  border-top: 1px solid currentColor;
  transform: translateY(-0.5px);
  color: #000;
  /* base for currentColor */
  /* default minor */
}

.gap-ruler .hour-line {
  height: 2px;
  /* 2px for :00 */
  opacity: 1;
}

.gap-ruler .half-line {
  opacity: .55;
}

.gap-ruler .quarter-line {
  opacity: .40;
  border-bottom: 1px dotted currentColor;
  background: transparent;
}

/* Bookend (cyan) overrides */
.gap-ruler .bookend {
  color: #10b981;
}

.gap-ruler .bookend.ruler-line {
  background: #10b981;
  height: 2px;
  opacity: 1;
}

/* ----- Labels (RIGHT-side, time-of-day, AM/PM small) ----- */
.gap-ruler .tick-label {
  position: absolute;
  right: calc(15% + 4px);
  /* 4px left padding before text */
  top: -11px;
  /* vertically centered to line block sizes below */
  text-align: right;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  color: #000;
}

/* weight/size by type (no opacity juggling here—keep solid; we only fade by scale) */
.gap-ruler .tick-label.hour {
  font-weight: 500;
  font-size: 16px;
  color: #000;
}

.gap-ruler .tick-label.half {
  font-weight: 300;
  font-size: 13px;
  color: #7F7F7F;
}

.gap-ruler .tick-label.quarter {
  font-weight: 300;
  font-size: 9px;
  color: #A6A6A6;
}

/* AM/PM superscript style */
.gap-ruler .tick-label sup {
  font-size: .66em;
  font-weight: 300;
  text-transform: uppercase;
  position: relative;
  top: -0.35em;
  margin-left: 1 px;
}

/* Fading when compressed (applied by inline style from JS) */
.gap-ruler .fade-out {
  opacity: 0;
}


/* ----- Highlighted drop proxy (outer) + label pill ----- */
.gap-expanded .drop-proxy {
  background: transparent;
  /* gradient is drawn via :before */
  z-index: 2;
  min-height: 0;
  /* allow tiny spans; label may exceed */
}
.gap-expanded .drop-proxy::before {
  position: absolute;
  inset: 0;
  border-radius: 8 px;
  /* default = personal violet; work row will override with .work */
}

/* label pill sits over the proxy; full-opacity, solid color */
.gap-expanded .drop-label {
  left: 15px;
  /* aligns with content padding */
  transform: translateY(-50%);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  z-index: 3;
  backdrop-filter: saturate(120%);
}

/* dim outside the proxy range */
.gap-expanded .outside-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#000, #000);
  opacity: .12;
  z-index: 1;
}

/* keep expanded height flexible */
.stack-4 .avail-bar.gap-expanded,
.avail-bar.lane.gap-expanded {
  height: auto !important;
}

/* tiny “too small” flash */
.avail-bar.gap-too-small {
  animation: gapflash .35s ease;
}
@keyframes gapflash {
  0% {
    box-shadow: 0 0 0 rgba(255, 99, 71, 0);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, .25);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 99, 71, 0);
  }
}

/* bookend line placement (top/bottom full width minus cancel col) */
.gap-ruler .book-start {
  position: absolute;
  top: 0;
  left: 0;
  right: 15%;
}
.gap-ruler .book-end {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 15%;
}

/* bookend sticky labels at right, slightly outside line end */
.gap-ruler .book-label {
  position: sticky;
  display: flex;
  justify-content: flex-end;
  right: 0;
  transform: translateX(8px);
  font-weight: 300;
  font-size: 14 px;
  color: #065f46;
  /* emerald-900-ish */
  z-index: 1;
}
.gap-ruler .book-label.book-start {
  position: absolute;
  top: 0;
}
.gap-ruler .book-label.book-end {
  position: absolute;
  bottom: 0;
}

.gap-ruler {
  position: relative;
}

/* Bookend labels (cyan), positioned above/below their 0px rows */
.gap-ruler .row.book-start .ruler-line {
  border-top: 2px solid #10b981;
  background: transparent;
}

.gap-ruler .row .ruler-text.book.top {
  position: absolute;
  bottom: auto;
  top: 0;
}
.gap-ruler .row .ruler-text.book.bottom {
  position: absolute;
  bottom: -1.1em;
}

/* sits under the ruler-line */
/* Hour / Half / Quarter styles */
.gap-ruler .row.quarter.ruler-line,
/* Typography colors/sizes */
.gap-ruler .row.quarter.ruler-text,
/* Small AM/PM caps aligned to top of numbers */
/* Cancel column is already a sibling (.gap-grid); keep your look */
/* each timeline row: fixed 22px; content bottom-aligned */
.gap-ruler .row {
  display: flex;
  align-items: flex-end;
  /* puts the line at the bottom */
  justify-content: flex-end;
  /* pushes label to the right */
  gap: 5px;
  /* 5px gap between line end and label */
  overflow: visible;
}

/* line runs to label gap; thickness by type */
.gap-ruler .row .ruler-line {
  flex: 1 1 auto;
}
.gap-ruler .row.hour .ruler-line {
  border-top-width: 2 px;
  border-top-color: #000;
}
.gap-ruler .row.half .ruler-line {
  border-top-width: 1px;
  border-top-color: #7F7F7F;
}
.gap-ruler .row.quarter.ruler-line-dotted {
  border-top-style: dashed;
}

/* label typography & colors */
/* bookends: cyan lines; labels above/below */
.gap-ruler .row.book-start .ruler-text,
.gap-ruler .row.book-end .ruler-text {
  color: #10b981;
  font-weight: 500;
  font-size: 14px;
}

.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 2px solid #10b981!important;
  opacity: 1.0!important;
  background: transparent!important;
}

.gap-ruler .row.book-start {
  height: 0;
}
.gap-ruler .row.book-start .ruler-text {
  position: absolute;
}

/* above ruler-line */
.gap-ruler .row.book-end .ruler-text {
  position: absolute;
  font-weight: 500;
}

/* below ruler-line */
/* collapse animation target (height + opacity) */
.gap-ruler .row.fade {
  transition: height .18s linear, opacity .18s linear;
}

/* drop proxy + label pill */
.gap-expanded .drop-proxy {
  position: absolute;
  left: 0;
  right: 0;
  /* stops at ruler’s right edge */
  border-radius: 0;
  /* squared per spec */
  pointer-events: none;
  z-index: 2;
}
.gap-expanded .drop-proxy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(178, 76, 255, .50), rgba(178, 76, 255, 0));
}
.gap-expanded .drop-proxy.work::before {
  background: linear-gradient(90deg, rgba(68, 114, 196, .50), rgba(68, 114, 196, 0));
}
.gap-expanded .drop-label {
  position: absolute;
  transform: translateY(-50%);
  margin-left: 50px;
  /* push into the track */
  padding: 2px 15px;
  border-radius: 60px;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  z-index: 3;
  left: 0;
  background: #B24CFF;
}
.gap-expanded .drop-label.work {
  background: #4472C4;
}

/* card visuals: white with inner green glow & dotted ring tight to edge */
/* hide the original drag ghost while expanded */
html.dnd-active .drag-ghost,
html.dnd-active .bd-task.dragging {
  opacity: 0 !important;
}

.gap-ruler .row.quarter.line-dotted .ruler-line {
  border-top: 1px dotted #BFBFBF;
}

.gap-ruler .row.quarter.ruler-text {
  font-weight: 300;
  font-size: 9px;
  color: #A6A6A6;
}

/* Bookends: cyan, ruler-line on bottom; top label above, bottom label below */

.gap-ruler .row.book-start .ruler-text {
  bottom: auto;
  left: 0px;
  top: -16px;
  color: #10b981;
  font-size: 14px;
}
.gap-ruler .row.book-end .ruler-text {
  bottom: -16px!important;
  top: auto;
  left: 0px;
  color: #10b981;
  font-size: 14px;
  font-weight: 500;
}

/* Make the dotted green border flush with the card edge (no gap) */
/* Kill the draggable ghost while sub-timeline is open */
.gap-expanded .drag-ghost,
.gap-expanded .drag-shadow,
.gap-expanded .bd-task.dragging {
  display: none !important;
}

.bd-placeholder {
  margin: 2px 0;
  border-radius: 8px;
  outline: 1px dashed rgba(59,130,246,.45);
  background: rgba(59,130,246,.08);
}























/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */
/* ===== GEMINI'S FIXES ===== */


/* ===== START REPLACEMENT: Fix #1 ===== */
.gap-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 25%; /* Use 1fr for the ruler to fill remaining space */
  gap: 0;
  padding: 30px;
}

/* Also remove the conflicting padding from the ruler column itself */
.gap-grid .gap-ruler {
  position: relative;
  padding-right: 0; /* REMOVE conflicting padding */
}
/* ===== END REPLACEMENT: Fix #1 ===== */

/* ===== START ADDITION: Fix #2 (Part 2 of 2) ===== */
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 1px solid #10b981;
}

.gap-ruler .row .ruler-text.book {
  color: #065f46;
  font-weight: 300;
  font-size: 14px;
  position: absolute;
}

/* Position bookend labels outside the flow */
.gap-ruler .row.book-start .ruler-textwrap {
  /* Place label ABOVE the 0px top line */
  bottom: 5px; 
  position: absolute;
  right: auto;
  left: 0px;
}

.gap-ruler .row.book-end .ruler-textwrap {
  /* Place label BELOW the bottom line */
  top: 100%;
  bottom: auto;
  padding-top: 2px;
  position: absolute;
  right: auto;
  left: 0px;
}
/* ===== END ADDITION: Fix #2 (Part 2 of 2) ===== */

/* ===== START REPLACEMENT: Fix #3 ===== */
/* Base row container */
.gap-ruler .row {
  position: absolute;
  left: 0;
  right: 0;
  display: grid!important; 
  grid-template-columns: 1fr max-content!important; 
  align-items: center!important;
   /* All rows start at a 22px height for calculations */
}

/* Line element, positioned at the bottom of its parent row */
.gap-ruler .row .ruler-line {
  min-width: 0!important;
  height: 100%!important;
}

/* Wrapper for ruler-text, aligned to the right edge */
.gap-ruler .row .ruler-textwrap {
  justify-self: end!important;
  height: 100%!important;
  padding-left: 5px;

}

/* Wrapper for ruler-text, aligned to the right edge */
.gap-ruler .row .ruler-textwrap {
  position: absolute;
  right: 0;
  bottom: 0;                 /* anchor to the line (bottom of row) */
  height: auto;
  justify-self: end!important;
  padding-left: 5px;
}

/* The actual ruler-text element */
.gap-ruler .row .ruler-text {
  padding-left: 5px;
  margin: 0;
  padding: 0;
  position: absolute;
  height: auto;
  bottom: calc(0px - 0.4em)!important;
  right: 0;
  line-height: 1;
  white-space: nowrap;
}
/* ===== END REPLACEMENT: Fix #3 ===== */

/* ===== START ADDITION: Fix #4 ===== */
/* Hour Marker Styles */
.gap-ruler .row.hour .ruler-line {
  border-top: 2px solid #000;
}
.gap-ruler .row.hour .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.gap-ruler .row.hour { --ruler-text-width: 100px; } /* Approx width for line calc */

/* Half-Hour Marker Styles */
.gap-ruler .row.half .ruler-line {
  border-top: 1px solid #7F7F7F;
}
.gap-ruler .row.half .ruler-text {
  font-size: 12px;
  font-weight: 300;
  color: #7F7F7F;
}
.gap-ruler .row.half { --ruler-text-width: 70px; }

/* Quarter-Hour Marker Styles */
.gap-ruler .row.quarter .ruler-line {
  border-top: 1px dashed #BFBFBF;
}
.gap-ruler .row.quarter .ruler-text {
  font-size: 9px;
  font-weight: 300;
  color: #A6A6A6;
}
.gap-ruler .row.quarter { --ruler-text-width: 60px; }


.gap-ruler .row.quarter .ruler-line {
  width: calc(100% - 35px)!important;
}

.gap-ruler .row.half .ruler-line {
  width: calc(100% - 45px)!important;
}

.gap-ruler .row.hour .ruler-line {
  width: calc(100% - 56px)!important;
}

.gap-ruler .row.book-start .ruler-line {
  width: calc(100% - 100px)!important;
}

.gap-ruler .row.book-end .ruler-line {
  width: calc(100% - 100px)!important;
}

/* ===== END ADDITION: Fix #4 ===== */


/* ===== START ADDITION: Fix #5 ===== */
.gap-ruler .row .ruler-text sup {
  font-size: 0.5em; /* Half height of the number */
  vertical-align: top; /* Aligns to the top of the number */
  font-weight: 300;
  text-transform: uppercase;
  position: relative;
  top: 0.1em; /* Minor adjustment for perfect visual alignment */
}
/* ===== END ADDITION: Fix #5 ===== */

/* ===== START ADDITION: Fix #6 (Part 2 of 2) ===== */
.drop-proxy {
  position: absolute;
  left: 0;
  right: 0; /* Stretches across the entire ruler column */
  border-radius: 0; /* No border radius */
  pointer-events: none;
  z-index: 10;
}

.drop-proxy::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Default violet for personal tasks */
  background: linear-gradient(90deg, rgba(178,76,255,.50) 0%, rgba(178,76,255,0) 100%);
}

.drop-proxy.work::before {
  /* #1d4ed8 for work tasks */
  background: linear-gradient(90deg, rgba(68,114,196,.50) 0%, rgba(68,114,196,0) 100%);
}

.drop-proxy .drop-label {
  position: absolute;
  left: -20px; /* Offset 20px left into the timeline area */
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px; /* Pill shape */
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  background: #B24CFF; /* Default violet */
}

.drop-proxy.work .drop-label {
  background: #1d4ed8; /* #1d4ed8 */
}

.ampm-superscript {
  font-size: 9px;
  display: inline-block;
  position:relative;
  font-weight: 700;
  top: -5px;
  left: -3.5px;
  margin-right: -3px;
}

.drop-proxy .drop-label sup {
  font-size: 5px!important;
  vertical-align: top;
  margin-left: 2px;
}
/* ===== END ADDITION: Fix #6 (Part 2 of 2) ===== */

/* ===== START ADDITION: Fix #7 ===== */
.task-row.dragging {
  opacity: 0 !important;
}
/* ===== END ADDITION: Fix #7 ===== */




/* ===== START REPLACEMENT: Fix #9 ===== */
.avail-bar.gap-expanded {
  position: relative; /* Needed for pseudo-element */
  background: #ffffff;
  border-radius: 14px;
  padding: 30px 0px; /* Padding is vertical only; grid handles horizontal */
  /* Inner green glow */
  box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
  border: none; /* Remove any previous border */
}

/* Dotted green line flush with the outer edge */
.avail-bar.gap-expanded::before {
  content: "";
  position: absolute;
  inset: 0; /* Flush with the edges */
  border-radius: 14px; /* Match parent's border-radius */
  border: 2px dotted #10b981;
  pointer-events: none;
}
/* ===== END REPLACEMENT: Fix #9 ===== */



/* ===== START ADDITION: Fix #10 ===== */

.gap-expanded {
    cursor: grabbing!important; /* or 'grab' */
}

/* The 20% sibling column */
.ruler-canceldrop-area {
  position: relative;
  height: calc(100% + 55px);
  margin: -20px 0px 0px 15px;
  transition: background-color 150ms ease, opacity 150ms ease, border-color 150ms ease;
  border-radius: 10px;
  border: 1px solid #ef4444; /* Red outline */
  background: rgba(254, 226, 226, .05); /* Light red background */
  color: #b91c1c; /* Darker red text */
  padding: 40px 0px; /* Vertical padding to match ruler, horizontal for box inset */
  box-sizing: border-box;
  opacity: 0.5;
}


@keyframes blink-opacity {
  0% { opacity: 1; }
  15% { opacity: 0.6; }
  30% { opacity: 1; }
  45% { opacity: 0.6; }
  60% { opacity: 1; }
  75% { opacity: 0.6; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes cancel-grow {
  from { transform: scale(1); }
  to   { transform: scale(1.5); }
}

/* The visible text box */
.ruler-canceldrop-text {
  position: sticky;
  pointer-events: none;
  top: 75px; /* Aligns with top padding */
  text-align: center;
  padding: 0px 4px;
  line-height: 1.15;
  font-weight: 500;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* This class is now toggled by JavaScript on drag enter/leave */
.ruler-canceldrop-area.is-cancel-hover {
  background: rgba(254, 226, 226, 1);
  border-color: #ef4444;
  animation: blink-opacity 150ms linear;
}

.ruler-canceldrop-area.is-cancel-hover .ruler-canceldrop-text {
  animation: cancel-grow 2150ms ease-out forwards;
  transform-origin: 50% 35%;
}


/* ===== END ADDITION: Fix #10 ===== */

/* ===== START: Drop Proxy Highlight and Pill Styles ===== */
.drop-proxy-highlight {
  position: absolute;
  left: 0px; /* Aligns with content padding */
  right: 15px; /* Aligns with content padding */
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center; /* This will vertically center the pill */
  justify-content: flex-start;
}

.drop-proxy-highlight.personal {
  background: linear-gradient(90deg, rgba(126, 5, 248, 0.4) 0%, rgba(126, 5, 248, 0) 100%);
}

.drop-proxy-highlight.work {
  background: linear-gradient(90deg, rgba(5, 93, 248, 0.4) 0%, rgba(5, 93, 248, 0) 100%);
}

.drop-proxy-pill {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  margin-left: 45px;
  color: #fff;
  white-space: nowrap;
}

.drop-proxy-pill.personal {
  background-color: #7E05F8;
}

.drop-proxy-pill.work {
  background-color: #055DF8;
}

.ampm-superscript-pills {
  font-size: 8px;
  display: inline-block;
  position: relative;
  font-weight: 700;
  top: -1px;   /* top-align to numbers */
  left: 0px;
  margin-right: -3px;
}

/* ===== END: Drop Proxy Highlight and Pill Styles ===== */

/* default “grab” for draggable items (optional) */
.draggable { cursor: grab!important; }

/* while dragging, force “grabbing” app-wide */
html.is-dragging, html.is-dragging * {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}



/*
=========================
FIX: DnD Ghost Management
=========================
*/

/* 1. Restore the faded look for the original task row being dragged.
      This overrides the previous fix that made it fully invisible. */
.task-row.dragging {
  opacity: 0.5 !important;
}

/* 2. When the sub-timeline is active, find the globally-managed
      drag ghost and hide it completely. */
html.sub-timeline-active .drag-ghost {
  display: none !important;
}



/* Sub-timeline zoom (lanes with small available windows) */
.gap-ruler {
  transform-origin: top left;
  transform: scaleY(var(--stScale, 1));
}

/* --- Base scaffolding that matches your previous layout tricks --- */
.gap-ruler {
  position: relative;
  /* height is driven by JS: var(--st-total, Npx) */
}

.gap-ruler .row {
  position: absolute;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  overflow: visible;
  pointer-events: none; /* lines/labels never block DnD */
}

.gap-ruler .ruler-line {
  position: relative;         /* so ::after accents can anchor */
  min-width: 0;
  height: 0;
  border: 0;   
  transform: none;               /* each kind sets its own border-top */
}

.gap-ruler .ruler-textwrap {
  position: absolute;
  right: 0;
  bottom: 0;                  /* anchor text to the line baseline */
  height: auto;
  padding-left: 5px;
}

.gap-ruler .ruler-text {
  position: absolute;
  right: 0;
  top: calc(-0.4em) !important;  /* your “perfect middle” trick */
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Hour (:00) — 2px solid black; big label                            */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="hour"] .ruler-line,
.gap-ruler .row.hour .ruler-line {
  border-top: 1px solid #000;
  width: calc(100% - 52px) !important;
}
.gap-ruler .row[data-kind="hour"] .ruler-text,
.gap-ruler .row.hour .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

/* ------------------------------------------------------------------ */
/* Half (:30) — 1px solid #7F7F7F; medium label                       */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="half"] .ruler-line,
.gap-ruler .row.half .ruler-line {
  border-top: 1px solid #7F7F7F;
  width: calc(100% - 45px) !important;
}
.gap-ruler .row[data-kind="half"] .ruler-text,
.gap-ruler .row.half .ruler-text {
  font-size: 13px;            /* you said 13px earlier; keeping that */
  font-weight: 300;
  color: #7F7F7F;
}

/* ------------------------------------------------------------------ */
/* Quarter (:15/:45) — 1px dashed #BFBFBF; small label                */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="quarter"] .ruler-line,
.gap-ruler .row.quarter .ruler-line {
  border-top: 1px dashed #BFBFBF;
  width: calc(100% - 33px) !important;
}
.gap-ruler .row[data-kind="quarter"] .ruler-text,
.gap-ruler .row.quarter .ruler-text {
  font-size: 10px;
  font-weight: 300;
  color: #A6A6A6;
}

/* ------------------------------------------------------------------ */
/* Bookends — 2px solid #10b981, label 16px/500                       */
/* Book-start label sits ABOVE the line; book-end BELOW               */
/* Line spans only 75% of the ruler width                             */
/* ------------------------------------------------------------------ */
.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  border-top: 3px solid #10b981!important;
  width: 70% !important;      /* your 65% rule */
}

.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  margin-top: 0px;
}

.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line {
  margin-top: 0px;
}

/* Book-start label just above the line */
.gap-ruler .row[data-kind="book-start"] .ruler-text,
.gap-ruler .row.book-start .ruler-text {
  bottom: calc(2px + 0.2em) !important; /* nudge above the line */
  font-size: 16px;
  font-weight: 500;
  color: #10b981;
  right: auto;                 /* align left if you prefer */
  left: 3;
  top: -14px!important;
  padding-left: 0;
}

/* Book-end label just below the line (default bottom:-0.4em already does that) */
.gap-ruler .row[data-kind="book-end"] .ruler-text,
.gap-ruler .row.book-end .ruler-text {
  font-size: 16px;
  font-weight: 500;
  color: #10b981;
  right: auto;
  left: 3;
  padding-left: 0;
  top: 2px!important;
  /* keep bottom: -0.4em from base */
}

/* Optional: make bookend green line sit on top of any base line beneath */
.gap-ruler .row[data-kind="book-start"] .ruler-line,
.gap-ruler .row.book-start .ruler-line,
.gap-ruler .row[data-kind="book-end"] .ruler-line,
.gap-ruler .row.book-end .ruler-line {
  z-index: 1;
}

.gap-ruler .row[data-kind="book-start"] .ruler-textwrap,
.gap-ruler .row[data-kind="book-end"] .ruler-textwrap {
width: 100%;
}

.avail-resizer-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 10;
    cursor: ns-resize;
}
.avail-bar.available.hover-top {
    box-shadow: 0px -33px 33px -16px #83ffe8;
}
.avail-bar.available.hover-bottom {
    box-shadow: 0px 33px 33px -16px #83ffe8;
}
.is-resizing .avail-bar.available.active-resize-handle.resize-handle-top {
    box-shadow: 0px -33px 33px -16px #00d3ac;
}
.is-resizing .avail-bar.available.active-resize-handle.resize-handle-bottom {
    box-shadow: 0px 33px 33px -16px #00d3ac;
}


.logo-holder {
  cursor: pointer; 
  user-select: none; 
  -webkit-tap-highlight-color: transparent;
}

.backup-load {
  background: rgb(0, 148, 86);
  margin-bottom: 20px;
  margin-right: 10px;
  margin-top: 10px;
  padding: 12px 16px;
}

.relinkjson {
  padding: 14px 20px;
}


.backup-load:hover {
  background: rgb(0, 116, 67);
}



.card.card-day {
  margin: 0px 0px 20px 0px !important;
  background: #eee!important;
  padding: 0px;
}

.avail-bar.extended.lane {
  margin-bottom: 12px;
  margin-top: 12px;
  padding-left: 0px;
  padding-right: 3px;
}

.avail-bar.extended.lane .lane-label {
margin-left: 15px;
}

.avail-bar.extended.lane .task-row.threecols {
   padding-left: 5px;
}

.avail-bar.emergency.lane {
  margin-bottom: 12px;
  padding-left: 0px;
  padding-right: 3px;
}

.avail-bar.emergency.lane .lane-label {
margin-left: 15px;
}

.avail-bar.emergency.lane .task-row.threecols {
   padding-left: 5px;
}


.avail-bar {
 margin: 0px 6px 0px 12px;
}

.marker-lane {
  margin: 6px 6px 6px 6px;
  padding: 0px!important;
}

.marker-lane .task-wrap {
margin: 0px!important;
padding: 5px 5px 5px 5px!important;
}

.task-row.threecols.milestone-row,
.task-row.threecols.deadline-row {
margin: 0px!important;
}



/* Mobile: keep Undo/Redo visible */

/* START MOBILE */ 
/* START MOBILE */
/* START MOBILE */ 
/* START MOBILE */ 
@media (max-width: 820px) {
/* START MOBILE */ 
/* START MOBILE */ 
/* START MOBILE */ 
/* START MOBILE */


.split-panes.vertical .split-resizer {
  padding-top: 10px!important;
  background-color: transparent!important;
}

.scroll-container {
  height: 100dvh;
}


.card.card-day.card-today {
  position: relative!important;
}

.split-panes.vertical .split-resizer .handle {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

.now-circle {
  margin-left: 28px;
  margin-top: 2px;
  height: 9px;
  width: 9px;
  border-radius: 200px;
  border: 3px solid #ff9500;
  background: white;
  justify-content: normal;
  font-weight: 500!important;
  text-align: center!important;
  font-size: 0px!important;
  padding: 0px!important;
  color: transparent!important;
}

.now-marker {
color: transparent!important;
}




.card-day > header {
  top: 0px;
}

.card.card-day {
  margin: 0px 0px 20px 0px !important;
  background: #eee!important;
  padding: 0px;
  width: auto!important;
}

.card-today { 
  position: relative; 
  z-index: 1;
 }

.task-row.threecols{
    margin: 0px 0px 0px 12px!important;
}

.marker-lane {
   margin: 0px 0px 0px 0px;
}

.avail-bar {
 margin: 0px 0px 0px 12px;
}

.marker-lane {
  margin-bottom: 6px;
}



.split-pane.timeline {
  padding: 0px;
  margin: 0px;
  background: transparent;
}



.split-pane.timeline .card {
  padding: 0px;
  margin: 10px 0px;
  background: transparent;
  
}

.card.card-day {
  margin-left: 0;
  margin-right: 0;
  background: #eee!important;
}

.scroll-container.thin-scrollbar {
 margin: 0px;
 padding: 0px;
 background: transparent;
}

.toolbar {
  margin: 0px;
  border-radius: 0px;
}

.logo-holder {
  height: 30px;
  width: 27px;
  overflow: clip;
}

  .hide-on-mobile { 
        display: none!important; 
      }

  /* BUT keep icon-buttons in the left cluster visible (undo/redo/show/hide) */
  .headnav .left .icon-button { 
      display: inline-flex !important; 
      }

  .split-panes.vertical .split-resizer {
      width: 100%!important;
      height: 4px!important;
      margin-top: 0px!important;
    }
  .split-panes.vertical .split-resizer .handle {
      height: 15px!important;
      width: 200px!important;
      background: linear-gradient(to right, #785ABF, #785ABF, #1d4ed8 )!important;
      border-radius: 30px;
    }

    .row.day-add-btns {
      gap: 0px;
    }

    button {
      margin-right: 0.005rem;
      margin-left: 0.005rem;
      padding-left: 1px;
      padding-right: 1px; 
      font-size: 9px; 
  }

.input.duration-input.pill.pill-duration,
.input.time-input {
  font-size: 9px;
  padding-left: 3px;
  padding-right: 3px;
}

.input.duration-input.pill.pill-duration {
width: 32px!important;
min-width: 32px!important;
max-width: 32px!important;
}

.btn.btn-resched {
  width: 42px!important;
  font-size: 8px;
}

:root {
  --tr-time-w: 115px;
  --tr-pill-w: 20px;
  --tr-right-w: 96px;
}

.pill.pill-personal,
.pill.pill-personal.pill-personal-event,
.pill.pill-client.pill-work,
.pill.pill-client.pill-meeting {
    font-size: 9px!important;
    width: 65px!important;
    min-width: 65px!important;
    max-width: 65px!important;
}

button.pill.pill-add.pill-work,
button.pill.pill-add.pill-meeting {
    font-size: 9px!important;
    width: 78px!important;
    min-width: 78px!important;
    max-width: 78px!important;
}

.version-banner {
  position: fixed!important;
  top: 0px!important;
  z-index: 30000!important;
}

.toolbar {
  position: fixed!important;
  top: 14px!important;
  z-index: 40000!important;
  width: 100%!important;
}

.page-main {
  margin-top: 50px!important;
  height: calc(100dvh - 50px)!important;
  min-height: calc(100dvh - 50px)!important;
  max-height: calc(100dvh - 50px)!important;
}

/* Keep scroll inside the app; reduce iOS rubber-band refresh triggers */
html, body { overscroll-behavior-y: none; }  /* iOS 16+/modern browsers */
.scroll-container { overscroll-behavior-y: contain; }

.btn.actionbar-btns {
  opacity: 0.85;
}

.pill.pill-personal {
  display: none;
}

.pill.pill-client.pill-work,
.pill.pill-client.pill-meeting {
position: absolute;
pointer-events: none;
background: rgb(41, 55, 105);
color: white;
top: -9px;
left: 4px;
border: 0px solid #fff;
display: inline;
width: auto!important;
padding: 2px 6px;
border-radius: 30px;
font-size: 8px!important;
min-width: 0px!important;
max-width: 300px!important;
}

.task-row.threecols.deadline-row 
 .pill.pill-client.pill-work,
.task-row.threecols.milestone-row 
 .pill.pill-client.pill-work {
position: absolute;
pointer-events: none;
background: rgb(81, 21, 18)!important;
color: white;
top: -12px;
z-index: 5;
left: 4px;
border: 0px solid #fff;
display: inline;
width: auto!important;
padding: 1px 6px;
border-radius: 30px;
font-size: 8px!important;
min-width: 0px!important;
max-width: 300px!important;
}


/* maybe figure out how to know if client chosen */
.input.title-input {
padding: 8px 8px;
}

.task-row .row-left {
  display: flex;
  gap: 5px;
  width: 120px;
}

.pull-loader {
    margin: 60px auto 50px 5%!important;
    width: 90%;

}



/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
}
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 
/* END MOBILE */ 


.btn.btn-event {
  margin-right: 8px;
}

.modal.routines-modal 
.tabs .tab { 
  background: lightgray; 
  color: inherit; 
  border: 0px solid #7F7F7F;
  opacity: .7;
}

.modal.routines-modal 
.tabs .tab:hover { 
  background: lightgray; 
  color: inherit; 
  border: 0px solid #7F7F7F;
  opacity: 1;
}

.modal.routines-modal 
.tabs .tab-active {
  background: black;
  color: white;
  pointer-events: none;
  border: 0px solid #7F7F7F;
  opacity: 1;
}


/* PWMA chips and add task chips START */ 

.kind-chip {
  display:inline-flex;
  position: absolute;
  align-items:center;
  justify-content:center;
  width: 14.5px;
  max-width: 14.5px!important;
  height: 15px;
  left: -18px;
  top: 50%;
  padding-right: 1px;
  bottom: auto;
  margin-top: -9px;
  border-radius:50%;
  font: 600 8.5px/1 Inter,sans-serif;
  background:#eef;
  border: 2px solid #ccd;
  margin-right:6px;
  font-style: italic;
  cursor: pointer;
  z-index: 5000;
  color: white;
}


.addbar {
    display: flex;
    flex-direction: row;
    background-color: white;
    width: auto;
    height: 40px;
    border-radius: 10px;
    }

.addbar.addbar--portal {
    border: 1px solid lightgray!important;
    padding: 0px 0px 10px 0px;
}


.btn.btn-addtask-trigger {
    color:#000;
    background-color: transparent;
    padding: 0px!important;
    border-radius: 100px;
    border: 1.5px solid black;
    font-size: 24px;
    font-weight: 100;
    max-width: 26px;
    min-width: 26px;
    max-height: 26px;
    min-height: 26px;
    padding: 0px;
    opacity: .5;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;

}

.btn.btn-addtask-trigger:hover {
    opacity: 1.0;
}

.addtaskbtn-pluschild {
    font-size: 18px;
    line-height: 100%;
}

.btn.addbar-btn{
  background-color: transparent;
  color: black;
  font-size: 9px;
  min-width: 42px;
}

.kind-chip.add-bar-chip {
position:static; 
  left: 0px;
  margin: 0px;
}

.kind-chip.chip-w { background:#DEEBF7; border-color:#9CC3E7; color:#245DD6}
.kind-chip.chip-p { background: #F0EAFF; border-color: #C7B9E6; color:#785ABF }
.kind-chip.chip-m { background: #1d4ed8; border-color: #1d4ed8; }
.kind-chip.chip-e { background: #785ABF; border-color: #785ABF; }
.kind-chip.chip-d { background: #e7e7e7; border-color: #a3a3a3; color:#727274}
.kind-chip.chip-c { background: #efe9cc; border-color: #d3c878; color:#948c51 }

/* PWMA chips END */ 


/* ACTION BAR START */ 

.tr-actions { 
  position: relative;
  z-index: 3000;
  height: 18px;
}

.btn.showactionbar { 
  position: relative;
  padding: 0px!important;
  margin: 0px!important;
  z-index: 1;
  padding: 0px;
  background-color: transparent;
}

.action-bar-drawer {
  background-color: white;
  display: flex;
  flex-direction: row;
  position: absolute;
  height: 42px;
  right: -14px;
  top: -12px;
  z-index: 500;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.vertical-gradient-divider {
  height: 100%;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  background: linear-gradient(to bottom, white, lightgray,white );
}

.btn.actionbar-btns {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  color: black;
  height: 100%;
  padding-left: 3px;
  padding-right: 3px;
  font-size: 8px;
  min-width: 50px;
  opacity: 0.7;
}

.btn.actionbar-btns:hover {
  opacity: 1.0;
}

.btn.actionbar-btns.close-action-bar {
   min-width: 45px;
   width: 45px;
   font-size: 16px;
}

.addbar-close {
  background: white;
  color: rgba(0, 0, 0, 0.508);
  width: 30px;
  border-radius: 0px 10px 10px 0px;
}

.addbar-close:hover {
  background: white;
  color: black;
}

.action-icon-spacer { height: 2px;}

/* ACTION BAR END */ 

.go2today {
  position: absolute;
  font-size: 14px;
  top: auto;
  left: 30px;
  right: auto; 
  bottom: 15px;
  padding: 6px 12px!important;
  border-radius: 100px;
  z-index: 5;
  width: auto;
  color: #ED7D31;
  background: white;
  opacity: .85;
  box-shadow: 0px 4px 20px 0px rgba(2, 6, 23, 0.4);
  @media (max-width: 820px) {
      top: auto;
      left: auto;
      right: 20px; 
      bottom: 15px;
      padding: 6px 12px;
  }
}

.go2today:hover {
  background: #ED7D31;
  color: white;
  opacity: 1.0;
}




/* Full-screen modal shell that sits above header */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300000; /* above header */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop > .modal {
  width: calc(100vw - 100px);
  height: calc(100dvh - 100px);
  margin: 50px;
  background: #fff;
  border-radius: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}



/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */

/* --- Global Adaptive Control Center Positioning --- */

.adaptive-control-center {
    /* Base style: Hidden by default and ready for fixed positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px; /* Base padding */
    gap: 12px;
    z-index: 5000;
    font-size: 12px;

    /* NEW: Set desktop defaults here */
    position: relative; /* Default/Desktop position */
    width: auto;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    color: white; /* Default/Desktop text color */
}

.view-toggle {
    cursor: pointer;
    display: flex!important;
    justify-content: center;
    font-size: 12px;
    width: 90px;
  }

/* --- DESKTOP HEADER STYLES (Above Mobile Breakpoint) --- */

@media (min-width: 821px) { 
    /* 1. Ensure the placeholder div is visible */
    .headnav .center {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%; /* Important for centering child */
    }

    /* 2. Position the AdaptiveControlCenter inside the header */
    .adaptive-control-center {
        /* OVERRIDE mobile fixed positioning */
        position: relative; 
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
        height: auto;
        
        /* HEADER AESTHETICS (from image analysis) */
        background-color: transparent;
        box-shadow: none; /* Remove footer shadow */
        
        /* ENSURE WHITE TEXT/ICONS ON DESKTOP */
        color: white; /* White text for all children */
    }

    /* 3. Hide the component at the root level (where it sits for the fixed mobile footer) */
    .edward-productivity-tool > .adaptive-control-center {
      /* Re-applying display: none to the root-level component only
         The one nested in the header will remain visible via the cascade */
      display: none; 
    }
    
    /* 4. EXPLICITLY SHOW the one inside the desktop anchor */
    .desktop-control-center-anchor .adaptive-control-center {
        display: flex; /* Make it visible and use flex layout */
    }
    
    /* Target all buttons/icons within the header */
    .adaptive-control-center .icon-btn {
        color: white; /* White icon color */
    }

          .drive-status-wrapper {
              display: flex;
              flex-direction: row;
          }

          .drive-status-border-line {
              background: linear-gradient(90deg, white, black, white);
              height: 100%;
              width: 1px;
          }
  }


/* --- MOBILE FOOTER STYLES (Default / Below Desktop Breakpoint) --- */

@media (max-width: 820px) { /* Adjust breakpoint as needed */
    .adaptive-control-center {
        /* FIXED FOOTER POSITIONING */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 20px;
        color: white;
        margin: 30px 15px;
        width: auto;
        height: 50px; /* Set a height for the footer */
        padding: 8px 16px; /* Increased padding for mobile touch targets */
        background: linear-gradient(90deg, #6f3ff2, #3374ff);
        /* FOOTER AESTHETICS (from image analysis) */
        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3); /* Shadow for lift */

        
        /* ENSURE DARK TEXT/ICONS ON MOBILE */
        color: white; /* Dark text for all children */
    }

    /* Target all buttons/icons within the footer */
    .adaptive-control-center .icon-btn {
        
    }
    
    /* Ensure the adaptive center doesn't show in the header on mobile */
    .headnav .center {
        display: none;
    }

    /* The new logic for scrolling behavior: */
    
    /* 1. Hide the toolbar/header when scrolling down */
    .edward-productivity-tool.is-footer-visible .toolbar {
        display: none;
    }
    
    /* 2. Show the adaptive component when scrolling down */
    .edward-productivity-tool.is-footer-visible .adaptive-control-center {
        /* No change needed here, it's already position: fixed */
    }

    /* 3. Hide the adaptive component when scrolling up (header visible) */
    .edward-productivity-tool:not(.is-footer-visible) .adaptive-control-center {
        display: none !important; /* HIDE the component when header is visible */
    }
    
}

/* --- View Toggle Button Specifics (Color Switch) --- */
/* You will need to make sure the pill-btn's text and icon colors inherit */

.view-toggle-text {
  /* Inherits color */
}

/* Placeholder for your Timeline/Queue icons */
/* Assuming the SVG is set to currentColor, only the CSS `color` property is needed on the parent */
.view-toggle-timeline-icon[data-active="true"],
.view-toggle-queue-icon[data-active="true"] {

  /* You may want to define a specific active color here, 
     e.g., a bright purple, which will override the black/white parent color. */
}

.view-toggle-queue-icon {
  padding-top: 1px;
}


/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */
/* --- NEW CSS FOR THE HEADER/FOOTER --- */




/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */
/* ------------- START ----------------- */


.avail-bar {
  position: relative;
}

/* label stays left, leave room for + and add-bar
.avail-bar .avail-label {
  padding-right: 120px; 
*/

/* the little (+) pill */
.gap-add-trigger {
  position: absolute;
  background: transparent;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #10b981;
  font-weight: 100;
  color: #10b981;
  cursor: pointer;
  font-size: 22px;
  line-height: 0;
  padding: 0px 0px 3px 0px;
}

.gap-add-trigger:hover {
  border: 1px solid #10b981;
  background: white;
  color: #10b981;
}

/* the P/W/M/A row */
.gap-addbar {
  position: absolute;
  top: 50%;
  right: 6px;
  max-height: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 2px 6px 15px 6px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  gap: 4px;
  z-index: 5;
}

/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* -------------- END ------------------ */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */
/* --- NEW CSS FOR THE GAP (+) BAR --- */



.actionbar-svg-icons {
 min-height: 19px;
 padding: 1px;
 margin-bottom: 3px;
}

/* same padding-right on both buttons so label stays visually centered */
.privacy-toggle-btn {
  padding-right: 14px; /* adjust as needed */
}

.privacy-label-and-tick {
 display: flex;
 flex-direction: row;
 margin-left: 7px;
}

/* small space between word and tick */
.privacy-tick {
  display: inline;
  margin-left: 1px;
}
.privacy-label {
  display: inline;
}

	.avail-bar  {
		z-index: 1;
		}

/* ——— timeline on mobile ——— */
/* ———       START      ——— */
/* ——— timeline on mobile ——— */
@media (max-width: 820px) {

  .split-pane.timeline .card {
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px !important;
	}

    .card-day > header {
		border-radius: 0px;
		padding-left: 10px !important;
	}

  .mmmdd-header { font-size: 18px!important;}
  .dayofweek-header { display: inline-block; margin-bottom: 0px; font-size: 10px!important; width: 100%; text-align: center;}

	.card-day::before {
		width: 0px;
		}

  .avail-bar.extended,
  .avail-bar.emergency,
  .avail-bar.available,
	.avail-bar  {
		margin-left: 16px !important;
		margin-right: 6px !important;
		}

    .task-wrap  {
		margin-left: 10px !important;
		margin-right: 6px !important;
		}

   .split-pane.timeline .card {
  		background: #fff;
		}

   .toolbar {
      margin: 0px 0px 0px 0px!important;
      padding: 14px 15px 0px 10px!important;
      top: 0px!important;
      width: auto!important;
   }

    .taskwand-version-number p {
      white-space: nowrap;
    }

   .scroll-container.thin-scrollbar {
      background: white;
    }
  }
  /* ——— timeline on mobile ——— */
  /* ———     END.     ——— */ 
/* ——— timeline on mobile ——— */


  .avail-bar.extended,
  .avail-bar.emergency,
  .avail-bar.available,
	.avail-bar  {
		margin-left: 16px !important;
		}

    .task-wrap  {
		margin-left: 4px !important;
		}

    .card.card-day {
      padding-right: 4px;
      margin-right: 22px!important;
    }

    .handle {
      left: 1px;
      position: absolute;
    }

/* Make sure the day card is a positioning context for the pill + line.
   (You may already have this.) */


  .card-day {
    position: relative;
  }

  .split-resizer {
    justify-content: left;
  }
  .split-panes.horizontal .split-resizer {
    width: 12px !important;
  }



    .toolbar {
      margin: 0px 8px 0px 17px;
      padding: 14px 15px 0px 10px!important;
      top: 0px!important;
      width: auto!important;
    }

    .taskwand-version-number p {
      font-size: 8px!important;
      white-space: nowrap;
    }

     .search {
      margin-left: -2px!important;
      margin-right: -8px!important;
    }


/* Remaining-time pill on the right */
.now-remaining-pill {
  z-index: 5;
  margin-right: 36px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  background: #ED7D31;      /* same as TODAY_COLOR */
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* Outer "now" task row (gradient border is set inline) */
.task-row.threecols.taskrow-now {
  padding: 2px!important;
  position: relative;
}

/* Inner white container wrapping .row-left / .row-mid / .row-right */
.taskrow-now-white-container {
  background: #fff;
  display: flex;
  flex-direction: row;
  border-radius: 11px;
  width: 100%;
  padding: 8px 10px; /* adjust to match your original .threecols padding */
}

.taskrow-now-white-container .row-left,
.taskrow-now-white-container .row-mid,
.taskrow-now-white-container .row-right {
}


.modal.routines-modal {
  position: relative;        /* you already had this inline */
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.routine-header {
  flex: 0 0 auto;
}

.routine-tabs {
  flex: 0 0 auto;
}

.modal.routines-modal .tabs {

}

/* The section that contains scroll area + footer */
.routines-scroll-and-buttons {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;            /* fill remaining space in modal */
  min-height: 0;             /* critical so inner flex child can scroll */
}

/* This is the scrollable region */
.routines-scroll-window-wrapper {
  flex: 1 1 auto;            /* take all space above footer */
  min-height: 0;             /* allows it to shrink and scroll */
  overflow-y: auto;          /* scroll here */
  align-self: stretch;       /* full width */
}

.routines-scroll-window {
  display: flex;
  flex-direction: column;
  gap: 12px;                 /* or your stack-4 spacing */
  padding-right: 4px;        /* small buffer for scrollbar if you want */
}

.routines-footer-buttons {
  flex: 0 0 30px;            /* reserves ~30px of height */
  margin-top: 8px; 
  padding-top: 10px;          /* small gap above */
  justify-content: center;
  gap: 8px;
  border-top: 1px solid lightgray;
}

 .save-routine {
  width: 136px;
  font-size: 11px;
  margin: 0px;
  background: #555;
 }

 .apply-routine{
  width: 200px;
  font-size: 11px;
  margin: 0px;
  background: black;
 }
 
  .routines-scroll-window 
  .text-muted {
    margin-top: -12px;
    font-size: 11px!important;
  }

   .routines-scroll-window 
   .row.wrap {
    padding: 16px 0px;
    
    border-top: 1px solid lightgray;
  }

    .btn.btn-danger.delete-routine-row {
      min-width: 40px;
     }

  @media (max-width: 820px) {
 
              .modal.routines-modal .tabs {
                  gap: 2px;
                }

              .modal.routines-modal .tabs .tab {
                font-size: 18px!important;
                padding: 6px 9px; 
                border-radius: 5px;
              }

              .btn.close-routines-modal {
                width: 30px;
              }

              .modal.routines-modal {
                  margin: 15px!important;
                  }

          }


    .drive-account-label {
      margin-top: 10px;
      font-size: 11px;
      color: gray;
      }
    
    .drive-logout-btn {
    margin-top: 5px;
    margin-left: 0px;
    font-size: 12px;
    padding: 4px 16px!important; 
    background-color: #e04444;
    }



        
/* gdrive login process -- */
/* gdrive login process -- */
/* START START START -- */

.headnav {
   padding: 0px 5px!important;
}

.adaptive-control-center {
  padding: 0px 5px !important;
  display: flex;
  gap: 0px;
  flex-direction: row;
  align-items: stretch !important; /* children (incl. drive-status-wrapper) match row height */
}

  @media (max-width: 820px) {
    .adaptive-control-center {
      padding: 0px 0px !important;
    }
   }

.history-control {
  display: flex;
  flex-direction: row;
}


.icon-btn.stack.undo-redo {
  gap:0px;
  padding: 4px 2px 4px 6px!important;
}

.view-toggle {
  width: 80px!important;
}

.view-toggle {
  width: 80px!important;
}

.tw-footer-grid 
.view-toggle {
  min-width: calc((100vw - 30px) / 5 )!important;
  max-width: calc((100vw - 30px) / 5 )!important;
}

.burger-icon-footer {
  font-size: 21px; 
  line-height: 1;
  margin-top: -3px;
}


.tw-footer-grid 
.icon-btn.stack {
  min-width: calc((100vw - 30px) / 8 )!important;
  max-width: calc((100vw - 30px) / 8 )!important;
  padding-left: 0px!important;
  padding-right: 0px!important;
  margin-left: 0px!important;
  margin-right: 0px!important;
  height: 100%;
  font-size: 10px;
  font-weight: 300;

}

.tw-footer-card.is-mode2 
.tw-footer-grid 
.icon-btn.stack {
  min-width: calc((100vw - 30px) / 6 )!important;
  max-width: calc((100vw - 30px) / 6 )!important;
}

.icon-btn.stack.tw-footer-flip-btn {
  min-width: calc((100vw - 30px) / 6 )!important;
  max-width: calc((100vw - 30px) / 6 )!important;
}

.view-toggle-inner {
  gap: 0px!important;
}


.edward-productivity-tool.is-footer-visible 
.adaptive-control-center {
   padding: 0px 0px;
  }

.edward-productivity-tool.is-footer-visible
.view-toggle-text {
  font-size: 10px;
}

.edward-productivity-tool.is-footer-visible
.icon-btn.stack.undo-redo {
  font-size: 10px;
}

.desktop-control-center-anchor .adaptive-control-center {
  display: flex;
  flex-direction: row;
  align-items: stretch !important;
}


.headnav .left {
  margin: 5px 0px 5px 10px;
  }

  .headnav .right {
  margin: 0px 10px 0px 0px;
 }


.headnav .center {
  align-items: stretch!important;
  }

.drive-status-wrapper {
  padding: 0px 10px 0px 10px;
  width: 190px;

  /* KEY CHANGES */
  display: flex;
  flex-direction: row;      /* was column – this blocked vertical stretch */
  align-items: stretch;     /* make children (drive-status) fill this band */
  align-self: stretch;      /* let THIS wrapper fill the header row height */

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05)
  );
}

.drive-status-subsubtitle {
  font-size: 8px;
  opacity: 0.5;
  text-transform: uppercase;
  font-weight: 500;
}

.drive-status-svg-connected, 
.drive-status-svg-basic {
  max-height: 15px;
  min-height: 15px;
  height: 15px;
}

.drive-status {
  display: flex;
  flex-direction: row;
  flex: 1;                  /* let it use the horizontal space in the wrapper */
  justify-content: space-between;
  align-items: center;      /* vertical centering inside this band */
}

.tw-footer-drive .drive-status { height: 100%; }

.drive-status-text {
  display: flex;
  margin-left: 4px;
  flex-direction: column;
  justify-content: center;  /* actually centers the two lines vertically */
}

.edward-productivity-tool.is-footer-visible 
.drive-status-wrapper {
  width: 200px;
  padding: 0px 5px 0px 3px;
}
.edward-productivity-tool.is-footer-visible 
.drive-status-subsubtitle {
  font-size: 7px;
  opacity: 0.5;
}

.drive-status-title {
font-weight: 600;
font-size: 12px;
}


.edward-productivity-tool.is-footer-visible 
.drive-status-title {
font-size: 10px;
}


.drive-status-subtitle {
  font-size: 9px;
  opacity: .5;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-subtitle {
font-size: 9px;
}


.drive-status-icon-section {
 width: 20px;
 display: flex;
 align-items: center;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-icon-section {
 width: 18px;
}

.drive-status-pill {
  display: flex;
  flex-direction: row;
  justify-content: left;
  background: transparent;
  margin: 0px!important;
  padding-right: 0px!important; 
  text-align: left!important;
  border: 0px solid transparent;
}

.drive-status-pill:hover {
  background: transparent;
}

.tw-footer-drive .drive-status-pill {
  height: 100%;
  min-width: calc( (100vw - 30px) / 3 )!important;
  max-width: calc( (100vw - 30px) / 3 )!important;
}

.view-toggle-inner {
 gap: 0px;
 }

.drive-status-action {
  padding: 0px 4px 0px 3px;
  margin: 0px;
  height: 30px;
  max-width: 160px;
  display: flex;
  flex-direction: row;
  align-content: center!important;
  background: #ffffff24;
  -webkit-appearance: none;       /* kill iOS default button styling */
  appearance: none;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action {
  -webkit-appearance: none;       /* kill iOS default button styling */
  appearance: none;
  align-content: center!important;
  justify-content: center!important;
  border-radius: 12px;
}

.actionbar-svg-icons.gdrive-login-icons {
 max-height: 12px;
 min-height: 12px;
 padding: 0px;
 margin: 9px 5px 0px 2px;
}

.edward-productivity-tool.is-footer-visible 
.actionbar-svg-icons.gdrive-login-icons {
 max-height: 10px;
 min-height: 10px;
 margin: 10px 3px 0px 2px;
}


.actionbar-svg-icons.gdrive-login-icons.sync-btn-icon {
 max-height: 10px!important;
 min-height: 10px!important;
 margin: 10px 4px 0px 2px;
}

.edward-productivity-tool.is-footer-visible 
.actionbar-svg-icons.gdrive-login-icons.sync-btn-icon {
 max-height: 8px!important;
 min-height: 8px!important;
 margin: 11px 3px 0px 2px;
}

.drive-status-action-text {
text-align: left;
display: flex;
-webkit-appearance: none;       /* kill iOS default button styling */
appearance: none;
flex-direction: column;
align-content: center!important;
align-self: center!important;
justify-content: center;
}

.drive-status-action-main {
  font-size: 10px;
  align-self: center!important;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action-main {
  font-size: 9px;
  align-self: center!important;
}

.drive-status-action-sub {
  font-size: 8px;
  opacity: .65;
}

.edward-productivity-tool.is-footer-visible 
.drive-status-action-sub {
  font-size: 7px;
}


/* === DriveStatus: Busy button animation ============================ */

.drive-status-action--busy {
  position: relative;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: none;
}

/* rotating gradient border ring */
.drive-status-action--busy::after {
  --tw-rotate-angle: 0deg;   /* animated custom property */

  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  padding: 2px;               /* thickness of border */

  /* Gradient whose ANGLE rotates, not the element */
  background: conic-gradient(
    from var(--tw-rotate-angle),
    #9f7fff,
    #00e5ff,
    #9f7fff
  );

  animation: tw-rotate-border 5s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  z-index: 3;
}


/* rotation animation */
@keyframes tw-rotate-border {
  0%   { --tw-rotate-angle: 0deg; }
  100% { --tw-rotate-angle: 360deg; }
}


/* --- DriveStatusControl 3-state (footer) --- */

 

.drive-status.drive-status--footer{
  position: relative;
  overflow: hidden!important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 0px);
  border-radius: 16px;
  background: transparent;
  transition: width 260ms ease, background 260ms ease;

  /* iOS Safari: make overflow clipping reliable (prevents ghost action button bleed) */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 16px);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}


/* Expanded + executing keep the #181818 background */
.drive-status--footer.drive-ui--expanded,
.drive-status--footer.drive-ui--executing{
  background: #181818;
}

.drive-status--footer.drive-ui--expanded{
  width: calc(200% - 4px);
  --twDriveActionW: calc((200vw - 44px) / 3);
}

.drive-status--footer.drive-ui--executing{
  width: calc(100% - 0px);
}

.drive-status--footer .drive-status-pill{
  position: relative;
  z-index: 1;
  height: 100%;
  width:  calc( (100vw -66px) / 3 ) !important;
  min-width: calc( (100vw - 66px) / 3 ) !important;
  max-width: calc( (100vw - 66px) / 3 ) !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  padding: 0px 0px 0px 6px;
}

.drive-status--footer.drive-ui--expanded .drive-status-pill{
  background: transparent;
  z-index: 4; /* keep pill clickable/visible above the big action button */
}

.drive-status--footer.drive-ui--executing .drive-status-pill{
  opacity: 0;
}

.tw-footer-drive  .drive-status-action-btn-container{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  background: transparent;
}

.tw-footer-grid
.drive-status-action-btn-container{
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: baseline;
  justify-content: left;
  padding-left: 5px;
  width: calc((100vw - 30px) / 3 )!important;
  background: transparent;
}

.drive-status--footer.drive-ui--executing  
.drive-status-action-btn-container {
  margin-left: -100%; 
}

.drive-status--footer.drive-ui--executing  
.drive-status-action {
  width: calc(100% - 6px)!important; 
  max-width: calc(100% - 6px)!important;
  min-width: calc(100% - 6px)!important;
}

.drive-status-icon-and-text{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.drive-status--footer .drive-status-icon-and-text{
  justify-content: flex-start;
}

.drive-status--footer .drive-status-action{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  opacity: 0;
  z-index: 2;
  min-width: calc((99vw - 120px) / 3 )!important;
  max-width: calc((99vw - 120px) / 3 )!important;
  width: calc((99vw - 120px) / 3 )!important;
  transition: opacity 180ms ease, left 260ms ease, width 260ms ease, background 260ms ease;
}

.drive-status--footer.drive-ui--expanded .drive-status-action{
  opacity: 1;
  left: 0px;
  padding-left: 5px;
  justify-content: flex-start;
}

.drive-status--footer.drive-ui--executing .drive-status-action{
  left: 0px;
  opacity: 1;
  background: #181818;
}


/* iOS/touch: prevent text selection + ensure the pill behaves like a button */
.drive-status--footer .drive-status-pill,
.drive-status--footer .drive-status-pill *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.drive-status--footer .drive-status-pill{
  touch-action: manipulation;
  cursor: pointer;
}

/* State 1: hidden action button should never intercept taps and should be fully invisible */
.drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.drive-status--footer.drive-ui--status .drive-status-action{
  pointer-events: none;
}

.drive-status--footer.drive-ui--status .drive-status-action{
  opacity: 0 !important;
  visibility: hidden;
}


/* ================= iOS SAFARI DRIVE STATUS FIX ================= */

/* In State 1 (status), the action button must be physically non-interactive */
.drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.drive-status--footer.drive-ui--status .drive-status-action{
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Re-enable only when expanded/executing */
.drive-status--footer.drive-ui--expanded .drive-status-action-btn-container,
.drive-status--footer.drive-ui--expanded .drive-status-action,
.drive-status--footer.drive-ui--executing .drive-status-action-btn-container,
.drive-status--footer.drive-ui--executing .drive-status-action{
  pointer-events: auto !important;
  visibility: visible !important;
}

.drive-status--footer mn{
  /* iOS Safari containment fix */
  contain: layout paint style;
  isolation: isolate;
  will-change: transform;
}

.drive-status--footer,
.drive-status--footer *{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}


/* ================= Desktop: DriveStatus should NOT feel clickable ================= */
@media (min-width: 821px){

.drive-status-pill {
    cursor: default!important;        
    padding-left: 0px!important; 
    }

  button.drive-status--footer .drive-status-pill {
    cursor: default!important;                 /* text-like cursor */        /* no accidental interactions */
  }

  /* in case any child elements override */
  button.drive-status--footer .drive-status-pill *{
    cursor: default!important;
  }

  .drive-status-subtitle {
    font-size: 9px;
  }
}


/* END END END END -- */
/* gdrive login process -- */
/* gdrive login process -- */


.burger-drawer-contents {
   overflow-y: auto;
   padding-bottom: 100px;
  }

/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* START START START START */

/* --- Burger footer section --- */

.download-app-section {
  margin-top: 16px;
  padding: 12px 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.download-app-headline {
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.8;
  margin-bottom: 8px;
}

.download-app-btn {
  width: 100%;
  font-size: 13px;
}

/* --- Modal shell --- */

.download-app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-app-modal {
  width: calc(100% - 32px);
  max-width: 420px;
  background: #ffffff;
  color: #111111;
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.download-app-modal-header {
  margin-bottom: 8px;
}

.download-app-modal-title {
  font-size: 16px;
  margin: 0;
}

.download-app-modal-body {
  font-size: 13px;
  line-height: 1.5;
}

.download-app-modal-body p {
  margin: 6px 0;
}

.download-app-steps {
  padding-left: 18px;
  margin: 8px 0;
}

.download-app-steps li {
  margin-bottom: 6px;
}

.download-app-list {
  padding-left: 18px;
  margin: 6px 0;
}

.download-app-list li {
  margin-bottom: 4px;
}

.download-app-modal-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.download-app-close-btn {
  font-size: 13px;
}

/* --- Icon row --- */

.download-app-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.download-app-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.inline-icon-label {
  font-weight: 500;
}

.download-app-note {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}

/* --- Fake "Add to Home Screen [ + ]" row --- */

.ios-add-to-home-wrapper {
  width: 100%;
  background: #f5f5f5;
  margin-top: 6px;
}

.ios-add-to-home-spacer {
  height: 10px;
}

.ios-add-to-home-row {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #c7c7c7;
  border-bottom: 1px solid #c7c7c7;
  padding: 0 12px;
  font-size: 14px;
  color: #111111;
}

.ios-add-to-home-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #555555;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-add-to-home-plus {
  font-size: 18px;
  line-height: 1;
  color: #444444;
}

/* END END END END */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */
/* PWA Download in Burger Menu */


.card-header-spacer {
  position: absolute;
  height: 65px;
  width: calc(100% + 4px);
  border-radius: 10px 10px 0px 0px;
  border: 1px solid lightgray;
  left: -1px;
  right: 0;
  bottom: 0;          /* grows upward FROM the bottom */
  height: 0px;        /* JS-controlled */
  background: white;   /* match header BG */
  z-index: 1;        /* BEHIND the header content */
  pointer-events: none;
}

/* Content stays in normal flow */
.card-header-content {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0px!important;
}

@media (max-width: 820px) {
  .card-header-spacer {
    border-width: 0px;
    border-radius: 0px;
    width: 100%;
  }
}

.download-app-headline {
  font-size: 16px!important;
  width: 340px;
}

.pill-btn.download-app-btn {
background: linear-gradient(90deg, #6f3ff2, #3374ff)!important;
color: white!important;
text-align: center!important;
width: 170px;
padding-left: 40px;
}


/* =========================================================
   TIMELINE MULTI-SELECT MODE (header/footer bar + circles)
   ========================================================= */


    .ms-bar {
      background: transparent; /* let header/footer gradient show through */
    }

    /* Multi-select actionbar layout */

    .ms-actionbar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 2px;
      background: transparent;
      border-radius: 15px;
      padding: 2.5px;
    }

    .edward-productivity-tool.is-footer-visible 
    .ms-actionbar {
      background: transparent;
      position: static;
      height: auto;
      border: 0px;
      margin-bottom: 0px;
      padding: 0px;
    }

    .edward-productivity-tool.is-footer-visible 
    .adaptive-control-center.ms-bar {
    background: #007872;
    }

                  /* =========================================================
                    DESKTOP HEADER TAKEOVER WHILE IN MULTI-SELECT MODE
                    ========================================================= */

                  .edward-productivity-tool.ms-mode .headnav {
                    background: #007872; /* match ms-actionbar */
                    border-radius: 20px;
                    padding: 3px 0px;
                  }

                  .edward-productivity-tool.ms-mode .headnav .left,
                  .edward-productivity-tool.ms-mode .headnav .right {
                    display: none !important; /* logo/time/projects/search/burger */
                  }

                  .edward-productivity-tool.ms-mode .headnav .center {
                    flex: 1;
                  }

                  .edward-productivity-tool.ms-mode .desktop-control-center-anchor {
                    width: 100%;
                  }


.ms-count {
  min-width: 44px;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  margin-right: 5px;
}
.edward-productivity-tool.is-footer-visible 
.ms-count {
  margin-right: 0px;
}

.edward-productivity-tool.is-footer-visible 
.ms-action-btn.cancel-multi-select {
  margin-left: 0px;
}

.ms-count-top { font-size: 12px; }
.ms-count-bottom { font-weight: 300; font-size: 8px; opacity: 0.9; }

.ms-action-bar-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 3px;
  }

/* Buttons: icon above label, all white */
.ms-action-btn {
  appearance: none;
  border: 0;
  background: #ffffff25;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 5px;
  margin: 1px 0px;
  min-width: 44px;
  opacity: 0.85;
}

.ms-action-btn:hover { 
  opacity: 1; 
  background: #ffffff30;
}

.ms-action-btn:active { transform: translateY(1px); }

.ms-action-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.ms-action-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 300;
  white-space: nowrap;
}

.ms-action-btn.cancel-multi-select {
  background: transparent;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 5px;
}

/* ---- Selection circle + badge ---- */
.ms-circle-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(120,120,120,0.55);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff; /* check uses currentColor */
}

.ms-circle-btn.is-selected {
  border: 0px;
  border-radius: 999px;
  min-width: 20x;
  min-height: 20x;
  width: 20x;
  height: 20px;
  background: #007872;;
}

.ms-circle-check {
  color: #fff;
  position: relative;
  top: -1px;
  left: -1.5px;
}

.ms-circle-badge {
  position: absolute;
  top: -4px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #007872;;
  color: #007872;;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   OUTLINE PRECEDENCE: BLUE MUST WIN over overlap + now
   overlap uses box-shadow inset; now uses special wrapper.
   We enforce both outline + inset shadow, with !important.
   ========================================================= */

.task-row.ms-selected {
  outline: 2px solid #007872!important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}

/* ensure override even if overlap applied */
.task-row.overlap.ms-selected {
  outline: 2px solid #007872 !important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}

/* now-row wrapper case */
.task-row.taskrow-now.ms-selected,
.task-row.threecols.taskrow-now.ms-selected {
  outline: 2px solid #007872 !important;
  outline-offset: -2px !important;
  background: #00787240!important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 2px #007872 inset !important;
}

.bd-multi-toolbar 
.bd-ms-btn { font-size: 10px; background: #151515; padding: 8px 6px!important; margin-left: 0px;}




/* =======================================================================
   PRODUCTION OVERRIDE — DriveStatusControl footer clipping + layout lock
   Paste at VERY BOTTOM of styles.css
   ======================================================================= */

/* Scope hard to the footer slot so we don't disturb other variants */
.tw-footer-drive .drive-status--footer {
  /* hard clipping contract */
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;

  /* keep your reliable iOS/paint clamps even if other rules win */
  border-radius: 16px !important;
  clip-path: inset(0 round 16px) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;

  /* unify sizing math so prod/dev can't "flip" widths */
  --twPillW: calc((100vw - 66px) / 3);
  --twActionW: calc((99vw - 120px) / 3);
}

/* Force pill width to a single truth (prevents prod ordering flips) */
.tw-footer-drive .drive-status--footer .drive-status-pill {
  width: var(--twPillW) !important;
  min-width: var(--twPillW) !important;
  max-width: var(--twPillW) !important;
  position: relative !important;
  z-index: 4 !important; /* stays above the action button when expanded */
}

/* Make the action region an absolute layer INSIDE the root (no layout bleed) */
.tw-footer-drive .drive-status--footer .drive-status-action-btn-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;

  /* starts immediately to the right of the pill */
  left: var(--twPillW) !important;
  right: 0 !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 0 0 6px !important;
  background: transparent !important;

  z-index: 2 !important;
  overflow: hidden !important; /* extra safety */
}

/* Re-author the slide logic using transform (robust) instead of left:100% */
.tw-footer-drive .drive-status--footer .drive-status-action {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  /* OFFSCREEN by default */
  transform: translateY(-50%) translateX(110%) !important;
  opacity: 0 !important;

  width: var(--twActionW) !important;
  min-width: var(--twActionW) !important;
  max-width: var(--twActionW) !important;

  transition:
    transform 260ms ease,
    opacity 180ms ease,
    width 260ms ease,
    background 260ms ease !important;

  z-index: 2 !important;
}

/* State 2: expanded — slide in */
.tw-footer-drive .drive-status--footer.drive-ui--expanded .drive-status-action {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* State 3: executing — action slides over pill as the control shrinks */
.tw-footer-drive .drive-status--footer.drive-ui--executing .drive-status-action-btn-container {
  left: 0 !important;          /* action layer now starts at far left */
  padding-left: 0 !important;
}

.tw-footer-drive .drive-status--footer.drive-ui--executing .drive-status-action {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;

  width: calc(100% - 6px) !important;
  min-width: calc(100% - 6px) !important;
  max-width: calc(100% - 6px) !important;

  background: #181818 !important;
}

/* State 1: status — absolutely guarantee it can't show or intercept */
.tw-footer-drive .drive-status--footer.drive-ui--status .drive-status-action-btn-container,
.tw-footer-drive .drive-status--footer.drive-ui--status .drive-status-action {
  pointer-events: none !important;
  visibility: hidden !important;
}
/* src/styles/BacklogDrawer.css */



/* timeline>backlog dropzone */

.dropzone-overlay {
	position: absolute;
	z-index: 20; 
	height: 100%;
  	width: 100%;
  	display: flex;
  	flex-direction: column;
	color: white;
	text-align: center;
	align-items: center;
  	justify-content: center;
	font-size: 24px;
	opacity: .5;
	}
.dropzone-overlay.allowed { background: green; }

.dropzone-overlay.disallowed { background: red; }


/* container */
.backlog-drawer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* header */
.bd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0px 16px;
  border-bottom: 1px solid #ededed;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}

.header-left { display:flex; align-items:center; gap:8px; }
.header-right { display:flex; align-items:center; gap:8px; }

/* autosched */
.autosched-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e6eefc;
  background: linear-gradient(180deg,#fff,#fbfdff);
  font-weight: 600;
}
.autosched-arrow { color: black; font-size: 14px; transform: rotate(0deg); }
@media (max-width: 720px) {
  .autosched-arrow {color: black; transform: rotate(-90deg); } /* mobile: arrow points up */
}
.autosched-label {font-size: 12px; color: #0f172a; }

/* header view toggle */
.view-toggle { display:flex; gap:6px; align-items:center; }
.vt-btn {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.vt-btn.active { background: #eef2ff; border-color: #cfe3ff; font-weight: 700; }

/* scroll area */
.bd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  Margin: 0px;
  margin-top: -1px;
  overflow: auto;
  padding: 0px 0px 125px 0px !important;
  padding-bottom: 125px !important;
  transition: padding 170ms ease;
  will-change: padding;
}

.bd-scroll.is-header-gap-open {
  padding: 70px 0px 125px 0px !important;
}


.subcats-group-style {
  padding-right: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  transition: padding-bottom 170ms ease;
  will-change: padding-bottom;
}

.subcats-group-style.is-dropgap-open {
  padding-bottom: 50px;
}

/* group header */
.bd-group-header {
  display: block;
  margin-bottom: 0px;
  border-top: 1px solid #00000012;
}
.bd-group-row {
  padding-left: 8px;
  Padding-right: 8px;
  display:flex;
  align-items:center;
  gap: 2px;
}
.bd-group-header.is-personal { background: transparent; }
.bd-group-header.is-work { background: transparent; }

.bd-group-input {
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 700;
  padding: 0px 0px;
  margin: 3px;
  background: transparent;
  width: 100%;
  min-width: 0;
  Border-radius: 0px;
}

.bd-group-input:focus {
  border: 1px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}


.close-todo {margin: 0px;}

/* left small button that toggles group cat */
/* base */
.bd-group-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #e6eefc;
  margin-top: 5px;     /* fixed casing */
  margin-bottom: 5px;     /* fixed casing */
  margin-right: 5px;     /* fixed casing */
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  padding: 0 0px;
  white-space: nowrap;
  overflow: hidden;
  transition: background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* label inside button */
.bd-group-toggle .bd-toggle-letter {
  display: inline-block;
  line-height: 1;
  transition: color .12s ease, transform .12s ease;
}

/* default colors (keep as-is) */
.bd-group-toggle--personal { color: #7F4ED1; }
.bd-group-toggle--work     { color: #2c539e; }

/* hover text (visual) — uses data-hover */
.bd-group-toggle::after {
  white-space: pre-line;   /* preserve newline characters from the data attribute */
  line-height: 1.25;
  text-align: center;
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  border-radius: inherit;
}

/* reveal pseudo label and hide original label on hover/focus for non-locked */
.bd-group-toggle:not(.is-locked):hover .bd-toggle-letter,
.bd-group-toggle:not(.is-locked):focus-visible .bd-toggle-letter {
  color: transparent;
}

.bd-group-toggle:not(.is-locked):hover::after,
.bd-group-toggle:not(.is-locked):focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  font-size: 8.5px;
  Font-weight: 700;
  line-height: 1;
}

/* variant backgrounds on hover */
.bd-group-toggle--personal:not(.is-locked):hover  { background: #2c539e; border-color: #2c539e; }
.bd-group-toggle--work:not(.is-locked):hover      { background: #7F4ED1; border-color: #7F4ED1; }

/* keyboard focus ring (accessible) */
.bd-group-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.14);
}

/* LOCKED state: no hover visuals, default cursor */
.bd-group-toggle.is-locked {
  cursor: default;
}
.bd-group-toggle.is-locked::after {
  display: none;
}
.bd-group-toggle.is-locked:hover .bd-toggle-letter,
.bd-group-toggle.is-locked:focus-visible .bd-toggle-letter {
  color: inherit; /* keep visible label */
}
.bd-group-toggle.is-locked:hover,
.bd-group-toggle.is-locked:focus-visible {
  background: #fff;
  border-color: #e6eefc;
  box-shadow: none;
}

.bd-group-toggle.is-locked {
	background: #f2f2f2;
	Border-color: #f2f2f2;
	pointer-events: none;
	}

.bd-group-toggle:disabled { opacity: 0.6; cursor: default; }

/* small group actions container (autosched btn) */
.bd-group-actions { margin-left: 8px; }

/* items list */
.bd-items {
  padding-left: 8px;
  padding-right: 16px;
  padding-bottom: 20px;
}

/* item card */
.bd-item {
  border-radius: 8px;
  background: transparent;
  padding: 0px;
  margin: 2px 0;
  display:block;
}

.bd-row {
  display:flex;
  Align-items:flex-start;
  gap: 2px;
  min-width: 0;
}

/* W/P circle (left of task) */
.wp-circle {
  cursor: grab;
  display:inline-grid;
  place-items:center;
  width:18px; height:18px;
  Margin-top: -1px;
  border-radius:50%;
  font-weight:500;
  font-size:12px;
  Margin-right: 18px;
  padding: 0.5px;
  text-align: center;
  flex: 0 0 auto;
}
.wp-personal {
  color:#7F4ED1;
  border: 1px solid rgba(127,78,209,0.14);
  background: rgba(127,78,209,0.04);
}
.wp-work {
  color:#2c539e;
  border: 1px solid rgba(44,83,158,0.10);
  background: rgba(44,83,158,0.03);
}

.bd-task-input-holder {
  width: 100%;
  display: block;
  position: relative; 
}


/* hidden mirror used to measure the first line width */
.bd-measure {
  position: absolute;
  left: 0; top: -9999px;   /* off-screen */
  visibility: hidden;
  white-space: pre;         /* preserve spaces; no wrapping */
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 0;
  border: 0;
}


/* duration input on right */
.bd-dur-input {
  width: 45px;
  font-size: 14px;
  max-width: 65px;
  text-align: right;
  padding: 0px 1px;
  border-radius: 3px;
  border: 0px solid white;
  flex: 0 0 auto;
  background: transparent!important;
}

.bd-task-input:focus {
  border: 0px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}

.bd-dur-input:focus {
  border: 0px solid #fff;
  outline: none !important;
  box-shadow: none !important;
}

/* small meta under flattened rows */
.bd-meta-small { position: relative; font-size: 9px; color: #6b7280; margin-top: -3px; padding: 0px 0 0 91px; }

/* flattened list item style (non-draggable view) */
.bd-flat .bd-item.flat { padding: 8px 8px 6px; border: 1px solid #f1f5f9; border-radius: 8px; margin-bottom:8px; }


/* ghost overlays */

.bd-ghost {
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed #c7d2fe;
  background: #fff;
}

.bd-ghost--item { 
	min-width: 160px; 
	background: #fff; 
	opacity: 0; 
	}

.bd-ghost--group { 
	min-width: 220px; 
	font-weight: 700; 
  height: 100px!important;
	background: #eef2ff; 
	}

.bd-group.ghost .bd-group-header { 
	background: white; 
	display: flex;
	align-items: center;
  position: relative;
  top: -40px!important;
	}

.bd-group.ghost .input.input-ghost.bd-group-input {
	padding-left: 30px;
	}

/* tiny utility */
.input[readonly] { opacity: 0.9; }

/* per-item autoschedule button (left of WP circle) */
.autosched-item-btn {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  max-width: 19px;
  width: 20px;
  height: 18px;
  border-radius: 3px;
  border: 0px solid #e6eefc;
  background: blue;
  padding: 0;
  Padding-top: 0px;
  Padding-bottom: 8px;
  margin-right: 2px;
  margin-bottom: 0px;
  margin-top: 0px;
  cursor: pointer;
  font-weight: 700;
  color: white;
  font-size: 24px;
}

.autosched-item-btn:hover { box-shadow: 0 2px 6px rgba(19,38,73,0.06); }

.autosched-icon { 
	font-size: 22px; 
	transform: rotate(40deg); 
 	 Padding-bottom: 4px;
 	 Padding-right: 4px;
 	 margin-top: -4px;
	}

.bd-native-drag-handle {
	background: transparent;
	display: inline-block;
	border: 0px solid #e6eefc;
	color: lightgrey;
 	border-radius: 3px;
	font-size: 16px; 
	width: 17px; 
	min-width: 17px; 
	height: 18px; 
	margin-right: 7px;
	margin-left: 2px;
	cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
  touch-action: none;
	text-align: center;
 	margin-top: 0px;
	}

  .bd-group-drag-handle {
	background: transparent;
	display: inline-block;
	border: 0px solid #e6eefc;
	color: lightgrey;
 	border-radius: 3px;
	font-size: 20px; 
	width: 17px; 
	min-width: 17px; 
	height: 24px; 
	margin-right: 8px;
	margin-left: 2px;
	cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
  touch-action: none;
	text-align: center;
 	margin-top: 0px;
	}


/* mobile rotate */
@media (max-width: 720px) {
  .autosched-icon { transform: rotate(-90deg); } /* arrow points up on mobile */
}

/* compact select style (small dropdown) */
.vt-select {
  border: 1px solid #e6eefc;
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}


.bd-collapse { 
	color: gray;
	background: transparent;
	font-size: 10px; 
	height: 20px;
	margin: 0px;
	padding: 0px 2px;
	margin-right: 0px;
	width: 70px;
	min-width: 70px;
	}
.bd-collapse:hover {color: #111; background: transparent;}
.bd-collapse .show-tasks { color: blue; }
.bd-collapse .show-tasks-sm { color: blue;  font-size: 9px;}


/* Backlog textarea — single, consolidated rule */
.input.input-ghost.bd-task-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  

  /* Let JS control the height */
  height: auto;              /* ← drop the !important */
  min-height: 24px;

  overflow: hidden;
  resize: none;

  line-height: 1.05;
  font-size: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;

  padding: 4px 5px;
  background: transparent;
  border: 0px solid white;
  border-radius: 3px;
  margin-top: -2px;
}

.input.input-ghost.bd-task-input.is-multi-selected {
Background: #EED5F0;
}

.bd-row { display: flex; align-items: flex-start; }

.bd-item {
  Margin-bottom: 0px;
}

.bd-group-header.is-personal
.bd-group-input[data-general="true"] {
  color: #7F4ED1; /* mid-gray for the two General groups */
}

.bd-group-header.is-personal
.bd-group-input {
  color: #7F4ED1; /* mid-gray for the two General groups */
}

.bd-group-header.is-work
.bd-group-input {
  color: #2c539e; /* mid-gray for the two General groups */
}

.bd-group-header.is-work
.bd-group-input[data-general="true"] {
  color: #2c539e; /* mid-gray for the two General groups */
}

.bd-no-tasks {
  color: #9ca3af;        /* light gray */
  font-style: italic;
  font-size: 10px;
  width: 70px;
  text-align: right;
  user-select: none;
}

.bd-item.ghost .bd-task-ghosttext {
  white-space: pre-wrap;
  Padding-right: 0px;
  Padding-left: 0px;
  overflow: visible;     /* ensure no clipping */
  Border-width: 0px;
  Width: calc( 100% + 10px );
  Margin-left: -5px;
}

/* Ensure subcats can receive hover during drag */
.subcats-group-style {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* GroupGap: layout-neutral wrapper + floating hitbox */
.bd-group-gap {
  position: relative;
  height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  transition: height 0.15s ease, opacity 0.15s ease;
}

.bd-group-gap-hit {
  pointer-events: auto;   /* hitbox captures hover */
  position: absolute;
  left: 0;
  right: 0;

  /* “inactive” thin zone */
  top: -6px;
  height: 12px;

  border-radius: 6px;
  box-sizing: border-box;

  background: transparent;
  border: 1px dashed transparent;

  transition: top 150ms ease, height 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.bd-group-gap-hit.is-active {
  /* “active” expanded zone */
  top: -21px;
  height: 42px;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
}


/* Hover-activated (visible) gap */
.bd-group-gap--active {
  height: 42px;
  opacity: 1;
  pointer-events: auto;
}

/* Optional subtle highlight */
.bd-group-gap--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px dashed rgba(59, 130, 246, 0.35);
}


 .bd-group-actionbar{
          position:absolute;
          left:0;
          top:50%;
          transform:translateY(-50%);
          display:flex;
          gap:6px;
          padding:4px 6px;
          background:#fff;
          color:#000;
          border:1px solid rgba(0,0,0,.15);
          border-radius:10px;
          box-shadow:0 6px 18px rgba(0,0,0,.18);
          z-index: 9999;
          align-items:center;
          white-space:nowrap;
        }

        .bd-check-circle {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid #d1d5db;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          cursor: pointer;
          flex-shrink: 0;
          transition: all 0.1s ease;
        }

        .bd-check-circle span,
        .bd-check-circle svg {
          width: 12px;
          height: 12px;
          opacity: 0;
          transform: scale(0.8);
          transition: all 0.1s ease;
          color: white;
        }

        .bd-check-circle.selected {
          background-color: #2563eb;
          border-color: #2563eb;
        }

        .bd-check-circle.selected span,
        .bd-check-circle.selected svg {
          opacity: 1;
          transform: scale(1);
        }

        .bd-check-circle:hover {
          border-color: #9ca3af;
        }

        /* --- Row highlight (applies to entire bd-row) --- */
        .bd-row.is-multi-selected {
          background-color: #dbeafe;
          border-radius: 8px;
        }   
      .bd-group-drag-handle, .bd-dnd-reorder-handle {
        cursor: grab;
      }
      .bd-group-drag-handle:active, .bd-item.subcategories-view .bd-native-drag-handle:active {
        cursor: grabbing;
      }
      .backlog-drawer.is-processing-drop {
        pointer-events: none;
      }
      .bd-task-input.is-multi-selected {
        background-color: #dbeafe; /* A light blue for highlight */
      }


      /* Ensure the sortable group wrapper can anchor absolute indicators */
.subcats-group-style {
  position: relative;
}

/* Drop indicator line (does NOT affect layout) */
.bd-group-drop-line {
  position: absolute;
  left: 8px;
  right: 8px;
  max-width: calc(100% -30px);

  /* Center a 50px dropzone around the group boundary without shifting layout */
  bottom: 10px;

  height: 0px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 10px;

  transition: height 170ms ease, opacity 170ms ease;
  will-change: height, opacity;
}

.bd-group-drop-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-sizing: border-box;

  border: 1px dashed rgba(59, 130, 246, 0.95);
  background: rgba(59, 130, 246, 0.12);
}

.bd-group-drop-line.is-active {
  height: 40px;
  opacity: 1;
}

/* Header version: spans full width at bottom of header */
.bd-group-drop-line--header {
  left: 8px;
  right: 8px;
  max-width: calc(100% -80px);
  /* header gap should appear BELOW the header (not half-inside it) */
  bottom: -60px;
}

/* Group drag overlay: title-only */
.bd-group-drag-overlay {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  max-width: calc(100% - 74px);
}

.bd-group-drag-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-group button.btn.btn-small {
 background: white;
 font-size: 12px;
 color: black;
 padding: 3px 5px!important;
 opacity: 0.6;
}

.bd-group button.btn.btn-small:hover {
 opacity: 1.0;
}


.bd-item-actionbar {
 left: -6px!important;
 top: 10px!important;
}

.bd-group-actionbar {
  top: 12px;
  height: 22px;
  gap: 0px;
  left: -6px;
}

.bd-item-actionbar 
.btn.btn-ghost.btn-small {
position: relative;
left: -3px!important;
}

.bd-group-actionbar 
.btn.btn-ghost.btn-small {
position: relative;
left: -1px;
}/* @file: SearchModal.css */

/* --- Base Modal Wrapper --- */
.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999999;
}

.search-modal {
  background: #fff;
  width: 95vw;
  max-width: 1200px;
  height: 90vh;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}

/* --- Top Header (Search input + Close) --- */
.search-modal-top {
  padding: 12px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: center; /* Center the search input */
  align-items: center;
  position: relative;
  gap: 15px;
}

.search-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 600px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  max-width: 400px;
}

.search-btn {
  padding: 0 16px;
}

.close-btn-desktop {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 13px;
  border: none;
  width: 100px;
  background: lightgray;
  cursor: pointer;
}
.close-btn-desktop:hover {color:white;}

.close-btn-mobile {
  display: none;
}

/* --- Columns Layout (Desktop) --- */
.search-modal-columns {
  flex: 1;
  display: flex;
  overflow: hidden; /* Columns scroll independently */
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Flexbox text overflow fix */
}

.column-timeline {
  border-right: 1px solid #ddd;
}

/* --- Column Header (Sticky) --- */
.column-header {
  padding: 10px 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.column-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.column-title-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.toggle-label {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.column-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.column-filters.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.filter-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-group label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.column-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.sort-select {
  font-size: 12px;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* --- Column Body (Scrollable) --- */
.column-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

/* --- Rows --- */
.search-row {
  display: flex;
  align-items: center; /* Vertically align single line */
  padding: 6px 15px;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
  position: relative;
  transition: opacity 0.2s;
  height: 40px; /* Force single line heightish */
}

.search-row:hover {
  background: #f9f9f9;
}

.search-row.is-selected {
  background: #eef6ff;
}

/* Deleted State */
.search-row.is-deleted {
  opacity: 0.25;
}

.deleted-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: Text only on hover */
.deleted-overlay .undo-text {
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  display: none;
}
.search-row.is-deleted:hover .deleted-overlay .undo-text {
  display: block;
}

/* Row Content Layout */
.row-check {
  display: flex;
  align-items: center;
}

.row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: #999;
}
.badge-personal { background: #10b981; }
.badge-work { background: #3b82f6; }
.badge-meeting { background: #f59e0b; }
.badge-appointment { background: #8b5cf6; }

.meta-date, .meta-client, .meta-project {
  font-size: 12px;
  color: #666;
}

.meta-client { font-weight: 500; color: #444; }

.row-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row-text-input {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  padding: 4px;
  border-radius: 3px;
  text-overflow: ellipsis;
  min-width: 0;
}
.row-text-input:focus {
  border-color: #3b82f6;
  background: #fff;
  outline: none;
}

.row-dur-input {
  width: 40px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 2px;
  text-align: center;
}

.queue-group-label {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  white-space: nowrap;
}

.go-btn {
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}

/* --- Action Bar (Floating at bottom of column) --- */
.column-actions {
  padding: 8px 15px;
  background: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.sel-count {
  font-weight: bold;
  margin-right: 4px;
}

.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
}

.btn.btn-xs.btn-danger.search-delete {
  background: #ef4444;
  color: white;
  border: none;
  width: 55px;
  max-width: 55px;
}

/* --- Footer --- */
.search-modal-footer {
  padding: 12px 20px;
  background: #f8f9fa;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.result-count {
  margin-right: 20px;
}

.sort-select{
  padding-left: 5px;
}

.load-more {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #888;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* --- Mobile View (Max 820px) --- */
@media (max-width: 820px) {

  .modal.search-modal {
    width: 96vw!important;
    margin: 15px;
    padding: 3px;
    margin-top: 5px;
    max-height: 196%!important;
    height: 96%!important;
    border-radius: 10;
    max-width: 96vw!important;
  }

 .modal.search-modal 
 .column-header {
   padding-top:20px;
  }

  /* 1. Close button moves to left */
  .search-modal-top {
    flex-wrap: wrap; /* allow wrapping for search input line */
    justify-content: space-between;
    padding: 10px;
    gap: 10px;
    background: #fff;
  }
  
  .close-btn-desktop {  
    top: 30px;
  }

  .close-btn-mobile { 
    display: block; 
    border: none;
    background: transparent;
    font-size: 20px;
    padding: 0 10px;
    cursor: pointer;
  }
  
  /* 2. Search input on new line */
  .search-form {
    order: 2;
    width: 100%;
    max-width: none;
  }

  /* 3. Columns stack */
  .search-modal-columns {
    flex-direction: column;
  }
  
  .column-timeline {
    border-right: none;
    border-bottom: 1px solid #ddd;
    /* Height logic: Timeline on top, Queue on bottom. 
       Let's give them flex-grow proportional to content conceptually, 
       but simple flex: 1 1 50% ensures they share screen space. */
    flex: 1 1 50%;
    min-height: 200px;
  }
  
  .column-queue {
    flex: 1 1 50%;
    min-height: 200px;
  }

  /* 3. Mobile Filters Layout */
  /* On mobile we want everything stacked compactly */
  .column-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px;
  }
  
  .column-title-row {
    margin: 0;
    margin-right: 15px;
  }
  
  /* Mobile filter specific styling to stack left/right of gray line */
  .column-filters {
    margin: 0;
    font-size: 11px;
    border-left: 1px solid #ddd;
    padding-left: 10px;
  }

  /* 4. Undo text always visible on mobile */
  .deleted-overlay .undo-text {
    display: block;
    background: rgba(255, 255, 255, 0.95);
    color: #cc0000;
    border: 1px solid #cc0000;
    width: 100%;
    text-align: center;
  }

  /* Compact rows for mobile */
  .search-row {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .row-meta {
    max-width: 90px; /* truncate meta on small screens */
    overflow: hidden;
  }
  
  .go-btn {
    display: none; /* Hide 'Go to task' on mobile to save space */
  }
}