.rounded-xs {
    border-radius: 4px;
}

/* Custom padding for AhoyDTU scheduler trigger button */
.ahoydtu-poll-button {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Ensure system info content uses base font size */
.ahoydtu-system-info-content {
    font-size: 1rem;
}

.ahoydtu-system-info-content * {
    font-size: 1rem;
}

.ahoydtu-system-info-content h3,
.ahoydtu-system-info-content h4 {
    font-size: 1rem;
}

/* Match grid gap spacing for modules section */
.ahoydtu-modules-spacing {
    margin-top: 1rem;
}

/* User bubble username font size to match menu items */
.user-bubble-username {
    font-size: 0.8rem;
    padding-top: 10px;
}

/* User menu item: icon + label row (no Tailwind) */
.user-menu-item-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.user-menu-item-icon-col {
    width: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.user-menu-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon picker chevron size */
.icon-picker-chevron {
    width: 1rem;
    height: 1rem;
}

/* Ensure icon picker dropdown can overflow modal */
.modal-box {
    overflow: visible !important;
}

dialog.modal {
    overflow: visible !important;
}

/* Ensure dropdown content is visible above modal */
details.dropdown[open] .dropdown-content {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Dashboard drag and drop styles */
/* Generic drag handle styling - applies to all drag handles */
[class*="-drag-handle"] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0.5rem;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    cursor: grab;
    width: 2rem;
}

[class*="-drag-handle"]:hover {
    opacity: 0.8;
}

[class*="-drag-handle"]:active {
    cursor: grabbing !important;
    opacity: 1;
}

/* Drag handle icon styling - matches table theme colors */
[class*="-drag-handle"] svg {
    color: hsl(var(--bc) / 0.4);
    fill: hsl(var(--bc) / 0.4);
    transition: color 0.2s ease, fill 0.2s ease;
    display: inline-block;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
}

[class*="-drag-handle"]:hover svg {
    color: hsl(var(--bc) / 0.6);
    fill: hsl(var(--bc) / 0.6);
}

[class*="-drag-handle"]:active svg {
    color: hsl(var(--bc) / 0.8);
    fill: hsl(var(--bc) / 0.8);
}

/* More greyish color for dracula theme */
[data-theme="dracula"] [class*="-drag-handle"] svg {
    color: hsl(0, 0%, 50%);
    fill: hsl(0, 0%, 50%);
}

[data-theme="dracula"] [class*="-drag-handle"]:hover svg {
    color: hsl(0, 0%, 60%);
    fill: hsl(0, 0%, 60%);
}

[data-theme="dracula"] [class*="-drag-handle"]:active svg {
    color: hsl(0, 0%, 70%);
    fill: hsl(0, 0%, 70%);
}

/* Legacy support for specific classes */
.dashboard-drag-handle {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0.5rem;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    cursor: grab;
    width: 2rem;
}

/* Prevent browser autofill styling on input fields */
/* Use transition delay trick to override browser autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--b1)) inset !important;
    -webkit-text-fill-color: hsl(var(--bc)) !important;
    box-shadow: 0 0 0 1000px hsl(var(--b1)) inset !important;
    caret-color: hsl(var(--bc)) !important;
    background-color: hsl(var(--b1)) !important;
}

/* For Firefox autofill */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
    background-color: hsl(var(--b1)) !important;
    color: hsl(var(--bc)) !important;
    box-shadow: 0 0 0 1000px hsl(var(--b1)) inset !important;
}

/* Ensure autofilled inputs maintain theme colors for all input types */
input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="search"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
input[type="url"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:hover,
input[type="search"]:-webkit-autofill:hover,
input[type="tel"]:-webkit-autofill:hover,
input[type="url"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:focus,
input[type="search"]:-webkit-autofill:focus,
input[type="tel"]:-webkit-autofill:focus,
input[type="url"]:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--b1)) inset !important;
    -webkit-text-fill-color: hsl(var(--bc)) !important;
    box-shadow: 0 0 0 1000px hsl(var(--b1)) inset !important;
    caret-color: hsl(var(--bc)) !important;
    background-color: hsl(var(--b1)) !important;
}


.dashboard-row.sortable-ghost {
    opacity: 0.4;
}

.dashboard-row.sortable-chosen {
    background-color: hsl(var(--b3)) !important;
}

/* Widget template warning alert padding */
#widget-template-warning {
    margin-top: 10px !important;
}

/* Dashboard options title padding */
#dashboard-options-section .menu-title {
    padding-top: 1rem;
}

/* System settings tab loading styles */
.system-settings-tab-loading {
    position: relative;
    min-height: 400px;
}

