/* TodoList component styles - Pflegecampus theme */
pc-todo-list {
display: block;
font-family: var(--rd-fontfamily-open-sans-0, 'Open Sans', system-ui, sans-serif);
color: var(--rd-font-dark, #0d1130);
font-size: var(--rd-fontsize-4, 14px);
line-height: 1.5;
}

/* When inside StaticPanel .item-content, fill the container and enable scrolling */
pc-static-panel .item-content {
	display: flex;
	flex-direction: column;
	/* Remove padding when containing a todo list - the todo will handle its own spacing */
}

pc-static-panel .item-content:has(> pc-todo-list) {
	padding: 0;
}

pc-static-panel .item-content > pc-todo-list {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

pc-static-panel .item-content > pc-todo-list > .wrapper {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 12px;
	/* Override global .wrapper rule from MobileStyle */
	position: static;
	top: auto;
	left: auto;
	transform: none;
}

pc-static-panel .item-content > pc-todo-list > .wrapper > .list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

pc-static-panel .item-content > pc-todo-list > .wrapper > .footer {
	flex-shrink: 0;
}

/* When inside StaticPanel, remove redundant wrapper styling */
pc-static-panel pc-todo-list .wrapper {
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}

/* Hide internal header when inside StaticPanel (panel provides the header) */
pc-static-panel pc-todo-list .header {
display: none;
}

/* Adjust footer when inside StaticPanel (no need for top border since no internal header) */
pc-static-panel pc-todo-list .footer {
margin-top: var(--rd-spacing-x-sm, 8px);
padding-top: var(--rd-spacing-x-sm, 8px);
border-top: 1px solid var(--cl-light-grey, #ccc);
}

/* Override global .wrapper rule from MobileStyle (position: absolute center) */
pc-todo-list .wrapper {
position: static;
top: auto;
left: auto;
transform: none;
/* Basic standalone styling */
padding: var(--rd-spacing-md, 16px);
}

/* Standalone wrapper styling (when not in StaticPanel or BotUI) */
pc-todo-list:not(:is(pc-static-panel *, pc-botui *)) .wrapper {
border: 1px solid var(--cl-light-grey, #ccc);
border-radius: var(--rd-borderradius-border-md, 8px);
background: var(--rd-font-light, #fff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ========================================
   BotUI device panel context
   ======================================== */
pc-botui .botui-device-wrapper pc-todo-list,
pc-botui .botui-cell-device pc-todo-list {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
}

pc-botui .botui-device-wrapper pc-todo-list > .wrapper,
pc-botui .botui-cell-device pc-todo-list > .wrapper {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
/* Remove card styling when inside BotUI */
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}

pc-botui .botui-device-wrapper pc-todo-list > .wrapper > .list,
pc-botui .botui-cell-device pc-todo-list > .wrapper > .list {
flex: 1;
min-height: 0;
overflow-y: auto;
}

pc-botui .botui-device-wrapper pc-todo-list > .wrapper > .footer,
pc-botui .botui-cell-device pc-todo-list > .wrapper > .footer {
flex-shrink: 0;
}

/* Hide internal header when inside BotUI (device tabs provide the title) */
pc-botui .botui-device-wrapper pc-todo-list .header,
pc-botui .botui-cell-device pc-todo-list .header {
display: none;
}

/* Header */
pc-todo-list .header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--rd-spacing-sm, 12px);
padding-bottom: 10px;
border-bottom: 1px solid var(--cl-light-grey, #ccc);
}

pc-todo-list .header h3 {
margin: 0;
font-size: var(--rd-fontsize-5, 15px);
font-weight: var(--rd-fontweights-open-sans-1, 600);
color: var(--rd-font-dark, #0d1130);
}

pc-todo-list .count {
font-size: var(--rd-fontsize-3, 12px);
color: var(--cl-dark-grey, #727c84);
font-weight: var(--rd-fontweights-open-sans-1, 600);
background: var(--rd-secondary-active, #4073b6);
color: var(--rd-font-light, #fff);
padding: 3px var(--rd-spacing-x-sm, 8px);
border-radius: 10px;
}

/* List container */
pc-todo-list .list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--rd-spacing-x-sm, 8px);
}

/* Individual item */
pc-todo-list .item {
background: var(--rd-font-light, #fff);
border: 1px solid var(--cl-light-grey, #ccc);
padding: 10px var(--rd-spacing-sm, 12px);
border-radius: var(--rd-borderradius-border-sm, 4px);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--rd-spacing-x-sm, 8px);
align-items: start;
transition: border-color 0.15s, background 0.15s;
}

pc-todo-list .item:hover {
border-color: var(--rd-secondary-active, #4073b6);
background: rgba(64, 115, 182, 0.03);
}

pc-todo-list .item.editing {
border-color: var(--rd-primary-active, #d66181);
background: rgba(214, 97, 129, 0.05);
}

/* Item content */
pc-todo-list .content {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}

pc-todo-list .item-title {
font-weight: var(--rd-fontweights-open-sans-1, 600);
color: var(--rd-font-dark, #0d1130);
word-break: break-word;
font-size: var(--rd-fontsize-3, 13px);
}

/* Badges - Using Pflegecampus colors */
pc-todo-list .badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}

pc-todo-list .badge {
font-size: var(--rd-fontsize-1, 10px);
padding: 2px 6px;
border-radius: var(--rd-borderradius-border-sm, 4px);
font-weight: var(--rd-fontweights-open-sans-1, 600);
letter-spacing: 0.2px;
text-transform: capitalize;
}

/* Badge colors based on level - using style guide colors */
pc-todo-list .badge[style*="error"],
pc-todo-list .badge[style*="f54b5e"] {
background: rgba(245, 75, 94, 0.1) !important;
color: var(--rd-error-active, #f54b5e) !important;
border: 1px solid rgba(245, 75, 94, 0.3);
}

pc-todo-list .badge[style*="warning"],
pc-todo-list .badge[style*="f3c039"] {
background: rgba(243, 192, 57, 0.15) !important;
color: #9a7b00 !important;
border: 1px solid rgba(243, 192, 57, 0.4);
}

pc-todo-list .badge[style*="success"],
pc-todo-list .badge[style*="89b63f"] {
background: rgba(137, 182, 63, 0.1) !important;
color: var(--rd-success-active, #89b63f) !important;
border: 1px solid rgba(137, 182, 63, 0.3);
}

/* Actions */
pc-todo-list .actions {
display: flex;
gap: 2px;
align-items: flex-start;
opacity: 0.6;
transition: opacity 0.15s;
}

pc-todo-list .item:hover .actions {
opacity: 1;
}

pc-todo-list button.icon {
background: transparent;
border: none;
padding: 5px;
cursor: pointer;
border-radius: var(--rd-borderradius-border-sm, 4px);
display: grid;
place-items: center;
color: var(--cl-dark-grey, #727c84);
transition: background 0.15s, color 0.15s;
}

pc-todo-list button.icon:hover {
background: rgba(64, 115, 182, 0.1);
color: var(--rd-secondary-active, #4073b6);
}

pc-todo-list button.icon:active {
background: rgba(64, 115, 182, 0.2);
}

pc-todo-list button.icon svg {
width: 14px;
height: 14px;
}

/* Forms */
pc-todo-list .add-form,
pc-todo-list .edit-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rd-spacing-x-sm, 8px);
align-items: center;
}

pc-todo-list .edit-form {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--cl-light-grey, #ccc);
}

/* Input takes full width */
pc-todo-list .add-form input,
pc-todo-list .edit-form input {
grid-column: 1 / -1;
padding: var(--rd-spacing-x-sm, 8px) 10px;
border-radius: var(--rd-borderradius-border-sm, 4px);
border: 1px solid var(--cl-light-grey, #ccc);
font-size: var(--rd-fontsize-3, 13px);
background: var(--rd-font-light, #fff);
transition: border-color 0.15s, box-shadow 0.15s;
}

pc-todo-list .add-form input:focus,
pc-todo-list .edit-form input:focus {
outline: none;
border-color: var(--rd-primary-active, #d66181);
box-shadow: 0 0 0 3px rgba(214, 97, 129, 0.1);
}

pc-todo-list .add-form input::placeholder {
color: var(--cl-blue-grey, #8f9dae);
}

/* Select wrapper - uses rd-select from styleguide */
pc-todo-list .rd-select {
width: 100%;
}

pc-todo-list .rd-select select {
width: 100%;
font-size: var(--rd-fontsize-3, 12px);
}

/* Buttons - use rd-* classes from styleguide */
pc-todo-list .rd-primary-btn,
pc-todo-list .rd-secondary-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rd-spacing-xx-sm, 4px);
}

/* Add button spans full width */
pc-todo-list .add-form .rd-primary-btn {
grid-column: 1 / -1;
}

/* Remove old button styles - now using rd-* classes */
pc-todo-list button.primary,
pc-todo-list button.secondary {
display: none;
}

/* Empty state */
pc-todo-list .empty {
font-size: var(--rd-fontsize-3, 13px);
color: var(--cl-blue-grey, #8f9dae);
font-style: italic;
text-align: center;
padding: var(--rd-spacing-lg, 20px) 0;
}

/* Footer */
pc-todo-list .footer {
margin-top: var(--rd-spacing-sm, 12px);
padding-top: var(--rd-spacing-sm, 12px);
border-top: 1px solid var(--cl-light-grey, #ccc);
}