/* Базовые стили проекта (легкий современный интерфейс) */

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

/* Layout: keep footer pinned to bottom (no floating) */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1; padding-bottom:56px;} /* reserve space for fixed footer */
body.no-footer main{padding-bottom:0;} /* pages that hide the footer */

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f6f7fb;
  color: #172b4d;
}

/* Dark theme (site-wide) */
body.theme-dark{
  background:#1d2125;
  color:#f1f2f4;
}
body.theme-dark .page, body.theme-dark main{color:#f1f2f4;}
body.theme-dark .card-surface,
body.theme-dark .list,
body.theme-dark .card,
body.theme-dark .modal,
body.theme-dark .modal__panel{
  background:#22272b;
  color:#f1f2f4;
  border-color:rgba(255,255,255,0.08);
}
body.theme-dark .modal-h,
body.theme-dark .modal-f{border-color:rgba(255,255,255,0.08);}
body.theme-dark .badge{background:rgba(255,255,255,0.10);color:rgba(241,242,244,0.8);}
body.theme-dark .member{background:#22272b;border-color:rgba(255,255,255,0.10);}
body.theme-dark .muted{color:rgba(241,242,244,0.7);}
body.theme-dark .field-label{color:rgba(241,242,244,0.75);}
body.theme-dark .cm-time{color:rgba(241,242,244,0.6);}
body.theme-dark .cm-avatar{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.10);color:rgba(241,242,244,0.85);}
body.theme-dark .topbar{background:rgba(20,20,20,0.85);border-bottom:1px solid rgba(255,255,255,0.08);}
body.theme-dark .topbar__btn, body.theme-dark .topbar__icon{background:rgba(255,255,255,0.10);}
body.theme-dark .topbar__search{background:rgba(255,255,255,0.10);}
body.theme-dark .topbar__create{background:rgba(255,255,255,0.92);color:#172b4d;}
body.theme-dark .create-popover{background:#1b1f24;border:1px solid rgba(255,255,255,0.10);}
body.theme-dark .create-popover__item:hover{background:rgba(255,255,255,0.06);}
body.theme-dark .create-popover__icon{background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.92);}
body.theme-dark .create-popover__title{color:rgba(255,255,255,0.92);}
body.theme-dark .create-popover__desc{color:rgba(255,255,255,0.72);}

/* Card meta */
.badge-icon.badge-ok{background:rgba(38,124,56,0.18);color:#2ecc71;border-color:rgba(46,204,113,0.35);}

/* Comment actions + images */
.cm-comment-actions{margin-left:auto;display:flex;gap:6px;align-items:center;}
.cm-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.cm-imgbtn{border:0;background:transparent;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;}
.cm-imgbtn:focus{outline:2px solid rgba(0,121,191,0.35);outline-offset:2px;}
.cm-img{width:120px;height:80px;object-fit:cover;display:block;}

/* Modal image viewer */
.img-viewer{position:fixed;inset:0;z-index:10000;}
.img-viewer[hidden]{display:none;}
.img-viewer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.65);}
.img-viewer__panel{position:absolute;inset:24px;display:flex;flex-direction:column;gap:10px;}
.img-viewer__close{align-self:flex-end;border:0;background:rgba(255,255,255,0.18);color:#fff;border-radius:12px;width:40px;height:40px;cursor:pointer;}
.img-viewer__close:hover{background:rgba(255,255,255,0.26);}
.img-viewer__img{max-width:100%;max-height:calc(100% - 50px);margin:auto;object-fit:contain;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.55);}

/* Checklist progress (slightly neon) */
.cm-progress{margin:0 0 10px;}
.cm-progress__row{display:flex;align-items:center;gap:10px;}
.cm-progress__txt{font-weight:900;color:#5e6c84;min-width:54px;}
.cm-progress__bar{flex:1;height:10px;border-radius:999px;background:rgba(9,30,66,0.08);overflow:hidden;}
.cm-progress__fill{height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(0,199,229,0.9), rgba(0,121,191,0.95));box-shadow:0 0 10px rgba(0,199,229,0.35);}
body.theme-dark .cm-progress__bar{background:rgba(255,255,255,0.10);}
body.theme-dark .cm-progress__txt{color:rgba(241,242,244,0.7);}

/* Notification links */
.notif-link{color:inherit;text-decoration:none;}
.notif-link:hover{text-decoration:underline;}

/* Topbar (Trello-like) */
.topbar{
  position:sticky;top:0;z-index:50;
  height:48px;
  display:grid;
  grid-template-columns:1fr minmax(360px, 720px) 1fr;
  align-items:center;
  padding:0 10px;
  background:rgba(2,106,167,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:8px;}
.topbar__right{justify-content:flex-end;}
.topbar__center{display:flex;justify-content:center;}
.topbar__center-wrap{position:relative;display:flex;align-items:center;gap:10px;width:100%;}
.topbar__create{
  height:36px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  color:#172b4d;
  background:rgba(255,255,255,0.92);
}
.topbar__create:hover{background:#fff;}
.topbar__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;
  color:rgba(255,255,255,0.92);text-decoration:none;font-weight:700;
  background:rgba(255,255,255,0.12);
}
.topbar__btn:hover{background:rgba(255,255,255,0.18);}
.topbar__icon{
  width:36px;height:36px;border-radius:10px;
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.92);
  background:rgba(255,255,255,0.12);
  text-decoration:none;
}
.topbar__icon:hover{background:rgba(255,255,255,0.18);}
.topbar__search{display:flex;align-items:center;gap:8px;min-width:220px;max-width:520px;width:100%;
  padding:0 10px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.9);
}
.topbar__search input{flex:1;border:none;outline:none;background:transparent;color:#fff;font-weight:600;}
.topbar__search input::placeholder{color:rgba(255,255,255,0.72);}

/* Create popover in topbar */
.create-popover{
  position:absolute;
  top:44px;
  right:0;
  width:380px;
  max-width:calc(100vw - 20px);
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  box-shadow:0 14px 28px rgba(0,0,0,0.14);
  padding:8px;
}
.create-popover__item{
  width:100%;
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-align:left;
  background:transparent;
  border:none;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
}
.create-popover__item:hover{background:rgba(0,0,0,0.04);}
.create-popover__icon{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.06);
  color:#172b4d;
  flex:0 0 28px;
}
.create-popover__content{display:flex;flex-direction:column;gap:4px;}
.create-popover__title{font-weight:900;color:#172b4d;}
.create-popover__desc{color:#5e6c84;line-height:1.35;font-weight:600;}

body.theme-dark .create-popover{background:#1b1f24;border:1px solid rgba(255,255,255,0.08);box-shadow:0 14px 28px rgba(0,0,0,0.45);}
body.theme-dark .create-popover__item:hover{background:rgba(255,255,255,0.06);}
body.theme-dark .create-popover__icon{background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.92);}
body.theme-dark .create-popover__title{color:rgba(255,255,255,0.92);}
body.theme-dark .create-popover__desc{color:rgba(255,255,255,0.72);}
.topbar__avatar{
  width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.9);color:#172b4d;
  font-weight:900;text-decoration:none;
}

/* Boards page */
.boards-page{padding:10px 0;}
.boards-page__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px;}
.boards-page__title{margin:0;font-size:22px;}
.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.board-tile{
  height:110px;
  border-radius:14px;
  padding:12px;
  display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,#0c66e4,#0b5aa2);
  box-shadow:0 10px 24px rgba(0,0,0,0.10);
}
.board-tile:hover{filter:brightness(1.03);}
.board-tile__title{font-weight:900;font-size:15px;}
.board-tile__meta{opacity:.9;font-size:12px;font-weight:700;}
.board-tile--new{border:none;cursor:pointer;background:rgba(9,30,66,0.06);color:#172b4d;}
.board-tile--new:hover{background:rgba(9,30,66,0.10);} 

/* Board background (Trello-like) */
body.board-bg{
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,0.14), rgba(255,255,255,0)),
    linear-gradient(135deg, #0c4a6e 0%, #0b5aa2 40%, #0a74c9 100%);
  color:#f8fafc;
}
/* Board page should not use the browser page scrollbar. */
body.board-bg{overflow:hidden;}
body.board-bg .board-title{color:#f8fafc;text-shadow:0 1px 2px rgba(0,0,0,.25);}
body.board-bg .list{background:rgba(255,255,255,0.92);color:#172b4d;}
body.board-bg .card{transition:transform .08s ease, box-shadow .08s ease;color:#172b4d;}
body.board-bg .list-title{color:#172b4d;}

/* Board (dark theme) – keep board UI readable */
body.board-bg.theme-dark{
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0)),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    linear-gradient(135deg, #0b1220 0%, #0a1a2a 45%, #081a3a 100%);
  color:#f1f2f4;
}
body.board-bg.theme-dark .board-title{color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.45);}
body.board-bg.theme-dark .board-members-strip .mini-more{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.18);}

body.board-bg.theme-dark .list{
  background:rgba(34,39,43,0.92);
  color:#f1f2f4;
  border:1px solid rgba(255,255,255,0.08);
}
body.board-bg.theme-dark .list-title{color:#ffffff;}
body.board-bg.theme-dark .card{color:#f1f2f4;}
body.board-bg.theme-dark .card:hover{background:#2b3137;}
body.board-bg.theme-dark .badge{background:rgba(255,255,255,0.10);color:rgba(241,242,244,0.88);}
body.board-bg.theme-dark .badge-icon{border-color:rgba(255,255,255,0.14);}

main {
  padding: 16px 20px 24px;
}

/* On board page: make the main area fit the viewport so the horizontal board scrollbar
   is always visible at the bottom of the screen (no page scrolling). */
body.board-bg main{
  height: calc(100vh - 48px - 56px); /* topbar + fixed footer */
  overflow: hidden;
  /* IMPORTANT: board-topbar must be flush to the viewport edges and to the global topbar.
     So the board page main wrapper must not introduce any padding around it. */
  padding: 0;
}

/* Board page without footer */
body.board-bg.no-footer main{
  height: calc(100vh - 48px);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.main-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #fff;
  border-top: 1px solid #e7e9f0;
  color: #4b5563;
  padding: 14px 20px;
}

body.theme-dark .main-footer{
  background:#161a1d;
  border-top:1px solid rgba(255,255,255,0.10);
  color:rgba(241,242,244,0.78);
}

.page {
  max-width: 1200px;
  margin: 0 auto;
}

/* Board page should use the full viewport width (Trello-like) */
body.board-bg .page{
  max-width:none;
  width:100%;
  margin:0;
  padding:0 20px;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Boards page */
.boards-page{padding:10px 0 0;}
.boards-page__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;}
.boards-page__title{margin:0;font-size:22px;color:#172b4d;}
.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.board-tile{background:linear-gradient(135deg,#0b5aa2,#0a74c9);color:#fff;text-decoration:none;border-radius:16px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 6px 20px rgba(0,0,0,0.08);}
.board-tile:hover{filter:brightness(1.03);}
.board-tile__title{font-weight:800;font-size:16px;}
.board-tile__meta{opacity:.9;font-size:12px;}
.board-tile--new{border:none;cursor:pointer;background:#fff;color:#172b4d;border:1px dashed #c7cedb;}
.board-tile--new:hover{background:#f8fafc;}

/* Board top row */
.board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;}
.board-top__left{display:flex;align-items:center;gap:12px;min-width:0;}
.board-top__right{display:flex;gap:10px;}
.board-members-strip{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.board-members-strip .mini-more{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,0.25);color:#fff;font-weight:900;font-size:12px;border:1px solid rgba(255,255,255,0.35);}

.btn {
  background: #0c66e4;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
}

.btn:hover {
  filter: brightness(0.95);
}

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

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
}

.board-title {
  margin: 0;
  font-size: 22px;
}

.board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* Trello-like: board scrolls horizontally and scrollbar is visible */
  overflow-x: scroll;
  scrollbar-gutter: stable;
  padding-bottom: 14px;
  flex:1;
  min-height:0;
}

/* Make horizontal scrollbar easier to hit */
.board::-webkit-scrollbar{height:12px}
.board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}

/* Sprint panel (left block on board) */
.sprint-panel{
  width: 280px;
  flex: 0 0 280px;
  /* Flush to the left edge of the page and keep only right rounding */
  border-radius: 0 14px 14px 0;
  padding: 12px;
  background: rgba(20,24,31,.72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  position: sticky;
  left: 0;
  z-index: 3;
  /* Extra spacing from columns (board also has gap, this adds a bit more) */
  margin-right: 12px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  /* so last backlog items are not glued to viewport bottom */
  padding-bottom: 24px;
}

.sprint-panel::-webkit-scrollbar{width:10px}
.sprint-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
.sprint-panel::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:999px}

/* Keep last backlog rows visible above the bottom edge */
.sprint-backlog{ margin-bottom: 18px; }


.sprint-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sprint-title{display:flex;align-items:center;gap:8px;font-weight:800}
.sprint-title i{opacity:.9}
.badge-soft{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Switch (toggle) */
.toggle-switch{position:relative;display:inline-flex;align-items:center;width:46px;height:26px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-switch .slider{
  position:absolute;inset:0;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.toggle-switch .slider:before{
  content:"";
  position:absolute;left:3px;top:3px;
  width:20px;height:20px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.toggle-switch input:checked + .slider{
  background: rgba(59,130,246,.65);
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 18px rgba(59,130,246,.35);
}
.toggle-switch input:checked + .slider:before{transform:translateX(20px)}
body:not(.theme-dark) .toggle-switch .slider{background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.12)}
body:not(.theme-dark) .toggle-switch input:checked + .slider{background: rgba(59,130,246,.55); border-color: rgba(59,130,246,.65)}

.sprint-goal .lbl, .sprint-row .lbl{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
}
.sprint-goal .val{font-weight:700;line-height:1.25}
.sprint-row{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.sprint-row .lbl{width:84px;margin:0}
.sprint-row .val{flex:1;min-width:0}

/* Assignees row: horizontal with wrapping */
.mini-avatars{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  max-width:100%;
}

/* Sprint settings: scrollable body */
.sprint-edit{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.10);
}
.sprint-edit__scroll{max-height:none;overflow:visible;padding-right:0}
.sprint-edit__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Visual assignees picker */
.assignees-pick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.assignees-pick .mini-avatar.pick{
  width:32px;height:32px;
  border-radius:999px;
  /* Global avatar reset later in this file forces border/box-shadow to none.
     Override here so selected assignees get a visible outline. */
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08);
  cursor:pointer;
  padding:0;
  box-shadow:none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.assignees-pick .mini-avatar.pick:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
.assignees-pick .mini-avatar.pick.on{
  box-shadow: 0 0 0 3px rgba(59,130,246,.32) !important;
  border-color: rgba(59,130,246,.70) !important;
}

/* Sprint lists inherit scrolling from the whole sprint panel */

/* Sprint card rows */
.sprint-card-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.sprint-card-btn{
  flex:1;
  min-width:0;
  text-align:left;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sprint-card-btn:hover{background: rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.sprint-row-actions{display:flex;gap:6px;align-items:center}

.sprint-done{
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.sprint-card-row.is-done .sprint-done{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.35);
  color: rgba(34,197,94,.95);
}
.sprint-card-row.is-done .sprint-card-btn{
  opacity:.78;
  text-decoration: line-through;
}

.sprint-progress .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
}
.sprint-progress .fill{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(59,130,246,.95));
}
.sprint-progress .meta{
  margin-top:6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.timer{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.timer .t-main{font-weight:900;letter-spacing:.2px}
.timer .t-sub{font-size:12px;color:rgba(255,255,255,.72)}
.urgency-warm .timer{box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 22px rgba(250,204,21,.35);}
.urgency-hot .timer{box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 30px rgba(239,68,68,.55); transform: translateY(-1px);}

/* Toggle switch (used in board drawer) */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-switch .slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);transition:.2s;border-radius:999px}
.toggle-switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:2px;background:rgba(255,255,255,.92);transition:.2s;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.toggle-switch input:checked + .slider{background:rgba(59,130,246,.9);border-color:rgba(59,130,246,.9)}
.toggle-switch input:checked + .slider:before{transform:translateX(20px)}
.toggle-switch input:focus + .slider{box-shadow:0 0 0 3px rgba(59,130,246,.25)}

.sprint-resp{
  display:inline-flex;
  gap:8px;
  align-items:center;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-weight:800;
}
.sprint-resp img{
  width: 22px; height:22px;
  border-radius: 999px;
  object-fit: cover;
}
.sprint-resp .ini{
  width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size: 12px;
}

.sprint-panel .wip{
  font-weight:900;
}

/* Sprint hint block in drawer */
.sprint-hint{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.board::-webkit-scrollbar-track{background:rgba(255,255,255,.10);border-radius:999px}

/* Cards area: show up to ~6 cards without scrolling, then scroll inside the column */
:root{--cards-visible:6;--card-row:74px;}
.cards{max-height:calc(var(--cards-visible) * var(--card-row)); overflow-y:auto; overflow-x:hidden; padding-right:6px}
.cards::-webkit-scrollbar{width:10px}
.cards::-webkit-scrollbar-thumb{background:rgba(9,30,66,.22);border-radius:999px}
.cards::-webkit-scrollbar-track{background:rgba(9,30,66,.08);border-radius:999px}

.list {
  background: #fff;
  border: 1px solid #e7e9f0;
  border-radius: 16px;
  width: 280px;
  min-width: 280px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.list-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.list-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #44546f;
  padding: 6px;
  border-radius: 8px;
}

.icon-btn:hover {
  background: #f0f2f7;
}

.cards {
  display: flex;
  flex-direction: column;
  /* Smaller gaps so compact cards don't look "floating" */
  gap: 4px;
  min-height: 16px;
}

.card {
  background: #fff;
  border: 1px solid #e7e9f0;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}

.card:hover{
  border-color:#d0d7e2;
  box-shadow:0 6px 22px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.card.dragging {
  opacity: 0.6;
}

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.card-labels{display:flex;gap:6px;margin:0 0 8px;flex-wrap:wrap;}
/* Trello-like compact label bars (no text) */
.label-bar{display:inline-block;width:40px;height:8px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.label-gray{background:#6b778c;}
.label-green{background:#22a06b;}
.label-yellow{background:#e2b203;}
.label-orange{background:#f38a3f;}
.label-red{background:#c9372c;}
.label-blue{background:#0c66e4;}
.label-purple{background:#6e5dc6;}

.card-meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;color:#44546f;font-size:12px;}
.badge-icon{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f0f2f7;border:1px solid #e7e9f0;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f0f2f7;border:1px solid #e7e9f0;}
.pill.due{background:#fff3c4;border-color:#ffe08a;}

.card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;}
.card-members{display:flex;align-items:center;gap:6px;}
.mini-avatar{width:26px;height:26px;border-radius:999px;background:#dfe1e6;color:#172b4d;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;border:0;box-shadow:none;overflow:hidden;}
.mini-avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
.mini-more{font-size:12px;color:#6b778c;font-weight:900;}

.card-actions{display:flex;gap:6px;align-items:center;}
.icon-btn.danger{color:#ae2a19;}

.add-card {
  margin-top: 10px;
  width: 100%;
  background: #f0f2f7;
  color: #172b4d;
}

.add-card:hover {
  filter: none;
  background: #e7eaf3;
}

.empty-state {
  background: #fff;
  border: 1px solid #e7e9f0;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
}

.drop-hint {
  outline: 2px dashed #0c66e4;
  outline-offset: 4px;
}

/* Variants */
.btn-light{
  background: #ffffff;
  color: #172b4d;
  border: 1px solid #e7e9f0;
}
.btn-light:hover{background:#f7f8fc;}

.muted{color:#6b778c;}

/* Inputs */
.form-row{margin:0 0 12px;}
.label{display:block;font-size:12px;font-weight:800;color:#44546f;margin:0 0 6px;}
.input{
  width:100%;
  border:1px solid #e7e9f0;
  border-radius:12px;
  padding:10px 12px;
  font: inherit;
  background:#fff;
}
.input:focus{outline:2px solid rgba(12,102,228,.25);border-color:#0c66e4;}

/* Board header */
.board-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  padding:18px;z-index:1000;
}
.modal-backdrop[hidden]{display:none !important;}
.modal{
  width:min(720px, 100%);
  background:#fff;
  color:#172b4d;
  border-radius:20px;
  border:1px solid #e7e9f0;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  /* Keep modal inside viewport */
  max-height:calc(100vh - 36px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e7e9f0;}
.modal-title{font-weight:900;}
.modal-b{padding:16px;overflow:auto;flex:1;}
.modal-f{padding:12px 16px;border-top:1px solid #e7e9f0;display:flex;justify-content:flex-end;gap:10px;}

/* Board settings modal */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.tab{border:1px solid #e7e9f0;background:#fff;color:#172b4d;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer;}
.tab:hover{background:#f6f7fb;}
.tab.active{background:#0c66e4;border-color:#0c66e4;color:#fff;}
.tab-panels{min-height:240px;}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.bg-tile{border:2px solid transparent;border-radius:14px;overflow:hidden;cursor:pointer;position:relative;min-height:82px;}
.bg-tile::after{content:attr(data-name);position:absolute;left:10px;bottom:8px;color:#fff;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.bg-tile.selected{border-color:#0c66e4;}
.bg-tile .bg-preview{position:absolute;inset:0;background-size:cover;background-position:center;}

body.theme-dark .tab{border-color:rgba(255,255,255,0.10);background:rgba(255,255,255,0.06);color:#f1f2f4;}
body.theme-dark .tab:hover{background:rgba(255,255,255,0.10);}
body.theme-dark .tab.active{background:#0c66e4;border-color:#0c66e4;color:#fff;}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f0f2f7;color:#44546f;font-size:12px;font-weight:800;}
.members{display:flex;flex-direction:column;gap:8px;}
.member{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e7e9f0;border-radius:14px;background:#fff;}
.member-name{font-weight:800;}

/* Profile */
.card-surface{background:#fff;border:1px solid #e7e9f0;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,0.04);padding:16px;}
.avatar-xl{width:104px;height:104px;border-radius:24px;background:#f0f2f7;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;color:#44546f;}
.avatar-xl.has-img{background-size:cover;background-position:center;}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e7e9f0;border-top-color:#0c66e4;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Card modal (Trello-like MVP) */
.card-modal{display:grid;grid-template-columns:1fr 260px;gap:16px;}
.cm-main,.cm-side{display:flex;flex-direction:column;gap:12px;}
.field{display:block;}
.field-label{font-size:12px;font-weight:900;color:#44546f;margin:0 0 6px;}
.textarea{width:100%;border:1px solid #e7e9f0;border-radius:12px;padding:10px 12px;font:inherit;background:#fff;resize:vertical;}
.textarea:focus{outline:2px solid rgba(12,102,228,.25);border-color:#0c66e4;}

/* Card composer: no bright focus outline */
.composer .textarea:focus,
.composer .input:focus{outline:none !important;box-shadow:none !important;}
.cm-row{display:flex;gap:12px;align-items:flex-end;}
.cm-actions{display:flex;justify-content:flex-end;flex:1;}
.cm-section{border:1px solid #e7e9f0;border-radius:16px;padding:12px;background:#fff;}
.cm-h{font-weight:900;margin:0 0 10px;}
.cm-addline{display:flex;gap:10px;align-items:center;margin-top:10px;}
.cm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f0f2f7;}
.cm-item:last-child{border-bottom:none;}
.cm-check{display:flex;gap:10px;align-items:center;}
.cm-comment{border-top:1px solid #f0f2f7;padding-top:10px;margin-top:10px;}
.cm-comment:first-child{border-top:none;padding-top:0;margin-top:0;}
.cm-comment-h{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.cm-avatar{width:32px;height:32px;border-radius:10px;background:#f0f2f7;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;font-weight:900;color:#44546f;overflow:hidden;}
.cm-author{font-weight:900;line-height:1.1;}
.cm-time{font-size:12px;color:#6b778c;}
.cm-body{white-space:pre-wrap;}

/* Activity in card modal should not push the modal out of viewport */
#secActivity #cmActivity{
  max-height:220px;
  overflow:auto;
  padding-right:6px;
}
#secActivity #cmActivity::-webkit-scrollbar{width:10px}
#secActivity #cmActivity::-webkit-scrollbar-thumb{background:rgba(9,30,66,.22);border-radius:999px}
#secActivity #cmActivity::-webkit-scrollbar-track{background:rgba(9,30,66,.08);border-radius:999px}

/* Activity: don't let it push the modal out of bounds */
#cmActivity{
  max-height:260px;
  overflow:auto;
  padding-right:6px;
}
#cmActivity::-webkit-scrollbar{width:10px}
#cmActivity::-webkit-scrollbar-thumb{background:rgba(9,30,66,.22);border-radius:999px}
#cmActivity::-webkit-scrollbar-track{background:rgba(9,30,66,.08);border-radius:999px}
.cm-chip{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid #e7e9f0;border-radius:999px;background:#fff;margin:0 0 8px;cursor:pointer;user-select:none;}
.cm-chip input{margin:0;}
.label-dot{width:10px;height:10px;border-radius:999px;display:inline-block;}
.label-gray{background:#6b778c;}
.label-green{background:#22a06b;}
.label-yellow{background:#e2b203;}
.label-orange{background:#f38a3f;}
.label-red{background:#c9372c;}
.label-blue{background:#0c66e4;}
.label-purple{background:#6e5dc6;}
@media (max-width: 820px){
  .card-modal{grid-template-columns:1fr;}
}

/* Toasts */
#toastRoot{position:fixed;top:14px;right:14px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{background:#fff;border:1px solid #d0d7e2;border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;transform:translateY(-6px);transition:all .2s ease;max-width:340px}
.toast{color:#172b4d;}
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{border-color:#f2b8b5}
.toast-success{border-color:#b7ebc6}

/* Toasts in dark theme */
body.theme-dark .toast{background:#1b1f24;border-color:rgba(255,255,255,0.10);color:rgba(241,242,244,0.92);box-shadow:0 14px 28px rgba(0,0,0,0.45)}
body.theme-dark .toast-error{border-color:rgba(244,114,182,0.55)}
body.theme-dark .toast-success{border-color:rgba(34,197,94,0.55)}

/* Notifications popover */
.notif-pop{position:fixed;top:56px;right:12px;width:360px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid #e7e9f0;border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,0.18);z-index:200;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid #e7e9f0}
.notif-title{font-weight:900;color:#172b4d}
.notif-body{max-height:420px;overflow:auto}
.notif-item{padding:12px 14px;border-bottom:1px solid #f0f2f7;display:flex;gap:10px;position:relative}
.notif-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:8px;border:0;background:transparent;
  color:#6b778c;cursor:pointer;font-size:18px;line-height:24px;display:flex;align-items:center;justify-content:center;}
.notif-del:hover{background:#f0f2f7;color:#172b4d;}
body.theme-dark .notif-del:hover{background:rgba(255,255,255,0.08);color:rgba(241,242,244,0.92);}
.notif-item:last-child{border-bottom:none}
.notif-ico{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#f0f2f7;color:#44546f;flex:0 0 auto}
.notif-text{font-size:13px;color:#172b4d;line-height:1.35}
.notif-sub{margin-top:4px;color:#44546f;font-size:12px}
.notif-meta{font-size:11px;color:#6b778c;margin-top:4px;font-weight:700}
.notif-actions{margin-top:8px}
.notif-avatar{width:34px;height:34px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:0;box-shadow:none}

.btn-sm{padding:6px 10px;border-radius:10px;font-size:12px}
.btn-disabled{opacity:.55;cursor:not-allowed}
.notif-empty{padding:16px 14px;color:#6b778c}

/* Composer */
.composer{padding:8px}
.composer .btn-add{width:100%;text-align:left}
.composer-body{background:rgba(255,255,255,.92);border:1px solid rgba(9,30,66,.14);border-radius:12px;padding:10px}
body.theme-dark .composer-body{background:#22272b;border-color:rgba(255,255,255,0.10);}

/* Dark theme checkboxes */
body.theme-dark input[type="checkbox"]{accent-color:rgba(96,165,250,0.95);}
body.theme-dark input[type="checkbox"]:focus{outline:2px solid rgba(96,165,250,0.45);outline-offset:2px;}

/* Insert button between cards */
.card-insert{position:relative;height:10px;margin:0;}
.card-insert::before{content:'';position:absolute;left:10px;right:10px;top:50%;height:2px;transform:translateY(-50%);border-radius:999px;background:transparent;}
.card-insert:hover::before{background:rgba(9,30,66,0.14);} 
.card-insert .card-insert-btn{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;width:34px;height:24px;border-radius:999px;border:1px solid rgba(0,0,0,0.14);background:rgba(255,255,255,0.92);color:#0b1220;box-shadow:0 6px 16px rgba(0,0,0,0.10);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;}
body.theme-dark .card-insert .card-insert-btn{background:#22272b;border-color:rgba(255,255,255,0.12);box-shadow:0 10px 24px rgba(0,0,0,0.45);color:#f8fafc;}
body.theme-dark .card-insert:hover::before{background:rgba(255,255,255,0.12);} 
.card-insert:hover .card-insert-btn{opacity:1;pointer-events:auto;}
.card-insert .card-insert-btn:hover{transform:translateY(-50%) scale(1.05);} 

/* Dark theme scrollbars */
body.theme-dark ::-webkit-scrollbar{width:10px;height:10px;}
body.theme-dark ::-webkit-scrollbar-track{background:rgba(0,0,0,0.28);}
body.theme-dark ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px;border:2px solid rgba(0,0,0,0.0);background-clip:padding-box;}
body.theme-dark ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28);} 

/* Dark theme: override board/column scrollbars so they are not "white" */
body.theme-dark .board::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18) !important;}
body.theme-dark .board::-webkit-scrollbar-track{background:rgba(0,0,0,0.22) !important;}
body.theme-dark .cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14) !important;}
body.theme-dark .cards::-webkit-scrollbar-track{background:rgba(0,0,0,0.18) !important;}

/* Done toggle on card */
.card-done-toggle{width:18px;height:18px;border-radius:999px;border:2px solid rgba(9,30,66,.35);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;background:transparent;}
body.theme-dark .card-done-toggle{border-color:rgba(241,242,244,0.38);} 
.card.is-done .card-done-toggle{border-color:rgba(34,197,94,0.85);background:rgba(34,197,94,0.15);} 
.card.is-done .card-title{opacity:0.78;text-decoration:line-through;}
.composer-actions{display:flex;gap:8px;margin-top:8px}
.list-add{background:transparent;box-shadow:none}

/* Drag&Drop feel */
.cards.dropzone-over{background:rgba(9,30,66,.06);border-radius:10px}
.drop-placeholder{height:44px;border-radius:10px;border:2px dashed rgba(9,30,66,.25);margin:8px 0}
.list.list-placeholder{min-height:40px;border:2px dashed rgba(9,30,66,.25);background:rgba(255,255,255,0.55);
  box-shadow:none}

/* Due pills */
.pill.due{display:inline-flex;align-items:center;gap:6px}
.pill.due.overdue{background:#fbeaea;border-color:#f2b8b5;color:#9f1b1b}
.pill.due.soon{background:#fff4cc;border-color:#ffe08a;color:#7a5a00}
.pill.due.future{background:#eef2ff;border-color:#c7d2fe;color:#2a3a7a}


.modal input, .modal textarea, .modal select { color:#172b4d; }

/* List menu */
.list-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.list-menu-btn{width:34px;height:34px;border-radius:10px;border:none;cursor:pointer;
  background:transparent;color:#44546f;display:inline-flex;align-items:center;justify-content:center;}
.list-menu-btn:hover{background:#f0f2f7;}
.list-menu-btn:active{transform:translateY(1px);}
body.theme-dark .list-menu-btn{color:rgba(241,242,244,0.9);}
body.theme-dark .list-menu-btn:hover{background:rgba(255,255,255,0.10);}
.list-menu{position:absolute;right:10px;top:44px;min-width:220px;background:#fff;border:1px solid #e7e9f0;
  border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:8px;display:none;z-index:2000;}
.list-menu.show{display:block;}
.list-menu .mi{display:flex;gap:10px;align-items:center;width:100%;border:none;background:transparent;
  padding:10px 10px;border-radius:10px;cursor:pointer;text-align:left;font-weight:800;color:#172b4d;}
.list-menu .mi:hover{background:#f0f2f7;}
.list-menu .mi.danger{color:#b42318;}
.list-menu .mi.danger:hover{background:rgba(239,68,68,.12);}
.list-menu .sep{height:1px;background:#eef1f6;margin:6px 0;}
body.theme-dark .list-menu{background:#22272b;border-color:rgba(255,255,255,0.10);box-shadow:0 18px 50px rgba(0,0,0,0.55);} 
body.theme-dark .list-menu .mi{color:rgba(241,242,244,0.92);} 
body.theme-dark .list-menu .mi.danger{color:#fb7185;}
body.theme-dark .list-menu .mi:hover{background:rgba(255,255,255,0.10);} 
body.theme-dark .list-menu .sep{background:rgba(255,255,255,0.10);} 

/* List placeholder shadow while dragging */
.list-placeholder{border-radius:16px;border:2px dashed rgba(9,30,66,0.22);background:rgba(255,255,255,0.35);box-shadow:0 16px 40px rgba(0,0,0,0.16);} 
body.theme-dark .list-placeholder{border-color:rgba(255,255,255,0.18);background:rgba(17,24,39,0.35);box-shadow:0 18px 55px rgba(0,0,0,0.55);} 

/* Archive */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 0;}
.page-head .kicker{font-weight:900;opacity:.75;font-size:12px;letter-spacing:.02em;}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
@media (max-width: 900px){.archive-grid{grid-template-columns:1fr;}}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.archive-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #e7e9f0;border-radius:14px;background:#fff;}
.archive-row .meta{display:flex;flex-direction:column;gap:6px;min-width:0;}
.archive-row .title{font-weight:900;}
.archive-row .archive-sub{margin-top:2px;}

/* Archive v2 */
.archive-surface{padding:14px;}
.archive-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.archive-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.archive-tab{border:1px solid #e7e9f0;background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:900;color:#172b4d;}
.archive-tab:hover{background:#f0f2f7;}
.archive-tab.is-active{background:#172b4d;color:#fff;border-color:#172b4d;}
.archive-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:999px;margin-left:6px;font-size:12px;font-weight:900;background:rgba(9,30,66,0.08);color:#172b4d;}
.archive-tab.is-active .archive-count{background:rgba(255,255,255,0.22);color:#fff;}

.archive-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.archive-search{display:flex;align-items:center;gap:8px;border:1px solid #e7e9f0;border-radius:14px;padding:8px 10px;background:#fff;min-width:320px;max-width:520px;flex:1;}
.archive-search i{opacity:.65;}
.archive-search .input{border:none !important;box-shadow:none !important;padding:0 !important;height:auto !important;background:transparent !important;}

.archive-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #eef1f6;}
.archive-filters .check{display:flex;align-items:center;gap:8px;font-weight:800;color:#172b4d;}
.archive-filters .field{display:flex;align-items:center;gap:8px;}
.archive-filters .field-label{font-weight:900;opacity:.8;font-size:12px;}
.archive-active{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.af-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #e7e9f0;background:#fff;border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px;color:#172b4d;}
.af-chip button{border:none;background:transparent;cursor:pointer;opacity:.75;}
.af-chip button:hover{opacity:1;}

.archive-stack{margin-top:12px;}
.archive-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid #e7e9f0;border-radius:16px;background:#fff;}
.archive-item .left{min-width:0;}
.archive-item .title{font-weight:1000;}
.archive-item .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.archive-item .desc{margin-top:6px;font-size:12px;color:#5e6c84;line-height:1.25;max-height:2.5em;overflow:hidden;}
.archive-item .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.archive-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;}

/* Dark theme */
body.theme-dark .archive-tab{background:#22272b;border-color:rgba(255,255,255,0.10);color:rgba(241,242,244,0.92);} 
body.theme-dark .archive-tab:hover{background:rgba(255,255,255,0.10);} 
body.theme-dark .archive-tab.is-active{background:#0f1419;border-color:rgba(255,255,255,0.18);color:#fff;}
body.theme-dark .archive-count{background:rgba(255,255,255,0.10);color:rgba(241,242,244,0.92);} 
body.theme-dark .archive-search{background:#22272b;border-color:rgba(255,255,255,0.10);} 
body.theme-dark .archive-search .input{color:rgba(241,242,244,0.92);} 
body.theme-dark .archive-filters{border-top-color:rgba(255,255,255,0.10);} 
body.theme-dark .archive-filters .check{color:rgba(241,242,244,0.92);} 
body.theme-dark .af-chip{background:#22272b;border-color:rgba(255,255,255,0.10);color:rgba(241,242,244,0.92);} 
body.theme-dark .archive-item{background:#22272b;border-color:rgba(255,255,255,0.10);} 
body.theme-dark .archive-item .title{color:rgba(241,242,244,0.92);} 
body.theme-dark .archive-item .desc{color:rgba(241,242,244,0.68);} 

.cm-actions-col{display:flex;flex-direction:column;gap:8px;}
.cm-actions-col .btn{justify-content:flex-start;}
.btn-danger{background:#c9372c;border-color:#c9372c;}
.btn-danger:hover{filter:brightness(0.96);}


/* Card description preview */
.card-desc{
  margin-top:6px;
  font-size:12px;
  color:#5e6c84;
  line-height:1.25;
  max-height:2.5em;
  overflow:hidden;
}

/* Styled scrollbars (WebKit) */
.board::-webkit-scrollbar{ height: 10px; }
.board::-webkit-scrollbar-track{ background: rgba(255,255,255,0.18); border-radius: 999px; }
.board::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.25); border-radius: 999px; }
.board::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.35); }

.cards::-webkit-scrollbar{ width: 10px; }
.cards::-webkit-scrollbar-track{ background: rgba(0,0,0,0.05); border-radius: 999px; }
.cards::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.20); border-radius: 999px; }
.cards::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.30); }


/* Topbar right alignment (keep grid layout) */
.topbar__right{justify-content:flex-end;position:relative;}

/* Notifications popover */
.notif-popover{
  position:absolute;
  top:44px;
  right:0;
  width:360px;
  max-height:420px;
  background:#fff;
  border:1px solid #e7e9f0;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.12);
  overflow:hidden;
  z-index:1000;
}
.notif-popover__head{
  padding:10px 12px;
  font-weight:900;
  color:#172b4d;
  background:#f7f8fc;
  border-bottom:1px solid #e7e9f0;
}
.notif-popover__body{overflow:auto;max-height:380px;}
.notif-item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f2f7;}
.notif-item:last-child{border-bottom:0;}
.notif-ava{width:34px;height:34px;border-radius:999px;overflow:hidden;flex:0 0 34px;background:#dfe1e6;border:1px solid #c1c7d0;display:flex;align-items:center;justify-content:center;font-weight:900;color:#172b4d;}
.notif-ava img{width:100%;height:100%;object-fit:cover;display:block;}
.notif-main{flex:1;min-width:0;}
.notif-text{font-size:13px;color:#172b4d;line-height:1.25;}
.notif-sub{font-size:12px;color:#6b778c;margin-top:4px;}
.notif-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.btn-small{padding:6px 10px;border-radius:10px;font-size:12px;font-weight:900;}
.btn-disabled{opacity:.55;pointer-events:none;filter:grayscale(1);}


/* --- Comment images & card thumbnails --- */
.card-thumb { margin: 6px 0 8px; border-radius: 10px; overflow: hidden; }
.card-thumb img { display:block; width:100%; height:auto; }

.cm-addline { gap: 8px; align-items: flex-start; }
#cmNewComment { resize: vertical; min-height: 44px; }
.cm-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display:block; }

.cm-images { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.cm-img { width: 140px; height: auto; border-radius: 10px; display:block; border: 1px solid rgba(0,0,0,.08); }
@media (max-width: 520px){
  .cm-img { width: 100%; }
}


/* Dark theme improvements */
body.theme-dark .input, body.theme-dark .textarea, body.theme-dark textarea, body.theme-dark input[type="text"], body.theme-dark input[type="search"], body.theme-dark input[type="email"], body.theme-dark input[type="url"], body.theme-dark input[type="date"], body.theme-dark select{
  background:#1b1f23;
  color:#f1f2f4;
  border-color:rgba(255,255,255,0.10);
}
body.theme-dark .input::placeholder, body.theme-dark .textarea::placeholder{color:rgba(241,242,244,0.55);}
body.theme-dark .list-menu{background:#22272b;border-color:rgba(255,255,255,0.10);}
body.theme-dark .list-menu .mi{color:#f1f2f4;}
body.theme-dark .list-menu .mi:hover{background:rgba(255,255,255,0.08);}
body.theme-dark .notif-popover{background:#22272b;border-color:rgba(255,255,255,0.10);}
body.theme-dark .notif-popover__head{background:#1f2429;border-bottom-color:rgba(255,255,255,0.10);color:#ffffff;}
body.theme-dark .notif-item{border-color:rgba(255,255,255,0.08);}
body.theme-dark .notif-text{color:#f1f2f4;}
body.theme-dark .notif-sub{color:rgba(241,242,244,0.72);}
body.theme-dark .btn.btn-light{background:rgba(255,255,255,0.10);color:#f1f2f4;border:1px solid rgba(255,255,255,0.10);}
body.theme-dark .btn.btn-light:hover{background:rgba(255,255,255,0.14);} 
body.theme-dark .cm-author{color:#f1f2f4;}
body.theme-dark .cm-time{color:rgba(241,242,244,0.65);} 

/* Fix: keep topbar search input transparent in dark theme.
   The global dark-theme rule for input[type="search"] was overriding
   .topbar__search input background: transparent (same specificity, later rule wins). */
body.theme-dark .topbar__search input{
  background: transparent !important;
  border: none !important;
}

/* Card modal (edit) in dark theme */
body.theme-dark .cm-section{background:#22272b;border-color:rgba(255,255,255,0.10);}
body.theme-dark .cm-h{color:#ffffff;}
body.theme-dark .cm-item{border-bottom-color:rgba(255,255,255,0.08);}
body.theme-dark .cm-comment{border-top-color:rgba(255,255,255,0.08);}
body.theme-dark .cm-body{color:#dcdfe4;}
body.theme-dark .cm-chip{background:#1f2429;border-color:rgba(255,255,255,0.10);color:#f1f2f4;}
body.theme-dark .cm-img{border-color:rgba(255,255,255,0.12);}

/* Board background presets */
body.board-bg[data-bg="preset-1"]{background:linear-gradient(135deg,#0c4a6e 0%, #0b5aa2 40%, #0a74c9 100%);} 
body.board-bg[data-bg="preset-2"]{background:linear-gradient(135deg,#2a2f4f 0%, #232946 45%, #121629 100%);} 
body.board-bg[data-bg="preset-3"]{background:linear-gradient(135deg,#0f172a 0%, #111827 45%, #0b1220 100%);} 
body.board-bg[data-bg="preset-4"]{background:linear-gradient(135deg,#7c2d12 0%, #b45309 45%, #be123c 100%);} 
body.board-bg[data-bg="image"]{background-size:cover;background-position:center;background-repeat:no-repeat;}

/* Board column height to near bottom */
body.board-bg .board{padding-bottom:12px;}
body.board-bg .list{display:flex;flex-direction:column;max-height:calc(100vh - 48px - 110px);}
body.board-bg .cards{flex:1;max-height:none;}
body.board-bg .composer{margin-top:10px;}

/* Modal confirm */
.ui-confirm{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;}
.ui-confirm[hidden]{display:none;}
.ui-confirm__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);} 
.ui-confirm__panel{position:relative;min-width:280px;max-width:420px;background:#fff;border-radius:16px;border:1px solid rgba(9,30,66,0.12);box-shadow:0 18px 60px rgba(0,0,0,0.25);padding:14px;}
body.theme-dark .ui-confirm__panel{background:#22272b;border-color:rgba(255,255,255,0.10);} 
.ui-confirm__title{font-weight:900;margin:0 0 6px;} 
.ui-confirm__text{margin:0 0 12px;color:#5e6c84;} 
body.theme-dark .ui-confirm__text{color:rgba(241,242,244,0.7);} 
.ui-confirm__actions{display:flex;gap:10px;justify-content:flex-end;}

/* Image viewer nav */
.img-viewer__nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.img-viewer__nav button{pointer-events:auto;border:0;background:rgba(255,255,255,0.18);color:#fff;border-radius:14px;width:44px;height:44px;cursor:pointer;}
.img-viewer__nav button:hover{background:rgba(255,255,255,0.26);} 

/* =========================
   Extra Dark Theme Polish
========================= */

/* Boards list / create board button */
body.theme-dark .boards-page__header .btn,
body.theme-dark .empty-state .btn,
body.theme-dark .board-tile--new {
  background: #2b3137;
  border-color: rgba(255,255,255,0.14);
  color: #f1f2f4;
}
body.theme-dark .boards-page__header .btn:hover,
body.theme-dark .empty-state .btn:hover,
body.theme-dark .board-tile--new:hover {
  background: #333b44;
}
body.theme-dark .board-tile {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f1f2f4;
}
body.theme-dark .board-tile__meta{ color: #9aa4af; }

/* Notifications popup */
body.theme-dark .notif-pop {
  background: #22272b;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  color: #f1f2f4;
}
body.theme-dark .notif-head { border-bottom: 1px solid rgba(255,255,255,0.10); }
body.theme-dark .notif-title { color: #ffffff; }
body.theme-dark .notif-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
body.theme-dark .notif-item:hover { background: rgba(255,255,255,0.04); }
body.theme-dark .notif-meta { color: #9aa4af; }
body.theme-dark .notif-sub { color: #b6c2cf; }
body.theme-dark .notif-link { color: #9ecbff; }
body.theme-dark .notif-ico { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); }
body.theme-dark .notif-avatar { border: none; }

/* Badge icons on cards (comments/checklist) */
body.theme-dark .badge-icon {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #dcdfe4;
}
body.theme-dark .badge-icon i { color: #b6c2cf; }
body.theme-dark .badge-icon.badge-ok {
  background: rgba(34,160,107,0.18);
  border-color: rgba(34,160,107,0.35);
  color: #7ee2b8;
}

/* Card modal label/member chips (checkbox lists) */
body.theme-dark .cm-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f1f2f4;
}
body.theme-dark .cm-chip:hover { background: rgba(255,255,255,0.06); }
body.theme-dark .cm-chip input[type="checkbox"] { accent-color: #4c9aff; }
body.theme-dark .cm-chip .cm-chip-text { color: #f1f2f4; }
body.theme-dark .cm-chip-actions { margin-left: auto; display: inline-flex; gap: 6px; }

/* Small icon buttons used in label edit/delete */
.icon-btn { background: transparent; border: 1px solid transparent; color: inherit; border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.icon-btn:hover { background: rgba(0,0,0,0.06); }
body.theme-dark .icon-btn:hover { background: rgba(255,255,255,0.06); }
.icon-btn--sm { padding: 4px 6px; border-radius: 8px; }
.icon-btn--danger { color: #ffb4a9; }

/* Remove avatar outlines everywhere */
.avatar, .mini-avatar, .notif-avatar, .notif-ava, .cm-avatar { border: none !important; box-shadow: none !important; outline: none !important; }

/* Scrollbars in card modal */
body.theme-dark .modal,
body.theme-dark .modal * {
  scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06);
}
body.theme-dark .modal *::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-dark .modal *::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
body.theme-dark .modal *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.06);
}
body.theme-dark .modal *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* =========================
   Home page (boards)
========================= */
.home{max-width:980px;margin:0 auto;padding:20px 16px 40px;}
.home-section{margin:18px 0 26px;}
.home-section__title{font-size:15px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.home-section__title-row{display:flex;align-items:center;gap:10px;margin:0 0 12px;}

.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.boards-grid--compact{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}

.board-tile{border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,0.08);background:#fff;color:inherit;text-decoration:none;display:flex;flex-direction:column;min-height:108px;}
.board-tile--thumb{padding:0;}
.board-tile__thumb{height:64px;background-size:cover;background-position:center;}
.board-tile__title{padding:10px 12px;font-weight:700;}

.board-tile--new{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);border:1px dashed rgba(0,0,0,0.18);cursor:pointer;}
.board-tile__newtext{font-weight:700;opacity:.9;}
.board-tile--new:hover{background:rgba(0,0,0,0.06);}

/* Dark mode for tiles */
body.theme-dark .board-tile{background:#1f2933;border-color:rgba(255,255,255,0.10);color:#e7eaf0;}
body.theme-dark .board-tile--new{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);}
body.theme-dark .board-tile--new:hover{background:rgba(255,255,255,0.08);}

/* Info tooltip */
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;color:inherit;opacity:.8;cursor:default;}
.info-tip:hover{opacity:1;}
.info-tip__bubble{position:absolute;left:100%;top:50%;transform:translate(10px,-50%);
  min-width:320px;max-width:360px;padding:10px 12px;border-radius:10px;
  background:#111827;color:#f3f4f6;border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 40px rgba(0,0,0,0.28);font-size:13px;line-height:1.35;
  opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:50;}
.info-tip:hover .info-tip__bubble,
.info-tip:focus .info-tip__bubble{opacity:1;pointer-events:auto;}

/* Topbar avatar (image) */
.topbar__avatar{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,0.12);color:#fff;font-weight:800;text-decoration:none;}
.topbar__avatar-img{width:100%;height:100%;object-fit:cover;display:block;}

/* =========================
   Board layout: blurred full-width header + edge gutters
========================= */
body.board-bg .page{padding-left:0 !important;padding-right:0 !important;}

.board-topbar{
  width:100%;
  background: rgb(0 0 0 / 24%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* flush to the screen edges and to the global topbar */
  margin:0;
  padding:0;
}

/* Make the content inside the board-topbar compact, while keeping consistent gutters */
body.board-bg .board-top{
  margin:0;
  padding:6px 20px;
}

/* Optional row reserved above columns (keep it, even if empty) */
.board-actions-row{
  display:flex;
  justify-content:flex-end;
  padding: 10px 20px 6px;
}

/* Only the first and last columns should have outer gutters */
body.board-bg .board > .list:first-child{margin-left:20px;}
body.board-bg .board > .list:last-child{margin-right:20px;}

.topbar__avatar-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}

/* =====================
   App shell (drawer menu)
===================== */
/* Burger is always visible: sidebar is a drawer on all screen sizes */
.topbar__burger{display:inline-flex;}

.app-shell{display:block;min-height:calc(100vh - 56px);}
.sidebar{
  position:fixed;
  top:56px;
  left:0;
  bottom:0;
  width:260px;
  background:#fff;
  /* Ensure readable text even when body text is white (e.g., board background) */
  color:#172b4d;
  border-right:1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  padding:14px 10px;
  transform:translateX(-105%);
  transition:transform .2s ease;
  z-index:40;
}
body.theme-dark .sidebar{background:rgba(255,255,255,0.04);border-right:1px solid rgba(255,255,255,0.08);}

.sidebar__nav{display:flex;flex-direction:column;gap:4px;}
.sidebar__link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#172b4d;
  text-decoration:none;
  font-weight:700;
  opacity:0.9;
}
body.theme-dark .sidebar__link{color:rgba(241,242,244,0.92);} 
.sidebar__link i{width:18px;text-align:center;opacity:0.9;}
.sidebar__link:hover{background:rgba(0,0,0,0.06);}
body.theme-dark .sidebar__link:hover{background:rgba(255,255,255,0.08);}
.sidebar__link.is-active{background:rgba(13,110,253,0.14);opacity:1;}
body.theme-dark .sidebar__link.is-active{background:rgba(96,165,250,0.18);}

/* =====================
   Board right drawer (Trello-like)
===================== */
.board-drawer-backdrop{position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,0.25);z-index:80;}
.board-drawer{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:92vw;background:#fff;color:#172b4d;border-left:1px solid rgba(0,0,0,0.10);box-shadow:-18px 0 40px rgba(0,0,0,0.18);display:flex;flex-direction:column;}
.board-drawer{color:#172b4d;}
/* Board drawer: match global dark theme panels */
body.theme-dark .board-drawer{background:#22272b;border-left:1px solid rgba(255,255,255,0.10);color:#f1f2f4;} 
body.theme-dark .board-drawer .drawer-h{border-bottom:1px solid rgba(255,255,255,0.10);} 
body.theme-dark .board-drawer .drawer-section{border-top:1px solid rgba(255,255,255,0.08);} 
/* In dark theme the page may have different text colors (e.g. white on board background),
   so explicitly set readable drawer text colors. */
body.theme-dark .board-drawer{color:#f1f2f4;}
body.theme-dark .board-drawer .muted{color:rgba(241,242,244,0.70) !important;}
body.theme-dark .board-drawer a{color:inherit;}
.board-drawer__h{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid rgba(0,0,0,0.08);}
body.theme-dark .board-drawer__h{border-bottom:1px solid rgba(255,255,255,0.08);}
.board-drawer__title{font-weight:900;}
.board-drawer__nav{display:flex;flex-direction:column;gap:6px;padding:10px 10px;border-bottom:1px solid rgba(0,0,0,0.08);}
body.theme-dark .board-drawer__nav{border-bottom:1px solid rgba(255,255,255,0.08);}
.bd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:transparent;border:0;text-decoration:none;color:inherit;font-weight:800;cursor:pointer;}
.bd-item:hover{background:rgba(0,0,0,0.06);} 
body.theme-dark .bd-item:hover{background:rgba(255,255,255,0.08);} 
.bd-item.danger{color:#b42318;}
body.theme-dark .bd-item.danger{color:#ff6b6b;}
.bd-item.active{background:rgba(13,110,253,0.14);} 
body.theme-dark .bd-item.active{background:rgba(96,165,250,0.18);} 
.board-drawer__body{padding:12px 12px;overflow:auto;}

/* Drag&drop highlight */
.cards.dropzone-over{outline:2px dashed rgba(13,110,253,0.65);outline-offset:6px;border-radius:14px;}
body.theme-dark .cards.dropzone-over{outline-color:rgba(96,165,250,0.75);} 
.drop-placeholder{height:54px;border-radius:14px;border:2px dashed rgba(0,0,0,0.15);margin:8px 0;}
body.theme-dark .drop-placeholder{border-color:rgba(255,255,255,0.18);} 

.app-shell.sidebar-open .sidebar{transform:translateX(0);}
.app-shell.sidebar-open::before{content:'';position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,0.35);z-index:35;}

.app-content{min-width:0;}

.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 18px 0;
  color:rgba(0,0,0,0.65);
  font-weight:700;
}
body.theme-dark .breadcrumbs{color:rgba(255,255,255,0.70);}
.breadcrumbs__sep{opacity:0.45;}
.breadcrumbs__link{color:inherit;text-decoration:none;opacity:0.9;}
.breadcrumbs__link:hover{text-decoration:underline;opacity:1;}
.breadcrumbs__current{opacity:1;}

.content-main{padding:18px;}

/* Board page should be full-bleed (no extra padding from app layout) */
body.board-bg .content-main{padding:0;}

/* Autocomplete dropdown */
.suggest{
  position:absolute;
  top:46px;
  left:0;
  right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  box-shadow:0 14px 28px rgba(0,0,0,0.14);
  overflow:hidden;
  z-index:60;
}
.suggest__item{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  color:inherit;
}
.suggest__item:hover{background:rgba(0,0,0,0.04);}
body.theme-dark .suggest{
  background:#1b1f24;
  border-color:rgba(255,255,255,0.10);
  box-shadow:0 14px 28px rgba(0,0,0,0.45);
}
body.theme-dark .suggest__item:hover{background:rgba(255,255,255,0.06);}

/* Small tweaks for very small screens */
@media (max-width: 520px){
  .sidebar{width:86vw;}
}

/* Breadcrumbs inside board topbar */
.board-top__crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:700;opacity:0.9;}
.board-top__crumbs a{color:inherit;text-decoration:none;opacity:0.9;}
.board-top__crumbs a:hover{text-decoration:underline;opacity:1;}
.board-top__crumbs .sep{opacity:0.45;}

/* =====================
   Mobile & responsive
   Full mobile adaptation for all key screens
===================== */

/* Large phones / small tablets */
@media (max-width: 900px){
  .content-main{padding:14px;}
  .page{padding-left:14px;padding-right:14px;}
  .boards-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}

  /* Tables / wide blocks: allow horizontal scroll */
  .admin-table,
  table{max-width:100%;}
}

/* Phone layout */
@media (max-width: 640px){
  /* Global topbar becomes two-row: controls on top, search below */
  .topbar{
    height:auto;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:8px 10px;
  }
  .topbar__left{order:1;flex:1;min-width:0;}
  .topbar__right{order:2;flex:0 0 auto;}
  .topbar__center{order:3;width:100%;}
  .topbar__center-wrap{gap:8px;}
  .topbar__search{min-width:0;max-width:none;width:100%;}
  .topbar__search input{min-width:0;}
  .topbar__create{height:36px;padding:0 12px;white-space:nowrap;}

  /* Hide long labels in topbar buttons (keep icons) */
  .topbar__btn{font-size:0;gap:0;padding:8px 10px;}
  .topbar__btn i{font-size:16px;}

  /* Popovers should not go offscreen */
  .create-popover{right:auto;left:0;width:100%;}
  .notif-popover{right:10px;left:10px;width:auto;}

  /* Page paddings */
  .content-main{padding:12px;}
  .breadcrumbs{padding:10px 12px 0;}

  /* Cards / tiles */
  .boards-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;}
  .board-tile{min-height:92px;border-radius:14px;padding:12px;}

  /* Modals fit the viewport comfortably */
  .modal-backdrop{padding:10px;}
  .modal{border-radius:16px;max-height:calc(100vh - 20px);}
  .modal-h{padding:12px 12px;}
  .modal-b{padding:12px;}
  .modal-f{padding:10px 12px;}
  .bg-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* Small phones */
@media (max-width: 520px){
  /* Slightly smaller typography so everything fits */
  body{font-size:15px;}
  .board-title{font-size:18px;}

  /* Board page: make columns finger-friendly */
  body.board-bg .page{padding:0;}
  body.board-bg .board-top{padding:8px 12px;}
  body.board-bg .board-actions-row{padding:8px 12px 6px;}
  body.board-bg .board > .list:first-child{margin-left:12px;}
  body.board-bg .board > .list:last-child{margin-right:12px;}
  .board{gap:10px;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .list{width:86vw;min-width:86vw;border-radius:16px;scroll-snap-align:start;}
  .list{padding:10px;}
  .cards{max-height:calc(100dvh - 48px - 56px - 160px);} /* dynamic viewport, safe on mobile */

  /* Card thumbs / viewer */
  .cm-img{width:100%;}
  .img-viewer__panel{inset:12px;}
  .img-viewer__close{border-radius:12px;}

  /* Forms */
  .input, .textarea, textarea, select{font-size:16px;} /* avoid iOS zoom on focus */
}

/* Extra small (legacy phones) */
@media (max-width: 380px){
  .boards-grid{grid-template-columns:1fr;}
  .topbar__icon{width:34px;height:34px;border-radius:10px;}
  .topbar__create{width:100%;}
  .topbar__center-wrap{flex-wrap:wrap;}
}


body:not(.theme-dark) .sprint-panel{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
body:not(.theme-dark) .sprint-panel,
body:not(.theme-dark) .sprint-panel a{color:#0f172a;}
body:not(.theme-dark) .sprint-goal .lbl,
body:not(.theme-dark) .sprint-row .lbl,
body:not(.theme-dark) .sprint-progress .meta,
body:not(.theme-dark) .timer .t-sub{color:rgba(15,23,42,.65);}
body:not(.theme-dark) .timer{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
}
body:not(.theme-dark) .badge-soft{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.70);
}
body:not(.theme-dark) .sprint-resp .ini{
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.12);
}


/* Admin switches (service page) */
.admin-service-panel .switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.admin-service-panel .switch .meta .k{font-weight:800}
.admin-service-panel .switch .meta .d{font-size:12px;color:rgba(255,255,255,.72);margin-top:2px}
.admin-service-panel .switch input[type="checkbox"]{
  width:44px;height:24px;
  appearance:none;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  position:relative;
  cursor:pointer;
  outline:none;
  transition: .2s;
}
.admin-service-panel .switch input[type="checkbox"]::after{
  content:"";
  position:absolute;
  left:3px; top:2px;
  width:18px; height:18px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  transition:.2s;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.admin-service-panel .switch input[type="checkbox"]:checked{
  background: rgba(59,130,246,.85);
  border-color: rgba(59,130,246,.85);
}
.admin-service-panel .switch input[type="checkbox"]:checked::after{ transform: translateX(20px); }


/* Notifications badge */
.notif-badge{
  position:absolute;
  top:2px;
  right:2px;
  min-width:12px;
  height:12px;
  padding:0 3px;
  border-radius:999px;
  background: rgba(239,68,68,.95);
  color:#fff;
  font-size:9px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.notif-badge[hidden]{ display:none !important; }
.topbar__icon{ position:relative; }