.system-settings-tab-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(var(--b1) / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Account settings tab loading styles */
.account-settings-tab-loading {
    position: relative;
    min-height: 400px;
}

.account-settings-tab-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(var(--b1) / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* PIN Input Component Styles */
.pin-input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pin-input-group {
    display: flex;
    align-items: center;
    gap: 0;
}

.pin-input-field {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 1px solid hsl(var(--bc) / 0.2);
    border-radius: 0;
    background-color: hsl(var(--b1));
    color: hsl(var(--bc));
    transition: border-color 0.2s, background-color 0.2s;
}

.pin-input-field:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.pin-input-field:not(:first-child) {
    border-left: none;
}

.pin-input-field:focus {
    outline: none;
    border-color: hsl(var(--p));
    background-color: hsl(var(--b1));
    z-index: 1;
    position: relative;
}

.pin-input-field::placeholder {
    color: hsl(var(--bc) / 0.4);
}

.pin-input-toggle {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--bc) / 0.2);
    border-left: none;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: hsl(var(--b1));
    color: hsl(var(--bc) / 0.6);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

.pin-input-toggle:hover {
    background-color: hsl(var(--b2));
    color: hsl(var(--bc));
}

.pin-input-toggle:focus {
    outline: none;
    border-color: hsl(var(--p));
    z-index: 1;
    position: relative;
}

/* PIN Number Pad Styles */
.pin-numpad {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 12rem;
}

.pin-numpad.hidden {
    display: none;
}

.pin-numpad-row {
    display: contents;
}

.pin-numpad-btn {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 1px solid;
    border-color: hsl(var(--bc) / 0.5);
    border-radius: 0.5rem;
    background-color: hsl(var(--b1));
    color: hsl(var(--bc));
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, border-color 0.2s;
    user-select: none;
    aspect-ratio: 1;
}

.pin-numpad-btn:hover {
    background-color: hsl(var(--b2));
    border-color: hsl(var(--bc) / 0.8);
}

.pin-numpad-btn:active {
    transform: scale(0.95);
    background-color: hsl(var(--b3));
}

.pin-numpad-btn.pin-numpad-empty {
    background-color: transparent;
    border: 2px solid transparent;
    cursor: default;
    pointer-events: none;
}

.pin-numpad-btn.pin-numpad-empty:hover {
    background-color: transparent;
}

.pin-numpad-btn.pin-numpad-backspace {
    font-size: 1.25rem;
    color: hsl(var(--er));
    border-color: hsl(var(--er) / 0.6);
}

.pin-numpad-btn.pin-numpad-backspace:hover {
    background-color: hsl(var(--er) / 0.1);
    color: hsl(var(--er));
    border-color: hsl(var(--er));
}

/* Sticky top navigation */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

/* Ensure page content starts below fixed navbar */
.page-content {
    padding-top: 6rem; /* Adjust if navbar height changes */
}

/* Notification icon spacing */
.notification-icon-container {
    margin-right: 25px;
}

/* Unread badge: add breathing room from the top of the icon button */
.top-navbar .indicator-item {
    margin-top: 5px;
}

/* Bell dropdown: full row is a link to notification center + fragment */
a.notification-dropdown-item {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.notification-dropdown-item:hover {
    filter: brightness(0.97);
}

/* BMW CarData / Appliances tab – VIN tabs */
.bmwcardata-vin-tabs .tab,
.bmwcardata-vin-tabs .tab::before,
.bmwcardata-vin-tabs .tab::after {
    font-size: 0.8rem !important;
    font-weight: 500;
}

.bmwcardata-vin-tabs[role="tablist"] {
    font-size: 1rem;
}

/* Inbox list: left-aligned mail rows */
#inbox-list .inbox-list-item,
#inbox-list .inbox-list-item a {
    text-align: left;
}

#inbox-list .inbox-list-link {
    display: block;
    padding: 0.75rem 1rem;
}

#inbox-list .inbox-list-link span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#inbox-list .inbox-list-link span + span {
    margin-top: 0.125rem;
}

/* Inbox list: hover and opened mail use same highlight (custom link needs explicit hover + active) */
#inbox-list .inbox-list-item .inbox-list-link:hover,
#inbox-list .inbox-list-item.active .inbox-list-link {
    background-color: var(--color-base-200, hsl(220 14% 96%));
}

/* Inbox: show scrollbars (override global hidden scrollbar) so list and detail are scrollable and visibly so */
#inbox-list,
#inbox-detail {
    scrollbar-width: auto;
    scrollbar-gutter: stable;
}
#inbox-list::-webkit-scrollbar,
#inbox-detail::-webkit-scrollbar {
    width: 0.75rem;
}
#inbox-list::-webkit-scrollbar-track,
#inbox-detail::-webkit-scrollbar-track {
    background: var(--color-base-200, hsl(220 14% 96%));
}
#inbox-list::-webkit-scrollbar-thumb,
#inbox-detail::-webkit-scrollbar-thumb {
    background: var(--color-base-300, hsl(220 10% 90%));
    border-radius: 9999px;
}
#inbox-list::-webkit-scrollbar-thumb:hover,
#inbox-detail::-webkit-scrollbar-thumb:hover {
    background: var(--color-base-content, hsl(220 10% 40%));
}

/* Manage-features shopping/plants/todos split: use `.sl-scrollable` on the scrolling nodes (scrollable_container.css). */

/* Shopping items: drag handle + content layout, similar to shopping lists table */
.shopping-item-header-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.shopping-item-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.shopping-item-drag-handle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.shopping-item-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
}

.shopping-item-main-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.shopping-item-title {
    flex: 1;
    min-width: 0;
}

.shopping-item-title-bought {
    text-decoration: line-through;
    opacity: 0.7;
}