:root { --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
/* Avoid custom CSS where possible; only precise tweaks */
.topbar { height: 60px; }
.board-card { min-height: 185px; }
.title-one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Create Tab dropdown panel */
.create-tab-panel { min-width: 360px; }

#taskModal .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 1 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>"); background-size: 2.2em; box-shadow: none !important; }
#taskModal .btn-close:focus,
#taskModal .btn-close:focus-visible { box-shadow: none !important; }


/* Task description placeholder and editor */
.desc-placeholder { 
  display: block;
  width: 100%;
  border: 1px solid #dee2e6;
  background-color: #eef1f4;
  color: #6c757d;
  padding: .875rem 1rem;
  border-radius: .5rem;
  min-height: 52px;
  cursor: text;
}
.desc-placeholder:hover, .desc-placeholder:focus { 
  background-color: #e9edf2; 
  border-color: #dee2e6;
}
.desc-editor .form-control { min-height: 220px; }

/* Quill editor tweaks for Task Modal description */
.desc-editor #descToolbar { 
  background-color: #fff; 
  border-bottom: 1px solid #dee2e6; 
  border-top-left-radius: .5rem; 
  border-top-right-radius: .5rem; 
}
.desc-editor .ql-toolbar.ql-snow { border: 0; }
.desc-editor .ql-container.ql-snow { border: 0; overflow: visible; font-size: 16px; }
.desc-editor #descQuill .ql-editor { min-height: 220px; font-size: 16px; }

/* Quill tooltip inside Task Modal should overlay content and not be clipped */
.desc-editor .ql-tooltip { z-index: 1065; }

/* Position the Quill tooltip 10px from the left when it is open (editing) */
.desc-editor .ql-tooltip.ql-editing { left: 10px !important; right: auto !important; }

/* Ensure tooltip left offset also in preview (non-editing) state */
.desc-editor .ql-tooltip:not(.ql-hidden) { left: 10px !important; right: auto !important; }

/* Visible description (read-only) styling in Task Modal */
#taskModal #descDisplay.desc-visible {
  background-color: #fff;
  color: #212529; /* Bootstrap body color */
  border-color: #dee2e6;
  font-size: 16px;
}
#taskModal #descDisplay.desc-visible:hover,
#taskModal #descDisplay.desc-visible:focus {
  background-color: #fff;
  color: #212529;
}

/* Dashboard Cards hover/click pop-up effect */
.board-card {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform, box-shadow;
}

/* Lift and stronger shadow on hover, keyboard focus, and mouse down */
.board-card:hover,
.board-card:focus,
.board-card:focus-visible,
.board-card:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 .55rem 1rem rgba(33, 37, 41, 0.18) !important;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .board-card { transition: none; }
}


/* Task items hover/click effect inside Lists */
[data-list-body] .form-control {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

[data-list-body] .form-control:hover,
[data-list-body] .form-control:focus,
[data-list-body] .form-control:active {
  background-color: #f8f9fa;
  border-color: #ced4da;
  box-shadow: 0 .35rem .9rem rgba(33, 37, 41, 0.12) !important;
}

/* Respect reduced motion for task items */
@media (prefers-reduced-motion: reduce) {
  [data-list-body] .form-control { transition: none; }
}

/* To Do section inside Task Modal */
#taskModal #todoSection { }
#taskModal .todo-progress .progress { height: 8px; background-color: #e9ecef; }
#taskModal .todo-progress-count { min-width: 40px; text-align: right; }
#taskModal .todo-item { padding: .25rem 0; }
#taskModal .todo-item .todo-text { line-height: 1.4; }
#taskModal .todo-item.todo-done .todo-text { text-decoration: line-through; color: #6c757d; }

/* To-Do: inline link preview card inside the todo text */
#taskModal .todo-item .todo-text .todo-link-card,
#taskModal #descDisplay .todo-link-card,
#taskModal .comment-bubble .todo-link-card{
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 2px;
  border: 1px solid #dee2e6; border-radius: .5rem; background: #fff; max-width: 100%;
  text-decoration: none; vertical-align: middle;
}
#taskModal .todo-item .todo-text .todo-link-thumb-wrap,
#taskModal #descDisplay .todo-link-thumb-wrap,
#taskModal .comment-bubble .todo-link-thumb-wrap{
  flex: 0 0 112px; height: 64px; border-radius: .5rem; overflow: hidden; background: #f1f3f5;
}
#taskModal .todo-item .todo-text .todo-link-thumb, #taskModal #descDisplay .todo-link-thumb, #taskModal .comment-bubble .todo-link-thumb{ width: 100%; height: 100%; object-fit: cover; display: block; }
#taskModal .todo-item .todo-text .todo-link-body, #taskModal #descDisplay .todo-link-body, #taskModal .comment-bubble .todo-link-body{ flex: 1 1 auto; min-width: 0; }
#taskModal .todo-item .todo-text .todo-link-title, #taskModal #descDisplay .todo-link-title, #taskModal .comment-bubble .todo-link-title{ font-weight: 600; color: #0d6efd; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; overflow-wrap: anywhere; }
#taskModal .todo-item .todo-text .todo-link-card.placeholder, #taskModal #descDisplay .todo-link-card.placeholder, #taskModal .comment-bubble .todo-link-card.placeholder{ border-style: dashed; color: #adb5bd; }


