:root{
  --topbar-h:56px;
  /* Light theme palette */
  --bg:#f6f7fb;           /* app background */
  --panel:#ffffff;        /* panels, dialogs, lists */
  --card:#ffffff;         /* cards */
  --ink:#111827;          /* main text */
  --muted:#6b7280;        /* secondary text */
  --border:#e5e7eb;       /* borders */
  --hover:#f3f4f6;        /* hover bg */
  --accent:#2563eb;       /* primary */
  --accent-ink:#ffffff;   /* primary text */
  --danger:#ef4444;       /* danger */
}
/* Dark theme using prefers-color-scheme, can be overridden by [data-theme] on html */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --panel:#141b2b; --card:#1b2236; --ink:#e5e7eb; --muted:#94a3b8; --border:#253049; --hover:#131a2b; --accent:#60a5fa; --accent-ink:#0b1220; }
  /* When auto mode and system is dark, hint UA controls to render dark popups */
  html:not([data-theme]){ color-scheme: dark; }
}

html[data-theme="dark"]{ --bg:#0b1220; --panel:#141b2b; --card:#1b2236; --ink:#e5e7eb; --muted:#94a3b8; --border:#253049; --hover:#131a2b; --accent:#60a5fa; --accent-ink:#0b1220; color-scheme: dark; }
html[data-theme="light"]{ --bg:#f6f7fb; --panel:#ffffff; --card:#ffffff; --ink:#111827; --muted:#6b7280; --border:#e5e7eb; --hover:#f3f4f6; --accent:#2563eb; --accent-ink:#ffffff; color-scheme: light; }
*{box-sizing:border-box}
body{margin:0; font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Arial; background:var(--bg); color:var(--ink)}
.muted{ color: var(--muted); }
#app{display:grid; grid-template-columns:280px 1fr; height:calc(100vh - var(--topbar-h))}
#app.sidebar-collapsed{ grid-template-columns:min-content 1fr }
.topbar{
  position:sticky; top:0; z-index:1000;
  height:var(--topbar-h);
  display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center;
  gap:12px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--border);
}
.topbar .brand{ font-weight:600; letter-spacing:.2px }
.topbar .tb-left, .topbar .tb-center, .topbar .tb-right{ display:flex; align-items:center; gap:8px }
.topbar .tb-center{ justify-content:center }
.topbar .tb-right{ justify-content:flex-end }
.topbar .search{ width:100%; max-width:520px }
.topbar .search input{
  width:100%; padding:8px 10px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border); color:var(--ink)
}
.avatar{
  width:28px; height:28px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 20%, var(--panel));
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.avatarbtn{ display:flex; align-items:center; gap:8px; border-radius:10px; padding:4px 6px; cursor:pointer; border:1px solid transparent }
.avatarbtn:hover{ background:var(--hover) }
.usermenu{ position:relative }
.usermenu > summary{ list-style:none }
.usermenu > summary::-webkit-details-marker{ display:none }
.menu-panel{
  position:absolute; right:0; top:calc(100% + 8px);
  width:260px; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(2,6,23,.18), 0 4px 10px rgba(2,6,23,.08)
}
.usermenu:not([open]) .menu-panel{ display:none }
.menu-panel .group{ padding:4px 4px 6px }
.menu-panel .item{
  display:block; width:100%; text-align:left; background:transparent; border:none;
  padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--ink); text-decoration:none
}
.menu-panel .item:hover{ background:var(--hover); text-decoration:none }
.menu-panel .item.danger{ color:#b91c1c }
.sidebar{padding:16px; background:var(--panel); border-right:1px solid var(--border); overflow:auto; display:flex; flex-direction:column}
.sidebar .spacer{ flex:1 }
.sidebar button#btnSidebarToggle{ opacity:.9 }
.sidebar-collapsed .sidebar{ padding:8px; overflow:hidden }
.sidebar-collapsed .sidebar h1{ justify-content:center; gap:0 }
/* скрываем всё кроме кнопки */
.sidebar-collapsed .sidebar h1 .logo-text,
.sidebar-collapsed .sidebar h1 .spacer,
.sidebar-collapsed .sidebar #btnTheme,
.sidebar-collapsed .userbar,
.sidebar-collapsed .boards-header,
.sidebar-collapsed #boards,
.sidebar-collapsed .sidebar-footer{ display:none }
.sidebar-collapsed #boards li .t{ display:none }
.sidebar-collapsed #boards li{ justify-content:center }
.sidebar-collapsed .boards-header #btnNewBoard{ width:32px }
.sidebar h1{margin:0 0 12px 0; font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px}
.boards-header{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.boards-header .scope-toggle{ display:flex; gap:6px; align-items:center }
.boards-header .scope-toggle .btn.toggle{ display:inline-flex; gap:6px; align-items:center; padding:6px; }
.boards-header .scope-toggle .btn.toggle svg{ width:16px; height:16px }
.btn.toggle[aria-pressed="true"]{ background:color-mix(in srgb, var(--accent) 15%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.btn.toggle .lbl{ display:none }
/* Блок .userbar больше не используется */
.btn{background:var(--panel); border:1px solid var(--border); color:var(--ink); padding:8px 12px; border-radius:10px; cursor:pointer; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .02s}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(0.98)}
.btn.danger{border-color:#fecaca; color:#991b1b; background:#fff5f5}
.btn.danger:hover{background:#ffeeee}
.btn.icon{padding:6px 8px; line-height:1; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center}
.btn.icon svg{width:18px; height:18px}
.btn svg{ display:inline-block; width:16px; height:16px }
ul{list-style:none; padding:0; margin:0}
#boards{flex:1 1 auto}
#boards li{padding:8px 10px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:8px}
#boards li .btn-color{margin-left:auto; opacity:.75}
#boards li .btn-color{ width:28px; height:28px }
#boards li .btn-color svg{width:14px; height:14px}
#boards li .ico svg{width:16px; height:16px; color:var(--muted)}
#boards li:hover{background:var(--hover)}
#boards li.active{background:rgba(99,102,241,.15); outline:1px solid rgba(99,102,241,.25)}
.main{display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden}
.board-header{display:flex; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--border); background:var(--panel)}
.board-header .btn.icon{ width:32px; height:32px }
.board-header .btn.icon svg{ width:18px; height:18px }
.board-header h2{margin:0; font-size:18px; font-weight:600}
.link-privacy{ font-size:12px; color:var(--muted); text-decoration:underline; margin-right:4px }
.link-privacy:hover{ color:var(--ink) }
.lists{display:flex; gap:12px; padding:12px; overflow-x:auto; overflow-y:visible; align-items:flex-start}
.list{min-width:280px; width:280px; background:var(--panel); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(16,24,40,.04)}
.list header{display:flex; align-items:center; gap:8px; padding:10px 10px 8px}
.list .drag-handle{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--muted); cursor:grab}
.list .drag-handle svg{width:16px; height:16px}
.list.dragging{opacity:.85}
.lists .list{transition:transform .15s ease}
.list header h3{margin:0; font-size:14px}
.cards{padding:10px; display:flex; flex-direction:column; gap:8px}

/* Sidebar boards: handle-only dragging */
.boards .board-item{ display:flex; align-items:center; gap:.35rem; }
/* Header controls sizing to prevent overflow */
.boards-header .btn{ white-space:nowrap; }
.boards-header #btnNewBoard{ width:32px; height:32px; padding:0; text-align:center }
.boards-header #btnGroupsPanel{ max-width:120px; overflow:hidden; text-overflow:ellipsis }
.boards .board-item .drag-handle svg{ width:14px; height:14px; opacity:.8; }
.boards .board-item.dragging{ opacity:.7; }
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; cursor:grab; box-shadow:0 1px 2px rgba(16,24,40,.04); display:flex; align-items:center; gap:8px}
.card .btn-color{opacity:.75}
.btn-color:hover{opacity:1}
.card .ico svg{width:14px; height:14px; color:var(--muted); margin-top:0}
.card:hover{background:color-mix(in srgb, var(--card) 90%, #fff 10%)}
.card .assignee{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  background:color-mix(in srgb, var(--accent) 22%, var(--panel));
  color:var(--accent-ink); font-weight:700; font-size:12px;
  border:1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
}
.list[style*="--clr:"] header{ border-left:4px solid var(--clr); padding-left:6px }
.card[style*="--clr:"]{ border-color:color-mix(in srgb, var(--clr) 60%, var(--border)); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--clr) 20%, transparent), 0 1px 2px rgba(16,24,40,.04) }
#boards li[style*="--clr:"] .ico svg{ color:var(--clr) }
.add-card{padding:10px}
.add-card button{width:100%}
/* Card Dialog Styles */
.card-dialog {
  padding: 0;
  border: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 90vw;
}

.card-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.card-dialog-container {
  background: var(--panel);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.card-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 24px;
  background: var(--panel);
}

.card-dialog-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.card-form {
  padding: 24px;
}

.card-dialog .form-group {
  margin-bottom: 20px;
}

.card-dialog .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.card-dialog .form-group input[type="text"],
.card-dialog .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--app);
  color: var(--ink);
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}

