@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --font-body: 'Montserrat', 'Trebuchet MS', 'Segoe UI', sans-serif;
    --body-font-size: 15px;
    --initial-background: url("Backgrounds/Jagged.jpg");
    --background-color: #000000;
    --todo-checkbox-size: calc(var(--body-font-size, 15px) * 1.1);
    --todo-checkbox-border: calc(var(--body-font-size, 15px) * 0.09);
    --todo-checkbox-check: calc(var(--body-font-size, 15px) * 0.14);
}

body,
html {
    margin: 0;
    /* Remove default margin */
    padding: 0;
    /* Remove default padding */
    height: 100%;
    font-family: var(--font-body);
    background-image: var(--initial-background, url("Backgrounds/Jagged.jpg"));
    background-size: 100% 100%;
    background-color: var(--background-color, #303030);
    overflow: hidden;
    /* Prevent scrolling beyond viewport */
    font-size: var(--body-font-size, 15px);

}

body.auth-active #canvas,
body.auth-active #board-menu,
body.auth-active #mobile-shell {
    display: none;
}

body.read-only #boardMenuPanel button {
    display: none !important;
}

body.read-only #boardMenuPanel #logout {
    display: block !important;
}

.mobile input,
.mobile textarea,
.mobile select,
.mobile .panel-title,
.mobile .todo-input,
.mobile .process-input,
.mobile .item-line,
.mobile .editable,
.mobile .ql-editor {
    font-size: 16px;
}

body.mobile,
html.mobile {
    overflow: auto;
}

#canvas {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mobile #canvas {
    position: relative;
    height: auto;
    min-height: 100%;
    overflow: visible;
}

.panel,
.overlay-panel {
    background-color: #303030;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-sizing: border-box;
}

.panel {
    padding: 10px;
    position: absolute;
    border: 1px solid #505050;
    overflow-x: hidden;
    /* Ensure content doesn't overflow */
    overflow-y: hidden;
    opacity: 0.9;
    backdrop-filter: blur(10px);
    min-height: 80px;
}

.panel.search-hit {
    outline: 2px solid #f4d35e;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 9999px rgba(244, 211, 94, 0.18);
}

.panel.content-locked > *:not(.handle):not(.corner-buttons):not(.panel-title):not(.content-lock-overlay) {
    display: none !important;
}

.panel.content-locked .panel-title,
.panel.content-locked .handle {
    position: relative;
    z-index: 3;
}

.panel.content-locked .corner-buttons {
    z-index: 3;
}

.panel.content-locked .content-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.55);
    z-index: 2;
}

.panel.content-locked .content-unlock-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.6);
    color: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
}

.panel.content-locked .content-unlock-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.mobile .panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    margin: 10px 12px;
}

.mobile .handle,
.mobile .corner-buttons {
    display: none;
}


/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #838383 #303030;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}


.panel-title {
    font-size: 22px;
    font-weight: 600;
    font-family: var(--font-body);
    border-style: none;
    width: 96%;
    background-color: transparent;
    color: #ffffff;
    padding-left: 15px;
    margin-bottom: 4px;
}

.panel-title:focus {
    outline: none;
    /* Remove the default focus outline */
    border: none;
    /* Remove the border when in focus */
}

.links-panel .panel-title {
    margin-bottom: 8px;
}

.note-body {
    border-style: none;
    padding: 14px 16px 14px 16px;
    width: calc(100% - 32px);
    background-color: #303030;
    color: #cecece;
    word-wrap: break-word;
}

.note .ql-editor {
    padding: 14px 16px;
    height: 100%;
}

.note .ql-toolbar {
    padding: 0 16px;
}

.note .note-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.note .ql-container {
    flex: 1;
    min-height: 0;
}

.image-panel {
    opacity: 1;
    border-color: rgba(80, 80, 80, var(--panel-opacity, 1));
}

.image-panel .image-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 8px 10px;
}

.image-panel .panel-title,
.image-panel .image-panel-controls,
.image-panel .image-caption,
.image-panel .image-placeholder,
.image-panel .corner-buttons {
    opacity: var(--panel-opacity, 1);
}

.image-panel .handle {
    opacity: calc(var(--panel-opacity, 1) * 0.5);
}

.image-panel .image-url-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #505050;
    background: rgba(255, 255, 255, 0.04);
    color: #f2f2f2;
    font-size: 14px;
    box-sizing: border-box;
}

.image-panel .image-url-input:focus {
    outline: none;
    border-color: #8a8a8a;
}

