:root {
    --tile-radius: 1rem;
}

body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

main.container {
    max-width: 720px;
}

/* Home tiles */
.list-tile {
    border-radius: var(--tile-radius);
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.list-tile:hover,
.list-tile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
}
.list-tile:active {
    transform: translateY(0);
}
.list-tile__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

/* Bewerk-knop op een tegel (boven de stretched-link link) */
.list-edit-btn {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 30px;
    border-radius: 50%;
    color: #6c757d;
    background: rgba(255, 255, 255, .75);
    opacity: 0;
    transition: opacity .15s ease;
}
.list-tile:hover .list-edit-btn,
.list-tile:focus-within .list-edit-btn {
    opacity: 1;
}
@media (hover: none) {
    .list-edit-btn { opacity: .85; }
}

/* Sleep-states (SortableJS) */
.list-col--ghost .list-tile {
    opacity: .4;
    outline: 2px dashed #198754;
}
.list-col--chosen .list-tile {
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .18) !important;
    transform: scale(1.02);
}

.list-tile--success .list-tile__icon  { background: #198754; }
.list-tile--primary .list-tile__icon  { background: #0d6efd; }
.list-tile--danger  .list-tile__icon  { background: #dc3545; }
.list-tile--warning .list-tile__icon  { background: #ffc107; color: #5a4a00; }
.list-tile--info    .list-tile__icon  { background: #0dcaf0; color: #053f4c; }
.list-tile--secondary .list-tile__icon{ background: #6c757d; }
.list-tile--dark    .list-tile__icon  { background: #212529; }

/* Icon/color pickers */
.icon-picker__item input,
.color-picker__item input {
    display: none;
}
.icon-picker__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1f3f5;
    color: #555;
    border: 2px solid transparent;
    cursor: pointer;
}
.icon-picker__item input:checked + span {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #198754;
}
.color-picker__item span {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
}
.color-picker__item input:checked + span {
    border-color: #212529;
    transform: scale(1.1);
}

/* List items */
.item-row {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.toggle-btn {
    width: 32px;
    flex: 0 0 32px;
}
.item-row--done .item-name {
    opacity: .65;
}
.delete-btn {
    opacity: 0;
    transition: opacity .15s ease;
}
.item-row:hover .delete-btn,
.item-row:focus-within .delete-btn,
.item-row.show-delete .delete-btn {
    opacity: 1;
}
@media (hover: none) {
    .delete-btn { opacity: .5; }
}

/* Autocomplete dropdown */
#suggestions {
    margin-top: .25rem;
    max-height: 320px;
    overflow-y: auto;
}
#suggestions .list-group-item {
    cursor: pointer;
}
#suggestions .list-group-item:hover,
#suggestions .list-group-item.active {
    background-color: #d1e7dd;
}

/* PWA standalone aanpassingen */
@media (display-mode: standalone) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}