/* assets/styles.css - complete stylesheet with admin modal form styles added
   Full-width layout, left users nav, right action, grids, cards, tasks,
   modal dialog, pagination headers, unified modal button styles,
   and Admin sidebar / tables styling.

   Accent color: hsl(240, 100%, 50%)
*/

/* ------------------------
   Theme variables
   ------------------------ */
:root{
  --gap: 30px;
  --accent: hsl(240, 100%, 72%); /* requested blue */
  --accent-light: hsl(240, 100%, 82%); /* requested blue */
  --muted: #666;
  --color:black;

  --dark-1: hsl(0,0%,10%);
  --dark-2: hsl(0,0%,15%);
  --dark-3: hsl(0,0%,20%);
  /*--bg: #F5F5F5;*/
  /*--bg: #f5f7fb;*/
  --bg: hsla(240,100%,96%,1.0);
  --panel-bg: #fff;
  --border: #e6e6e6;

  /* Button colors */
  --btn-primary-bg: var(--accent);
  --btn-primary-color: #fff;
  --btn-cancel-bg: #ffb74d; /* soft orange */
  --btn-cancel-color: #fff;
  --btn-delete-bg: #ff6b6b; /* soft red */
  --btn-delete-color: #fff;
  --drop-shadow: drop-shadow(2px 2px 4px hsla(0, 100%, 0%, 0.1));
  --cat-hue: 240;
  --task-bg-hue: var(--cat-hue);
  --task-bg-sat: 100%;
  --task-bg-lum: 50%;
  --task-bg-alp: 1.0;
  --task-ico-hue: var(--cat-hue);
  --task-ico-sat: 100%;
  --task-ico-lum: 50%;
  --task-ico-alp: 1.0;
  --task-txt-hue: var(--cat-hue);
  --task-txt-sat: 100%;
  --task-txt-lum: 50%;
  --task-txt-alp: 1.0;

  --font-family: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ease-1 :cubic-bezier(.70, 0, .5,1);

  --colmeta-inactive: hsla(0,0%,80%,1.0);
  --colmeta-btn-radius: 4px;
  --colmeta-btn-h: 28px;
  --colmeta-active-weight: 600;
  --colmeta-hover-bg: hsla(0,0%,96%,1.0);

  --main-width : 100%;

  --drawer-width: 340px;
  --drawer-width-minimized:100px;

  --icon-size: 16px;
  --icon-stroke-width: 1.5;
  --icon-color: var(--dark-1);
  --task-flag-border-urgent: transparent;
  --task-flag-border-important: transparent;
  --task-flag-border-both: transparent;
}

/* ------------------------
   Avatars
   ------------------------ */
.logo-content {
  padding: 20px 0px;
  text-align: right;
}

.logo-content h2, 
.logo-content p {
  margin: 0;
}

.logo-content h2 {
  font-weight: 800;
  color: var(--accent);
  font-size: 15px;
}


.logo-content p {
  font-weight: 700;
  font-size: 11px;
}

.user-avatar {

  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.95);
  object-fit: cover;
  background: rgba(0,0,0,0.06);
  filter: var(--drop-shadow);
  vertical-align: middle;
}

.user-avatar--xs {
  --drop-shadow: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, 0.1));
  width: 26px;
  height: 26px;
  border-width: 2px;
}

.user-avatar--lg {
  width: 70px;
  height: 70px;
  border-width: 4px;
  --drop-shadow: drop-shadow(2px 2px 3px hsla(0, 100%, 0%, 0.1));
}

.user-avatar--empty {
  background: radial-gradient(circle at 30% 25%, rgba(0,0,0,0.10), rgba(0,0,0,0.04));
}

/*.user-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}*/

/* user multiselect (task form + admin modals) */
.user-multiselect-item{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ------------------------
   Auth (login)
   ------------------------ */
* {
  transition: all .4s ease;
}
.auth-page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card{
  width: min(320px, 100%);
  background: var(--panel-bg);
  /*border: 1px solid var(--border);*/
  border-radius: 8px;
  padding: 30px;
  /*box-shadow: 0 18px 50px rgba(10, 20, 40, 0.08);*/
  filter:var(--drop-shadow);

  /* Fade-in on login page load */
  opacity: 0;
  transform: translateY(10px);
  animation: auth-card-in 1000ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

@keyframes auth-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.auth-header h1{
  margin: 0;
  font-size: 22px;
}

.auth-header p{
  margin: 15px 0 0 0;
}

.auth-form{
  margin-top: 30px;
  display: grid;
  gap: 20px;
  justify-items: stretch;
  margin-bottom: 0;
}

.auth-form .btn {
  justify-self: end;
}

.auth-error{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.12);
  border-radius: 10px;
}

.auth-card h1, .auth-card h3 {
  margin: 0;
  color: var(--accent);
}

.auth-card h3 {
  font-size: 14px;
  color: black;
}

/* ------------------------
   Base
   ------------------------ */
* { box-sizing: border-box; }
html, body { height: 100%; 
width: 100%;
overflow-x: hidden;
background: var(--bg);
}
body{
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 1.35; */
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* position: relative; */
}

button {
  font-family: var(--font-family);
  font-size: 14px;
}
/* ------------------------
   Layout: main / topbar
   ------------------------ */
.main {
  display: grid;
  grid-template-columns: 1fr auto;
  /*padding: 20px;*/
  /*gap: 20px;*/
  /*margin-top: 80px;*/
  align-items: start;
  align-content: start;
}

/* SPA navigation fade-in: only the main viewport */
html.js main.main.kine-nav-fadein,
html.js main.kine-nav-fadein {
  opacity: 0;
  transition: none;
}

/* Initial load: fade-in the whole page container (logged-in only, triggered by JS) */
html.js body.kine-body-fadein {
  opacity: 0;
  transition: none;
}

html.js body.kine-body-fadein.kine-body-fadein-run {
  opacity: 1;
  transition: opacity 520ms ease-in-out delay 200ms;
}

html.js main.main.kine-nav-fadein.kine-nav-fadein-run,
html.js main.kine-nav-fadein.kine-nav-fadein-run {
  opacity: 1;
  transition: opacity 420ms ease delay 200ms;
}

/* SPA navigation fade-out: fade the whole main viewport first */
html.js main.main.kine-nav-fadeout,
html.js main.kine-nav-fadeout {
  opacity: 1;
  transition: opacity 220ms ease;
}

html.js main.main.kine-nav-fadeout.kine-nav-fadeout-run,
html.js main.kine-nav-fadeout.kine-nav-fadeout-run {
  opacity: 0;
}

/* User page header inside partial (AJAX nav) */
.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ------------------------
   FAQ page
   ------------------------ */

.faq-header {
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  margin-top: 20px;
}

.faq-header h2 {
  margin: 0;
}

.faq-search {
  width: min(680px, 92vw);
}

.faq-search .input {
  width: 100%;
}

.faq {
  margin-top: 16px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 36px;
  align-items: start;
}

@media (max-width: 1100px) { .faq-grid { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; gap: 42px; } }

.faq-cat {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  filter: none;
}

.faq-cat-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.70);
}

/* Hierarchical sizing (category > question > answer) */
.faq-cat-title { font-size: 35px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: rgba(0,0,0,0.88); }
.faq-q { font-size: 25px; font-weight: 600; }
.faq-a-inner { font-size: 16px; font-weight: 400; }

.faq-item {
  border-top: 0;
  padding-top: 0;
  margin-top: 60px; /* +50px vs previous spacing */
}

.faq-item:first-child { margin-top: 0; }

.faq-q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  color: rgba(0,0,0,0.88);
}

@media (max-width: 720px) {
  .faq-cat-title { font-size: 28px; }
  .faq-q { font-size: 20px; }
  .faq-q-plus { font-size: 22px; }
}

.faq-q-text { min-width: 0; }

.faq-q-text code.api-path,
.faq-q-text .api-method {
  vertical-align: middle;
}

.faq-q-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,0.70);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform 180ms ease, color 180ms ease;
}

.faq-q[aria-expanded="true"] .faq-q-plus {
  transform: translateY(-2px) rotate(45deg);
  color: var(--accent);
}

.faq-q:hover {
  color: var(--accent);
}

.faq-a {
  overflow: hidden;
  height: 0px;
  transition: height 500ms var(--ease-1);
}

.faq-a.is-open {
  /* height is managed inline */
}

.faq-a-inner {
  padding: 14px 0 0 0;
  color: rgba(0,0,0,0.76);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .faq-a-inner { font-size: 15px; }
}

/* ------------------------
   Report page
   ------------------------ */

.faq-api {
  margin-top: 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  filter: none;
}

.faq-api h3 {
  margin: 0 0 8px 0;
}

.faq-api-groups {
  display: grid;
  gap: 22px;
}

.faq-api-group {
  margin-bottom: 0;
}

.faq-api-group-title {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.60);
}

@media (max-width: 720px) {
  .faq-api-group-title { margin-bottom: 10px; }
}

.faq-api-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
  align-items: start;
}

@media (max-width: 1100px) {
  .faq-api-group-grid { grid-template-columns: 1fr; }
}

.faq-a-inner--api {
  padding-top: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.82);
}

.api-pre {
  margin: 0;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  box-shadow: 0 12px 24px rgba(0,0,0,0.05);
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
}

.api-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(0,0,0,0.82);
}

.api-pre[data-lang]:before {
  content: attr(data-lang);
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.60);
}


.doc {
  display: grid;
  gap: 10px;
}

.doc p { margin: 0; }

.doc-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

.doc-ul,
.doc-ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.doc li { line-height: 1.55; }

.api-h {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.66);
}

.api-inline,
.api-path {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(0,0,0,0.80);
}

.api-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 11px;
  text-transform: uppercase;
}

.api-method--get { background: rgba(0, 122, 255, 0.12); border-color: rgba(0, 122, 255, 0.18); }
.api-method--post { background: rgba(46, 184, 114, 0.14); border-color: rgba(46, 184, 114, 0.20); }
.api-method--put,
.api-method--patch { background: rgba(255, 159, 10, 0.14); border-color: rgba(255, 159, 10, 0.22); }
.api-method--delete { background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.20); }



.report-header {
  width: 100%;
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 20px;
}

.panel-header .panel-header-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-header .panel-header-name {
  font-size: 30px;
  font-weight: 700;
}

/* Topbar */
.topbar {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px;
  /*background: white;*/
  filter: var(--drop-shadow);
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 5px; }

/* Hide old header icons (moved to drawer) */
.topbar-actions { display: none; }

.topbar-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.80);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.topbar-menu-btn:hover { background: rgba(255,255,255,1.0); border-color: rgba(0,0,0,0.16); }


.main {
  position: absolute;
  transform: translate3d(0,0,0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  left:0;
  top: 0;
  width: 100vw;
  padding: 0 80px;
  padding-bottom: 80px;
}


/* Main should fill the viewport. */
main.main {
  min-height: 100vh;
}




.drawer-gradient-cache {
  position: fixed;
  height: 50px;
  width: var(--drawer-width);
  right: calc(var(--drawer-width) * -1);
  bottom: 0;
  background: linear-gradient(0deg, hsla(0, 0%, 100%, 1.0) 0%, hsla(0, 0%, 100%, 0.5) 60%, hsla(0, 0%, 100%, 0.0) 100%);
  z-index: 100;
}

.drawer-gradient-cache,
#menu-handler,
.main,
.drawer {
  transition: transform 700ms var(--ease-1);
}


.drawer {
  width: var(--drawer-width);
  position: absolute;
  right: 0;
}




.brand a { text-decoration: none; font-weight: 600; color: var(--accent); font-size: 18px; }

/* Users nav */
.users-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.users-nav a {
  color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 6px; /*transition: all .12s;*/ font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.users-nav a:hover { background: rgba(0,122,204,0.06); color: var(--accent) }
.users-nav a.active { background: var(--accent); color: white; }

.btn.add-task { --bg: var(--accent) ;display: inline-block; background: var(--bg); color: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; }

.btn.admin-link { display:inline-block; background: transparent; color: var(--muted); padding:4px 6px; border-radius:6px; text-decoration:none; border:1px solid transparent; }
.btn.admin-link:hover { color:var(--accent); background: rgba(0,122,204,0.04); }

.btn.admin-link.with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Header icons: hover + active accent stroke */
.topbar-right a svg {
  display: block;
}
.topbar-right a svg [stroke] {
  transition: stroke 140ms ease;
}
.topbar-right a:hover svg [stroke] {
  stroke: var(--accent) !important;
}
.topbar-right a.active svg [stroke],
.topbar-right a[aria-current="page"] svg [stroke] {
  stroke: var(--accent) !important;
}

.btn.admin-link.with-icon img.user-avatar {
  border-color: rgba(255,255,255,0.95);
}


/* ------------------------
   Panels / cards / grids
   ------------------------ */
/*.panel { background: var(--panel-bg); border: 1px solid var(--border); padding: 16px; border-radius: 8px; margin: 20px; }*/
.panel { }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);/* align-items: start;*/}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);/* align-items: start;*/ align-content: space-between;}
[data-index-scope-grid="1"][data-grid-cols="1"] { grid-template-columns: 1fr; }
[data-index-scope-grid="1"][data-grid-cols="2"] { grid-template-columns: repeat(2, 1fr); }
[data-index-scope-grid="1"][data-grid-cols="3"] { grid-template-columns: repeat(3, 1fr); }
[data-index-scope-grid="1"][data-grid-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(1, 1fr); }
  .grid-4 { grid-template-columns: repeat(1, 1fr); }
  [data-index-scope-grid="1"][data-grid-cols="3"],
  [data-index-scope-grid="1"][data-grid-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1920px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  [data-index-scope-grid="1"][data-grid-cols="3"],
  [data-index-scope-grid="1"][data-grid-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  [data-index-scope-grid="1"][data-grid-cols] { grid-template-columns: 1fr; }
}

.card {background: white;padding: 25px;border-radius: 8px;/* min-height: 60px; */}

/* /tasks: "Add category" last grid cell */
.tasks-page .tasks-add-category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  justify-self: stretch;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  padding: 16px;
  /*background: hsla(210, 90%, 70%, 0.05);*/
  background: transparent;
  border: 4px dashed hsla(220, 30%, 60%, 0.25);
  color: hsla(220, 30%, 60%, 0.25);
  cursor: pointer;
}
.tasks-page .tasks-add-category-card:hover {
  /* Keep the add-category tile intentionally neutral (not category-themed) */
  /*background: rgba(0,0,0,0.04);*/
  border-color: hsla(220, 100%, 60%, 1.0);
  color: hsla(220, 100%, 60%, 1.0);
}
.tasks-page .tasks-add-category-card:active {
  transform: translateY(1px);
}
.tasks-page .tasks-add-category-card:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.tasks-page .tasks-add-category-inner {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
}