.image-panel .image-url-apply {
    border: 1px solid #505050;
    background: rgba(255, 255, 255, 0.06);
    color: #f2f2f2;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.image-panel .image-url-apply:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.image-panel .image-panel-preview {
    flex: 1 1 auto;
    min-height: 140px;
    border: 1px dashed #505050;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}

.image-panel.image-controls-hidden .image-panel-controls {
    display: none;
}

.image-panel.image-caption-hidden .image-caption {
    display: none;
}

.image-panel .image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-panel.has-image .image-preview {
    opacity: 1;
}

.image-panel.has-image .image-placeholder {
    display: none;
}

.image-panel.image-loading .image-placeholder {
    opacity: 0.8;
}

.image-panel.image-error .image-placeholder {
    color: #e67777;
}

.image-panel .image-placeholder {
    color: #9c9c9c;
    font-size: 0.9em;
    text-align: center;
    padding: 10px;
}

.image-panel .image-caption {
    margin: 8px 8px 4px;
    padding: 6px 10px;
    min-height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #d6d6d6;
    font-size: 0.9em;
    outline: none;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.image-panel .image-caption:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.image-panel .image-caption:empty::before {
    content: attr(data-placeholder);
    color: #8f8f8f;
}

.note-body:focus {
    outline: none;
    /* Remove the default focus outline */
    border: none;
    /* Remove the border when in focus */
}

.handle {
    width: 50px;
    height: 6px;
    background-color: #8b8b8b;
    border-radius: 5px;
    margin: 5px auto 5px;
    /* Centered horizontally, thinner */
    cursor: grab;
    top: 0px;
    opacity: 0.5;
    position: sticky;
}

.handle:hover {
    opacity: 1;
}

.todo-list {
    width: 100%;
    /* Ensure it resizes with the panel */
    padding: 10px 0px 0 0px;
    margin: 0;
    list-style-type: none;
    /* Remove default list styling */
    overflow-y: auto;
    /* Add vertical scrollbar */
    box-sizing: border-box;
}

.todo-item {
    display: flex;
    flex-direction: column;
    /* Ensures vertical stacking of todo-content and subtasks */
    color: #ffffff;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    cursor: grab;
}

.todo-item .editable,
.process-item,
.qa-question {
    cursor: text;
}

.todo-item .todo-checkbox,
.todo-item .mobile-item-menu {
    cursor: pointer;
}

.todo-item.being-dragged,
.ui-sortable-helper {
    cursor: grabbing;
}

.list-panel .todo-list {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 30px;
    padding-right: 0px;
}

.list-panel .todo-item {
    display: list-item;
}

.list-panel .subtask {
    display: flex;
    /* Changed from list-item to flex */
    align-items: center;
    margin-bottom: 6px;
    line-height: 1.5;
    counter-increment: subtask-counter;
}

.list-panel .subtask::before {
    content: counter(subtask-counter, lower-alpha) ". ";
    color: #cccccc;
    min-width: 25px;
    flex-shrink: 0;
}

.list-panel.list-unordered .subtask::before {
    content: "\2022";
    /* Bullet point */
    min-width: 15px;
    margin-right: 5px;
    padding-left: 5px;
}

.list-panel .subtasks {
    counter-reset: subtask-counter;
    padding-left: 26px;
    list-style-type: none;
    /* Counter handles it */
}

.list-panel.list-unordered .todo-list {
    list-style-type: disc;
}

.list-panel.list-unordered .subtasks {
    list-style-type: circle;
}

.todo-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    position: relative;
    padding-right: 22px;
    /* Reserved for absolute menu button */
    box-sizing: border-box;
}


.subtasks {
    display: block;
    /* Allows natural flow below todo-content */
    padding-left: calc(var(--todo-checkbox-size) + 10px);
    /* Align subtask checkbox with main text */
    padding-top: 8px;
    /* Increased from 2px for better separation */
    list-style-type: none;
    /* Keeps it clean by removing bullet points */
}

.subtask {
    display: flex;
    /* Aligns the text with the checkbox */
    color: #ffffff;
    font-size: 0.9em;
    /* Smaller font size for subtasks */
    margin-bottom: 2px;
    /* Space between subtasks */
    align-items: center;
}

.todo-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: var(--todo-checkbox-size);
    height: var(--todo-checkbox-size);
    border: var(--todo-checkbox-border) solid #505050;
    border-radius: 0.3em;
    margin-right: 6px;
    background: rgba(255, 255, 255, 0.02);
    /* Match the subtle tint used in link items */
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
    align-self: flex-start;
}

.todo-checkbox:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.todo-checkbox:checked {
    background: rgba(255, 255, 255, 0.1);
    border-color: #f2f2f2;
    /* Same bright tone as link text */
    transform: translateY(-1px);
}

.todo-checkbox:checked::after {
    content: '';
    position: absolute;
    inset: 14%;
    background: center / 78% 78% no-repeat url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13.8 L9.2 18.5 L19 6.8' stroke='%23f2f2f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.process-panel .process-list {
    list-style: none;
    counter-reset: process-counter;
    margin: 0;
    padding: 10px 0 0 0;
    color: #ffffff;
    /* Matching the color scheme */
    overflow-y: auto;
    /* Add vertical scrollbar */
}

.process-panel .process-list li {
    position: relative;
    padding-right: 0;
    /* Let the row handle spacing for the inline menu */
    box-sizing: border-box;
    /* Prevent horizontal overflow when padding is added */
    counter-increment: process-counter;
    padding-left: 0;
}

.process-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-right: 22px;
    /* Match todo-content spacing for inline menu alignment */
    cursor: grab;
}

.process-row::before {
    content: counter(process-counter) ".";
    color: #cccccc;
    min-width: 22px;
    text-align: right;
    margin-right: 8px;
    flex-shrink: 0;
}

.process-panel.process-hide-numbers .process-row::before {
    content: '';
    min-width: 0;
    margin-right: 0;
}

.process-row .process-item {
    flex: 1 1 auto;
}

.process-time {
    font-size: 0.8em;
    color: #686868;
    margin-left: auto;
    padding-left: 10px;
    flex-shrink: 0;
    align-self: center;
}


.process-panel .process-input,
.todo-input {
    margin: 5px 0px 5px 15px;
    color: #ffffff;
    font-size: var(--body-font-size, 15px);
    border: none;
    /* Subtle border */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    padding: 5px;
    background-color: transparent;
}

.process-panel .process-input:focus,
.todo-input:focus {
    outline: none;
    /* Remove default focus outline */
    border-color: #757575;
    /* Highlight input box on focus */
}

.process-item {
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px;
    color: #ffffff;
    line-height: 2;
    font-size: var(--body-font-size, 15px);
    min-width: 0;
}

.process-description {
    font-size: 0.9em;
    /* Smaller than the main text to show it's secondary */
    color: #8a8a8a;
    /* A lighter shade than the main text for distinction */
    margin-top: 3px;
    /* Space from the main text */
    margin-bottom: 3px;
    padding-left: 40px;
    /* Indent to align under the main text if needed */
    font-style: italic;
    /* Italicize to differentiate from main content */
    max-width: 90%;
    /* Prevents overflow, adjust per your layout */
    word-wrap: break-word;
    /* Ensures long words don't overflow */
}

.process-panel.process-hide-numbers .process-description {
    padding-left: 10px;
}

.qa-panel .qa-list {
    list-style: none;
    counter-reset: qa-counter;
    margin: 0;
    padding: 10px 0 0 0;
    color: #ffffff;
    overflow-y: auto;
}

.qa-panel .qa-list li {
    position: relative;
    padding-right: 0;
    box-sizing: border-box;
    counter-increment: qa-counter;
    padding-left: 0;
}

