/* === Planka v2.1.1 Dark Theme ===
 * Vite CSS Modules produce class names like _className_hash_line
 * e.g. _outerWrapper_hsqrn_135 for the List component.
 * Selectors use [class*="_className_"] for unique names or
 * [class*="_className_hash"] when the name is shared across components.
 *
 * Component hashes (v2.1.1): List=hsqrn, Card=36a26,
 * CardDetails=i28lr/fiqad, Header=jdrq3, CardModal=10xqw/160xl
 */

/* --- Page & board background --- */
body,
#root {
    background-color: #1a1d23 !important;
}

/* --- Header bar (hash: jdrq3) --- */
[class*="_wrapper_jdrq3"] {
    background: rgba(0, 0, 0, 0.45) !important;
}

[class*="_logo_jdrq3"],
[class*="_title_jdrq3"],
[class*="_userName_jdrq3"] {
    color: #e0e0e0 !important;
}

/* --- List columns (hash: hsqrn) --- */
[class*="_outerWrapper_hsqrn"] {
    background-color: #2b2f38 !important;
    border-radius: 8px;
}

[class*="_headerName_hsqrn"] {
    color: #e0e0e0 !important;
}

[class*="_header_hsqrn"] {
    color: #e0e0e0 !important;
    position: relative;
}

[class*="_addCardButton_hsqrn"],
[class*="_addCardButton_1bbow"],
[class*="_addCardButton_1utaf"] {
    background-color: #353940 !important;
    color: #c0c0c0 !important;
    border: 1px dashed #555;
}

/* --- Cards (hash: 36a26) --- */
[class*="_wrapper_36a26"] {
    background-color: #353940 !important;
    box-shadow: 0 1px #22262e !important;
}

[class*="_wrapper_36a26"]:hover {
    background-color: #3d424a !important;
}

[class*="_content_36a26"] {
    color: #e0e0e0 !important;
}

/* Card detail fields (hash: i28lr, fiqad) */
[class*="_name_i28lr"],
[class*="_name_fiqad"] {
    color: #e0e0e0 !important;
}

[class*="_attachmentContent_i28lr"],
[class*="_attachmentContent_fiqad"] {
    color: #a0a8b0 !important;
}

/* Card detail badges & text catch-all (description, due dates, tasks, etc.) */
[class*="_wrapper_36a26"] span,
[class*="_wrapper_36a26"] div,
[class*="_wrapper_36a26"] p,
[class*="_wrapper_36a26"] a {
    color: #e0e0e0 !important;
}

/* Due date chip — default gray is invisible on dark cards (hash: 1y12g) */
[class*="_wrapper_1y12g"] {
    background-color: #4a5060 !important;
    color: #e0e0e0 !important;
}

/* Preserve orange/red/green for urgent/overdue/completed dates */
[class*="_wrapperDueSoon_1y12g"] {
    background-color: #f2711c !important;
    color: #fff !important;
}

[class*="_wrapperOverdue_1y12g"] {
    background-color: #db2828 !important;
    color: #fff !important;
}

[class*="_wrapperCompleted_1y12g"] {
    background-color: #21ba45 !important;
    color: #fff !important;
}

/* Disable shimmer animation on recently updated cards */
[class*="_wrapperRecent_36a26"]::after {
    display: none !important;
}

/* Icons inside cards (SVGs use fill, not color) */
[class*="_wrapper_36a26"] svg {
    fill: #a0a8b0 !important;
}

/* Icons inside card modal */
[class*="_contentPadding_10xqw"] svg,
[class*="_contentPadding_160xl"] svg,
[class*="_sidebarPadding_10xqw"] svg,
[class*="_sidebarPadding_160xl"] svg,
[class*="_contentModule_10xqw"] svg,
[class*="_contentModule_160xl"] svg {
    fill: #a0a8b0 !important;
}

/* Icons in header, sidebar, buttons */
[class*="_wrapper_jdrq3"] svg,
[class*="_wrapper_45te1"] svg,
.ui.button svg {
    fill: #a0a8b0 !important;
}