.card-dialog .form-group input:focus,
.card-dialog .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.card-dialog .form-group textarea {
  min-height: 120px;
}

.card-dialog .checkbox-group {
  margin-top: 12px;
}

.card-dialog .checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-left: 32px;
}

.card-dialog .checkbox-label input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.card-dialog .checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: var(--app);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.card-dialog .checkbox-label input:checked + .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.card-dialog .checkbox-label input:checked + .checkmark:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.card-dialog .form-status {
  margin: 16px 0;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  min-height: 20px;
}

.card-dialog .form-status.success {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #10b981;
  border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.card-dialog .form-status.error {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

.card-dialog .form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.card-dialog .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.card-dialog .btn-secondary {
  background: var(--app);
  color: var(--muted);
  border: 1.5px solid var(--border);
}

.card-dialog .btn-secondary:hover {
  background: var(--hover);
  color: var(--ink);
  border-color: var(--muted);
}

.card-dialog .btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1.5px solid var(--accent);
}

.card-dialog .btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (max-width: 600px) {
  .card-dialog {
    width: 95vw;
    max-width: none;
  }
  
  .card-dialog-header,
  .card-form {
    padding: 20px;
  }
  
  .card-dialog .form-actions {
    flex-direction: column-reverse;
  }
  
  .card-dialog .btn {
    width: 100%;
  }
}

/* Original dialog styles for other dialogs */
dialog{border:none; background:var(--panel); color:var(--ink); padding:18px; border-radius:14px; width:480px; box-shadow:0 10px 30px rgba(2,6,23,.18), 0 4px 10px rgba(2,6,23,.08); opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease}
dialog[open]{opacity:1; transform:translateY(0)}
::backdrop{background:rgba(2,6,23,.38)}
dialog h3{margin:0 0 8px 0}
dialog form label{display:flex; flex-direction:column; gap:6px; margin:10px 0}
/* Apply same label layout for non-form dialog bodies (e.g., card editor) */
dialog .dialog-body label{display:flex; flex-direction:column; gap:6px; margin:10px 0}
dialog input, dialog textarea{background:var(--panel); border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:10px}
dialog input, dialog textarea{width:100%}
/* Align selects in dialogs to inputs */
dialog select{background:var(--panel); border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:10px; width:100%}
dialog input::placeholder, dialog textarea::placeholder{color:var(--muted)}
dialog input:focus, dialog textarea:focus{outline:none; border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}

/* Generic form styles (for pages like profile/settings), matching dialog look */
.form{ max-width:720px; }
.form .field{ margin:10px 0 }
.form .field label{ display:block; margin:0 0 6px 0; font-size:14px; font-weight:500; color:var(--ink) }
.form .field input,
.form .field textarea,
.form .field select{
  width:100%; padding:10px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border); color:var(--ink);
  font:inherit; box-sizing:border-box;
}
.form .field input:focus,
.form .field textarea:focus,
.form .field select:focus{ outline:none; border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) }
.form .actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px }
.form .status{ margin-top:8px; color:var(--muted) }