.qa-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-right: 22px;
    cursor: grab;
}

.qa-row::before {
    content: counter(qa-counter) ".";
    color: #cccccc;
    min-width: 22px;
    text-align: right;
    margin-right: 8px;
    flex-shrink: 0;
}

.qa-row .qa-question {
    flex: 1 1 auto;
}

.qa-question {
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px;
    color: #ffffff;
    line-height: 1.8;
    font-size: var(--body-font-size, 15px);
    min-width: 0;
}

.qa-answer {
    font-size: 0.95em;
    color: #d8d2c9;
    font-weight: 600;
    font-style: italic;
    margin-top: 4px;
    margin-bottom: 6px;
    padding-left: 40px;
    max-width: 90%;
    word-wrap: break-word;
}

.qa-panel .qa-input {
    margin: 5px 0px 5px 15px;
    color: #ffffff;
    font-size: var(--body-font-size, 15px);
    border: none;
    box-sizing: border-box;
    padding: 5px;
    background-color: transparent;
}

.qa-panel .qa-input:focus {
    outline: none;
    border-color: #757575;
}

/* Key alignment rules for inline item menus */
/* - .todo-content padding-right controls space reserved for the menu (lists/checklists) */
/* - .process-row padding-right does the same for process items */
/* - .mobile-item-menu positions the actual three-dot button */

.due-by {
    font-size: 0.8em;
    /* Smaller than the main text to show it's secondary */
    color: #8d8d8d;
    margin-right: 10px;
    margin-left: auto;
    padding-left: 10px;
    flex-shrink: 0;
    align-self: center;
}

.due-by.overdue {
    color: #ad1b1b !important;
}


.editable {
    flex-grow: 1;
    /* Allow the editable area to fill the space */
    margin: 0 5px;
    /* Keep top aligned with checkbox/date */
    min-height: 5px;
    /* Prevents the content from collapsing when empty */
    min-width: 0;
    overflow-wrap: anywhere;
}

.editable:focus {
    outline: none;
    /* Remove the default focus outline */
}

.editable:empty:before {
    padding: 20px;
    min-height: 20px;
}

.sortable-placeholder {
    border: 1px dashed #ccc;
    background: #686868;
    height: 1.5rem;
    margin: 5px 0;
    /* Match todo item margin for consistent spacing */
    padding-left: 15px;
    padding-right: 15px;
}

.corner-buttons {
    position: absolute;
    top: 2px;
    right: 5px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 0;
    gap: 4px;
    z-index: 3;
    visibility: visible;
    opacity: 1;
}

.panel-settings,
.delete-panel {
    background: none;
    color: #9c9c9c;
    border: none;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    /* Adjust padding as needed */
}

.panel-settings {
    width: 28px;
    height: 28px;
    padding: 2px;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

/* Ensure consistency in button appearance and add a hover effect for better UI */
.panel-settings:hover,
.delete-panel:hover {
    opacity: 1;
    /* Increase opacity on hover for better visibility */
    color: #ffffff;
}

.completed {
    text-decoration: none;
    opacity: 0.6;
}

/* Strike only the text when a todo/subtask is completed */
.todo-content.completed {
    opacity: 1;
}

.todo-content.completed .editable {
    text-decoration: line-through;
    opacity: 0.6;
}

.todo-content.completed .todo-checkbox,
.todo-content.completed .due-by {
    text-decoration: none;
    opacity: 1;
}

.subtask.completed .editable {
    text-decoration: line-through;
    opacity: 0.6;
}


.board-menu {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 10002;
}

#boardsQuickToggle {
    position: fixed;
    top: 10px;
    right: 60px;
    width: 40px;
    height: 34px;
    border: 1px solid #505050;
    border-radius: 8px;
    background: #303030 no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Crect x='14' y='14' width='6' height='6'/%3E%3C/svg%3E");
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    z-index: 12000;
    opacity: 0.8;
}

#boardsQuickToggle:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.board-menu-toggle {
    width: 40px;
    height: 34px;
    border: 1px solid #505050;
    border-radius: 8px;
    background: #303030 no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    cursor: pointer;
    opacity: 0.8;
}

.board-menu-toggle:hover {
    opacity: 1;
}

.board-menu-panel {
    position: absolute;
    top: 38px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    min-width: 160px;
    background: rgba(48, 48, 48, 0.95);
    border: 1px solid #505050;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.board-menu.open .board-menu-panel {
    display: flex;
}

.board-menu-panel button {
    background: #303030;
    border: 1px solid #505050;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.board-menu-panel button:hover {
    background: #404040;
}











.editable-title,
.title-input {
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    opacity: 0.7;
    font-size: 36px;
    width: 100%;
    padding-bottom: 8px;
    outline: none;
    background: transparent;
    border-style: none;
    text-shadow: 1px 1px 5px #303030;
    min-height: 20px;
    /* Prevents the title from collapsing when empty */
}

/* Enhancing table appearance */
.table-container {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.editable-table {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-collapse: collapse;
    margin: 14px 16px;
    background-color: transparent;
    min-width: 480px;
}

.table-panel .editable-table th,
.table-panel .editable-table td {
    border: 1px solid #555;
    /* Subtle borders for cells */
    padding: 8px;
    text-align: left;
    color: #cecece;
    /* Light text for readability */
}

.table-panel .editable-table th {
    background-color: rgba(0, 0, 0, 0.12);
    /* Subtle overlay to sit on panel color */
}

.table-panel .editable-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.04);
    /* Alternating row color respects panel color */
}

.table-panel .editable-table tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
    /* Hover state */
}

.table-panel .editable-table .editing input,
.table-panel .editable-table input.cell-editor {
    width: 100%;
    padding: 6px;
    background-color: #303030;
    /* Input background */
    color: #ffffff;
    /* Input text color */
    border: none;
    /* Removing default input border */
    box-sizing: border-box;
    white-space: nowrap;
    /* Prevent wrapping so cell height doesn't change */
    overflow-x: auto;
}