/* Task checkboxes in cards (hash: tpq9f, rd45q) */
[class*="_fieldWrapper_tpq9f"],
[class*="_fieldWrapper_rd45q"] {
    background-color: #353940 !important;
    box-shadow: 0 1px #22262e !important;
    color: #e0e0e0 !important;
}

/* --- Card modal (hash: 10xqw, 160xl) --- */
[class*="_contentPadding_10xqw"],
[class*="_contentPadding_160xl"],
[class*="_sidebarPadding_10xqw"],
[class*="_sidebarPadding_160xl"] {
    background-color: #2b2f38 !important;
    color: #e0e0e0 !important;
}

[class*="_actionButton_10xqw"],
[class*="_actionButton_160xl"] {
    background-color: #353940 !important;
    color: #c0c0c0 !important;
}

[class*="_descriptionButton_10xqw"],
[class*="_descriptionButton_160xl"] {
    background-color: #353940 !important;
    color: #c0c0c0 !important;
}

[class*="_contentModule_10xqw"],
[class*="_contentModule_160xl"] {
    color: #e0e0e0 !important;
}

/* --- Sidebar & project views --- */
[class*="_wrapper_45te1"] {
    background-color: #22262e !important;
    color: #e0e0e0 !important;
}

[class*="_wrapperProject_amg4a"] {
    color: #e0e0e0 !important;
}

/* --- Add list button (hash: 11uup) --- */
[class*="_addListButton_11uup"] {
    background-color: #353940 !important;
    color: #c0c0c0 !important;
}

/* --- Semantic UI overrides (modals, forms, popups) --- */
.ui.modal,
.ui.modal > .content,
.ui.modal > .header {
    background-color: #2b2f38 !important;
    color: #e0e0e0 !important;
}

.ui.modal > .content * {
    color: inherit;
}

.ui.form textarea,
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.input > input {
    background-color: #353940 !important;
    color: #e0e0e0 !important;
    border-color: #42474f !important;
}

input::placeholder,
.ui.input > input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder {
    color: #888 !important;
}

.ui.form .field > label {
    color: #c0c8d0 !important;
}

/* Tab menu (user settings tabs) */
.ui.secondary.pointing.menu .item,
.ui.secondary.menu .item,
.ui.tabular.menu .item,
.ui.menu .item {
    color: #a0a8b0 !important;
}

