/* core/display-properties.css
   Styles specific to the Display Properties dialog.
   Reusable XP widgets used here (buttons, tabs, etc.) live in xp-ui.css. */

/* Suppress resize handles, title-bar icon, min/max buttons for fixed-size dialog */
.display-properties-window .resize-handle { display: none !important; }
.display-properties-window .window-icon   { display: none !important; }
.display-properties-window .btn-min,
.display-properties-window .btn-max       { display: none !important; }

/* --- Monitor widget (display.png 177×159, screen: left 11 top 15 w 152 h 112) --- */
.dp-monitor-wrap {
    display: flex;
    justify-content: center;
    padding: 2px 0 8px;
    flex-shrink: 0;
}
.dp-monitor { position: relative; width: 177px; height: 159px; flex-shrink: 0; }
.dp-monitor-img { display: block; width: 177px; height: 159px; pointer-events: none; }
.dp-screen-overlay {
    position: absolute;
    left: 11px; top: 15px;
    width: 152px; height: 112px;
    overflow: hidden;
}
.dp-wallpaper-preview {
    width: 100%; height: 100%;
    background-color: #3a6ea5;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* --- Themes panel --- */
.dp-themes-desc { font-size: 11px; color: #000; margin: 0 0 13px; flex-shrink: 0; }

/* Large sample area mirrors the current desktop background */
.dp-themes-sample {
    width: 347px; height: 219px;
    position: relative; overflow: hidden;
    background-color: #3a6ea5;
    background-size: cover;
    background-position: center;
    border-top: 1px solid #7f9db9;
    border-left: 1px solid #7f9db9;
    border-right: 1px solid #dcdad5;
    border-bottom: 1px solid #dcdad5;
}

/* Mini Active Window — uses real os-window classes, just overrides size/position */
.dp-sample-window {
    position: absolute !important;
    left: 30px; top: 32px;
    width: 218px !important; height: 127px !important;
    min-width: 0 !important; min-height: 0 !important;
    visibility: visible !important;
    pointer-events: none;
}

/* Recycle Bin icon in the sample area */
.dp-sample-recycle {
    position: absolute; right: 10px; bottom: 8px;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; cursor: default;
}
.dp-sample-recycle-ico { width: 32px; height: 32px; display: block; image-rendering: pixelated; }

/* --- Desktop panel: two-column layout --- */
.dp-bg-section {
    display: flex; gap: 6px;
    flex: 1; min-height: 0; margin-bottom: 8px;
}
.dp-bg-list {
    flex: 1;
    border: 1px solid #7f9db9;
    border-right: 1px solid #dcdad5;
    border-bottom: 1px solid #dcdad5;
    background: #fff;
    overflow-y: scroll; min-height: 0;
}
.dp-bg-right {
    display: flex; flex-direction: column;
    width: 80px; flex-shrink: 0;
}

/* --- Wallpaper list items --- */
.dp-bg-item {
    display: flex; align-items: center;
    gap: 3px; padding: 2px 3px;
    cursor: default; white-space: nowrap;
}
.dp-bg-item-ico {
    width: 16px; height: 16px; flex-shrink: 0;
    background-image: url('../assets/xp/ico_wallpaper.png');
    background-repeat: no-repeat;
    background-size: 16px 48px;
}
.dp-bg-none    .dp-bg-item-ico { background-position: 0 0;     } /* stop sign  */
.dp-bg-image   .dp-bg-item-ico { background-position: 0 -16px; } /* landscape  */
.dp-bg-pattern .dp-bg-item-ico { background-position: 0 -32px; } /* pattern    */

/* Selection highlight: text gets blue bg, icon gets the shared XP selection filter */
.dp-bg-item.dp-bg-selected > span { background-color: #316ac5; color: #fff; }
.dp-bg-item.dp-bg-selected .dp-bg-item-ico { filter: contrast(0.6) brightness(1.4) grayscale(0.2); }

/* --- Color picker button (XP-style swatch + dropdown arrow) --- */
.dp-color-btn {
    display: flex; align-items: center;
    width: 100%; height: 21px;
    border: 1px solid #919b9c;
    background: linear-gradient(to bottom, #f5f4ef, #e5e3db);
    box-sizing: border-box; cursor: pointer;
    padding: 2px 2px 2px 3px; gap: 2px;
}
.dp-color-fill  { flex: 1; height: 100%; background: #3a6ea5; }
.dp-color-arrow {
    width: 12px; height: 100%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dp-color-arrow::after {
    content: '';
    width: 0; height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #000;
}

/* Customize Desktop button: left-aligned, wider than a standard button */
.dp-btn-customize { align-self: flex-start; min-width: 130px; flex-shrink: 0; }