/* Table cell context menu */
.table-context-menu {
    position: absolute;
    background: #303030;
    color: #fff;
    border: 1px solid #444;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 20000;
    min-width: 160px;
    border-radius: 4px;
    overflow: hidden;
}

.table-context-menu .tcmi {
    padding: 8px 12px;
    cursor: pointer;
}

.table-context-menu .tcmi:hover {
    background: #404040;
}

.table-panel .editable-table th,
.table-panel .editable-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overlay-panel {
    position: absolute;
    border: none;
    overflow: hidden;
    /* Ensure content doesn't overflow */
    z-index: 10000;
}

.overlay-title {
    font-size: 20px;
    font-weight: 500;
    border-style: none;
    width: 100%;
    background-color: #404040;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.item-line {
    padding: 10px;
    font-size: var(--body-font-size, 15px);
    font-weight: 300;
    border-style: none;
    width: 96%;
    background-color: #303030;
    color: #ffffff;
    text-align: left;
}

.item-line:focus {
    outline: none;
    /* Remove the default focus outline */
    border: none;
    /* Remove the border when in focus */
}

/* Place the navbar at the top of the page, and make it stick */
.overlay-nav {
    background-color: #303030;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    /* Add this line to enable flexbox */
    justify-content: center;
    /* Center the buttons horizontally */
    opacity: 0.3;
    flex-direction: row;
    padding: 10px;
    box-sizing: border-box;
}

.overlay-button {
    outline: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 14px;
    font-weight: 300;
    border-radius: 8px;
    padding: 10px 10px;
    border: 1px solid #fff;
    /* Change border color to white */
    transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
    background: transparent;
    /* Set background to transparent */
    color: #fff;
    /* Set text color to white */
    margin: 4px;
}

.date-picker {
    padding: 10px;
    font-size: 14px;
    font-weight: 200;
    border-style: none;
    width: 25%;
    /* Adjust width as needed */
    background-color: #303030;
    /* Match overlay background */
    color: #ffffff;
    /* Text color */
}

.date-picker:focus {
    outline: none;
    /* Remove focus outline */
    border-style: none;
}

/* Style jQuery UI DatePicker to match */
.ui-datepicker {
    background-color: #404040;
    /* Dark background for the datepicker */
    border: 1px solid #303030;
    /* Border color to match overlay */
    color: #ffffff;
    /* Text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Consistent shadow */
}

.ui-datepicker a {
    color: #ffffff;
    /* Links color */
}

.ui-datepicker-header {
    background-color: #303030;
    /* Header background to match overlay title */
    color: #ffffff;
    /* Header text color */
    border-bottom: 1px solid #404040;
    /* Border to separate header */
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #303030;
    /* Match button backgrounds */
    border: 1px solid #fff;
    /* Button borders */
    color: #fff;
    /* Button text color */
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: #505050;
    /* Hover and active state background */
    border: 1px solid #fff;
    /* Hover and active state border */
    color: #fff;
    /* Text color consistent with overlay buttons */
}

.ui-resizable-handle {
    background: transparent;
    z-index: 50;
}

.ui-resizable-e,
.ui-resizable-w {
    width: 8px;
}

.ui-resizable-n,
.ui-resizable-s {
    height: 8px;
}

.ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-ne,
.ui-resizable-nw {
    width: 14px;
    height: 14px;
}

/* Context Menu Styles */
.context-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    width: 150px;
    background-color: #303030;
    /* Matching the panel background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    /* Add flexbox to center the items */
    flex-direction: column;
    /* Stack the items vertically */
}

.context-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.context-menu.show {
    display: block;
}

.context-menu-item {
    padding: 10px 10px;
    color: #ffffff;
    /* Matching the text color */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    /* Make the menu items full width */
    list-style: none;
    /* Remove the list bullet styling */
    box-sizing: border-box;
}

.context-menu-item:hover {
    background-color: #505050;
    /* Slightly lighter than item background for hover state */
}

/* Panel color picker overlay */
.panel-color-picker-overlay {
    position: absolute;
    z-index: 10001;
    width: 224px;
    background: #252525;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.panel-color-swatches {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.panel-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    box-sizing: border-box;
}

.panel-color-swatch:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.15);
}

.panel-color-swatch.panel-color-selected {
    border-color: #ffffff;
}

.panel-color-custom {
    margin-top: 8px;
}

.panel-color-hex {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
    outline: none;
}

.panel-color-hex:focus {
    border-color: #888;
}

body.theme-light .panel-color-picker-overlay {
    background: #f0f0f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

body.theme-light .panel-color-hex {
    background: #ffffff;
    border-color: #ccc;
    color: #333;
}

body.theme-light .panel-color-swatch:hover {
    border-color: rgba(0, 0, 0, 0.5);
}

body.theme-light .panel-color-swatch.panel-color-selected {
    border-color: #333;
}

.settings-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 740px;
    max-width: 96vw;
    max-height: 90vh;
    background: #303030;
    color: #ffffff;
    box-sizing: border-box;
    z-index: 12000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    /* Add a box shadow */
    font-size: 15px;
    /* Keep settings UI at a stable size */
    border: 1px solid #505050;
    border-radius: 12px;
    overflow: hidden;
}

.share-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-width: 96vw;
    max-height: 90vh;
    min-height: 260px;
    background: #303030;
    color: #ffffff;
    box-sizing: border-box;
    z-index: 12000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    border: 1px solid #505050;
    border-radius: 12px;
    overflow: hidden;
}

.mobile .share-overlay {
    width: 90vw;
    max-height: 88vh;
    overflow: auto;
}

.mobile .share-help {
    margin-left: 0;
}