.ui.secondary.pointing.menu .active.item,
.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item,
.ui.menu .active.item {
    color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

.ui.secondary.pointing.menu,
.ui.tabular.menu {
    border-bottom-color: #42474f !important;
}

/* Buttons */
.ui.button {
    background-color: #353940 !important;
    color: #c0c0c0 !important;
}

.ui.button:hover {
    background-color: #3d424a !important;
    color: #e0e0e0 !important;
}

.ui.button.positive,
.ui.button.green {
    background-color: #2d7a4f !important;
    color: #e0e0e0 !important;
}

.ui.button.negative,
.ui.button.red {
    background-color: #8b3a3a !important;
    color: #e0e0e0 !important;
}

/* Dropdowns */
.ui.dropdown,
.ui.dropdown > .text,
.ui.selection.dropdown {
    background-color: #353940 !important;
    color: #e0e0e0 !important;
    border-color: #42474f !important;
}

.ui.selection.dropdown .menu,
.ui.dropdown .menu {
    background-color: #2b2f38 !important;
    border-color: #42474f !important;
}

.ui.dropdown .menu > .item {
    color: #e0e0e0 !important;
    border-color: #353940 !important;
}

.ui.dropdown .menu > .item:hover {
    background-color: #353940 !important;
}

.ui.dropdown .menu > .item.active,
.ui.dropdown .menu > .item.selected {
    background-color: #3d424a !important;
    color: #fff !important;
}

/* Headers & dividers */
.ui.header {
    color: #e0e0e0 !important;
}

.ui.divider {
    border-top-color: #42474f !important;
    border-bottom-color: transparent !important;
    color: #a0a8b0 !important;
}

/* Radio, checkbox, toggle */
.ui.radio label,
.ui.checkbox label,
.ui.toggle label {
    color: #e0e0e0 !important;
}

/* Messages */
.ui.message {
    background-color: #353940 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 1px #42474f inset !important;
}

.ui.message .header {
    color: #e0e0e0 !important;
}

.ui.error.message {
    background-color: #3d2020 !important;
    color: #ff8888 !important;
}

.ui.warning.message {
    background-color: #3d3520 !important;
    color: #ffd866 !important;
}

/* Segments (tab content panes) */
.ui.segment,
.ui.tab.segment,
.ui.tab.active {
    background-color: #2b2f38 !important;
    color: #e0e0e0 !important;
    border-color: #42474f !important;
    box-shadow: none !important;
}

/* Popup */
.ui.popup {
    background-color: #2b2f38 !important;
    color: #e0e0e0 !important;
    border-color: #42474f !important;
}

.ui.popup::before {
    background-color: #2b2f38 !important;
}

/* Generic text color catch-all for settings content */
.ui.modal p,
.ui.modal span,
.ui.modal div,
.ui.modal label {
    color: inherit;
}

/* Comment bubbles (hash: mycbd) */
[class*="_bubble_mycbd"] {
    background-color: #353940 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 1px 2px -1px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1d23;
}

::-webkit-scrollbar-thumb {
    background: #42474f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- Collapse toggle (added by collapse.js) --- */

/* Hide cards and add-card button when collapsed */
.planka-list-collapsed [class*="_cardsOuterWrapper_hsqrn"],
.planka-list-collapsed [class*="_cardsInnerWrapper_hsqrn"],
.planka-list-collapsed [class*="_cards_hsqrn"],
.planka-list-collapsed [class*="_addCardButton_hsqrn"],
.planka-list-collapsed [class*="_addCardButton_1bbow"],
.planka-list-collapsed [class*="_addCardButton_1utaf"],
.planka-list-collapsed [class*="_addCardButtonWrapper_hsqrn"],
.planka-list-collapsed [class*="_addCardButtonWrapper_1bbow"],
.planka-list-collapsed [class*="_addCardButtonWrapper_1utaf"],
.planka-list-collapsed [class*="_addCard_hsqrn"] {
    display: none !important;
}

/* Narrow the list slot wrapper (11uup) — this controls the column width in the flex layout */
.planka-list-collapsed-slot {
    width: 40px !important;
    min-width: 40px !important;
    transition: width 0.15s ease;
}

/* Narrow the collapsed list itself and inner wrapper */
.planka-list-collapsed {
    width: 40px !important;
    min-width: 40px !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative;
    cursor: pointer;
}

.planka-list-collapsed [class*="_innerWrapper_hsqrn"] {
    width: 40px !important;
    min-width: 40px !important;
}

/* Rotate the header: vertical title running down the narrow column */
.planka-list-collapsed [class*="_header_hsqrn"] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 28px 4px 8px !important;
    position: relative;
}

.planka-list-collapsed [class*="_headerName_hsqrn"] {
    white-space: nowrap;
    overflow: visible !important;
    max-height: none !important;
    max-width: none !important;
    font-size: 14px;
}

/* Hide the header action button (⋯ menu) when collapsed */
.planka-list-collapsed [class*="_headerButton_hsqrn"],
.planka-list-collapsed [class*="_headerIcon_hsqrn"] {
    display: none !important;
}

/* Collapse button: position absolutely at top of collapsed list */
.planka-list-collapsed .planka-collapse-btn {
    position: absolute !important;
    top: 4px;
    left: 50%;
    right: auto !important;
    transform: translateX(-50%);
    writing-mode: horizontal-tb;
    margin: 0;
    z-index: 1;
}

.planka-collapse-btn {
    background: none;
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: right 0.15s ease, opacity 0.2s;
    z-index: 1;
}

/* Shift collapse button left on hover to make room for the native edit button.
   Skip when collapsed (button centered) or in locked mode (no headerButton rendered). */
[class*="_header_hsqrn"]:has([class*="_headerButton_hsqrn"]):hover .planka-collapse-btn {
    right: 34px;
}

.planka-collapse-btn:hover {
    opacity: 1;
}