/* /tasks: category color popover */
.tasks-cat-color-pop {
  position: fixed;
  z-index: 9999;
  width: 280px;
  padding: 12px;
  background: #fff;
  /*border: 1px solid rgba(0,0,0,0.14);*/
  border-radius: 8px;
  filter: var(--drop-shadow);
}
.tasks-cat-color-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tasks-cat-color-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,0.78);
}
.tasks-cat-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ccc;
  border: 1px solid rgba(0,0,0,0.12);
}
.tasks-cat-color-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  color: rgba(0,0,0,0.55);
}
.tasks-cat-color-close:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.78); }
.tasks-cat-color-row { display: grid; grid-template-columns: 26px 1fr 44px; gap: 8px; align-items: center; margin: 8px 0; }
.tasks-cat-color-lab { font-size: 12px; font-weight: 800; color: rgba(0,0,0,0.58); text-align: right; }
.tasks-cat-color-val { font-size: 12px; font-weight: 800; color: rgba(0,0,0,0.62); text-align: right; }
.tasks-cat-color-row input[type="range"] { width: 100%; }
/* (actions row removed; picker auto-saves) */

/* /tasks: saved color palette (10 swatches) */
.tasks-cat-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 10px;
}
.tasks-cat-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  background: #ccc;
}
.tasks-cat-color-swatch:hover {
  transform: translateY(-1px);
}
.tasks-cat-color-swatch.is-current {
  outline: 2px solid rgba(0,0,0,0.38);
  outline-offset: 1px;
}

/* Index task comment button dot */
.task-actions .btn.mini[data-child-task-comments] {
  position: relative;
}

.task-actions .btn.mini[data-child-task-comments] .comment-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ff3b30;
  /*box-shadow: 0 0 0 2px rgba(255,255,255,0.9);*/
  pointer-events: none;
}

/* Fade unread dots out before hiding */
.task-actions .btn.mini[data-child-task-comments] .comment-dot,
.card[data-scope][data-date] .task-meta-comment-dot {
  opacity: 1;
  transform: scale(1);
  transition: opacity 160ms ease, transform 160ms ease;
}

.task-actions .btn.mini[data-child-task-comments] .comment-dot.is-dot-hiding,
.card[data-scope][data-date] .task-meta-comment-dot.is-dot-hiding {
  opacity: 0;
  transform: scale(0.85);
}

.task-actions .btn.mini[data-child-task-comments] .comment-dot[hidden] {
  display: none;
}

/* Comment modal */
.task-comments-modal {
  max-width: 760px;
  width: min(760px, calc(100vw - 24px));
}

.task-comments-modal .tcm-task {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
}

.task-comments-modal .tcm-task-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}

.task-comments-modal .tcm-task-meta {
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}

.task-comments-modal .tcm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.task-comments-modal .tcm-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-comments-modal .tcm-head-actions .btn {
  white-space: nowrap;
}

.task-comments-modal .tcm-title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.task-comments-modal .tcm-body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.task-comments-modal .tcm-thread {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.65);
  max-height: min(60vh, 520px);
  overflow: auto;
}

.task-comments-modal .tcm-msg {
  --tcm-self: rgba(20, 120, 240, 0.14);
  --tcm-other: rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: .7fr 32px;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  align-items: start;
  justify-content: start;
}

.task-comments-modal .tcm-msg + .tcm-msg { margin-top: 8px; }

.task-comments-modal .tcm-msg.is-self {
  grid-template-columns: 32px .7fr;
  justify-content: end;
}

.task-comments-modal .tcm-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.task-comments-modal .tcm-msg:hover .tcm-controls {
  opacity: 1;
  pointer-events: auto;
}

.task-comments-modal .tcm-check input {
  width: 16px;
  height: 16px;
}

.task-comments-modal .tcm-del {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.8);
  color: rgba(0,0,0,0.65);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.task-comments-modal .tcm-del:hover {
  border-color: rgba(212, 38, 38, 0.35);
  background: rgba(212, 38, 38, 0.08);
  color: rgba(212, 38, 38, 0.95);
}

.task-comments-modal .tcm-bubble {
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Flagged comments: bubble border color */
.task-comments-modal .tcm-msg.has-important .tcm-bubble {
  border-color: rgba(20, 76, 184, 0.35);
}

.task-comments-modal .tcm-msg.has-urgent .tcm-bubble {
  border-color: rgba(212, 38, 38, 0.35);
}

/* If both flags are set, urgent wins */
.task-comments-modal .tcm-msg.has-important.has-urgent .tcm-bubble {
  border-color: rgba(212, 38, 38, 0.35);
}

.task-comments-modal .tcm-msg.is-self .tcm-bubble {
  background: var(--tcm-self);
}

.task-comments-modal .tcm-msg.is-other .tcm-bubble {
  background: var(--tcm-other);
}

.task-comments-modal .tcm-msg.is-self .tcm-controls {
  order: 1;
}

.task-comments-modal .tcm-msg.is-self .tcm-bubble {
  order: 2;
}

.task-comments-modal .tcm-msg.is-other .tcm-controls {
  order: 2;
}

.task-comments-modal .tcm-msg.is-other .tcm-bubble {
  order: 1;
}

.task-comments-modal .tcm-msg.is-unread {
  background: rgba(212, 38, 38, 0.04);
  border: 1px solid rgba(212, 38, 38, 0.14);
}

/* (avatar cell removed in v2. keep class for safety if still in DOM elsewhere) */
.task-comments-modal .tcm-avatar { display: none; }

/* Allow showing user avatars in v2 thread meta */
.task-comments-modal .tcm-meta img.user-avatar {
  margin-right: 2px;
}

.task-comments-modal .tcm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.task-comments-modal .tcm-author { font-weight: 800; }
.task-comments-modal .tcm-date { color: rgba(0,0,0,0.55); font-size: 12px; }

.task-comments-modal .tcm-flags {
  display: inline-flex;
  gap: 6px;
}

.task-comments-modal .tcm-flag {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.7);
}

.task-comments-modal .tcm-flag.is-important { border-color: rgba(20, 76, 184, 0.35); background: rgba(20, 76, 184, 0.08); }
.task-comments-modal .tcm-flag.is-urgent { border-color: rgba(212, 38, 38, 0.35); background: rgba(212, 38, 38, 0.08); }

.task-comments-modal .tcm-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* actions row removed; controls live in the dedicated controls cell */
.task-comments-modal .tcm-actions { display: none; }

.task-comments-modal .tcm-compose {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.85);
}

.task-comments-modal .tcm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.task-comments-modal .tcm-editor {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 10px;
  min-height: 92px;
  outline: none;
  background: rgba(255,255,255,0.95);
}

.task-comments-modal .tcm-editor[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: rgba(0,0,0,0.45);
}

.task-comments-modal .tcm-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.task-comments-modal .tcm-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-comments-modal .tcm-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.8);
  max-width: 100%;
}

.task-comments-modal .tcm-file a {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Let attachment links shrink inside a flex pill (prevents overflow clipping) */
.task-comments-modal .tcm-file a {
  min-width: 0;
}

/* Lightweight toast for comments modal */
.tcm-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  z-index: 10000;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.94);
  color: rgba(0,0,0,0.85);
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(10,20,40,0.12);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.tcm-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.kine-toast-stack {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 10020;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}

.kine-toast {
  min-width: 220px;
  max-width: min(92vw, 460px);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.96);
  color: rgba(0,0,0,0.82);
  box-shadow: 0 12px 30px rgba(10,20,40,0.14);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}

.kine-toast.is-on {
  opacity: 1;
  transform: translateY(0);
}

.kine-toast.is-success {
  border-color: rgba(43, 124, 66, 0.22);
  background: rgba(244, 252, 246, 0.98);
  color: rgba(26, 92, 48, 0.96);
}

.kine-toast.is-error {
  border-color: rgba(183, 63, 63, 0.22);
  background: rgba(255, 246, 246, 0.98);
  color: rgba(139, 36, 36, 0.96);
}
.card h3 {margin: 0;/* font-size: 16px; */}
.card .count { font-size: 13px; color: var(--muted); margin-bottom: 8px; }

/* ------------------------
   Stats page
   ------------------------ */

.stats-view-wrapper {
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
}

/* New /stats UI (controllers/stats/stats.php) */
.stats {
  display: grid;
  gap: 16px;
}

.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px;
  background: #fff;
  /*border: 1px solid var(--border);*/
  border-radius: 10px;
}

.stats-toolbar > label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.stats-toolbar select {
  min-width: 140px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}

.stats-toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  /*border: 1px solid var(--border);*/
  background: #fafafa;
  font-size: 12px;
  color: #222;
}

.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi { grid-template-columns: 1fr; }
}

.kpi .card {
  /*border: 1px solid var(--border);*/
}

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.sm {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;

}
@media (max-width: 900px) {
  .charts { grid-template-columns: 1fr; }
}

.chart {
  background: #fff;
  /*border: 1px solid var(--border);*/
  border-radius: 10px;
  padding: 12px;
}

.chart canvas {
  display: block;
  width: 100% !important;
  min-height: 280px !important;
  max-height: 580px !important;
}

/* Keep detailed table readable */
.stats-table {
  width: 100%;
  border-collapse: collapse;
}
.stats-table th,
.stats-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.stats-table thead th {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-table td.num,
.stats-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stats-table tfoot td {
  font-weight: 800;
}

.stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.stats-controls {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.stats-controls label {
  display: grid;
  gap: 6px;
  align-items: start;
}

.stats-controls select {
  min-width: 140px;
  padding: 8px;
  border-radius: 8px;
  /*border: 1px solid var(--border);*/
  background: #fff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.stats-card {
  background: #fff;
  /*border: 1px solid var(--border);*/
  border-radius: 10px;
  padding: 14px;
}

.stats-card h3 {
  margin: 0 0 10px 0;
  font-size: 15px;
}

/* Critical: keep chart height stable (prevents infinite growth) */
.stats-card canvas {
  display: block;
  width: 100% !important;
  height: 220px !important;
}

/* A bit taller for horizontal bar list */
#chart-top-main {
  height: 320px !important;
}

/* Task item */
.task {
  --task-opacity:1;
  opacity: var(--task-opacity);

  display: grid;
  position: relative;
  grid-template-columns: 1fr auto;
  /*gap: 5px; */
  min-height: 50px;
  /*padding: 0 5px; */
  padding-right: 5px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.0);
  background: white;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.0);
  /*transition: border-color .2s ease; */
  /*transition: background .2s ease; */
  /*transition: transform .4s ease, box-shadow .4s ease; */
  /*transition: all .4s ease;*/
  cursor: pointer;
  overflow: hidden;
  position: relative;
  align-items: center;
  user-select: none;
}
.task[data-is-urgent="1"][data-is-important="0"] {
  border-color: var(--task-flag-border-urgent, transparent) !important;
}
.task[data-is-urgent="0"][data-is-important="1"]{
  border-color: var(--task-flag-border-important, transparent) !important;
}
.task[data-is-urgent="1"][data-is-important="1"] {
  border-color: var(--task-flag-border-both, transparent) !important;
}
.task:hover { transform: translateY(-2px); box-shadow: 3px 3px 4px rgba(0,0,0,0.15); }