/* Normalize calendar/time inputs across themes */
input[type="date"], input[type="time"], input[type="datetime-local"]{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--border);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{ opacity:.85 }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: invert(1) hue-rotate(180deg); opacity:.9 }
dialog menu{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.primary{background:var(--accent); border:none; color:var(--accent-ink)}
.spacer{flex:1}

/* Sidebar footer */
.sidebar-footer{ padding-top:10px; border-top:1px solid var(--border); margin-top:10px }

/* confirm dialog specific (inherits dialog base styles) */
#dlgConfirm p{margin:8px 0 0 0}

/* Card view & create dialog: стабильная ширина, без рывков; контент прокручивается */
#dlgCardView, #dlgCard{ width:min(900px, calc(100vw - 32px)); min-width:480px; }
#dlgCardView .dialog-body, #dlgCard .dialog-body{
  max-width:100%;
  max-height: calc(100vh - 180px);
  overflow:auto;
}
/* Let description textareas resize horizontally too and drive dialog width */
#cvDescription,
#formCard textarea[name="description"]{
  width:100%;
  min-width:0;
  max-width:100%;
  resize:both;
  max-height: calc(100vh - 260px);
  overflow: auto;
}
/* Make preview behave like textarea in layout */
.md-preview{
  display:block;
  width:100%;
  max-height: calc(100vh - 260px);
  overflow:auto;
}
/* Force consistent stacked labels in both dialogs */
#dlgCard .dialog-body > label,
#dlgCardView .dialog-body > label{display:flex; flex-direction:column}