.share-body {
    padding: 18px;
    padding-bottom: 72px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-row .overlay-input {
    flex: 1;
    min-width: 200px;
    width: auto;
}

.share-row label {
    width: 140px;
    text-align: right;
    padding: 8px 0;
}

.mobile .share-row label {
    width: auto;
    text-align: left;
}

.share-help {
    font-size: 12px;
    color: #b0b0b0;
    margin-left: 150px;
}

.share-list {
    border-top: 1px solid #505050;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.share-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.share-email {
    font-size: 14px;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-empty {
    font-size: 13px;
    color: #b0b0b0;
}

.mobile .settings-overlay {
    width: 90vw;
    max-height: 88vh;
    overflow: auto;
}

.mobile .settings-overlay label {
    display: block;
    width: auto;
    text-align: left;
    padding: 6px 0;
}

.mobile .overlay-select,
.mobile .overlay-slider,
.mobile .overlay-input {
    width: 100%;
    box-sizing: border-box;
}

.overlay-select,
.overlay-slider {
    width: 40%;
    background: #808080;
    vertical-align: middle;
    /* Align the element vertically */
    padding: 5px;
}

.overlay-select:focus {
    color: #ffffff;
}

.overlay-select option {
    background: #303030;
    color: #ffffff;
    border: none;
}

.settings-overlay label {
    display: inline-block;
    width: 170px;
    text-align: right;
    padding: 10px 8px 10px 0;
}

.background-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}

.overlay-input {
    padding: 6px 8px;
    background: #303030;
    border: 1px solid #505050;
    color: #ffffff;
    border-radius: 4px;
}


.settings-overlay .board-id {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ql-editor {
    font-family: var(--font-body);
    font-size: var(--body-font-size, 15px);
    color: inherit;
}

.minimized {
    overflow: hidden;
    transition: width 0.5s;
}

.minimized .todo-list,
/* Adjust according to your class structure */
.minimized .table-container,
.minimized .process-list,
.minimized .qa-list,
.minimized .todo-input,
.minimized .process-input,
.minimized .qa-input,
.minimized .panel-title,
.minimized .corner-buttons,
.minimized .ql-toolbar,
.minimized .ql-container {
    display: none;
}

/* Links panel styling */
.links-panel .link-list {
    list-style: none;
    padding: 6px 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.links-panel .link-item {
    padding: 12px 14px;
    border: 1px solid #5a5a5a;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    color: #f2f2f2;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    user-select: none;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}



.shelf-panel .shelf-list {
    list-style: none;
    padding: 6px 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    flex: 1;
}

.shelf-panel .shelf-item {
    position: relative;
    padding: 12px 42px 12px 14px;
    border: 1px dashed #5a5a5a;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: #f2f2f2;
    cursor: grab;
    user-select: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
    text-align: center;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    list-style: none;
}

.shelf-panel .shelf-item.search-hit {
    outline: 2px solid #f4d35e;
    outline-offset: 2px;
}

.shelf-panel .shelf-item-title {
    display: block;
    pointer-events: none;
}

.shelf-panel .shelf-item-badge {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e05b56;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    transform: translateY(-50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.shelf-panel .shelf-item:active {
    cursor: grabbing;
}

.shelf-panel .shelf-item::before {
    content: none;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #d0d0d0;
    opacity: 0.7;
    pointer-events: none;
}

.shelf-drag-helper {
    border: 1px solid #505050;
    border-radius: 8px;
    background: rgba(48, 48, 48, 0.9);
    color: #ffffff;
    padding: 10px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    width: max-content;
    max-width: 240px;
    pointer-events: none;
    list-style: none;
}

.links-panel .link-item:active {
    transform: translateY(0);
}

.links-panel .add-link-button {
    background: none;
    border: none;
    color: #b0b0b0;
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    margin: 0 auto 8px;
    display: block;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.links-panel .add-link-button:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.links-panel .add-link-button:active {
    transform: scale(0.98);
}

/* Boards list overlay */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 20000;
}

.boards-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-height: 70%;
    background: #303030;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    z-index: 20050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.boards-overlay .boards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #404040;
    font-weight: 600;
    font-size: 16px;
}

.boards-search {
    padding: 10px 14px;
    background: #353535;
    border-bottom: 1px solid #404040;
}

.boards-search input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #505050;
    background: #2a2a2a;
    color: #ffffff;
    font-size: 13px;
    box-sizing: border-box;
}

.boards-overlay .boards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.boards-overlay .boards-item {
    padding: 12px 14px;
    border-bottom: 1px solid #404040;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.boards-overlay .boards-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.boards-overlay .board-title {
    color: #ffffff;
}

.boards-overlay .board-default {
    color: #f5c542;
    font-size: 18px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .boards-overlay {
        width: 92vw;
        max-height: 80%;
    }
}

.templates-overlay .template-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.templates-overlay .template-action {
    background: #3a3a3a;
    border: 1px solid #4a4a4a;
    color: #d6d6d6;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.templates-overlay .template-action:hover {
    background: #4a4a4a;
}

.templates-overlay .template-action.template-danger {
    color: #ffb8b8;
    border-color: #6a3b3b;
}

.archive-overlay .archive-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.archive-overlay .archive-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-overlay .archive-action {
    background: #3a3a3a;
    border: 1px solid #4a4a4a;
    color: #d6d6d6;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 28px;
}

.archive-overlay .archive-action:hover {
    background: #4a4a4a;
}

.archive-overlay .archive-action.archive-danger {
    color: #ffb8b8;
    border-color: #6a3b3b;
}

.archive-overlay .archive-action[disabled] {
    opacity: 0.6;
    cursor: default;
}

.boards-overlay .board-meta {
    color: #a8a8a8;
    font-size: 12px;
}

.boards-overlay .board-snippet {
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.4;
}

.boards-overlay .board-snippet strong {
    color: #ffffff;
    font-weight: 600;
}

.boards-overlay .boards-empty {
    padding: 14px;
    text-align: center;
    color: #b0b0b0;
}

/* Auth screen */
.auth-screen {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(60, 60, 60, 0.55), rgba(22, 22, 22, 0.78)), rgba(12, 12, 12, 0.72);
    z-index: 20000;
    padding: 24px;
    box-sizing: border-box;
}

body.auth-active .auth-screen {
    display: flex;
}

.auth-card {
    width: min(420px, 92vw);
    background: rgba(32, 32, 32, 0.92);
    border: 1px solid #505050;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-logo {
    width: 140px;
    height: auto;
    align-self: center;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
    margin-bottom: 6px;
}

.auth-title {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.auth-subtitle {
    font-size: 14px;
    color: #c8c8c8;
    text-align: center;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.auth-tab {
    background: transparent;
    border: 1px solid #505050;
    color: #d6d6d6;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}

.auth-tab.active {
    background: #f0f0f0;
    color: #202020;
    border-color: transparent;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.auth-form[hidden] {
    display: none;
}

.auth-form label {
    font-size: 12px;
    color: #b8b8b8;
}

.auth-form input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #4a4a4a;
    background: #1f1f1f;
    color: #ffffff;
    font-size: 14px;
}

.auth-submit {
    margin-top: 6px;
    padding: 10px 12px;
    background: #f0f0f0;
    color: #202020;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.auth-message {
    min-height: 18px;
    font-size: 13px;
    color: #ffd28a;
    text-align: center;
}

.auth-help {
    font-size: 12px;
    color: #a8a8a8;
    text-align: center;
}

.public-banner {
    position: fixed;
    top: 12px;
    left: 12px;
    transform: none;
    background: rgba(32, 32, 32, 0.9);
    border: 1px solid #505050;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    z-index: 15000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    max-width: calc(100% - 24px);
}

body.read-only .panel-settings,
body.read-only .add-link-button,
body.read-only .mobile-add-button,
body.read-only .mobile-panel-menu {
    pointer-events: none;
    opacity: 0.4;
}

.board-menu-user {
    padding: 6px 8px;
    font-size: 12px;
    color: #d0d0d0;
    border-bottom: 1px solid #404040;
    margin-bottom: 4px;
}

/* Mobile-first board list and panel view */
#mobile-shell {
    display: none;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: var(--background-color, #0f0f0f);
    color: #f5f5f5;
    overflow: hidden;
}

.mobile-list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

.mobile-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--background-color, #000000);
    padding: 10px 12px;
    border-radius: 12px;
}

.mobile-list-title {
    font-size: 20px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.mobile-switch-board {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: var(--background-color, #000000);
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
}

.mobile-login-btn {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: var(--background-color, #000000);
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
}

.mobile-panel-list {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 0;
}

.mobile-panel-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid #2f2f2f;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 56px;
}

.mobile-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-panel-button {
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.mobile-panel-name {
    font-size: 16px;
    font-weight: 600;
}

.mobile-panel-type {
    font-size: 12px;
    color: #a4a4a4;
}

.mobile-panel-menu {
    background: none;
    border: none;
    color: #bfbfbf;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mobile-panel-menu:hover {
    color: #ffffff;
}

.mobile-add-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 68px;
}

.mobile-add-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21000;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: auto;
}

.mobile-add-card {
    width: min(400px, 90vw);
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}

.mobile-actions-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21000;
    padding: 16px;
    box-sizing: border-box;
}

.mobile-actions-card {
    width: min(420px, 92vw);
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-actions-title {
    font-size: 17px;
    font-weight: 700;
    color: #f5f5f5;
    text-align: center;
}

.mobile-actions-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-actions-subtitle {
    font-size: 13px;
    color: #d0d0d0;
    margin-top: 4px;
    margin-bottom: 4px;
}

.mobile-actions-subtitle.muted {
    color: #7a7a7a;
}

.mobile-action-btn {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #2f2f2f;
    background: #1d1d1d;
    color: #f5f5f5;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
}

.mobile-action-btn.secondary {
    background: #202020;
}

.mobile-actions-shelf .mobile-action-btn+.mobile-action-btn {
    margin-top: 2px;
}

.mobile-action-btn.danger {
    border-color: #5c2222;
    background: #2b1515;
    color: #ffb0b0;
}

.mobile-action-btn:hover {
    background: #262626;
}

.mobile-action-cancel {
    margin-top: 4px;
    border-radius: 10px;
    border: 1px solid #2f2f2f;
    background: #262626;
    color: #f5f5f5;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
}

.mobile-add-title {
    font-size: 18px;
    font-weight: 700;
    color: #f5f5f5;
}

.mobile-add-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.mobile-add-options button {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #2f2f2f;
    background: #1d1d1d;
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    pointer-events: auto;
}

.mobile-add-close {
    align-self: flex-end;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #2f2f2f;
    background: #262626;
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
}

.mobile-shelf-item {
    cursor: pointer;
}

.mobile-item-menu {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: none;
    border: none;
    color: #dcdcdc;
    border-radius: 8px;
    padding: 2px;
    font-size: 15px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: top;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    text-decoration: none !important;
    opacity: 0.8;
    line-height: 1;
}

.mobile-item-menu:hover {
    opacity: 1;
}

.mobile-ui .due-by {
    display: none;
}

.mobile-ui .context-menu {
    z-index: 14000;
}

.completed .mobile-item-menu {
    text-decoration: none !important;
    opacity: 1;
}

.mobile-add-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #f0f0f0;
    color: #111;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.mobile-add-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.mobile-add-menu[hidden] {
    display: none;
}

.mobile-add-menu button {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #2f2f2f;
    background: #1d1d1d;
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
}

.mobile-panel-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-panel-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
}

.mobile-back {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #222;
    color: #f5f5f5;
    cursor: pointer;
}

.mobile-panel-title {
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-panel-stage {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 24px;
    box-sizing: border-box;
    background: #0f0f0f;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    overscroll-behavior: contain;
    min-height: 0;
}

.mobile-panel-stage>.panel {
    width: 100% !important;
}

.mobile-empty {
    color: #9a9a9a;
    text-align: center;
    padding: 16px;
}

.mobile-shelf-items {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding-left: 6px;
}

.mobile-shelf-item {
    background: #1b1b1b;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #2a2a2a;
}

.mobile-shelf-empty {
    color: #8a8a8a;
    font-size: 12px;
    padding: 6px 2px;
}

.mobile-panel-item.shelf-open .mobile-shelf-items {
    display: flex;
}

.mobile-panel-item.shelf-open .mobile-panel-button {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 6px;
}

@media (max-width: 800px) {

    body.mobile-ui #canvas,
    body.mobile-ui #board-menu {
        display: none;
    }

    body.mobile-ui #mobile-shell {
        display: flex;
    }

    body.mobile-ui .panel {
        box-shadow: none;
        touch-action: pan-y;
    }

    body.mobile-ui {
        overflow: hidden;
    }

    body.mobile-ui .panel .handle,
    body.mobile-ui .panel .corner-buttons {
        display: none !important;
    }

    .panel.mobile-fullscreen-panel {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        margin: 0;
        max-width: 100%;
        border-radius: 12px;
        touch-action: pan-y;
        overflow: visible !important;
        padding-bottom: 120px;
    }

    .panel.mobile-fullscreen-panel .todo-list,
    .panel.mobile-fullscreen-panel .process-list,
    .panel.mobile-fullscreen-panel .qa-list,
    .panel.mobile-fullscreen-panel .ql-editor,
    .panel.mobile-fullscreen-panel .note-body,
    .panel.mobile-fullscreen-panel .editable-table,
    .panel.mobile-fullscreen-panel .shelf-list,
    .panel.mobile-fullscreen-panel .shelf-panel,
    .panel.mobile-fullscreen-panel .links-panel {
        overflow: visible;
        max-height: none;
    }

    .panel.mobile-fullscreen-panel .table-container {
        overflow: auto;
        max-height: none;
    }

    .panel.mobile-fullscreen-panel .todo-list {
        padding-bottom: 0;
    }

    .panel.mobile-fullscreen-panel .todo-input {
        margin-bottom: 0;
    }
}

/* Simple edit lock styling */
.table-panel.locked-by-other {
    border: 2px solid #d9534f;
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.25);
}


.panel-lock-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #d9534f;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 5;
}

.panel.locked-by-other {
    outline: 2px solid #d9534f;
    outline-offset: 0;
}

.settings-overlay .toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.settings-overlay .owner-row {
    opacity: 0.7;
    margin-bottom: 48px;
}

.settings-overlay .owner-value {
    display: inline-block;
    min-width: 120px;
}

.settings-overlay input[type="checkbox"] {
    accent-color: #4c6fff;
    width: 16px;
    height: 16px;
}

/* Link Icons Fix - Ensure list style is removed and background is robust */

/* Link Icons Fix - Ensure list style is removed and background is robust */
.links-panel .link-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.links-panel .link-list li {
    list-style: none !important;
    /* Deep target */
}

.links-panel .link-item {
    padding-left: 28px !important;
    /* Default External Icon (Cloud) */
    background: left 6px center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") !important;
    position: relative;
    cursor: pointer;
    margin-bottom: 2px;
    border-radius: 4px;
    list-style: none !important;
}

.links-panel .link-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Internal Board Link Icon */
.links-panel .link-item.internal-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3C/svg%3E") !important;
}