/* Keep hover visuals while editing title (index.php) */
.task.is-title-editing {
  transform: translateY(-2px);
  box-shadow: 3px 3px 4px rgba(0,0,0,0.15);
}

/* Keep index hover behavior (meta/actions) while editing title */
.card[data-scope][data-date] .task.is-title-editing .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}
.card[data-scope][data-date] .task.is-title-editing .task-right > .task-meta {
  opacity: 0;
}


/* During index-board drag, suppress hover transforms to keep drop zones stable */
html.is-idx-dnd-dragging .card[data-scope][data-date] .task:hover {
  transform: none;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.0);
}

/* While dragging, don't let adjacent tasks animate into/out of hover */
html.is-idx-dnd-dragging .card[data-scope][data-date] .task {
  transition: none;
}
/*.task:hover { border-color: var(--bg-hover) !important; }*/
/*.task:hover { background: var(--bg-hover) !important; }*/
.task { border-left: 4px solid #eee; }
.task .title {font-weight: 600;font-size: 14px;user-select: none;width: fit-content;position: absolute;padding-left: 10px;transition: none;line-height: 1;}
.task.is-inactive {
  --task-opacity:0.5;
}

.task.is-inactive:hover {
  --task-opacity:1.0;
}
.task.is-done {
  --task-opacity:0.3;
  filter: grayscale(1.0);
  /*background-color: hsla(0, 0%, 90%, 1.0) !important;*/
  /*transition: filter .4s ease, opacity .4s ease, transform .2s ease, box-shadow .4s ease, background-color .4s ease;*/
  transition: all .4s ease; 
  /*background-color: hsla(0, 0%, 0%, 1.0);*/
  cursor: not-allowed;
}

.task.is-title-editing .title {
  width: 100%;
  padding-left: 0px; 

}

.task.is-title-editing input,
.task.is-temp-new .title input { font-weight: 600; text-align: left; width: 100% !important; padding-left: 10px; color: #777;}

.task.is-temp-new .title {
  position: relative;
}

/* Hide tools while editing title (index board only) */
.tasks-page .task.is-title-editing .task-right,
.card[data-scope][data-date] .task.is-title-editing .task-right {
  transition: opacity .2s ease;
  opacity: 0;
  visibility: hidden;
}

.task.is-done .title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(0,0,0,0.22);
}


.task.is-done:hover {
  --task-opacity: 1.0;
  filter: grayscale(1.0);
}

/* Hover lock: keep hover visuals + actions while interacting */
.tasks-page .task.is-hover-locked,
.card[data-scope][data-date] .task.is-hover-locked {
  transform: translateY(-2px);
  box-shadow: 3px 3px 4px rgba(0,0,0,0.15);
}

.tasks-page .task.is-hover-locked .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}
.tasks-page .task.is-hover-locked .task-right > .task-meta {
  opacity: 0;
}

.card[data-scope][data-date] .task.is-hover-locked .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}
.card[data-scope][data-date] .task.is-hover-locked .task-right > .task-meta {
  opacity: 0;
}


/* Trying to drag a done task: flash pale red and revert */
.task.is-dnd-blocked { position: relative; }
.task.is-done.is-dnd-blocked {
  /* Ensure the red flash is visible even on muted/greyscale tasks */
  --task-opacity: 0.85;
  filter: none;
}
.task.is-dnd-blocked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 107, 107, 0.32);
  --task-opacity: 0;
  pointer-events: none;
  animation: dnd-blocked-fade 520ms ease-in-out;
}

@keyframes dnd-blocked-fade {
  0% { opacity: 0; }
  28% { opacity: 1; }
  100% { opacity: 0; }
}
/*.task.is-inactive .title { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(0,0,0,0.25); }*/
.task.is-unsubscribed { --task-opacity:0.3; filter: grayscale(0.8);}
.task.is-unsubscribed:hover { --task-opacity:1.0; }
/*.task.is-unsubscribed .title { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(0,0,0,0.25); }*/



/* Main tasks page: inline actions */
/*.tasks-page .task { padding-right: 12px; }*/
/*.tasks-page .task .title { padding-right: 160px; }*/
.tasks-page .task-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* /tasks: right side shows meta by default, actions on hover (like index.php) */
.tasks-page .task-right {
  display: grid;
  justify-items: end;
  align-items: center;
}

.tasks-page .task-right > .task-meta,
.tasks-page .task-right > .task-actions {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /*transition: opacity 160ms ease;*/
}

.tasks-page .task-right > .task-meta {
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-size: 11px;
  color: var(--task-meta-color, rgba(0,0,0,0.67));
  white-space: nowrap;
  gap: 10px;
}

/* /tasks: meta icons + text follow category color (dropdowns stay neutral) */
.tasks-page .task .task-meta svg,
.tasks-page .task .task-meta * {
  color: inherit;
}

/* /tasks: meta items align like index.php */
.tasks-page .task-right > .task-meta div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}
.tasks-page .task-right > .task-meta svg { display: block; }

.tasks-page .task-right > .task-actions {
  opacity: 0;
  pointer-events: none;
}

.tasks-page .task:hover .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

.tasks-page .task:hover .task-right > .task-meta {
  opacity: 0;
}

.tasks-page .task:focus-within .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

.tasks-page .task:focus-within .task-right > .task-meta {
  opacity: 0;
}

.card[data-scope][data-date] .task:focus-within .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

.card[data-scope][data-date] .task:focus-within .task-right > .task-meta {
  opacity: 0;
}

/* Keep actions visible while any inline dropdown is open */
.tasks-page .task.is-action-menu-open .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}
.tasks-page .task.is-action-menu-open .task-right > .task-meta {
  opacity: 0;
}

/* index.php task actions */
.card[data-scope][data-date] .task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  position: relative;
}

/* index.php: right side shows meta by default, actions on hover */
.card[data-scope][data-date] .task-right {
  display: grid;
  justify-items: end;
  align-items: center;
}

.card[data-scope][data-date] .task-right > .task-meta,
.card[data-scope][data-date] .task-right > .task-actions {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /*transition: opacity 160ms ease;*/
}

.card[data-scope][data-date] .task-right > .task-meta {
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-size: 13px;
  color: rgba(0,0,0,0.62);
  white-space: nowrap;
}

/* Increase meta contrast slightly (requested ~7%) */
.card[data-scope][data-date] .task-right > .task-meta {
  color: rgba(0,0,0,0.67);
}
.card[data-scope][data-date] .task-meta-due {
  color: rgba(0,0,0,0.67);
}

/* index.php: unread comments indicator (dot) */

.card[data-scope][data-date] .task-meta-comment-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff3b30;
  /*box-shadow: 0 0 0 2px rgba(255,255,255,0.9);*/
  position: absolute;
  top: 1px;
  right: 1px;
  pointer-events: none;
  opacity: 1.0;
}

/* Respect hidden attribute for unread dot */
.card[data-scope][data-date] .task-meta-comment-dot[hidden] {
  display: none;
}

.card[data-scope][data-date] .task-right > .task-meta,
.card[data-scope][data-date] .task-right > .task-meta * {
  user-select: none;
  -webkit-user-select: none;
}

.card[data-scope][data-date] .task-right > .task-actions {
  opacity: 0;
  pointer-events: none;
}

.card[data-scope][data-date] .task:hover .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

/* index.php: action button order (comment, group, edit, done) */
.card[data-scope][data-date] .task-right > .task-actions {
  flex-wrap: nowrap;
}

/* Index action order must be controlled by DOM order (not CSS order). */

/* index.php: done tasks hide only the edit toggle (comment stays visible but is read-only) */
.card[data-scope][data-date] .task.is-done .task-actions [data-child-task-edit-toggle] {
  display: none;
}

/* Index board: anchor absolute dropdowns to the actions bar (existing tasks) */
.card[data-scope][data-date] .task-right > .task-actions {
  position: relative;
}

/* Inline dropdown rows: ensure the full row (icon + text) is clickable */
.task .task-inline-owner-name {
  pointer-events: none;
}


/* index.php: Edit toggle reveals secondary actions (slide) */
.card[data-scope][data-date] .task-actions .task-actions-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  /* When collapsed, avoid double gap between comment and edit. */
  margin-left: -5px;
  max-width: 0;
  opacity: 0;
  transform: translateX(5px);
  visibility: hidden;
  transition: max-width 700ms ease, opacity 700ms ease, transform 700ms ease, visibility 0s linear 700ms;
  pointer-events: none;
}

/* /tasks: edit toggle reveals secondary actions (slide) */
.tasks-page .task-actions .task-actions-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  margin-left: -5px;
  max-width: 0;
  opacity: 0;
  transform: translateX(5px);
  visibility: hidden;
  transition: max-width 700ms ease, opacity 700ms ease, transform 700ms ease, visibility 0s linear 700ms;
  pointer-events: none;
}

.tasks-page .task.is-edit-open .task-actions .task-actions-more {
  margin-left: 0;
  max-width: 520px;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition: max-width 700ms ease, opacity 700ms ease, transform 700ms ease, visibility 0s linear 0s;
  pointer-events: auto;
  overflow: visible;
}

.card[data-scope][data-date] .task.is-edit-open .task-actions .task-actions-more {
  margin-left: 0;
  max-width: 520px;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition: max-width 700ms ease, opacity 700ms ease, transform 700ms ease, visibility 0s linear 0s;
  pointer-events: auto;
  /* Allow inline dropdowns (due/category/etc) to escape the slide container */
  overflow: visible;
}

/* Allow action dropdowns to escape the task tile */
.card[data-scope][data-date] .task.is-unsub-open {
  overflow: visible;
  z-index: 90;
}

/* Also allow other action dropdowns (category/difficulty/due) to escape */
.card[data-scope][data-date] .task.is-action-menu-open {
  overflow: visible;
  z-index: 90;
}

.card[data-scope][data-date] .task.is-action-menu-open .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

.card[data-scope][data-date] .task.is-action-menu-open .task-right > .task-meta {
  opacity: 0;
}

/* Keep actions visible while the unsubscribe dropdown is open */
.card[data-scope][data-date] .task.is-unsub-open .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Keep actions visible while edit group is open */
.card[data-scope][data-date] .task.is-edit-open .task-right > .task-actions {
  opacity: 1;
  pointer-events: auto;
}

.card[data-scope][data-date] .task.is-edit-open .task-right > .task-meta {
  opacity: 0;
}

.card[data-scope][data-date] .task.is-unsub-open .task-right > .task-meta {
  opacity: 0;
}

.card[data-scope][data-date] .task-actions .task-inline-owners-dropdown {
  z-index: 95;
}

/* index.php: action menu calendars should align to the right like other action dropdowns */
.card[data-scope][data-date] .task-actions .task-inline-date-dropdown {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.card[data-scope][data-date] .task:hover .task-right > .task-meta {
  opacity: 0;
}

.card[data-scope][data-date] .task-meta-due {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.62);
}

.card[data-scope][data-date] .task-meta-due .task-meta-due-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  font-size: 15px;
}

.card[data-scope][data-date] .task-actions .btn.mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
}

.card[data-scope][data-date] .task-actions .btn.mini svg { display: block; }

/* /tasks drag & drop affordances */
.tasks-page .task.is-dnd-dragging {
  opacity: 0.85;
}
.tasks-page .task.is-dnd-busy {
  opacity: 0.6;
}

/* index.php: show busy state during inline updates */
.card[data-scope][data-date] .task.is-dnd-busy {
  opacity: 0.6;
}
.tasks-page .task {
  /* Prevent text selection jitter while dragging */
  user-select: none;
  -webkit-user-select: none;
 }

/* Let /tasks action dropdowns escape the task tile box */
.tasks-page .task.is-action-menu-open {
  overflow: visible;
  z-index: 90;
}

/* /tasks: action dropdowns sit above other tiles */
.tasks-page .task-actions .task-inline-owners-dropdown { z-index: 95; }
.tasks-page .task [data-main-task-action],
.tasks-page .task .task-actions,
.tasks-page .task button,
.tasks-page .task a {
  /* Keep controls clickable without starting a drag */
  user-select: none;
  -webkit-user-select: none;
 }
.tasks-page .card.is-drop-target {
  outline: 4px dashed rgba(0, 122, 204, 0.55);
  outline-offset: 5px;
}

/* index.php drag feedback */
.card.is-dnd-invalid {
  animation: dnd-invalid-shake 1000ms ease-in-out;
  outline: 4px solid rgba(255, 107, 107, 0.65);
  outline-offset: 5px;
}

/* Success feedback after a valid drop */
.is-dnd-success {
  outline: 4px solid rgba(60, 180, 110, 0.75) !important;
  outline-offset: 5px;
}

/* Duplicate instance feedback */
.is-dnd-duplicate {
  outline: 2px dashed rgba(255, 107, 107, 0.85) !important;
  outline-offset: 5px;
  animation: dnd-dup-pulse 1200ms ease-in-out 2;
}