/* Comments section inside Task Modal */
#taskModal .comment-item { align-items: flex-start; }
#taskModal .comment-avatar { flex: 0 0 32px; }
#taskModal .comment-item > .flex-grow-1 { min-width: 0; }

/* Links section inside Task Modal */
#taskModal #linksSection { }
#taskModal .link-item { }
#taskModal .link-card { border-radius: .75rem; overflow: hidden; display: block; color: inherit; background-color: #fff; width: 100%; max-width: 500px; }
#taskModal .link-card .link-thumb-wrapper { position: relative; overflow: hidden; border-top-left-radius: .75rem; border-top-right-radius: .75rem; }
#taskModal .link-card .link-thumb { width: 100%; height: 100%; object-fit: contain; }
/* Allow multi-line titles on attachment cards without breaking layout */
#taskModal .link-card .fw-semibold { white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.35; }
#taskModal .link-card .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#taskModal .link-card .play-overlay i { font-size: 52px; line-height: 1; color: #fff; background: rgba(220, 53, 69, .95); border-radius: 999px; padding: 6px 10px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.25); }
#taskModal .link-simple { display: inline-block; word-break: break-all; }

/* Inline delete buttons overlay for link and attachment cards */
#taskModal .card-delete-btn { position: absolute; top: 6px; right: 6px; z-index: 2; border-radius: 999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 .35rem .9rem rgba(33, 37, 41, 0.18); }
#taskModal .link-item.position-relative,
#taskModal .attachment-item.position-relative { position: relative; }


/* Image link preview tweaks */
#taskModal .link-card.image .link-thumb { width: 100%; height: auto; object-fit: contain; display: block; max-width: 500px; max-height: 400px; }


/* External link card tweaks */
#taskModal .link-card.external .link-url { word-break: break-all; overflow-wrap: anywhere; }