.links-panel .link-item.internal-link:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3C/svg%3E") !important;
}

/* Subtask Layout */
.subtask {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    padding-right: 22px;
    /* Reserved for absolute menu button */
    font-size: var(--body-font-size, 15px);
    width: 100%;
    box-sizing: border-box;
}

.subtask .todo-content {
    display: contents;
}

.subtask .editable {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0 5px;
    /* Add spacing around editable */
}

/* Consistent date size with parent items */
.subtask .due-by {
    font-size: 0.8em;
    color: #8d8d8d;
    margin-left: auto;
    padding-left: 10px;
    margin-right: 10px;
    /* Match parent item date margin */
    flex-shrink: 0;
    white-space: nowrap;
}

.subtask.completed .due-by {
    opacity: 1;
    text-decoration: none;
}

/* Revert to absolute positioning to match parent items perfectly */
.subtask .mobile-item-menu {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

/* Description Indicator - Removed per user request (was causing "random bullet") */
.subtask[data-description]:not([data-description=""]):not([data-description="undefined"])::before {
    content: none;
}

/* Light theme overrides */
body.theme-light .panel,
body.theme-light .overlay-panel {
    background-color: #f8f5f1;
    border-color: #ded7cf;
    color: #2b2927;
    box-shadow: 0 8px 18px rgba(19, 14, 10, 0.08);
}

body.theme-light .panel-title {
    color: #2b2927;
}

body.theme-light .note-body {
    background-color: #f8f5f1;
    color: #2e2b28;
}

body.theme-light .note .ql-editor {
    color: #2b2927;
}

body.theme-light .image-panel .image-url-input {
    color: #2b2927;
    border-color: #d6cfc7;
    background: #ffffff;
}

body.theme-light .image-panel .image-url-apply {
    border-color: #d6cfc7;
    background: #f4f1ed;
    color: #2b2927;
}

body.theme-light .image-panel .image-panel-preview {
    border-color: #d6cfc7;
    background: #f5f1ed;
}

body.theme-light .image-panel {
    border-color: rgba(214, 207, 199, var(--panel-opacity, 1));
}

body.theme-light .image-panel.image-error .image-placeholder {
    color: #b44a42;
}

body.theme-light .image-panel .image-caption {
    color: #3a342f;
    background: #ffffff;
    border-color: #d6cfc7;
}

body.theme-light .image-panel .image-caption:focus {
    background: #f4f1ed;
    border-color: #c9c1b8;
}

body.theme-light .image-panel .image-caption:empty::before {
    color: #8a8178;
}

body.theme-light .todo-item,
body.theme-light .subtask,
body.theme-light .process-panel .process-list,
body.theme-light .process-item,
body.theme-light .qa-panel .qa-list,
body.theme-light .qa-question,
body.theme-light .todo-input,
body.theme-light .process-panel .process-input,
body.theme-light .qa-panel .qa-input {
    color: #2b2927;
}

body.theme-light .list-panel .subtask::before,
body.theme-light .process-row::before,
body.theme-light .qa-row::before {
    color: #8a8178;
}

body.theme-light .process-time,
body.theme-light .process-description,
body.theme-light .qa-answer,
body.theme-light .due-by,
body.theme-light .subtask .due-by {
    color: #7d746b;
}


body.theme-light .todo-checkbox {
    border-color: #bdb5ad;
    background: rgba(60, 45, 30, 0.04);
}

body.theme-light .todo-checkbox:hover {
    background: rgba(60, 45, 30, 0.08);
    box-shadow: 0 0 0 1px rgba(60, 45, 30, 0.12);
}

body.theme-light .todo-checkbox:checked {
    background: #2b2927;
    border-color: #2b2927;
}

body.theme-light .panel-settings,
body.theme-light .delete-panel {
    color: #8a8178;
}

body.theme-light .panel-settings {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a726a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

body.theme-light .panel-settings:hover,
body.theme-light .delete-panel:hover {
    color: #1f1f1f;
}

body.theme-light .panel-settings:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f3a34' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

body.theme-light .panel.search-hit {
    outline-color: #c58a1a;
    box-shadow: inset 0 0 0 9999px rgba(197, 138, 26, 0.18);
}

body.theme-light .board-menu-toggle {
    border-color: #d5cec6;
    background-color: #f4f1ed;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b362f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    box-shadow: 0 2px 6px rgba(19, 14, 10, 0.1);
}

body.theme-light .board-menu-panel {
    background: #fbfaf8;
    border-color: #ded7cf;
    box-shadow: 0 10px 25px rgba(19, 14, 10, 0.16);
}

body.theme-light .board-menu-panel button {
    background: #ffffff;
    border-color: #ded7cf;
    color: #2b2927;
}

body.theme-light .board-menu-panel button:hover {
    background: #efeae3;
}

body.theme-light .context-menu {
    background: #fbfaf8;
    border: 1px solid #ded7cf;
    box-shadow: 0 6px 18px rgba(19, 14, 10, 0.16);
}

body.theme-light .context-menu-item {
    color: #2b2927;
}

body.theme-light .context-menu-item:hover {
    background-color: #efeae3;
}

body.theme-light .table-panel .editable-table th,
body.theme-light .table-panel .editable-table td {
    border: 1px solid #d6cfc7;
    color: #2b2927;
}

body.theme-light .table-panel .editable-table th {
    background-color: #efeae3;
}

body.theme-light .table-panel .editable-table tr:nth-child(even) {
    background-color: #f6f2ed;
}

body.theme-light .table-panel .editable-table tr:hover {
    background-color: #ede7e0;
}

body.theme-light .table-panel .editable-table .editing input,
body.theme-light .table-panel .editable-table input.cell-editor {
    background-color: #ffffff;
    color: #2b2927;
}

body.theme-light .table-context-menu {
    background: #fbfaf8;
    color: #2b2927;
    border: 1px solid #ded7cf;
    box-shadow: 0 6px 18px rgba(19, 14, 10, 0.16);
}

body.theme-light .table-context-menu .tcmi:hover {
    background: #efeae3;
}

body.theme-light .sortable-placeholder {
    border: 1px dashed #cec6bd;
    background: #efe9e2;
}

body.theme-light .handle {
    background-color: #a59e98;
    opacity: 0.7;
}

body.theme-light .links-panel .link-item {
    border-color: #ded7cf;
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.05), rgba(60, 45, 30, 0.02));
    color: #2b2927;
    box-shadow: 0 8px 16px rgba(19, 14, 10, 0.12);
}