@keyframes dnd-dup-pulse {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
/* Height transitions are handled by JS (animateHeightChanges) during drag/drop. */
.task-group,
.task-subgroup {
  border-radius: 5px;
}

/* Staggered fade-in for scope/category cards on partial pagination/date loads */
.card.is-stagger-fade .task-group > *,
.card.is-stagger-fade .task.task--empty {
  opacity: 0;
  /*transform: translateY(4px);*/
  animation: taskgroup-fadein 260ms ease-out both;
  animation-delay: calc(var(--fade-i, 0) * 25ms);
  will-change: opacity, transform;
}

/* Allow header controls to participate in stagger fades */
.card.is-stagger-fade.is-stagger-fade-header .col-header > *,
.card.is-stagger-fade.is-stagger-fade-header .col-title,
.card.is-stagger-fade.is-stagger-fade-header .col-meta {
  opacity: 0;
  animation: taskgroup-fadein 260ms ease-out both;
  animation-delay: calc(var(--fade-i, 0) * 25ms);
  will-change: opacity;
}

/* Year scope: only fade group titles + subgroup items */
.card[data-scope="year"].is-stagger-fade .task-group > *,
.card[data-scope="year"].is-stagger-fade .task.task--empty {
  animation: none;
  opacity: inherit;
  transform: none;
}
.card[data-scope="year"].is-stagger-fade .task-group-title,
.card[data-scope="year"].is-stagger-fade .task-group .task-subgroup > *,
.card[data-scope="year"].is-stagger-fade .task.task--empty {
  opacity: 0;
  animation: taskgroup-fadein 260ms ease-out both;
  animation-delay: calc(var(--fade-i, 0) * 25ms);
  will-change: opacity, transform;
}

@keyframes taskgroup-fadein {
  from { opacity: 0;  /*transform: translateY(4px);*/ }
  to   { opacity: var(--task-opacity); /*transform: translateY(0);*/ }
}

/* New category/scope card enter animation */
.card.is-card-enter {
  animation: card-enter-fade 220ms ease-out both;
}

@keyframes card-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card.is-card-exit {
  animation: card-exit-fade 220ms ease-in both;
  pointer-events: none;
}

@keyframes card-exit-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-card-enter { animation: none; }
  .card.is-card-exit { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-stagger-fade .task-group > *,
  .card.is-stagger-fade .task.task--empty {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card.is-stagger-fade.is-stagger-fade-header .col-title,
  .card.is-stagger-fade.is-stagger-fade-header .col-meta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card.is-stagger-fade.is-stagger-fade-header .col-header > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .card[data-scope="year"].is-stagger-fade .task-group-title,
  .card[data-scope="year"].is-stagger-fade .task-group .task-subgroup > *,
  .card[data-scope="year"].is-stagger-fade .task.task--empty {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------
   View entrance (after login / SPA navigation)
   - Wait for JS to opt-in (html.js + .kine-enter-prep)
   - Panel header fades in, then card shells, then card content stagger
   ------------------------ */

html.js .kine-enter-prep .panel-header {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

html.js .kine-enter-prep .card.kine-enter-card {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

html.js .kine-enter-run .panel-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 420ms ease;
}

html.js .kine-enter-run .card.kine-enter-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 420ms ease;
  transition-delay: calc(var(--kine-enter-card-base, 520ms) + (var(--enter-i, 0) * var(--kine-enter-card-step, 110ms)));
}

/* Keep card content hidden until JS triggers stagger fade */
html.js .card.kine-enter-card.kine-enter-hide-inner .col-header > *,
html.js .card.kine-enter-card.kine-enter-hide-inner .col-meta,
html.js .card.kine-enter-card.kine-enter-hide-inner .task-group-title,
html.js .card.kine-enter-card.kine-enter-hide-inner .task-group > *,
html.js .card.kine-enter-card.kine-enter-hide-inner .task-group .task-subgroup > *,
html.js .card.kine-enter-card.kine-enter-hide-inner .task.task--empty {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .kine-enter-prep .panel-header,
  html.js .kine-enter-prep .card.kine-enter-card,
  html.js .kine-enter-run .panel-header,
  html.js .kine-enter-run .card.kine-enter-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .card.kine-enter-card.kine-enter-hide-inner .col-header > *,
  html.js .card.kine-enter-card.kine-enter-hide-inner .col-meta,
  html.js .card.kine-enter-card.kine-enter-hide-inner .task-group-title,
  html.js .card.kine-enter-card.kine-enter-hide-inner .task-group > *,
  html.js .card.kine-enter-card.kine-enter-hide-inner .task-group .task-subgroup > *,
  html.js .card.kine-enter-card.kine-enter-hide-inner .task.task--empty {
    opacity: 1;
  }
}
/* Drag/drop affordances for index scope cards */
.card.is-drop-target,
.task-group.is-drop-target,
.task-subgroup.is-drop-target {
  outline: 4px dashed rgba(0, 122, 204, 0.55);
  outline-offset: 5px;
  /* Avoid layout thrash when highlight toggles */
  /*transition: outline-color 90ms ease, outline-offset 90ms ease;*/
}

/* Some layouts/shadows can make outlines hard to perceive; add an overlay ring too */
.card[data-scope][data-date].is-drop-target,
.card[data-sidebar-user-id].is-drop-target,
.task-group.is-drop-target,
.task-subgroup.is-drop-target {
  position: relative;
}

.card[data-scope][data-date].is-drop-target::after,
.card[data-sidebar-user-id].is-drop-target::after,
.task-group.is-drop-target::after,
.task-subgroup.is-drop-target::after {
  content: '';
  position: absolute;
  /* Keep the overlay inside the element so it can't overlap adjacent zones */
  /*inset: 2px;*/
  border: 2px dashed rgba(0, 122, 204, 0.55);
  border-radius: 10px;
  pointer-events: none;
  z-index: 50;
  opacity: 1;
  transition: opacity 90ms ease;
}

/* Reduce flicker during pointer hit-testing: keep the overlay non-layout affecting */
.card[data-scope][data-date],
.card[data-sidebar-user-id],
.task-group,
.task-subgroup {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.task.is-dnd-dragging {
  opacity: 0.92;
  cursor: grabbing;
  /* Let hit-testing see the real drop zone under the dragged tile */
  pointer-events: none;
}

/* Stabilize index drop outlines: avoid hover/outline thrash */
.card.is-drop-target,
.task-group.is-drop-target,
.task-subgroup.is-drop-target,
.tasks-page .card.is-drop-target {
  outline-style: dashed;
}

@keyframes dnd-invalid-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.btn.mini {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  /*transition: color .2s ease;*/
  color: rgba(0,0,0,0.68);
}
.btn.mini:hover{
  background-color: var(--bg-hover, rgba(0,0,0,0.06)) !important;
}
.btn.mini svg {
  transition: color .2s ease;
  color: currentColor;
}

/* Inline editor category button uses its own color; don't override on hover */
.task .task-inline-menu .btn.mini[data-inline-cat="1"]:hover svg {
  color: inherit !important;
}

/* Inline editor difficulty button uses its own color; don't override on hover */
.task .btn.mini[data-inline-diff="1"]:hover svg {
  color: inherit !important;
}

/* Inline editor owners button uses its own color; don't override on hover */
.task .btn.mini[data-inline-owners="1"]:hover svg {
  color: inherit !important;
}

/* Inline editor recurrence button uses its own color; don't override on hover */
.task .btn.mini[data-inline-rec="1"]:hover svg {
  color: inherit !important;
}

/* Inline editor delete button uses its own color; don't override on hover */
.task .btn.mini[data-inline-delete="1"]:hover svg {
  color: inherit !important;
}

/* Inline editor due date icon uses its own color; don't override on hover */
.task .task-inline-date-wrap:hover svg {
  color: inherit !important;
}

/* index.php: due date pill text should inherit the button color */
.card[data-scope][data-date] .task-actions .task-inline-date-input {
  color: inherit;
  font-size: 11px;
  line-height: 1;
}

.btn.mini:disabled { cursor: default; }

/* Keep mini-button contents following the button color */
.btn.mini * {
  color: inherit;
}

/*.btn.mini[data-main-task-subscribe="1"],
.btn.mini[data-main-task-unsubscribe="1"] {
  border: 0;
  background: transparent;
  padding: 0;
}*/




.mini-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --sizeW:22px;
  --sideDiff:8px;
  --sizeH:calc(var(--sizeW) - var(--sideDiff));
  --sizeBall:calc(var(--sideDiff) + var(--sideDiff) / 4);
  width: var(--sizeH);
  height: var(--sizeW);
  /*transform: rotate(90deg);*/
  cursor: pointer;
}
.mini-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mini-switch-slider {
  width: var(--sizeH);
  height: var(--sizeW);
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  /*border: 1px solid rgba(0,0,0,0.14);*/
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: background .4s ease, border-color .4s ease, transform .4s ease-in-out;
}
.mini-switch-slider:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1px;
  width: var(--sizeBall);
  height: var(--sizeBall);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  transition: transform .4s ease-in-out;
}
.mini-switch input:checked + .mini-switch-slider {
  background-color: var(--bg);
  /*background: rgba(46, 160, 67, 0.92);*/
  /*border-color: rgba(46, 160, 67, 0.65);*/
  /*transition: background .4s ease, border-color .4s ease, transform .4s ease-in-out;*/
}
.mini-switch input:checked + .mini-switch-slider:before {
  transform: translateY(9px);
}

/* When user is unsubscribed from a main task, render switch as deactivated */
.tasks-page .task.is-unsubscribed .mini-switch input:checked + .mini-switch-slider {
  background: rgba(0,0,0,0.25);
  border-color: rgba(0,0,0,0.14);
  transition: background .4s ease, border-color .4s ease, transform .4s ease-in-out;
}
.task .meta { transition: opacity .3s ease; list-style:none; padding:0; font-size: 12px; color:#000;margin:0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; opacity: .55; justify-content: space-between;}
.task:hover .meta { opacity: .77 }
.task .meta li {display: flex; gap: 5px; align-items: center;}
.task .meta li.scheduled_for { justify-self: flex-start; }
.task .meta li.users { justify-content: end }
/*.task .meta li.users a { text-decoration: none; background-color: white; color:black; border-radius: 20px; padding: 3px 12px; white-space: nowrap; }*/
.task .meta li.users a { text-decoration: none; color:black; white-space: nowrap; }
/*.task .meta li svg { opacity: .4; }*/

/* Modern tasks UI: due date + postponed indicator */
.task-due-wrap { display: inline-flex; align-items: center; gap: 8px; }
.task-due {
  width: auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9);
  font-size: 12px;
}
.task-due.is-postponed { border-color: rgba(240, 140, 0, 0.55); background: rgba(255, 237, 210, 0.8); }
.task-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.72);
}
.task-flag.is-postponed { border-color: rgba(240, 140, 0, 0.45); background: rgba(255, 227, 189, 0.8); color: rgba(120, 60, 0, 0.9); }

/* Task grouping inside scope cards */
/*.task-group { margin: 10px 0 12px; }*/
.task-group-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}

/* Scope cards: hover a group/subgroup to accent its date title */
.card[data-scope] .task-group-title .task-group-label,
.card[data-scope] .task-subgroup-title .task-subgroup-label {
  position: relative;
  display: inline-block;
  transition: color 220ms ease;
}

.card[data-scope] .task-group,
.card[data-scope] .task-subgroup {
  border-radius: 10px;
  transition: background-color 220ms ease;
}

.card[data-scope] .task-group:hover > .task-group-title .task-group-label,
.card[data-scope] .task-subgroup:hover > .task-subgroup-title .task-subgroup-label {
  /*color: var(--accent);*/
}

.card[data-scope] .task-group:hover,
.card[data-scope] .task-subgroup:hover {
  /* background-color: hsla(240,100%,97%, 1.0); */
}

@media (prefers-reduced-motion: reduce) {
  .card[data-scope] .task-group-title .task-group-label,
  .card[data-scope] .task-subgroup-title .task-subgroup-label {
    transition: none;
  }

  .card[data-scope] .task-group,
  .card[data-scope] .task-subgroup {
    transition: none;
  }
}

/* /tasks: visually hide group label (keep layout) */
.tasks-page .task-group-title .task-group-label {
  color: transparent;
}

/* Keep /tasks group label visually hidden even on hover */
.tasks-page .task-group:hover > .task-group-title .task-group-label {
  color: transparent;
}

/* Day scope: make group title white */
.card[data-scope="day"] .task-group-title .task-group-label {
  color: #fff;
}

/* But keep /tasks label hidden even in day scope */
.tasks-page .card[data-scope="day"] .task-group-title .task-group-label {
  color: transparent;
}

/* index.php: hide empty placeholder while inline create is open */
.task-group[data-has-temp-new="1"] .task.task--empty,
.task-subgroup[data-has-temp-new="1"] .task.task--empty,
.card[data-has-temp-new="1"] .task.task--empty {
  display: none;
}

.task-group,
.task-subgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
/* Sub-grouping (used in year scope: month -> day) */
.task-subgroup { padding-left: 10px; border-left: 2px solid rgba(0,0,0,0.06); }
.task-subgroup-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}