/* Markdown preview styling (theme-aware) */
.md-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--ink);
  max-width: calc(100vw - 64px);
}
.md-preview p { margin: 0.5em 0; }
.md-preview ul, .md-preview ol { margin: 0.45em 0 0.45em 1.25em; }
.md-preview li { margin: 0.2em 0; }
.md-preview a { color: var(--accent); text-decoration: none; }
.md-preview a:hover { text-decoration: underline; }
.md-preview strong { font-weight: 600; }
.md-preview em { font-style: italic; }
.md-preview code { background: rgba(0,0,0,0.12); padding: 0.12em 0.35em; border-radius: 6px; }
html[data-theme="dark"] .md-preview code { background: rgba(255,255,255,0.1); }
.md-preview pre {
  background: color-mix(in srgb, var(--card) 92%, #000 8%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  overflow:auto;
}
.md-preview pre code{ background: transparent; padding:0; border-radius:0 }
.md-preview h1,.md-preview h2,.md-preview h3{ margin: .6em 0 .35em; font-weight:700 }
.md-preview h4,.md-preview h5,.md-preview h6{ margin: .5em 0 .3em; font-weight:600 }
.md-preview blockquote{
  margin: .5em 0;
  padding: .1em .9em;
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  color: var(--muted);
}
.md-preview hr{ border:none; border-top:1px solid var(--border); margin:.7em 0 }
#dlgCardView section{margin-top:12px}
#dlgCardView h4{margin:0 0 6px 0}
#cvComments{display:flex; flex-direction:column; gap:6px; padding:0}
#cvComments li{list-style:none; background:color-mix(in srgb, var(--panel) 90%, #fff 10%); border:1px solid var(--border); border-radius:10px; padding:8px}
.add-comment{display:flex; gap:8px; margin-top:8px}
.add-comment input{flex:1}

/* Editable list title focus */
.list header h3[contenteditable="true"]:focus{outline:none; box-shadow:inset 0 -2px 0 var(--accent);}

/* Color picker dialog */
#dlgColor .color-grid{display:grid; grid-template-columns:repeat(9, 1fr); gap:8px; margin:8px 0 12px}
#dlgColor .swatch{width:100%; aspect-ratio:1/1; border-radius:10px; border:1px solid var(--border); background:var(--c, transparent); position:relative}
#dlgColor .swatch[data-color=""]{background:repeating-conic-gradient(from 45deg, transparent 0 10px, rgba(127,127,127,.2) 10px 20px)}

/* Date-time picker dialog */
#dlgDateTime .dt-header{display:flex; align-items:center; gap:8px; margin:6px 0 8px}
#dlgDateTime .dt-header .dt-month{flex:1; text-align:center; font-weight:600}
#dlgDateTime .dt-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:10px}
#dlgDateTime .dt-grid .dow{font-size:12px; color:var(--muted); text-align:center}
#dlgDateTime .dt-grid button{padding:8px 0; border-radius:8px; background:var(--panel); border:1px solid var(--border); color:var(--ink); cursor:pointer}
#dlgDateTime .dt-grid button:hover{background:var(--hover)}
#dlgDateTime .dt-grid button.selected{background:color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color:color-mix(in srgb, var(--accent) 40%, var(--border))}
#dlgDateTime .dt-grid button.today{outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent)}
#dlgDateTime .dt-time{display:flex; gap:8px}
#dlgDateTime .dt-time label{flex:1}
/* Time selectors visual parity with other controls */
#dlgDateTime .dt-time select{background:var(--panel); border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:8px 10px; width:100%}

/* Context menu */
.ctx-menu{position:fixed; z-index:10000; min-width:220px; background:var(--panel); color:var(--ink); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(2,6,23,.18), 0 4px 10px rgba(2,6,23,.08)}
.ctx-menu ul{list-style:none; margin:6px 0; padding:4px}
.ctx-menu li{padding:8px 12px; border-radius:8px; cursor:pointer}
.ctx-menu li:hover{background:var(--hover)}
.ctx-menu li:focus{outline:none; background:var(--hover)}
.ctx-menu li.disabled{opacity:.6; pointer-events:none}
.ctx-menu li.danger{color:#b91c1c}
.ctx-menu li.sep{height:1px; margin:6px 8px; background:var(--border); padding:0}

/* Groups dialog */
#dlgGroups .groups-list{display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto; padding:2px 0}
#dlgGroups .group-row{display:flex; align-items:center; gap:6px; flex-direction:row; cursor:pointer; user-select:none; padding:2px 0; font-size:13px}
#dlgGroups .group-row span{flex:1}
#dlgGroups input[type="checkbox"]{
  appearance:auto; -webkit-appearance:checkbox;
  width:14px; height:14px; flex:0 0 14px; margin:0 6px 0 0;
  border:none; background:transparent; padding:0; box-shadow:none;
  accent-color: var(--accent);
}
#dlgMembers .group-row{display:flex; align-items:center; gap:8px}
#dlgMembers .spacer{flex:1}
/* Inline icon alignment for group rows */
.group-row svg{ width:14px; height:14px; opacity:.85 }

/* Groups panel (sidebar dialog) rows on one line */
#dlgGroupsPanel .groups-list{ display:flex; flex-direction:column; gap:6px; max-height:360px; overflow:auto; padding:2px 0 }
#dlgGroupsPanel .group-row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
#dlgGroupsPanel .group-row .spacer{ flex:1 }
#dlgGroupsPanel .group-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#dlgGroupsPanel .group-row .btn{ flex:0 0 auto; white-space:nowrap }

/* Board/list/card icon buttons hints already come from title attr */

/* Admin actions layout (both in main panel and dialogs) */
.admin-actions{display:flex; align-items:center; gap:8px; margin:8px 0 12px}
.admin-actions input,.admin-actions select{background:var(--panel); border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:8px 10px}
.admin-actions input{flex:1; min-width:220px}

/* Generic inline row helper */
.row{display:flex; align-items:center; gap:8px}

/* Admin panel block (collapsible) */
#adminPanel{ margin:12px; }
#adminPanel h3{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none }
#adminPanel h3::before{ content:'▾'; display:inline-block; transition:transform .15s ease }
#adminPanel.collapsed h3::before{ transform:rotate(-90deg) }
#adminPanel.collapsed .admin-actions,
#adminPanel.collapsed #adminGroups{ display:none }