body.theme-light .shelf-panel .shelf-item {
    border-color: #d8d1c8;
    background: #f3f0eb;
    color: #2b2927;
    box-shadow: 0 8px 14px rgba(19, 14, 10, 0.12);
}

body.theme-light .shelf-panel .shelf-item.search-hit {
    outline-color: #c58a1a;
}

body.theme-light .shelf-drag-helper {
    border-color: #cfc7be;
    background: #f0ece7;
    color: #2b2927;
    box-shadow: 0 10px 18px rgba(19, 14, 10, 0.16);
}

body.theme-light .mobile-item-menu {
    color: #6f6760;
}

body.theme-light .mobile-item-menu:hover {
    color: #2b2927;
}

body.theme-light #boardsQuickToggle {
    border-color: #d5cec6;
    background-color: #f4f1ed;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b362f' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Crect x='14' y='14' width='6' height='6'/%3E%3C/svg%3E");
    box-shadow: 0 2px 6px rgba(19, 14, 10, 0.1);
}

body.theme-light .boards-overlay {
    background: #fbfaf8;
    color: #2b2927;
    border: 1px solid #ded7cf;
    box-shadow: 0 14px 28px rgba(19, 14, 10, 0.14);
}

body.theme-light .boards-overlay .boards-header {
    background: #f1ede7;
    color: #2b2927;
}