/* index.php: inline create child task editor (group/subgroup) */
.task-group-add.btn.mini {
  padding: 2px 8px;
  min-width: 26px;
  height: 22px;
  line-height: 18px;
  font-weight: 700;
  border-radius: 999px;
  opacity: 0.7;
}
.task-group-add.btn.mini:hover { opacity: 1; }
.task-group-add.btn.mini:disabled { opacity: 0.35; }
.task.is-title-editing,
.task.is-temp-new {
  border: 1px dashed rgba(0,0,0,0.18);
}
.task.is-temp-new {
  
  background: rgba(255,255,255,0.75);
  cursor: default;
  animation: idx-inline-new-fade 180ms ease-out;
  will-change: opacity, transform;
  /* Allow dropdowns to escape the tile */
  overflow: visible;
}

.task.is-temp-new.is-owners-open {
  z-index: 80;
}

.task.is-temp-new.is-cat-open {
  z-index: 80;
}

.task.is-temp-new.is-rec-open {
  z-index: 80;
}

.task.is-temp-new.is-date-open {
  z-index: 80;
}

.task.is-temp-new.is-range-open {
  z-index: 80;
}

/* /tasks: ensure inline range calendar overlays neighboring cards */
.tasks-page .card:has(.task.is-temp-new.is-range-open) {
  position: relative;
  z-index: 120;
}
.tasks-page .card:has(.task.is-temp-new.is-range-open) .task-inline-range-dropdown,
.tasks-page .card:has(.task.is-temp-new.is-range-open) .task-inline-date-dropdown {
  z-index: 130;
}

/* /tasks: also lift existing tasks when range/calendar dropdown is open */
.tasks-page .card:has(.task.is-range-open) {
  position: relative;
  z-index: 120;
}
.tasks-page .card:has(.task.is-range-open) .task-inline-range-dropdown,
.tasks-page .card:has(.task.is-range-open) .task-inline-date-dropdown {
  z-index: 130;
}

/* /tasks: lift card while any inline action dropdown is open */
.tasks-page .card:has(.task.is-action-menu-open) {
  position: relative;
  z-index: 120;
}
.tasks-page .card:has(.task.is-action-menu-open) .task-inline-owners-dropdown,
.tasks-page .card:has(.task.is-action-menu-open) .task-inline-date-dropdown {
  z-index: 130;
}

/* /tasks: fallback for browsers without :has() */
.tasks-page .card.is-card-menu-open,
.tasks-page .card.is-card-range-open {
  position: relative;
  z-index: 120;
}
.tasks-page .card.is-card-menu-open .task-inline-owners-dropdown,
.tasks-page .card.is-card-menu-open .task-inline-date-dropdown,
.tasks-page .card.is-card-range-open .task-inline-range-dropdown,
.tasks-page .card.is-card-range-open .task-inline-date-dropdown {
  z-index: 130;
}

/* Inline date picker dropdown (custom calendar) */
.task .task-inline-date-dropdown {
  right: auto;
  left: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 12px;
  width: max-content;
  border-radius: 8px;
}

.task.is-temp-new .task-inline-date-dropdown {
  left: -130px;
}

.task .task-inline-date-cal {
  /* display: none; */
  gap: 8px;
}

.task .task-inline-date-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 6px;
}

.task .task-inline-date-cal-title {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  text-transform: capitalize;
}

.task .task-inline-date-nav {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.task .task-inline-date-nav:hover {
  background: var(--owner-hover, rgba(0,0,0,0.04));
}

.task .task-inline-date-nav svg { display: block; }

.task .task-inline-date-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
}

.task .task-inline-date-week div {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.55;
}

.task .task-inline-date-days {
  --day-width:30px;
  display: grid;
  grid-template-columns: repeat(7, var(--day-width));
  gap: 8px;
}

.task .task-inline-date-day {
  width: var(--day-width);
  height: var(--day-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

.task .task-inline-date-day:hover {
  background: var(--owner-hover, rgba(0,0,0,0.04));
}

.task .task-inline-date-day.is-selected {
  background: var(--date-selected, rgba(0,0,0,0.10));
  color: var(--date-selected-text, inherit);
}

.task .task-inline-date-day.is-today {
  outline: 1px solid var(--date-selected-text, rgba(0,0,0,0.18));
  outline-offset: -1px;
}

.task .task-inline-date-empty {
  width: 36px;
  height: 32px;
}

.task .task-inline-date-actions {
  display: flex;
  justify-content: flex-end;
  /*padding-top: 8px;*/
  justify-content: center;
}

.task .task-inline-date-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}

.task .task-inline-date-today:hover {
  background: var(--owner-hover, rgba(0,0,0,0.04));
}

.task.is-temp-new.is-closing {
  animation: idx-inline-new-fade-out 160ms ease-in;
}

@keyframes idx-inline-new-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes idx-inline-new-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

.task.is-temp-new .title {
  width: 100%;
}

.task .task-inline-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px 4px;
  font: inherit;
  font-weight: 700;
  outline: none;
}

/* Legacy selector: keep for index.php inline editor */
.task .task-inline-menu {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Inline create on /tasks uses .task-actions, keep same layout */
.task .task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  padding-left: 20px;
  /*backdrop-filter: blur(5px);*/
}

/* Inline editor owners dropdown */
.task .task-inline-owners-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.task .task-inline-owners-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.task .task-inline-owners-dropdown {
  position: absolute;
  /* left: -180px; */
  top: calc(100% + 8px);
  min-width: max-content;
  max-width: 320px;
  max-height: 300px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  filter: var(--drop-shadow);
  color: rgba(0,0,0,0.72);
  /*border: 1px solid rgba(0,0,0,0.06);*/
  transform-origin: top right;
  transition: none;
  animation: idx-inline-owners-pop 160ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Scrollbar: no arrows, 5px thick, same color as text */
  scrollbar-width: thin;
  scrollbar-color: currentColor transparent;
}

/* Neutralize dropdown theming (text + hover + selected day) */
.task .task-inline-owners-dropdown {
  --owner-hover: rgba(0,0,0,0.06);
  --date-selected: rgba(0,0,0,0.12);
  --date-selected-text: rgba(0,0,0,0.88);
}
.task .task-inline-date-dropdown {
  max-width: none;
  max-height: none;
}

.task .task-inline-owners-dropdown::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.task .task-inline-owners-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.task .task-inline-owners-dropdown::-webkit-scrollbar-thumb {
  background: currentColor;
  border-radius: 999px;
}

.task .task-inline-owners-dropdown::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

/* Inline editor category dropdown aligns to left of its button */
.task .task-inline-cat-wrap .task-inline-owners-dropdown {
  left: -150px;
  right: auto;
  transform-origin: top left;
}

/* /tasks: recurrence dropdown position tweak (existing tasks only) */
.tasks-page .task:not(.is-temp-new) .task-inline-rec-wrap .task-inline-rec-dropdown,
.tasks-page .task:not(.is-temp-new) [data-main-task-recurrence-wrap="1"] .task-inline-rec-dropdown {
  top: calc(100% + 8px);
  right: -180px;
}

/* Category dropdown sizing */
.task .task-inline-cat-dropdown {
  min-width: 320px;
  max-width: 420px;
}

/* Ensure min-width isn't bypassed by base max-content rule */
.task .task-inline-owners-dropdown.task-inline-cat-dropdown {
  min-width: 380px;
}

.task .task-inline-owners-dropdown.is-closing {
  animation: idx-inline-owners-pop-out 140ms ease-in;
}

.task .task-inline-owners-dropdown:not(.task-inline-date-dropdown):not(.task-inline-rec-dropdown) {
  animation: none;
  transition: none;
}

.task .task-inline-owners-dropdown.task-inline-prio-dropdown.is-closing,
.task .task-inline-owners-dropdown.task-inline-cat-dropdown.is-closing,
.task .task-inline-owners-dropdown:not(.task-inline-date-dropdown):not(.task-inline-rec-dropdown).is-closing {
  animation: none;
}

@keyframes idx-inline-owners-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes idx-inline-owners-pop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

.task .task-inline-owner-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.btn.mini.task-inline-date-wrap.task-inline-range-date-wrap,
.task-inline-owners-wrap.task-inline-rec-wrap .btn.mini {
  white-space: nowrap;
}
/* Owners dropdown rows: icon + avatar + text */
.task.is-temp-new .task-inline-owners-dropdown .task-inline-owner-row--owners,
.task .task-inline-owners-dropdown .task-inline-owner-row--owners {
  grid-template-columns: auto auto 1fr;
}

/* Recurrence dropdown rows: icon + text */
.task.is-temp-new .task-inline-owners-dropdown .task-inline-owner-row.task-inline-rec-row,
.task .task-inline-owners-dropdown .task-inline-owner-row.task-inline-rec-row {
  grid-template-columns: auto 1fr;
}

.task.is-temp-new .task-inline-owners-dropdown .task-inline-owner-row.task-inline-cat-row,
.task .task-inline-owners-dropdown .task-inline-owner-row.task-inline-cat-row,
.task .task-inline-action-category .task-inline-owner-row.task-inline-cat-row {
  grid-template-columns: 24px 12px 1fr;
}

/*.task.is-temp-new .task-inline-owners-dropdown .task-inline-owner-row,*/
.task .task-inline-action-category .task-inline-owner-row {
  grid-template-columns: 24px 1fr;
}

.task .task-inline-prio-dropdown .task-inline-owner-row,
.task .task-inline-action-priority .task-inline-owner-row {
  grid-template-columns: 24px 1fr;
}

.task .task-inline-prio-dropdown {
  left: 0;
  right: auto;
  min-width: 220px;
}

.task .task-inline-prio-wrap .task-inline-prio-dropdown {
  left: -80px;
  right: auto;
  top: calc(100% + 2px);
  transform-origin: top left;
}

.card[data-scope][data-date] .task.is-temp-new .task-inline-owners-wrap > .task-inline-owners-dropdown:not(.task-inline-cat-dropdown):not(.task-inline-rec-dropdown):not(.task-inline-date-dropdown):not(.task-inline-prio-dropdown) {
  left: 20px;
  right: auto;
}

.user-view-wrapper .task:not(.is-temp-new) .task-inline-action-dropdown.task-inline-action-priority {
  left: 100px !important;
  right: auto !important;
}

.task .task-inline-prio-field-row {
  display: grid;
  grid-template-columns: 1fr 76px auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
}

.task .task-inline-prio-field-label {
  font-size: 12px;
  font-weight: 700;
}

.task .task-inline-prio-input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.82);
}

.task .task-inline-action-priority-sep {
  height: 1px;
  margin: 6px 0;
  background: rgba(0,0,0,0.08);
}

/* (Legacy) no-op: keep dropdown rows normal */
.task.is-temp-new .task-inline-owners-dropdown .task-inline-owner-row{ }
.task .task-inline-owner-row:hover {
  background: var(--owner-hover, rgba(0,0,0,0.04));
}

.task .task-inline-owner-toggle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.task .task-inline-owner-toggle svg { display: block; }

.task .task-inline-cat-color {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.task .task-inline-owner-avatar-spacer {
  width: 32px;
  height: 32px;
}

.task .task-inline-owner-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline editor due date control */
.task .task-inline-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Ensure pointer cursor is visible on the due date text too */
.task .task-inline-date-wrap button,
.task .task-inline-date-wrap input {
  cursor: pointer;
}

.task .task-inline-date-wrap:hover {
  background-color: var(--bg-hover, rgba(0,0,0,0.06)) !important;
}

/* /tasks: date range pill hover should follow the same rules as other buttons */

.tasks-page .task .task-inline-range-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}
.task .task-inline-date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.task .task-inline-date-icon svg { display: block; }

.task .task-inline-date-input {
  width: auto;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  color: #222;
  pointer-events: none;
}

.task .task-inline-date-input {
  /* Progressive enhancement (only supported in some browsers) */
  field-sizing: content;
}