/* Pencil task edit button inside list items */
[data-list-body] .form-control { position: relative; padding-right: 2.25rem; }
.task-title { display: block; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
.task-title[contenteditable="true"] { outline: 0; }
.task-edit-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; border-radius: .375rem; color: #6c757d; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .12s ease; }
[data-list-body] .form-control:hover .task-edit-btn,
[data-list-body] .form-control:focus .task-edit-btn,
[data-list-body] .form-control:focus-within .task-edit-btn { opacity: 1; visibility: visible; }
.task-edit-btn:hover { background-color: #e9ecef; color: #0d6efd; }

/* Task cover image displayed above the task title */
[data-list-body] .task-cover-wrap { width: 100%; overflow: hidden; border-radius: .5rem; background: #f1f3f5; margin-bottom: .35rem; }
[data-list-body] .task-cover { width: 100%; display: block; max-height: 220px; object-fit: cover; }

/* Task Actions context menu (dropdown-like) */
.task-actions-menu { z-index: 1080; }

/* Tab pencil button inside tabs bar */
#tabList .nav-link { position: relative; padding-right: 2rem; }
.tab-title { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 5px; }
.tab-edit-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: transparent; border-radius: .375rem; color: #6c757d; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .12s ease; }
#tabList .nav-link:hover .tab-edit-btn,
#tabList .nav-link:focus .tab-edit-btn,
#tabList .nav-link:focus-within .tab-edit-btn { opacity: 1; visibility: visible; }
.tab-edit-btn:hover { background-color: #e9ecef; color: #0d6efd; }


/* Card Actions menu close button */
.task-actions-menu .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 1 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>"); background-size: 1.6em; box-shadow: none !important; }


/* Disable task item hover effect while editing a card in this list */
[data-list-body].list-editing > .form-control:hover,
[data-list-body].list-editing > .form-control:focus,
[data-list-body].list-editing > .form-control:active {
  background-color: var(--bs-body-bg);
  border-color: #ced4da;
  box-shadow: none !important;
}

/* Also disable hover when inline contenteditable editing is used */
[data-list-body] .form-control.editing:hover,
[data-list-body] .form-control.editing:focus,
[data-list-body] .form-control.editing:active {
  background-color: var(--bs-body-bg, #fff);
  border-color: #ced4da;
  box-shadow: none !important;
}


/* While editing, ensure cursor is not a pointer and neutralize hover background */
[data-list-body] .form-control.editing,
[data-list-body] .task-input-row .form-control { cursor: auto; }

/* Remove hover/focus/active effect for the edit textarea row */
[data-list-body] .task-input-row .form-control:hover,
[data-list-body] .task-input-row .form-control:focus,
[data-list-body] .task-input-row .form-control:active {
  background-color: var(--bs-body-bg, #fff);
  border-color: #ced4da;
  box-shadow: none !important;
}

/* Drag & Drop visuals for task moving */
[data-list-body] .form-control.dragging { opacity: .6; }
[data-list-body].drag-over { outline: 2px dashed #0d6efd; outline-offset: -6px; border-radius: .5rem; background-color: rgba(13,110,253,.06); }

/* Drag & Drop visuals for dashboard board cards */
.board-card.dragging {
  opacity: .6;
  transform: scale(0.98);
}

/* Upload overlay inside Task Modal */
#taskModal .upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: none;
  align-items: flex-start; /* keep card in the visible viewport area, near the top */
  justify-content: center;
  padding: 1rem;
  padding-top: 10vh; /* push card below very top so it’s immediately visible */
  z-index: 2000;
}
#taskModal .upload-overlay .card { width: min(520px, 92%); }
#taskModal .upload-overlay .progress { height: 10px; }

/* Upload picker (drag & drop) inside Task Modal */
#taskModal .upload-picker {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  padding-top: 10vh;
  z-index: 2000;
}
#taskModal .upload-picker .card { width: min(560px, 92%); }
#taskModal .upload-picker .drop-zone {
  border: 2px dashed #ced4da;
  border-radius: .75rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  transition: background-color .12s ease, border-color .12s ease;
  cursor: pointer;
}
#taskModal .upload-picker .drop-zone.drag-over {
  background-color: rgba(13,110,253,.06);
  border-color: #0d6efd;
}

/* Highlight potential drop targets during dashboard DnD */
#boardsGrid > [class*="col-"] .board-card { transition: box-shadow .12s ease, transform .12s ease; }
#boardsGrid > [class*="col-"].board-drop-target .board-card {
  box-shadow: 0 0 0 2px rgba(13,110,253,.65), 0 .5rem 1rem rgba(33,37,41,.12) !important;
}


/* Avatar stack overlap: overlap subsequent items by 5px to the left */
.avatar-stack > * + * { margin-left: -5px; }


/* Admin Settings Panel: nav menu items (except Dashboard) text color behavior */
/* We target only the tab buttons inside #settingsTabs so the Dashboard anchor is unaffected */
#settingsTabs button.nav-link {
  color: #000; /* default black text */
  background-color: transparent; /* no pill background */
}
#settingsTabs button.nav-link:hover,
#settingsTabs button.nav-link:focus {
  color: #0d6efd; /* blue on hover/focus */
}
#settingsTabs button.nav-link.active,
#settingsTabs button.nav-link.active:hover,
#settingsTabs button.nav-link.active:focus {
  color: #0d6efd; /* active stays blue */
  background-color: transparent; /* keep background clear even when active */
  box-shadow: none; /* avoid focus ring styles that look like pills */
}


/* List header pencil button inside list columns */
.list-header { position: relative; padding-right: 2rem; }
.list-title { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 5px; }
.list-edit-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: transparent; border-radius: .375rem; color: #6c757d; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .12s ease; }
.list-header:hover .list-edit-btn,
.list-header:focus .list-edit-btn,
.list-header:focus-within .list-edit-btn { opacity: 1; visibility: visible; }
.list-edit-btn:hover { background-color: #e9ecef; color: #0d6efd; }


/* Board title pencil (show only on hover over the title area on desktops) */
@media (hover: hover) and (pointer: fine) {
  #boardTitleEditBtn {
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
  }
  /* Reveal when hovering the title text, the entire title area, or interacting with the button */
  #boardTitleText:hover + #boardTitleEditBtn,
  #boardTitleArea:hover #boardTitleEditBtn,
  #boardTitleEditBtn:hover,
  #boardTitleEditBtn:focus,
  #boardTitleEditBtn:active {
    opacity: 1;
    visibility: visible;
  }
}

/* Members avatar badges */
.avatar-badge { width: 40px; height: 40px; font-size: .95rem; }

/* Member picker styles */
.user-picker .user-row { padding: .35rem .5rem; margin: 0 0 .25rem 0; text-align: left; }
.user-picker .user-row:hover { background-color: #e9ecef; }


/* Ensure ratio wrapper images fill the 16:9 area for attachments using .image cards */
#taskModal .link-card.image .link-thumb-wrapper .link-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Ensure Session Expired modal always overlays Task Modal and its backdrop */
#sessionExpiredModal { z-index: 1085; }
.modal-backdrop.session-expired { z-index: 1080; }