body.theme-light .boards-search {
    background: #f6f2ed;
    border-bottom: 1px solid #e2dbd2;
}

body.theme-light .boards-search input {
    background: #ffffff;
    border: 1px solid #d8d1c8;
    color: #2b2927;
}

body.theme-light .boards-overlay .boards-item {
    border-bottom: 1px solid #e6dfd6;
}

body.theme-light .boards-overlay .boards-item:hover {
    background: rgba(60, 45, 30, 0.06);
}

body.theme-light .boards-overlay .board-title {
    color: #2b2927;
}

body.theme-light .boards-overlay .board-meta,
body.theme-light .boards-overlay .board-snippet,
body.theme-light .boards-overlay .boards-empty {
    color: #7d746b;
}

body.theme-light .overlay-button {
    border: 1px solid #cbbfae;
    color: #3b342d;
    background: #f8f4ee;
}

body.theme-light .overlay-button:hover {
    box-shadow: 0 4px 10px rgba(19, 14, 10, 0.12);
}

body.theme-light .templates-overlay .template-action,
body.theme-light .archive-overlay .archive-action {
    background: #f2eee8;
    border: 1px solid #d9d1c8;
    color: #6b635b;
}

body.theme-light .templates-overlay .template-action:hover,
body.theme-light .archive-overlay .archive-action:hover {
    background: #e9e3dc;
}

body.theme-light .templates-overlay .template-action.template-danger,
body.theme-light .archive-overlay .archive-action.archive-danger {
    color: #a35b54;
    border-color: #e1b6b2;
}