/* Keep the real date input functional but visually hidden (overlays the wrap) */
.task .task-inline-date-native {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* index.php: existing-task due pill uses a span wrapper; keep it keyboard-clickable */
.task .task-inline-date-wrap[role="button"] {
  cursor: pointer;
}

/* Ensure the calendar dropdown can escape the date pill */
.task .task-inline-date-wrap {
  overflow: visible;
}

.task .task-inline-menu .btn.mini[data-inline-cat="1"],
.task .task-actions .btn.mini[data-inline-cat="1"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task .task-inline-menu .btn.mini[data-inline-cat="1"] svg,
.task .task-actions .btn.mini[data-inline-cat="1"] svg {
  display: block;
}

/* (category button no longer shows id/name, icon only) */

/* Category + recurrence button labels are intentionally hidden (icon only).
   Keep names discoverable via title tooltip and dropdown selection UI. */

.task .btn.mini[data-inline-diff="1"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* /tasks: main-task inline create date range label */
.tasks-page .task .btn.mini[data-inline-range="1"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.tasks-page .task .btn.mini[data-inline-range="1"] svg {
  display: block;
}

.tasks-page .task .btn.mini[data-inline-range="1"] .task-inline-range-a,
.tasks-page .task .btn.mini[data-inline-range="1"] .task-inline-range-b {
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Difficulty button color is driven by current category color (JS). */

.task .btn.mini[data-inline-diff="1"] svg {
  display: block;
}

.task .task-inline-diff-id {
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Inline editor now renders the difficulty id as a text node (no span) */
.task .btn.mini[data-inline-diff="1"] {
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Inline editor: normalize control typography + disable selection */
.task .task-inline-owners-dropdown,
.task .task-inline-owners-dropdown *,
.task .task-inline-date-wrap,
.task .task-inline-date-wrap *,
.task .task-inline-range-head,
.task .task-inline-range-head *,
.task .task-actions .btn.mini,
.task .task-actions .btn.mini * {
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
}

/* /tasks: range pill should match due-date typography */
.task .btn.mini.task-inline-range-date-wrap[data-inline-range="1"] {
  font-size: 12px;
}

/* Inline editor recurrence button: icon + label (when label is present) */
.task .btn.mini[data-inline-rec="1"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* /tasks: temp-new recurrence dropdown placement */
.tasks-page .task.is-temp-new .task-inline-rec-wrap .task-inline-rec-dropdown {
  top: calc(100% + 8px);
  right: 0;
}

/* Recurrence selection uses dropdowns (no click-cycling). */

/* /tasks: main-task inline create date range dropdown */
.task .task-inline-range-wrap .task-inline-owners-dropdown {
  left: -140px;
  right: auto;
  transform-origin: top left;
  min-width: 280px;
  max-width: 280px;
  /* display: flex; */
  flex-direction: column;
  /* align-items: center; */
  align-content: center;
}

.task .task-inline-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.task .task-inline-range-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.75;
}

.task .task-inline-range-grid input[type="date"] {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  font: inherit;
  color: #222;
}

.task .task-inline-range-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
  width: 100%;
}

/* Range picker header (two tabs + arrow) */
.task .task-inline-range-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px;
}

.task .task-inline-range-head.task-inline-range-head--single {
  grid-template-columns: 1fr;
}

.task .task-inline-range-tab {
  display: inline-flex;
  align-items: center;
  justify-content: stretch;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.task .task-inline-range-tab.task-inline-range-tab--single {
  gap: 0;
}

.task .task-inline-range-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: center;
  padding: 5px;
  outline: none;
}

.task .task-inline-range-caption {
  font-size: 10px;
  line-height: 1;
  opacity: 0.65;
}

.task .task-inline-range-tab.is-active {
  /*background: rgba(0,0,0,0.06);*/
background: var(--date-selected, rgba(0,0,0,0.10));
color: var(--date-selected-text, inherit);
}

.task .task-inline-range-tab.task-inline-range-tab--single:focus-within {
  background: var(--date-selected, rgba(0,0,0,0.10));
  color: var(--date-selected-text, inherit);
}

.task .task-inline-range-mid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}

.task .task-inline-menu .btn.mini,
.task .task-actions .btn.mini {
  padding: 4px 6px;
}

.task-meta-owners {
  font-weight: 700;
}
/* Column header (pagination) */
.col-header { display: flex; align-items: center; justify-content: space-between; gap: 8px;}

.col-controls { display:flex; align-items:center; justify-content:flex-start; }
.col-title {/*text-transform: capitalize;*/text-align:center;font-weight:600;font-size: 18px;user-select: none;cursor: pointer;width: 100%}
.col-controls:last-child { justify-content:flex-end; }

.col-title::first-letter {
  text-transform: uppercase;
}

/* index.php: inline "jump to date" editor (dblclick on .col-title) */
.col-title.is-jump-editing { text-transform: none; }

/* /tasks: inline category title editor (dblclick on .col-title) */
.col-title.is-title-editing { text-transform: none; cursor: text; }
.col-cat-form { width: 100%; }
.col-cat-input {
  width: 100%;
  /*padding: 4px 6px;*/
  /*border: 1px solid rgba(0,0,0,0.16);*/
  /*border-radius: 8px;*/
  /*background: #fff;*/
  color: inherit;
  font: inherit;
  text-align: left;
  font-size: 16px;

  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 600;
  outline: none;
  user-select: text;

  transition: color 220ms ease;
}
.col-cat-input:focus { outline: none; border-color: rgba(0,0,0,0.28); }

/* Keyframe entry animation for category title editing */
.col-title.is-title-editing .col-cat-input {
  animation: col-cat-input-enter 220ms ease-out both;
}

@keyframes col-cat-input-enter {
  from { color: var(--color); }
  to { color: #bbb; }
}

@media (prefers-reduced-motion: reduce) {
  .col-title.is-title-editing .col-cat-input {
    animation: none;
  }
}

/* Selection highlight: use current category tint + dark grey text */
.tasks-page .card[data-category-color] .col-cat-input::selection {
  background: var(--cat-selection, rgba(0,0,0,0.12));
  color: rgba(0,0,0,0.78);
}
.col-jump-form { width:1fr; }
.col-jump-input {
  width: 100%;
  padding: 4px 6px;
  /*border: 1px solid rgba(0,0,0,0.16);*/
  /*border-radius: 8px;*/
  /*background: #fff;*/
  color: #222;
  font: inherit;
  text-align: center;
  /*font-size: 14px;*/
  /*max-height: 29px;*/
  border: 0;
  padding: 0;
  outline: none;
  /*font-size: 15px;*/
}


.tasks-page .col-header { 
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.tasks-page .col-title {
  text-align: left;
  width: fit-content;
  user-select: none !important;
}

/* Exit edit mode: animate title color back */
.tasks-page .col-title:not(.is-title-editing) {
  animation: col-title-exit-color 220ms ease-out both;
}

@keyframes col-title-exit-color {
  from { color: #bbb; }
  to { color: rgba(0,0,0,0.82); }
}

.tasks-page .col-title.is-title-editing {
  width: 100%;
  user-select: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tasks-page .col-title:not(.is-title-editing) {
    animation: none;
  }
}

.col-jump-input:focus { outline: none; border-color: rgba(0,0,0,0.28); }
.page-btn { display:inline-block; padding:6px 10px; background:transparent; color:var(--accent); border-radius:4px; text-decoration:none; font-weight:700; border:0px solid transparent; font-size:13px;}
.page-btn svg {/* opacity: .33; */}
.page-btn:hover { background: hsla(240, 100%, 95%, 1.0);  }
.page-btn.disabled { opacity:0.45; cursor:default; pointer-events:none; color:var(--muted); background:transparent; border-color:transparent; }
.col-meta {display:grid;grid-template-columns: 0.6fr 0.8fr 0.6fr;font-size: 12px;color:var(--muted);justify-content: space-between;align-items: center;font-weight: 500;}

/* /tasks meta controls (col-meta) shared vars */
.tasks-page .col-meta {

}
.col-meta a {text-decoration: none; color: var(--muted); justify-self: end; }
.col-meta .card-pagination .page-btn {padding: 10px;}
.col-meta .card-pagination span {display:flex;padding-bottom: 0px;margin:0 5px;font-weight: 600;}
.col-meta .card-pagination {justify-self:center;display: grid;grid-template-columns: auto 1fr auto;align-items: center;}

.col-meta * {
  user-select: none;
}

/* /tasks card sort controls (far right) */
.card-controls { justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tasks-page .panel > .tasks-page-controls {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.card-sort { justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.card-filter { justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* /tasks filter buttons (eye/user) should look like sort buttons */
.tasks-page .card-filter .sort-btn {
  /*padding: 4px 8px;*/
  background: transparent;
  border: 0;
}
.card-sort .sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*padding: 5px 10px;*/
  /*border-radius: 999px;*/
  /*border: 1px solid rgba(0,0,0,0.10);*/
  /*background: rgba(0,0,0,0.04);*/
  /*color: rgba(0,0,0,0.70);*/
  color: var(--muted);
  /*font-weight: 800;*/
  /* letter-spacing: 0.02em; */
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
 }
 /*.card-sort .sort-btn:hover { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.85); }*/
.card-sort .sort-btn.is-active:before { content: ''; margin-right: 0; }
.card-filter .sort-btn.is-active:before { content: ''; margin-right: 0; }

/* Active state: use category color for icon strokes (currentColor) */
.card .card-sort .sort-btn.is-active,
.card .card-filter .sort-btn.is-active {
  color: var(--cat-color, var(--accent));
}

/* In col-meta, active text buttons should use configured weight */
.col-meta .card-sort .sort-btn.is-active {
  font-weight: var(--colmeta-active-weight, 700);
}
.col-meta .scope-reset { display: flex; align-items: center; }

.col-meta > div {
  display: grid;
  grid-template-columns: max-content max-content;
  gap:5px;
  align-items: center;
}

.col-meta .card-controls {
  grid-template-columns: max-content max-content max-content;
}

.meta-total-difficulties {
  /*opacity: 0.75;*/
  /*font-weight: 700;*/
  /*letter-spacing: 0.01em;*/
}

.col-meta .scope-reset,
.col-meta > div > a {
  display: flex;
  list-height: 0;
  /* opacity: .33; */
  transition: opacity .4s ease;
}

.col-meta .scope-reset:hover,
.col-meta > div > a:hover {
  opacity: .77;
}

/* /tasks: meta controls (pagination, sort, print) should theme on hover */
.page-btn,
.card-filter .sort-btn,
.card-sort .sort-btn,
.print-link {
  border-radius: var(--colmeta-btn-radius);
  cursor: pointer;
}

/* Center content + equalize sizing inside col-meta */
.col-meta .page-btn,
.col-meta .card-filter .sort-btn,
.col-meta .card-sort .sort-btn,
.col-meta .print-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height: var(--colmeta-btn-h); */
  padding: 0;
  /* min-width: var(--colmeta-btn-h); */
  border:0;
  background-color:transparent;
}

/* Inactive (non-selected) state color inside col-meta */
.col-meta .card-filter .sort-btn:not(.is-active),
.col-meta .card-sort .sort-btn:not(.is-active),
.col-meta .page-btn,
.col-meta .print-link {
  color: var(--colmeta-inactive);
}

.col-meta .page-btn svg,
.col-meta .card-filter .sort-btn svg,
.col-meta .card-sort .sort-btn svg,
.col-meta .print-link svg {
  display: block;
}

/* One page pagination: keep text in inactive color */
.col-meta .card-pagination.one-page-only .muted {
  color: var(--colmeta-inactive);
}


.col-meta .page-btn:not(:has(svg)),
.col-meta .card-filter .sort-btn:not(:has(svg)),
.col-meta .card-sort .sort-btn:not(:has(svg)),
.col-meta .print-link:not(:has(svg)) {
  /* padding: 0 8px; */
}


.page-btn {
  color: var(--muted);
}


.page-btn:hover,
.card-filter .sort-btn:hover,
.card-sort .sort-btn:hover,
.print-link:hover {
  /*background-color: var(--bg-hover) !important;*/
  color: currentColor !important;
}

/* In col-meta, hover should use the category color */
.sort-btn:hover svg,
.sort-btn.is-active svg,
.col-meta .page-btn:hover:not(.disabled),
.col-meta .card-filter .sort-btn:hover,
.col-meta .card-sort .sort-btn:hover,
.col-meta .print-link:hover {
  color: var(--cat-color, var(--accent)) !important;
}

/* index.php: col-meta hover is neutral (no category tint) */
.user-view-wrapper .col-meta .page-btn:hover:not(.disabled),
.user-view-wrapper .col-meta .card-filter .sort-btn:hover,
.user-view-wrapper .col-meta .card-sort .sort-btn:hover,
.user-view-wrapper .col-meta .print-link:hover,
.global-view-wrapper .col-meta .page-btn:hover:not(.disabled),
.global-view-wrapper .col-meta .card-filter .sort-btn:hover,
.global-view-wrapper .col-meta .card-sort .sort-btn:hover,
.global-view-wrapper .col-meta .print-link:hover {
  background-color: var(--colmeta-hover-bg) !important;
  color: currentColor !important;
}

.user-view-wrapper .col-meta .card-sort .sort-btn.is-active,
.user-view-wrapper .col-meta .card-filter .sort-btn.is-active,
.global-view-wrapper .col-meta .card-sort .sort-btn.is-active,
.global-view-wrapper .col-meta .card-filter .sort-btn.is-active {
  color: var(--accent) !important;
}

.task.is-meta-hidden,
.task-group.is-meta-hidden,
.task-subgroup.is-meta-hidden {
  display: none !important;
}

/* Disabled pagination buttons should not theme on hover */
.tasks-page .page-btn.disabled:hover {
  background-color: transparent !important;
  /*color: var(--muted) !important;*/
}

.tasks-page .page-btn svg {
  /* opacity: 0.55; */
}

.tasks-page .page-btn:hover svg {
  opacity: 1;
}

.tasks-page .card-sort .sort-btn {
  /* padding: 4px 8px; */
}

.tasks-page .print-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  opacity: 1;
}

.tasks-page .print-link:hover {
  opacity: 1 !important;
}

.tasks-page .print-link svg {
  display: block;
}


/* Form helpers */
/*.form { display:block; }*/
/*.form label { display:block; margin-bottom:12px; }*/
.form input, .form select, .form textarea { width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:6px; font-size:14px; }
.form textarea { min-height:100px; }

/* Form grid */
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-bottom:12px; }
@media (max-width:700px) { .form-grid { grid-template-columns: 1fr; } }

/* ------------------------
   Modal
   ------------------------ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 2000; }
.modal-dialog { background: var(--panel-bg); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 100%; max-width: 820px; max-height: 90vh; overflow: auto; position: relative; padding: 8px; border: 1px solid var(--border); }
.modal-close { position: absolute; top:8px; right:10px; border:0; background:transparent; font-size:24px; color:var(--muted); cursor:pointer; line-height:1; }
.modal-content { margin-top:6px; padding:16px; border-radius:8px; /* background may be set dynamically */ }

/* Wide variant for the main-task 2-col modal */
.modal-overlay[data-variant="main-task-focus"] .modal-dialog {
  max-width: 1100px;
}

/* Split modal layout (2-column modals) */
.modal-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .modal-split { grid-template-columns: 1fr; }
}
.modal-split .modal-col {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 12px;
}
.modal-split .modal-col h3,
.modal-split .modal-col h4 {
  margin: 0 0 10px 0;
}

/* Instances list (used in /api/task_timeline.php) */
.instances-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.instances-meta { font-size: 12px; color: var(--muted); }
.instances-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.instance-item { background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; }
.instance-item.is-done { opacity: 0.7; }
.instance-header {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.instance-body { padding: 10px; border-top: 1px solid rgba(0,0,0,0.06); }
.instance-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px; }
@media (max-width: 900px) { .instance-fields { grid-template-columns: 1fr; } }
.instance-comment { margin-top: 8px; font-size: 12px; }
.instance-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Child task comments (used in /api/task_timeline.php) */
.instance-comments {
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
}
.instance-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.comments-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.comment-item {
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  padding: 8px;
}
.comment-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.comment-item-meta {
  min-width: 0;
}
.comment-item-meta .muted {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comment-item-body {
  margin-top: 6px;
  white-space: pre-wrap;
}
.comment-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.comment-form-actions {
  display: flex;
  justify-content: flex-end;
}

/* (child-form-wrap removed; no longer used) */

/* Main task focus modal (new 2-column modal) */
.main-task-focus .focus-left-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.main-task-focus .focus-main-link {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.main-task-focus .child-list {
  display: grid;
  gap: 8px;
  max-height: 55vh;
  overflow: auto;
  padding-right: 6px;
}
.main-task-focus .child-item {
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}
.main-task-focus .child-item.is-active {
  outline: 2px solid rgba(0,122,204,0.25);
}
.main-task-focus .child-item .child-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.main-task-focus .child-item .child-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.main-task-focus .focus-right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.main-task-focus .timeline-list {
  display: grid;
  gap: 10px;
}
.main-task-focus .timeline-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 10px;
}
.main-task-focus .timeline-item .tl-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.main-task-focus .timeline-item .tl-meta { font-size: 12px; color: var(--muted); }
.main-task-focus .timeline-item .tl-comment { font-size: 13px; white-space: pre-wrap; }

/* Modal inputs */
.modal-content .form label { display:block; margin-bottom:10px; }
.modal-content .form input, .modal-content .form select, .modal-content .form textarea, .auth-form input {width:100%;padding: 12px;border:1px solid #e6e6e6;border-radius: 4px;margin-top: 0;}

/* Modal actions */
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* ------------------------
   Buttons - unified look in modals
   ------------------------ */
.btn {display:inline-flex;align-items:center;justify-content:center;padding: 12px 16px;border-radius: 4px;border:1px solid transparent;text-decoration:none;cursor:pointer;font-size: 14px;font-weight: 600;}

/* All button elements should be bold (requested) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  /*font-weight: 700;*/
}
.btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-color);
justify-self: end;
}
.btn.primary:hover { background-color: hsla(240, 100%, 80%, 1.0); }
.btn.cancel { background: var(--btn-cancel-bg); color: var(--btn-cancel-color); }
.btn.cancel:hover { filter:brightness(1.3); }
.btn.delete { background: hsla(0, 100%, 60%, 1.0); color: var(--btn-delete-color); }
.btn.delete:hover {  background: hsla(0, 100%, 70%, 1.0) }

/* Form errors */
.form-errors { background: #ffecec; color: #900; border:1px solid #f5c6c6; padding:8px; border-radius:6px; margin-bottom:12px; }

/* Footer */
.site-footer { padding:20px; color:var(--muted); text-align:center; border-top:1px solid var(--border); margin-top:40px; }

/* ------------------------
   Admin page layout & tables
   ------------------------ */
.admin-page { display:flex; gap:20px; align-items:flex-start; margin-top: 80px}

.admin-sidebar {
  width: 200px;
  background: #fff;
  /*border: 1px solid var(--border);*/
  border-radius: 8px;
  padding: 12px;
  position: sticky;
  top: 74px; /* below topbar */
  /*height: calc(100vh - 90px);*/
  overflow:auto;
}
.admin-sidebar nav ul { list-style:none; padding:0; margin:0; display:block; }
.admin-sidebar nav li { margin-bottom:8px; }
.admin-sidebar nav li a { display:block; padding:8px 10px; color:var(--muted); text-decoration:none; border-radius:6px; }
.admin-sidebar nav li.active a, .admin-sidebar nav li a:hover { background: rgba(0,122,204,0.06); color: var(--accent); }
.admin-main { flex: 1}

/* Admin tables */
.admin-table { width:100%; border-collapse: collapse; background: #fff; border-radius:6px; overflow:hidden; }
.admin-table th, .admin-table td { text-align:left; font-size:14px; }
.admin-table thead th { font-weight:600; }


.admin-table tbody tr:hover { background:hsla(204, 100%, 40%, 0.06); color:var(--accent);}

.admin-table input { margin:0 }

.admin-table,
.admin-table thead,
.admin-table tbody,
.admin-table thead tr,
.admin-table tbody tr { display:grid; }

.admin-table thead tr { height:50px; background: #fafafa;}
.admin-table thead tr,
.admin-table tbody tr { align-items: center; border-bottom: 1px solid hsla(0,100%,0%,0.05) }

[data-panel="users"] .admin-table thead tr,
[data-panel="users"] .admin-table tbody tr { grid-template-columns: min-content 1fr repeat(3, 1fr) 80px 50px 150px; }

[data-panel="categories"] .admin-table thead tr,
[data-panel="categories"] .admin-table tbody tr { grid-template-columns: min-content 1fr 200px 150px; }

[data-panel="main_tasks"] .admin-table thead tr,
[data-panel="main_tasks"] .admin-table tbody tr { grid-template-columns: min-content 1fr 300px 100px 150px 100px 50px 150px; }

[data-panel="tasks"] .admin-table thead tr,
[data-panel="tasks"] .admin-table tbody tr { grid-template-columns: min-content 1fr 300px 100px 150px 100px 80px 90px 90px 50px 150px;}

/* Reports panel */
[data-panel="reports"] .admin-table thead tr,
[data-panel="reports"] .admin-table tbody tr { grid-template-columns: 80px 90px 90px 140px 1fr 120px 200px 150px; }


.admin-table thead tr th:first-child,
.admin-table tbody tr td:first-child {
  padding: 20px;
}

/*.admin-table tbody tr { padding: 10px 0 }*/

.admin-table thead tr,
.admin-table tbody tr { gap: 10px }

/* small color swatch */
.color-swatch { display:inline-block; width:28px; height:18px; border-radius:4px; vertical-align:middle; margin-right:8px; border:1px solid #ddd; }

/* Responsive: collapse layout */
@media (max-width: 900px) {
  .admin-page { flex-direction: column; }
  .admin-sidebar { width:100%; height:auto; position:relative; top:auto; }
}

/* ------------------------
   Admin modal form styles (new)
   ------------------------ */

/*
  Admin modals should match the 'add task' modal aesthetic and present
  form fields in clear rows with labels aligned. We style #admin-form
  (used by admin.js) and also provide helpers for forms injected from
  server (form.php) when used inside admin modals.
*/

/* Header inside modal */
.modal-content h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #111;
  font-weight: 700;
}

/* Admin form container (used for admin's inline forms) */
#admin-form {
  display: grid;
  gap: 12px;
  align-items: start;
}

/* Each label becomes a two-column row: label text on the left, input on the right */
#admin-form label {
  display: grid;
  grid-template-columns: 160px 1fr; /* fixed label column, flexible input column */
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: #222;
}

/* For long textarea fields allow full width and larger height */
#admin-form textarea {
  grid-column: 2 / 3;
  min-height: 120px;
  resize: vertical;
}

/* When using stacked layout on small screens, collapse to single column */
@media (max-width: 700px) {
  #admin-form label {
    grid-template-columns: 1fr;
  }
  #admin-form textarea {
    grid-column: auto;
  }
}

/* Inputs and selects appearance within admin modal */
#admin-form input[type="text"],
#admin-form input[type="email"],
#admin-form input[type="url"],
#admin-form input[type="date"],
#admin-form select,
#admin-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  background: #fff;
  font-size: 14px;
  transition: box-shadow .12s, border-color .12s;
}
#admin-form input:focus, #admin-form select:focus, #admin-form textarea:focus {
  outline: none;
  box-shadow: 0 6px 18px rgba(0,122,204,0.06);
  border-color: rgba(0,122,204,0.18);
}

/* Action row */

#admin-form .modal-actions {
  grid-column: 1 / -1; /* span full width */
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* Smaller helper for inline create buttons area */
.panel-actions {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

/* Admin search */
.admin-search { margin-left: auto; display:flex; gap:8px; align-items:center; }
.admin-search-input {
    width: min(460px, 48vw);
    padding: 15px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-family: var(--font-family);
}
.admin-search-input:focus {
  outline: none;
  box-shadow: 0 0px 15px rgba(0,122,204,0.15);
  border-color: rgba(0,122,204,0.0);
}

mark.hl {
  background: rgba(255, 214, 102, 0.65);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* Make server-included forms (form.php) inside admin modal look similar */
.modal-content form.form {
  display: grid;
  gap: 12px;
}
.modal-content form.form label {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
}
@media (max-width:700px) {
  .modal-content form.form label { grid-template-columns: 1fr; }
}

/* Ensure modal-content padding gives breathing room for admin forms */
.modal-content { padding: 18px; }

/* ------------------------
   Utility
   ------------------------ */
.muted { color: var(--muted); font-size: 13px; }

/* Small per-field help text (forms + modals) */
.field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

/* End */


/* Admin sortable headers */
.sortable-header {
  font-weight: 600;
}

.sort-link {
  color: #555;
  text-decoration: none;
  font-weight: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.sort-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.sort-link:visited {
  color: #555;
}


.user-view-wrapper {
  display: grid;
  /*gap: 20px;*/
  grid-template-columns: 1fr auto;
}

.panel-header {
  display: grid;
  grid-template-columns: auto 1fr;
  flex-direction: column;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  justify-items: start;
  /* padding-top: 80px; */
}

.admin-panel .panel-header {
  align-items: start;
}

.panel-header h2 {
  margin: 0;
  font-size: 30px;
  justify-self: start;
}

.panel-header:has(.panel-actions) {
  grid-template-columns: 1fr 1fr 1fr;
}

.panel-header .panel-actions {
  justify-self: center;
}







.btn.add-task {
  --bar-size:16px;
  --btn-size:35px;
  --btn-coef:0px;
  --bar-color:white;
  display: grid;
  justify-items: center;
  position: relative;
  height: calc( var(--btn-size) + var(--btn-coef) );
  width: calc( var(--btn-size) + var(--btn-coef) );

}
.add-task .bar {
  height: 1px;
  width: calc( var(--bar-size) + var(--btn-coef) );
  background-color: var(--bar-color);
  position: absolute;
}
.add-task .bar:first-child {
  height:  calc( var(--bar-size) + var(--btn-coef) );
  width: 1px;
}

.tasks-page .card .btn.add-task {
  --btn-coef:-8px;
  --bg:hsla(240,100%,95%,1.0);
  --bar-color:hsla(240,80%,20%,0.2);
  padding: 4px 6px;
}
.tasks-page .col-actions {
  display: flex;
  flex-direction: row;
  /*grid-template-columns: auto auto;*/
  gap: 5px;
  align-items: center;
}

.tasks-generate-children-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}

.tasks-generate-children-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: currentColor;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.tasks-generate-children-trigger svg {
  display: block;
}

.tasks-generate-children-control input[type="number"] {
  width: 42px;
  min-width: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-weight: 700;
  padding: 0;
}

.tasks-generate-children-control input[type="number"]::-webkit-outer-spin-button,
.tasks-generate-children-control input[type="number"]::-webkit-inner-spin-button {
  opacity: 1;
}

.tasks-generate-children-control.is-busy {
  opacity: 0.7;
}

.task-rec-editor {
  display: grid;
  gap: 10px;
  min-width: 260px;
}

.task-inline-rec-dropdown {
  min-width: 320px;
}

.task-rec-summary {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.72);
}

.task-rec-modes,
.task-rec-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-rec-mode {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.72);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.task-rec-mode.is-active {
  background: rgba(0,0,0,0.08);
}

.task-rec-custom,
.task-rec-block {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.task-rec-row,
.task-rec-block {
  font-size: 12px;
  color: rgba(0,0,0,0.76);
}

.task-rec-editor label {
  display: inline-flex;
  align-items: center;
  justify-items: unset;
  gap: 6px;
}

.task-rec-row select,
.task-rec-row input,
.task-rec-block select,
.task-rec-block input {
  width: auto;
  min-width: 0;
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: rgba(0,0,0,0.78);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  margin-left: 0;
}

.task-rec-row input[type="number"],
.task-rec-block input[type="number"] {
  width: 72px;
}

.task-rec-weekdays label,
.task-rec-block label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-rec-grid {
  display: grid;
  gap: 6px;
}

.task-rec-grid--days {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.task-rec-grid--months {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.task-rec-chip {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: rgba(0,0,0,0.78);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.task-rec-chip.is-active {
  background: rgba(0,0,0,0.10);
}

.admin-main-header nav ul {
  display: flex;
  /*flex-direction: column;*/
  gap: 10px;
  padding: 0;
  list-style: none;
}

.admin-main-header nav a {
  text-decoration: none;
}

.admin-main-header h1 {
  margin: 0;
}

.panel-options,
form,
label {
  display: grid;
  justify-items: start;
  align-items: center;
  gap: 10px;
}

.panel-options .modal-actions {
  margin: 0;
}

.panel-options label {
  grid-template-columns: auto 1fr;
  margin: 0;
}

.grid-4,
.tasks-page div.card,
.user-profile,
.tasks-and-sidebar,
.admin-sidebar,
.admin-table,
.stats {
  /*filter: var(--drop-shadow);*/
}

.tasks-and-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

/* Simplest correction when .tasks-page doesn't load directly under .main but in .tasks-and-sidebar */
.tasks-and-sidebar:has(.tasks-page) {
  grid-template-columns: 1fr;
  filter:unset;
}

.card {
  display: grid;
  gap: 10px;
  align-items: start;
  align-content: start;
}



body {
  font-weight: 500;
  /*font-size: 12px;*/
}

a,
ul,
h1,h2,h3,h4,h5,h6 {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
}


button,
.drawer .user-avatar,
.sidebar-user-card .card-container h4 {
  cursor: pointer;
}

svg {
  color: var(--icon-color);
  stroke-width: var(--icon-stroke-width);
  width: var(--icon-size);
  height: var(--icon-size);
}
.col-meta svg {
  width: 18px;
  height: 18px;
}
.btn.mini.print-link:hover {
  background-color: transparent !important;
}
.col-meta .page-btn:hover {
  background-color: var(--bg-hover);
}
.sort-btn svg {
  color: var(--colmeta-inactive);
}

h1,h2,h3,h4,h5,h6,
.sidebar-user-card .user-presence > span:first-child {
  font-weight: 800;
}

.drawer-link span {
  font-weight: 700;
}

.sidebar-user-card {
  max-width: 320px;
  will-change: max-width, opacity;
  position: relative;
}

.drawer * {
  user-select: none;
}

.drawer-link svg {
  --icon-size: 20px;
}

.drawer-link:hover,
.drawer-link:hover svg {
  color: var(--accent);
}

.drawer.is-minimized .drawer-link{
  padding: 0;
}

.drawer.is-minimized .drawer-link,
.drawer-link {
  /*background-color: var(--accent);*/
  padding: 10px;
}

.drawer-link:hover {
  background-color: hsla(240, 100%, 95%, 1.0);
}

section.user-profile .user-abscence,
section.user-profile,
.panel.user-profile > *,
.drawer-nav,
.drawer-nav a,
.user-sidebar-list,
.sidebar-user-card,
.sidebar-user-card .card-container,
/*.sidebar-user-card .card-container .user-title-group,*/
.sidebar-user-card .card-container .user-horaires ul,
.sidebar-user-card .card-container .user-horaires li,
.sidebar-user-card .card-container .user-charge ul,
.sidebar-user-card .card-container .user-charge li,
.sidebar-user-card .card-container .user-absences ul,
.sidebar-user-card .card-container .user-absences li,
.sidebar-user-card .card-container .user-presence,
.sidebar-user-card .card-container > [class*="user-"],
.sidebar-user-card .card-container .sidebar-user-details > [class*="user-"] {
  display: grid;
}

.sidebar-user-card .card-container .user-infos {
  align-items: center;
}

.sidebar-user-details > div {
  justify-items: start;
}

.drawer,
.user-sidebar-list,
.user-sidebar-list .sidebar-user-card.is-open .card-container,
.sidebar-user-card .card-container .user-infos,
.sidebar-user-card .card-container .sidebar-user-details {
  gap: 20px;
}


.drawer-link,
.drawer-nav,
.sidebar-user-card,
/*.drawer.is-minimized .user-sidebar-list,*/
.sidebar-user-card .card-container .user-charge ul,
.sidebar-user-card .card-container .user-horaires ul {
  gap: 10px;
}

.sidebar-user-card .card-container .user-title-group {
  line-height: 1.2;
}

.difficulty-score li,
.sidebar-user-card .card-container .user-presence,
.sidebar-user-card .card-container .user-horaires li {
  gap: 5px;
}

/*.drawer.is-minimized .user-sidebar-list,*/
.drawer.is-minimized .drawer-link,
.drawer.is-minimized .user-infos,
.drawer.is-minimized .card-container {
  gap: 0;
}

.sidebar-user-card {
  border: 1px solid hsla(0, 0%, 90%, 1.0);
}

.drawer.is-minimized .sidebar-user-card {
  border-color: hsla(0, 0%, 90%, 0.0);
}

.drawer-link {
  border-radius: 5px;
}

.sidebar-user-card {
  border-radius: 8px;
}

.sidebar-user-card .card-container h4::after {
  content: '+';
  margin-left: 5px;
  color: hsla(0, 0%, 60%, 1.0);
}

.sidebar-user-card .card-container .is-open h4::after {
  content: '-';
}

.sidebar-user-card .card-container .is-open h4 {
  margin-bottom: 10px;
}

.user-horaires.accordion-section.is-open {
  /*margin-bottom: 15px;*/
}

.drawer.is-minimized .drawer-link span,
.drawer.is-minimized .sidebar-user-card .user-infos > div,
.drawer.is-minimized .sidebar-user-expand,
.sidebar-user-card .sidebar-user-details,
.sidebar-user-card .card-container ul {
  opacity: 0;
}

.sidebar-user-expand,
.sidebar-user-card .user-infos > div,
.sidebar-user-card.is-open .sidebar-user-details,
.sidebar-user-card .card-container .is-open ul {
  opacity: 1;
}

.sidebar-user-details ul span {
  font-size: 12px;
}

/*.sidebar-user-details .is-open h4,*/
.sidebar-user-details h4:hover {
  color: var(--accent);
}

.sidebar-user-card .card-container .user-absences ul,
.sidebar-user-card .card-container .user-charge ul,
.sidebar-user-card .card-container .user-horaires ul {
  grid-template-columns: repeat(5, auto);
  overflow: hidden;
}

.drawer-nav a,
.sidebar-user-card .card-container .user-presence,
.sidebar-user-card .user-infos {
  grid-template-columns: auto 1fr;
}

.sidebar-user-card .user-absences {
  grid-template-row: auto 1fr;
}

.sidebar-user-card .user-infos img {
  grid-column: 1;
  grid-row: 1/-1;
}

.sidebar-user-card .user-infos h3,
.sidebar-user-card .user-infos .user-presence {
  grid-column: 2;
  grid-row: 1;
}

.drawer-nav a {
  align-items: center;
  justify-items: start;
}

/* Sidebar accordions are JS-driven; keep ul unconstrained only without JS. */
html:not(.js) .sidebar-user-card .accordion-section ul {
  max-height: unset;
}

/* Sidebar user card open/close: reveal details below user-infos */
.sidebar-user-card .sidebar-user-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /*transition: max-height 320ms ease, opacity 220ms ease;*/
  will-change: max-height, opacity;
}

.sidebar-user-card.is-open .sidebar-user-details {
  max-height: 1000px; /* JS may override to 'none' after transition */
}

.sidebar-user-expand {
  position: absolute;
}

.sidebar-user-expand {
  bottom: 10px;
  right: 10px;
}


.sidebar-user-card .user-infos > div {
  width: 150px;
}

.drawer.is-minimized .sidebar-user-card {
  max-width: 65px;
  overflow: hidden;
}

.drawer.is-minimized .sidebar-user-expand {
  right: -40px;
}


.drawer.is-minimized .sidebar-user-card {
  padding: 0;
}

.drawer .drawer-link span {
  display: inline-flex;
  width: 150px;
  color: var(--dark-1);
}

.drawer.is-minimized .drawer-link {
  width: 38px;
  overflow: hidden;
}

.drawer {
  background: white;
  height: 100%;
  position: fixed;
  width: var(--drawer-width);
  transition: width 500ms ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
  justify-content: start;
  filter: var(--drop-shadow);
  /*overflow: auto;*/
  scrollbar-width: none;
  
  /* For Internet Explorer and Edge (legacy) */
  justify-content: space-between;
  -ms-overflow-style: none;
}

.drawer.is-minimized {
  padding: 0px;
}

.drawer.is-minimized {
  padding: 20px 0;
}
.drawer.is-minimized {
  align-items: center;
}
.drawer.is-minimized .drawer-nav {
   justify-content: center; 
}

.drawer-nav {
  align-items: stretch;
  /*justify-content: start;*/
}

#menu-handler {position: absolute;gap: 0;right:0;transition: transform 500ms ease; transform: translate3d( calc( (var(--drawer-width) * -1) - 50px ) , 20px, 0px) }

.drawer.is-minimized {
  /*--drawer-width: 70px;*/
  width: var(--drawer-width-minimized);
}

body.is-minimized #menu-handler {
  transform: translate3d(-150px , 20px, 0px);
}

.drawer.is-minimized .user-avatar--lg {
  height: 60px;
  width: 60px;
}


.drawer .sidebar-user-card.is-active .user-avatar,
.drawer .user-avatar:hover {
  border-color: hsla(240, 100%, 82%, 1.0);
}

.drawer.is-minimized .user-avatar {
}

body main.main {
  width: calc(100% - var(--drawer-width));
  transition: width 500ms ease;
}

body.is-minimized main.main {
  width: calc(100% - var(--drawer-width-minimized));
}

.user-sidebar-list .user-presence.en-poste {
  color: #3ba743;
}
.user-sidebar-list .user-presence.hors-poste {
  color: hsla(0, 0%, 70%, 1.0);
}

.user-sidebar-list .user-presence.absent {
  color: #b71c1c;
}

.user-sidebar-list .user-presence {
  /*margin: 6px 0 12px 0;*/
  font-size: 12px;
  color: var(--muted);
}

.drawer.is-minimized .user-sidebar-list .card.sidebar-user-card:hover {
  box-shadow: 0 0 0 4px hsla(240, 100%, 100%, 0.0);
}

.user-sidebar-list .card.sidebar-user-card:hover {
  border: 1px solid hsla(240, 100%, 100%, 0.0);
  box-shadow: 0 0 0 4px hsla(240, 100%, 95%, 1.0);
}

.card-sort,
.user-horaires li,
.difficulty-score li,
.card-filter {
  border-right: 1px solid hsla(0, 0%, 80%, 1.0);
  padding-right: 10px;
  margin-right: 0px;
}

.card-filter,
.card-sort {
  margin-right: 5px;
}

.tasks-page .card-sort,
.difficulty-score li:last-child,
.user-horaires li:last-child {
  border: 0;
  padding: 0;
  margin: 0;
}


.user-avatar-block {
  position: relative;
}

.user-avatar-block .user-avatar,
.avatar-form {
  /*position: absolute;*/
}

#avatar-form input {

}
section.user-profile .user-abscence,
section.user-profile {
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

section.user-profile .panel {
  background: white;
  border-radius: 10px;
  padding: 20px;
}

section.user-profile .user-preferences,
section.user-profile .user-identite {
  grid-column: 1/-1;
}
/* Range pill is no longer a nested button; remove old hover overrides */
.task:hover .task-meta-comment-dot { opacity: 0 !important; }

.btn.mini[data-main-task-toggle-difficulty]{
  gap: 5px;
}


.charts #chartSecond {
  height: 580px;
}

.task .task-meta-active {
  gap: 0 !important;
}

.task-actions {
  display: none !important;
}

.task:hover .task-actions {
  display: flex !important;
}


.tasks-generate-children-control {
  display: none;
}