/* Singularity Structural Theme
 *
 * Color variables are defined in style.dark.css / style.light.css and
 * prepended at load time. Accent colors are loaded at priority +1.
 */

* {
    color: @text_color;
}

/* Base GTK4 widget reset 
   With gtk_theme_name = "Empty", no Default theme CSS loads. We provide
   base dark styling for all common GTK4 widgets using our color tokens.
   Singularity-specific rules further below will override where needed. */

window,
.background {
    background-color: @window_bg;
    color: @text_color;
}

window.csd {
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 14px alpha(@shadow_color, 0.55);
}

/* Generic .csd has higher specificity than .singularity-app, so its
   square box-shadow would otherwise win and produce a square halo
   around the rounded card. Restate the two-layer shadow at matching
   specificity and zero the radius (the visible rounded shape comes
   from .singularity-app-frame). */
window.csd.singularity-app {
    border-radius: 0;
    background-color: transparent;
    box-shadow:
        0 1px 2px alpha(@shadow_color, 0.30),
        0 6px 14px alpha(@shadow_color, 0.42);
}

window.popup,
window.tooltip {
    border-radius: 6px;
    box-shadow: none;
}

.default-decoration {
    background-color: @toolbar_bg;
    min-height: 0;
    padding: 4px;
    border: 0;
    box-shadow: none;
}
.default-decoration label.title,
.default-decoration windowtitle {
    color: @text_color;
    font-size: 12px;
    font-weight: 500;
}
.default-decoration .image-button,
.default-decoration button.image-button,
.default-decoration button.flat.image-button,
.default-decoration windowcontrols button {
    padding: 0;
    min-width: 20px;
    min-height: 20px;
    border-radius: 100%;
    background-color: alpha(@text_color, 0.10);
    border: none;
    color: @text_color;
    box-shadow: none;
}
.default-decoration .image-button:hover,
.default-decoration windowcontrols button:hover {
    background-color: alpha(@text_color, 0.20);
}
.default-decoration windowcontrols button image,
.default-decoration .image-button image {
    -gtk-icon-size: 12px;
    color: @text_color;
}

/* Same treatment as a fallback when GTK draws a full headerbar
   instead of the slim default-decoration (some apps or themes). */
headerbar {
    min-height: 0;
    background-color: @toolbar_bg;
    padding: 4px;
    border: 0;
    box-shadow: none;
    color: @text_color;
}
headerbar label.title,
headerbar windowtitle {
    color: @text_color;
    font-size: 12px;
    font-weight: 500;
}
headerbar windowcontrols button {
    min-height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 100%;
    background-color: alpha(@text_color, 0.10);
    border: none;
}
headerbar windowcontrols button:hover {
    background-color: alpha(@text_color, 0.20);
}
headerbar windowcontrols button image {
    -gtk-icon-size: 12px;
    color: @text_color;
}

/* Generic standalone button: pill rounding to match AppDialog
   buttons (which carry an explicit `.pill` class). Specific button
   roles (toolbar, sidebar, path, bubble, etc.) override this
   border-radius via their own selectors. */
button {
    background-color: @card_bg;
    border: 1px solid @border_color;
    border-radius: 999px;
    color: @text_color;
    padding: 6px 12px;
    box-shadow: none;
}
button:hover { background-color: @card_hover_bg; }
button:active,
button:checked { background-color: alpha(@text_color, 0.18); }
button:disabled { opacity: 0.5; }

/* Flat button */
button.flat,
button.sidebar-button {
    background: none;
    border-color: transparent;
    box-shadow: none;
}
button.flat:hover,
button.sidebar-button:hover { background-color: @card_hover_bg; border-color: transparent; }
button.flat:active,
button.flat:checked,
button.sidebar-button:active { background-color: @card_bg; border-color: transparent; }
button.flat:disabled,
button.sidebar-button:disabled { background: none; border-color: transparent; opacity: 0.5; }
button.flat.sidebar-nav-active,
button.flat.sidebar-nav-active:hover,
button.flat.sidebar-nav-active:focus {
    background-color: alpha(@accent_color, 0.15);
    border-color: transparent;
}

/* Standardized sidebar row pattern used by SidebarRow widget. Tight
   padding and consistent radius so all apps render their navigation
   identically (Files, Photos, Store, etc). */
.singularity-sidebar-row {
    padding: 6px 10px;
    border-radius: 8px;
    min-height: 0;
}
.singularity-sidebar-row > box {
    margin: 0;
}

/* Suggested / destructive action buttons */
button.suggested-action {
    background-color: @accent_color;
    border-color: @accent_color;
    color: @accent_fg;
}
button.suggested-action:hover   { background-color: mix(@accent_color, white, 0.85); }
button.suggested-action:active  { background-color: mix(@accent_color, black, 0.85); }
button.suggested-action:disabled { opacity: 0.5; }

button.destructive-action {
    background-color: @destructive_hover;
    border-color: @destructive_hover;
    color: @text_color;
}

button.destructive-action:active { background-color: shade(@destructive_color, 0.7); }
button.destructive-action:disabled { opacity: 0.5; }

button.pill,
.singularity button.pill {
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 600;
}

/* Boxed list (PreferencesGroup cards) */
.boxed-list {
    border-radius: 8px;
    border: 1px solid @border_color;
    background-color: transparent;
}
.boxed-list > row {
    border-bottom: 1px solid @border_color;
    background-color: transparent;
}
.boxed-list > row:last-child { border-bottom: none; }
.boxed-list > row:hover { background-color: @card_hover_bg; }
.boxed-list > row:selected { background-color: mix(@accent_color, @window_bg, 0.25); }
.boxed-list > row:first-child { border-radius: 8px 8px 0 0; }

/* Listbox */
listbox { background-color: transparent; }
listbox row { background-color: transparent; }
listbox row:hover { background-color: @card_hover_bg; }
listbox row:selected { background-color: mix(@accent_color, @window_bg, 0.25); color: @text_color; }

/* Entry / text input: our standardized look, used everywhere
   (text, search, password, spinbutton). Accent focus ring + 8px
   pill radius + comfortable padding. */
entry,
spinbutton {
    background-color: @card_bg;
    border: 1px solid @border_color;
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 26px;
    color: @text_color;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
entry:focus-within,
spinbutton:focus-within {
    border-color: @accent_color;
    box-shadow: 0 0 0 2px alpha(@accent_color, 0.20);
    outline: none;
}
entry:disabled,
spinbutton:disabled { opacity: 0.5; }
entry image.left,
entry > image.left {
    margin-right: 6px;
    color: alpha(@text_color, 0.55);
}
entry image.right,
entry > image.right {
    margin-left: 6px;
    color: alpha(@text_color, 0.55);
}

/* Textview */
textview,
textview > text {
    background-color: @card_bg;
    color: @text_color;
}
textview > text > selection { background-color: mix(@accent_color, @window_bg, 0.5); }

/* Singularity SourceView: full-bleed editor, accent-true selection. */
textview.singularity-sourceview,
textview.singularity-sourceview > text {
    background-color: transparent;
    color: @text_color;
    caret-color: @accent_color;
}
textview.singularity-sourceview > text > selection {
    background-color: @accent_color;
    color: @accent_fg_color;
}

/* Scrollbar */
scrollbar { background-color: transparent; border: none; }
scrollbar trough {
    background-color: alpha(@text_color, 0.05);
    border-radius: 4px;
}
scrollbar slider {
    background-color: alpha(@text_color, 0.25);
    border-radius: 4px;
    min-width: 6px;
    min-height: 6px;
    margin: 2px;
}
scrollbar slider:hover  { background-color: alpha(@text_color, 0.45); }
scrollbar slider:active { background-color: @accent_color; }

/* Separator */
separator {
    background-color: @border_color;
    min-height: 1px;
    min-width: 1px;
}

/* Popover */
popover.background {
    background-color: @surface_raised;
    border: 1px solid @border_color;
    border-radius: 8px;
    box-shadow: 0 6px 20px alpha(@shadow_color, 0.45);
    color: @text_color;
}
popover.background > contents { padding: 6px; }

/* Tooltip */
tooltip {
    background-color: @surface_bright;
    border: 1px solid @border_color;
    border-radius: 4px;
    color: @text_color;
    padding: 4px 8px;
}

/* Label */
label:disabled { opacity: 0.5; }
label.dim-label { opacity: 0.55; }

/* Typography scale
   Defined here because Singularity does NOT inherit Adwaita - these classes
   would otherwise be unstyled (tiny default font, no weight). */
.title-1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.title-2 {
    font-size: 22px;
    font-weight: 700;
}
.title-3 {
    font-size: 18px;
    font-weight: 600;
}
.title-4 {
    font-size: 15px;
    font-weight: 600;
}
.heading {
    font-size: 8px;
    font-weight: 500;
    opacity: 0.65;
}
.caption {
    font-size: 12px;
    opacity: 0.65;
}
.body {
    font-size: 14px;
}

/* Check / Radio. GTK4 names the indicator nodes `check` and `radio`; target
   them directly so both checkboxes and radio buttons get a real style
   (the old GTK3 `radiobutton > radio` selector never matched in GTK4). */
check,
radio {
    min-width: 18px;
    min-height: 18px;
    margin: 2px;
    padding: 0;
    border: 1.5px solid alpha(@text_color, 0.35);
    background-color: @card_bg;
    color: @accent_fg;
    transition: background-color 0.12s ease,
                border-color 0.12s ease,
                box-shadow 0.12s ease;
}
check  { border-radius: 5px; }
radio  { border-radius: 100%; }

check:hover,
radio:hover { border-color: @accent_color; }

check:checked,
check:indeterminate,
radio:checked {
    background-color: @accent_color;
    border-color: @accent_color;
    color: @accent_fg;
}

checkbutton:focus-visible > check,
checkbutton:focus-visible > radio {
    box-shadow: 0 0 0 2px alpha(@accent_color, 0.40);
}
check:disabled,
radio:disabled { opacity: 0.5; }

/* Switch */
switch {
    background-color: alpha(@text_color, 0.15);
    border-radius: 9999px;
    border: 1px solid @border_color;
    min-width: 40px;
    min-height: 22px;
}
switch:checked { background-color: @accent_color; border-color: @accent_color; }
switch slider {
    background-color: @text_color;
    border-radius: 9999px;
    margin: 2px;
}

/* Progress bar */
progressbar trough {
    background-color: @card_bg;
    border-radius: 4px;
    min-height: 6px;
}
progressbar progress {
    background-color: @accent_color;
    border-radius: 4px;
}
.osd-pill progressbar progress { background-color: @accent_color; }
.browser-progress > trough > progress { background-color: @accent_color; }

/* Scale / slider */
scale trough {
    background-color: @card_bg;
    border-radius: 4px;
    min-height: 4px;
    min-width: 4px;
}
scale trough highlight { background-color: @accent_color; }
scale slider {
    background-color: @accent_color;
    border-radius: 9999px;
    min-width: 18px;
    min-height: 18px;
    box-shadow: 0 1px 4px alpha(@shadow_color, 0.4);
}
scale.horizontal > marks.bottom { margin-top: 4px; }
scale.horizontal > marks.top { margin-bottom: 4px; }
scale.vertical > marks.bottom { margin-left: 4px; }
scale.vertical > marks.top { margin-right: 4px; }
scale.horizontal marks indicator {
    background-color: currentColor;
    min-height: 4px;
    min-width: 1px;
    opacity: 0.2;
}
scale.vertical marks indicator {
    background-color: currentColor;
    min-height: 1px;
    min-width: 4px;
    opacity: 0.2;
}
scale > value { opacity: 0.45; }

/* View (icon/tree/list views) */
.view,
iconview {
    background-color: @window_bg;
    color: @text_color;
}
.view:selected,
iconview:selected {
    background-color: @accent_color;
    color: @accent_fg;
}

/* Dialog / message dialog */
dialog.background,
messagedialog.background { background-color: @window_bg; }

/* Window controls buttons */
windowcontrols button {
    background: none;
    border: none;
    box-shadow: none;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
}
windowcontrols button > image {
    border-radius: 9999px;
    min-width: 24px;
    min-height: 24px;
}
windowcontrols button:hover > image { background-color: @card_hover_bg; }
windowcontrols button:active > image,
windowcontrols button:checked > image { background-color: @card_bg; }

/* Notebook / tabs */
notebook > header { background-color: @toolbar_bg; border-bottom: 1px solid @border_color; }
notebook > header > tabs > tab { padding: 6px 16px; border-radius: 4px 4px 0 0; }
notebook > header > tabs > tab:checked { background-color: @window_bg; }
notebook > header > tabs > tab:hover:not(:checked) { background-color: @card_hover_bg; }

/* End base GTK4 widget reset */
.panel-window {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

/* All elements inside the panel box get explicit white by default (dark bg
   assumed). Specificity (0,2,0) beats the global * { color: @text_color }
   (0,0,0) so inheritance chains within the panel work correctly. */
.panel-window .panel * {
    color: white;
}

/* Flat/maximized mode: always dark background, always white text regardless
   of light/dark mode (the flat panel is always black for logo legibility).
   this way the vendor does not have to fight with logo contrast. */
.panel-window.flat-panel .panel * {
    color: white;
}

/* Bright wallpaper detected: switch to dark text. */
.panel-window.light-bg:not(.flat-panel) .panel * {
    color: #1a1a1a;
}

/* ...but NOT inside popovers/menus opened from the panel: those are
   descendants of the panel button in the GTK4 widget tree, so the rule
   above bleeds dark text onto their (dark) body - black-on-black. Reset
   them to the theme foreground so submenus stay readable. */
.panel-window.light-bg:not(.flat-panel) .panel popover,
.panel-window.light-bg:not(.flat-panel) .panel popover * {
    color: @window_fg_color;
}

/* Active state always gets white text on accent bg regardless of mode. */
.panel-window .activities-button:active *,
.panel-window .clock-button:active *,
.panel-window .notification-button:active *,
.panel-window .system-pill-button:active * {
    color: white;
}

.panel {
    padding: 0;
    min-height: 32px;
    border: none;
    outline: none;
    box-shadow: none;
    margin: 0;
    transition: background-color 180ms ease;
}

.panel.no-transition {
    transition: none;
}

.panel.overview-mode {
    background-color: @overview_bg;
}

.notification-button {
    background-color: @surface_bg;
    border-radius: 999px;
    padding: 2px 6px;
    margin: 2px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
    font-weight: bold;
    min-height: 28px;
}

.system-pill-button {
    background-color: @surface_bg;
    border-radius: 999px;
    padding: 2px 10px;
    margin: 2px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px alpha(@shadow_color, 0.2);
    font-weight: bold;
    min-height: 28px;
}

.activities-button:hover,
.clock-button:hover,
.system-pill-button:hover {
    background-color: alpha(@text_color, 0.15);
    box-shadow: 0 2px 8px alpha(@shadow_color, 0.3);
}

.notification-button:hover {
    background-color: alpha(@text_color, 0.15);
    box-shadow: none;
}

.activities-button:active,
.clock-button:active,
.system-pill-button:active {
    background-color: @accent_color;
    color: white;
}

.notification-button:active {
    background-color: @accent_color;
    color: white;
    box-shadow: none;
}

.notification-badge {
    background-color: @destructive_color;
    min-width: 6px;
    min-height: 6px;
    border-radius: 999px;
    margin-top: 4px;
    margin-right: 4px;
    box-shadow: none;
}

.panel.overview-mode .activities-button,
.panel.overview-mode .clock-button,
.panel.overview-mode .notification-button,
.panel.overview-mode .system-pill-button {
    background-color: transparent;
    box-shadow: none;
}

/* Flat panel mode: solid black background, no pill buttons */
.flat-panel .panel {
    background-color: @panel_solid_bg;
}

.flat-panel .activities-button,
.flat-panel .clock-button,
.flat-panel .notification-button,
.flat-panel .system-pill-button {
    background-color: transparent;
    box-shadow: none;
    border-radius: 4px;
}

/* Text and icon shadows in transparent (non-flat) panel mode - Pantheon-style contrast */
.panel-window:not(.flat-panel):not(.light-bg) .panel label {
    text-shadow: 0 1px 3px alpha(@shadow_color, 0.9);
}

.panel-window:not(.flat-panel):not(.light-bg) .panel image {
    filter: drop-shadow(0 1px 3px alpha(@shadow_color, 0.9));
}

/* On bright wallpapers (non-flat): subtle dark shadow for legibility */
.panel-window.light-bg:not(.flat-panel) .panel label {

}

.panel-window.light-bg:not(.flat-panel) .panel image {
    filter: none;
}

.panel-window:not(.flat-panel) .notification-button label {
}

.panel .battery-percentage {
    margin-left: 4px;
    font-size: 0.85em;
}

.clock {
    font-weight: bold;
    font-size: 14px;
    color: inherit;
}

.system-pill {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.system-pill image {
    margin: 0 4px;
    color: inherit;
}

.dock-window {
    background-color: transparent;
}

/*
 * When the compositor provides hardware background blur (SINGULARITY_BLUR_ENABLED),
 * the dock background becomes translucent so the blur shows through.
 * Without hardware blur, the opaque backdrop-filter: blur() CSS fallback is used.
 */
window.singularity-blur .dock-box,
.singularity-blur .dock-box,
window.singularity-blur .dock-window:backdrop .dock-box,
.singularity-blur .dock-window:backdrop .dock-box {
    background-color: @surface_overlay;
}

.dock-box {
    background-color: @surface_overlay;
    border-radius: 16px;
    padding: 7px 6px 2px 6px;
    box-shadow: 0 4px 14px alpha(@shadow_color, 0.45), 0 1px 0 alpha(@text_color, 0.08) inset;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.22s ease-out;
    border: 1px solid alpha(@text_color, 0.18);
}

/* Reveal slide-up: applied without transition to offset the dock below its
   surface, then removed to animate it back into view. */
.dock-box.dock-reveal-offset {
    transform: translateY(90px);
    opacity: 0;
    transition: none;
}

.dock-box.dock-hiding {
    transform: translateY(90px);
    opacity: 0;
}

.dock-window:backdrop .dock-box,
.dock-box:backdrop {
    background-color: @surface_overlay;
    border: 1px solid alpha(@text_color, 0.18);
    box-shadow: 0 4px 14px alpha(@shadow_color, 0.45), 0 1px 0 alpha(@text_color, 0.08) inset;
}

.dock-container {
    margin: 4px 8px 0 8px;
}

.dock-reveal-barrier,
.dock-reveal-barrier > * {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.dock-panel-mode .dock-box {
    background-color: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
}

.dock-panel-mode .dock-container {
    background-color: @panel_bg;
    border-top: 1px solid alpha(@text_color, 0.08);
    box-shadow: 0 -1px 8px alpha(@shadow_color, 0.3);
    /* Symmetric vertical padding so the icons are visually centered
       between the top and bottom edges of the panel. */
    padding: 4px 12px;
    margin: 0;
}

.dock-start-area {
    margin-right: 12px;
}

.dock-end-area {
    margin-left: 12px;
}

.start-button {
    margin: 3px 0;
}

.workspace-button {
    color: @accent_color;
}

.workspace-button:hover {
    background-color: alpha(@accent_color, 0.2);
}

.dock-clock-box,
.dock-system-box {
    background-color: @surface_overlay;
    border-radius: 12px;
    border: 1px solid alpha(@text_color, 0.1);
    box-shadow: 0 2px 8px alpha(@shadow_color, 0.3);
    padding: 4px 8px;
    margin: 4px 0;
}

.dock-clock {
    font-weight: bold;
    font-size: 14px;
}

.dock-box.transparent {
    background-color: alpha(@text_color, 0.08);
    box-shadow: none;
    border: 1px solid alpha(@text_color, 0.1);
}

.dock-item {
    background-color: transparent;
    border-radius: 8px;
    padding: 2px;
    transition: background-color 0.2s ease;
    border: none;
    box-shadow: none;
}

.dock-item:hover {
    background-color: alpha(@text_color, 0.15);
    box-shadow: none;
}

/* With magnification active: no hover background square, no transitions on image size */
.singularity.dock-window.magnify-active .dock-item:hover {
    background-color: transparent;
}
.singularity.dock-window.magnify-active .dock-item image {
    transition: none;
}

.dock-item.running {
}

.dock-item.active {
    background-color: alpha(@text_color, 0.18);
    box-shadow: inset 0 0 0 1px alpha(@text_color, 0.12);
}

/* Active app dot is brighter/larger */
.dock-item-wrapper.active-wrapper .dock-indicator-dot {
    background-color: white;
    min-width: 5px;
    min-height: 5px;
}

@keyframes dock-slide-bounce {
    0%   { transform: translateY(62px); opacity: 0; }
    55%  { transform: translateY(-8px); opacity: 1; }
    72%  { transform: translateY(4px); }
    86%  { transform: translateY(-2px); }
    100% { transform: translateY(0); opacity: 1; }
}

.dock-container.dock-intro {
    animation: dock-slide-bounce 560ms cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
}

@keyframes dock-pulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
    }
}

.dock-item-wrapper.launching {
    animation: dock-pulse 0.35s ease-in-out 2;
}

.dock-item-wrapper {
    background-color: transparent;
}

/* Pill (inner): rounded container around icon + suffix; sits inside the
   wrapper so the running-indicator dot row stays below, outside the pill. */
.dock-item-pill {
    background-color: transparent;
    border-radius: 14px;
    transition: background-color 180ms ease;
}

.dock-item-pill.has-suffix {
    background-color: alpha(@text_color, 0.10);
    padding-left: 2px;
    padding-right: 6px;
}

.dock-item-pill.has-suffix:hover,
.dock-item-pill.expanded {
    background-color: alpha(@text_color, 0.16);
}

.dock-suffix-area {
    padding-left: 4px;
    padding-right: 2px;
    color: @text_color;
}

.dock-suffix-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 2px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 8px;
}
.dock-suffix-button:hover {
    background-color: alpha(@text_color, 0.18);
}

.dock-suffix-label {
    padding: 0 4px;
    color: @text_color;
}

.dock-suffix-badge {
    background-color: alpha(@accent_bg_color, 0.85);
    color: white;
    border-radius: 9px;
    min-width: 16px;
    min-height: 16px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
}

.dock-suffix-bubble {
    border-radius: 12px;
    padding: 2px 6px;
    background-color: alpha(@text_color, 0.10);
    border: none;
    box-shadow: none;
}
.dock-suffix-bubble:hover {
    background-color: alpha(@text_color, 0.18);
}

.dock-circular-progress {
    color: @text_color;
    min-width: 30px;
    min-height: 30px;
}

/* Vertical stack inside the suffix area (multi-row content). */
.dock-suffix-vstack {
    padding: 2px 4px;
    min-width: 220px;
}
.dock-suffix-progress-row {
    padding: 4px 6px;
    border-radius: 8px;
    background-color: alpha(@text_color, 0.06);
    color: @text_color;
}
.dock-suffix-progress-row:hover,
.dock-suffix-progress-row.clickable:hover {
    background-color: alpha(@text_color, 0.12);
}
.dock-suffix-progress-row-label {
    font-size: 12px;
}

.dock-mpris-icon-cover {
    border-radius: 8px;
}

.dock-mpris-app-badge {
    min-width: 18px;
    min-height: 18px;
    border-radius: 5px;
    padding: 1px;
    background-color: alpha(@window_bg_color, 0.86);
    box-shadow: 0 1px 4px alpha(black, 0.35), 0 0 0 1px alpha(white, 0.55);
}

@keyframes screen-flash-out {
    0% {
        opacity: 0.75;
    }

    60% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
    }
}

/* The window itself must be transparent - the child box carries the visual */
.screen-flash {
    background: transparent;
}

.screen-flash-fill {
    background: white;
    animation: screen-flash-out 0.28s ease-out forwards;
}

.dock-indicator-row {
    min-height: 4px;
    margin-top: 1px;
    margin-bottom: 0;
}

.dock-indicator-dot {
    min-width: 3px;
    min-height: 3px;
    background-color: alpha(@text_color, 0.75);
    border-radius: 2px;
    margin: 0 1px;
}

.dock-item-extended {
    min-width: 150px;
    padding-left: 12px;
    padding-right: 12px;
}

.dock-item-title {
    font-size: 13px;
    font-weight: 500;
    color: @panel_fg;
}

.dock-item-quick-launch {
    padding: 4px;
}

.dock-separator {
    min-width: 1px;
    background-color: alpha(@text_color, 0.1);
    margin: 6px 4px;
}

.overview-window {
    background-color: transparent;
}

/* App switcher overlay (Alt+Tab) */
.app-switcher-overlay {
    background-color: alpha(@shadow_color, 0.5);
}
.app-switcher-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.app-switcher-item {
    border-radius: 8px;
    padding: 6px 8px;
}
.app-switcher-item:hover {
    background-color: @card_hover_bg;
}
.app-switcher-item.selected {
    background-color: alpha(@accent_color, 0.28);
}
.switcher-thumbnail-box {
    border-radius: 8px;
    background-color: @card_bg;
}
.switcher-thumbnail-fallback {
    opacity: 0.5;
}
.switcher-thumbnail-icon {
    background-color: alpha(@window_bg, 0.8);
    border-radius: 4px;
    padding: 2px;
}

@keyframes overview-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.0); }
}
@keyframes overview-out {
  from { opacity: 1; transform: scale(1.0); }
  to   { opacity: 0; transform: scale(0.97); }
}
@keyframes ws-overview-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.0); }
}
@keyframes ws-overview-out {
  from { opacity: 1; transform: scale(1.0); }
  to   { opacity: 0; transform: scale(0.97); }
}

.overview-box {
    background-color: @overview_bg;
}
.overview-box.animating-in {
    animation: overview-in 220ms ease-out forwards;
}
.overview-box.animating-out {
    animation: overview-out 180ms ease-in forwards;
}
.workspace-overview-box.animating-in {
    animation: ws-overview-in 220ms ease-out forwards;
}
.workspace-overview-box.animating-out {
    animation: ws-overview-out 180ms ease-in forwards;
}
.hot-corner-window {
    background-color: alpha(@shadow_color, 0.002);
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.hot-corner-screen {
    border-radius: 8px;
    border: 1px solid alpha(@card_shade_color, 0.5);
}

.hot-corner-bg {
    background-color: alpha(@card_bg_color, 0.5);
    border-radius: 7px;
}

.overview-background-wallpaper {
    filter: brightness(0.4);
    transition: opacity 0.3s ease;
}

.overview-content-box {
    background-color: transparent;
}

.workspace-strip-container {
    background-color: @overview_bg;
    padding: 24px 0 12px 0;
    border-bottom: 1px solid alpha(@text_color, 0.1);
}

.window-preview-item {
    transition: transform 0.2s ease;
}

.window-preview-item:hover {
    transform: scale(1.02);
}

.window-preview-thumbnail {
    border-radius: 12px;
}

.window-preview-titlebar {
    background-color: @surface_scrim_heavy;
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 12px;
    border: 1px solid alpha(@text_color, 0.15);
}

.window-preview-label {
    font-weight: 600;
    font-size: 13px;
    color: white;
}

.window-preview-icon {
    margin-right: 2px;
}

.overview-ws-sidebar {
    background-color: @surface_overlay;
    border: 1px solid alpha(@text_color, 0.1);
    border-radius: 24px;
    padding: 12px 0;
    box-shadow: 0 8px 20px alpha(@shadow_color, 0.4);
    min-width: 240px;
    margin-right: 20px;
}

.panel.overview-mode {
    background-color: @overview_bg;
}

.search-entry {
    background-color: alpha(@text_color, 0.08);
    border: 1px solid alpha(@text_color, 0.1);
    border-radius: 999px;
    padding: 4px 12px;
    color: @text_color;
    caret-color: @accent_color;
    min-height: 32px;
    min-width: 400px;
    font-size: 15px;
    box-shadow: 0 4px 12px alpha(@shadow_color, 0.2);
    transition: all 0.2s ease;
}

.search-entry text {
    border-radius: 999px;
}

.singularity entry.search-entry > text {
    padding-left: 6px;
}

.singularity entry.search-entry image.left,
.singularity entry.search-entry > text > image.left {
    margin-right: 8px;
}

.search-results-list {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 6px;
    margin: 4px 0 16px 0;
    box-shadow: none;
}

.search-result-row {
    background-color: transparent;
    border-radius: 10px;
    margin-bottom: 2px;
    transition: background-color 0.15s ease;
}

.search-result-row:hover,
.search-result-row:selected {
    background-color: alpha(@text_color, 0.08);
}

.search-result-row:selected {
    background-color: alpha(@accent_color, 0.15);
}

.search-result-title {
    font-weight: 600;
    font-size: 14px;
    color: white;
}

.search-result-description {
    font-size: 12px;
    opacity: 0.55;
    color: white;
}

.search-result-provider {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.35;
    letter-spacing: 0.5px;
    color: white;
}

.search-category-header {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.45;
    color: white;
    padding: 8px 12px 4px 12px;
    margin-top: 6px;
}

.search-preview-inline {
    background-color: alpha(@shadow_color, 0.2);
    border-radius: 10px;
    margin: 4px 12px 8px 52px;
    padding: 8px;
}

.search-preview-text {
    font-family: monospace;
    font-size: 12px;
    opacity: 0.8;
    color: white;
}

.quick-settings-grid {
    padding: 0px;
}

/* Quick-setting grouped pill (tile + nav fused) */
.quick-setting-group {
    background-color: alpha(@text_color, 0.04);
    border-radius: 64px;
    transition: all 0.15s ease;
}

/* Tile part: transparent over group bg, rounded on left only */
.quick-setting-group .quick-setting-tile {
    background-color: transparent;
    border-radius: 64px 0 0 64px;
    border: none;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

.quick-setting-group .quick-setting-tile:hover {
    background-color: alpha(@text_color, 0.07);
}

.quick-setting-group .quick-setting-tile.active {
    background-color: @accent_color;
    border-radius: 64px 0 0 64px;
}

.quick-setting-group .quick-setting-tile.active:hover {
    background-color: alpha(@accent_color, 0.85);
}

.quick-setting-group .quick-setting-tile.active:focus {
    background-color: @accent_color;
}

.quick-setting-group .quick-setting-tile.active .tile-subtitle {
    color: alpha(@text_color, 0.8);
}

.quick-setting-group .quick-setting-tile.active .tile-icon {
    background-color: alpha(@text_color, 0.2);
    color: white;
}

/* Nav button: transparent, rounded on right, thin divider */
.quick-setting-group .quick-setting-nav-btn {
    background-color: transparent;
    border-radius: 0 64px 64px 0;
    border: none;
    border-left: 1px solid alpha(@text_color, 0.1);
    padding: 0 10px;
    min-width: 20px;
    color: alpha(@text_color, 0.45);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.quick-setting-group .quick-setting-nav-btn:hover {
    background-color: alpha(@text_color, 0.1);
    color: alpha(@text_color, 0.9);
}

/* When tile is active, nav button inherits accent (slightly darker) */
.quick-setting-group .quick-setting-tile.active~.quick-setting-nav-btn {
    background-color: shade(@accent_color, 0.82);
    border-left-color: alpha(@text_color, 0.2);
    color: alpha(@text_color, 0.8);
}

.quick-setting-group .quick-setting-tile.active~.quick-setting-nav-btn:hover {
    background-color: shade(@accent_color, 0.72);
    color: white;
}

/* Standalone tile (no group wrapper) keeps full pill */
.quick-setting-tile {
    background-color: alpha(@text_color, 0.08);
    border-radius: 64px;
    padding: 0;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    box-shadow: none;
}

.quick-setting-tile:hover {
    background-color: alpha(@text_color, 0.12);
}

.quick-setting-tile.active {
    background-color: @accent_color;
    color: white;
}

.quick-setting-tile.active:hover {
    background-color: alpha(@accent_color, 0.85);
}

.quick-setting-tile.active:focus {
    background-color: @accent_color;
}

.quick-setting-tile.active .tile-subtitle {
    color: alpha(@text_color, 0.8);
}

.quick-setting-tile.active .tile-icon {
    color: white;
}

/* 3-state intermediate (e.g. "balanced" in power profile) */
.quick-setting-tile.state-partial {
    background-color: alpha(@accent_color, 0.25);
    color: @text_color;
}

.quick-setting-tile.state-partial:hover {
    background-color: alpha(@accent_color, 0.35);
}

/* grouped variants */
.quick-setting-group .quick-setting-tile.state-partial {
    background-color: alpha(@accent_color, 0.25);
}

.quick-setting-group .quick-setting-tile.state-partial~.quick-setting-nav-btn {
    background-color: alpha(@accent_color, 0.15);
    border-left-color: alpha(@text_color, 0.15);
}

.tile-title {
    font-weight: 600;
    font-size: 13px;
}

.tile-subtitle {
    font-size: 11px;
    opacity: 0.7;
}

.tile-icon {
    background-color: alpha(@text_color, 0.1);
    padding: 8px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 999px;
}

/* Audio device chips */
.audio-device-chips {
    margin-top: 6px;
    margin-bottom: 4px;
}

.audio-device-chip {
    background-color: alpha(@text_color, 0.08);
    border-radius: 20px;
    padding: 4px 10px;
    border: none;
    font-size: 12px;
    transition: background-color 0.15s;
}

.audio-device-chip:hover {
    background-color: alpha(@text_color, 0.14);
}

.audio-device-chip.active {
    background-color: @accent_color;
    color: white;
}

.search-result-row:selected {
    background-color: alpha(@accent_color, 0.15);
}

.app-grid-item {
    background-color: transparent;
    border-radius: 18px;
    padding: 8px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: none;
    margin: 2px;
    color: white;
}

.app-grid-item.app-item-hidden {
    opacity: 0;
}

@keyframes app-item-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-grid-item.app-item-entering {
    animation: app-item-enter 170ms ease-out forwards;
}

.app-grid-item:hover {
    background-color: alpha(@text_color, 0.08);
}

/* Folder items use inner .folder-button-box:hover - skip outer highlight */
.app-grid-item.folder-grid-item:hover {
    background-color: transparent;
}

.app-grid-item label {
    font-size: 13px;
    font-weight: 500;
    margin-top: 0;
}

.app-grid {
    padding: 12px;
    padding-bottom: 80px;
}

/* App Folders */

.folder-button-box {
    min-width: 96px;
    min-height: 96px;
    border-radius: 22px;
    background-color: alpha(@text_color, 0.13);
    padding: 6px;
    transition: background-color 0.15s;
}
.folder-button-box:hover {
    background-color: alpha(@text_color, 0.22);
}
.folder-button-box.drag-over {
    background-color: alpha(@text_color, 0.32);
    box-shadow: 0 0 0 2px alpha(@accent_color, 0.8);
}
.folder-button-label {
    color: white;
    font-size: 12px;
    margin-top: 4px;
}

/* Folder overlay (iOS-style popup) */
.folder-overlay-dimmer {
    background-color: alpha(@shadow_color, 0.45);
}
.folder-overlay-card {
    background-color: @window_tint;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 8px 40px alpha(@shadow_color, 0.5);
    min-width: 340px;
    min-height: 280px;
}
.folder-name-entry {
    background: transparent;
    border: none;
    box-shadow: none;
    color: white;
    font-size: 17px;
    font-weight: bold;
    padding: 4px 8px;
    margin-bottom: 12px;
}
.folder-name-entry:focus {
    background-color: alpha(@text_color, 0.08);
    border-radius: 8px;
}
.folder-inner-grid {
    padding: 8px 0;
}
.folder-inner-grid .app-grid-item label {
    color: white;
}

/* Drag placeholder in overview grid - just empty space, no visual noise */
.app-grid-placeholder {
    border-radius: 16px;
    background-color: alpha(@text_color, 0.06);
    border: none;
}

/* Disable all transitions during DnD to prevent re-animation of siblings */
.app-grid.dnd-active *,
.app-grid.no-animate * {
    transition: none;
    animation: none;
}

/* Remove GTK default drag-over border on the FlowBox container */
.app-grid:drop(active) {
    border: none;
    box-shadow: none;
    outline: none;
}
.app-grid > flowboxchild:drop(active) {
    border: none;
    box-shadow: none;
}

/* Icon dimming when dragging over (folder creation hint) */
.app-grid-item.dragging {
    opacity: 0;
}
.app-grid-item.drop-target-hover {
    background-color: alpha(@accent_color, 0.3);
    box-shadow: 0 0 0 2px alpha(@accent_color, 0.8);
}

.clock-button,
.system-pill-button {
    background-color: alpha(@text_color, 0.15);
    border: none;
    box-shadow: none;
    padding: 4px 12px;
    margin: 0 4px;
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.clock-button:hover,
.system-pill-button:hover {
    background-color: alpha(@text_color, 0.20);
    color: white;
    box-shadow: none;
}

.sidebar {
    background-color: @window_tint;
    border: 1px solid @border_color;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    padding: 0 12px;
    /* Same two-layer recipe used by app windows and dialog cards. */
    box-shadow:
        0 1px 2px alpha(black, 0.22),
        0 6px 14px alpha(black, 0.34);
}

.warning-box {
    background-color: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0;
}

.warning-box image {
    color: orange;
}

.warning-box label {
    font-size: 13px;
    color: alpha(@text_color, 0.8);
}

/* The shell sidebar is a layer-shell GtkWindow. Make the window surface
   itself fully transparent so the visible .sidebar card (set on the
   inner main_box with a 20 px margin around in Vala) can cast its
   shadow without the surrounding window painting a grey halo. */
window.sidebar-window {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.sidebar-window { border-radius: 40px; }

/* App menu popup (menu mode of the apps launcher). Same recipe as the
   sidebar-window: the outer GtkWindow paints nothing so the inner
   .app-menu-card (set on main_box, surrounded by a small Vala margin
   so the shadow has room) can carry the rounded card visual without
   a grey halo behind it. */
window.app-menu-window {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.app-menu-card {
    background-color: @window_tint;
    border: 1px solid @border_color;
    border-radius: 16px;
    box-shadow:
        0 1px 2px alpha(black, 0.22),
        0 6px 14px alpha(black, 0.34);
}

.app-menu-list {
    background: transparent;
    padding: 0 6px 8px;
}

.app-menu-list row.app-menu-row {
    padding: 6px 10px;
    border-radius: 10px;
    margin: 1px 0;
}

.app-menu-list row.app-menu-row:hover {
    background-color: alpha(@accent_color, 0.16);
}

.app-menu-list row.app-menu-section {
    padding: 0;
    margin: 0;
    background: transparent;
}

.app-menu-section-label {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.55;
    padding: 8px 12px 2px;
}

.app-menu-sticky-letter {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.9;
    padding: 6px 12px 4px;
    background-color: @window_tint;
    box-shadow: 0 4px 6px alpha(black, 0.18);
}

.sidebar-window .settings-page-content {
    padding: 0;
    margin: 0;
}

.sidebar-window .page-header {
    margin-top: 0;
    padding: 8px 12px 4px;
    min-height: 44px;
}

.sidebar-window .page-header .page-title {
    font-size: 17px;
    font-weight: bold;
    margin: 0;
}

.sidebar-window .settings-page-content .toolbar-spacer {
    opacity: 0;
    min-height: 0;
    min-width: 0;
}

.navigation-sidebar {
    background-color: transparent;
    padding: 0;
}

/* Zero out GTK ListBoxRow's built-in padding so .sidebar-row controls it */
.navigation-sidebar row {
    padding: 0;
    background: transparent;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.navigation-sidebar row:hover {
    background-color: alpha(@accent_color, 0.1);
}

.navigation-sidebar row:selected {
    background-color: alpha(@accent_color, 0.15);
}

.navigation-sidebar row:selected label,
.navigation-sidebar row:selected image {
    color: @accent_color;
    font-weight: 600;
}

/* Shared sidebar category/section label used in Files, Store, etc. */
.sidebar-section-label {
    margin-top: 12px;
    margin-bottom: 2px;
    margin-left: 4px;
}

.sidebar-section-label label {
    font-size: 10px;
    letter-spacing: 0.05em;
    opacity: 0.55;
}

/* Force sidebar ScrolledWindow to not expand beyond its requested size */
.window-sidebar {
    min-width: 0;
    padding: 10px;
    border-right: 1px solid @border_color;
}

.sidebar-row {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background-color 0.2s;
}

.sidebar-row:hover {
    background-color: alpha(@accent_color, 0.1);
}

.sidebar-row:selected {
    background-color: alpha(@accent_color, 0.15);
    color: @accent_color;
}

.sidebar-row label {
    font-weight: 500;
}

.settings-group {
    background-color: @card_bg;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid @border_color;
    padding: 8px;
}

.preferences-row {
    transition: background-color 0.2s;
    border-radius: 8px;
    margin-bottom: 2px;
}

.preferences-row:hover {
    background-color: @card_hover_bg;
}

.preferences-row:selected {
    background-color: @accent_bg;
    color: @accent_fg;
}

.singularity {
    font-family: 'Inter', sans-serif;
    color: @text_color;
}

/* CSD app window root: transparent background so the inner frame's rounded
   corners show through. box-shadow here is intentional: GTK4 reads the
   shadow extents on the window CSS node (when client_decorated=true) to call
   gdk_surface_set_shadow_width(), extending the Wayland surface so the shadow
   renders outside the window geometry. background: transparent + box-shadow
   is valid CSS - the shadow is cast from the border-box regardless of fill. */
.singularity-app {
    background: transparent;
    /* Two-layer recipe (contact + ambient). The TOTAL reach (offset+blur)
       drives gdk_surface_set_shadow_width() so labwc treats the inner
       card as the real window: resize cursor lives on the card edge and
       clicks in the shadow region fall through. */
    box-shadow:
        0 1px 2px alpha(@shadow_color, 0.30),
        0 6px 14px alpha(@shadow_color, 0.42);
    transition: box-shadow 0.15s ease;
}

/* Inner visual frame: background, border-radius, border.
   RoundedOverlay.snapshot() pushes a GskRoundedClipNode so children are
   also clipped to the rounded rect (CSS border-radius alone would only
   round the widget's own background paint, not its children). */
/* Singularity APP windows: shadow + transparent surface are on the
   window node (.singularity-app, above). The frame only carries the
   visible card style; no shadow, no margin - GTK4 derives the shadow
   extents from the .singularity-app rule and the compositor sees the
   inner card as the real window. */
.singularity-app-frame {
    background-color: @window_tint;
    border: 1px solid @border_color;
    border-radius: 12px;
    transition: border-radius 0.15s ease;
}

/* Remove shadow on tiled/maximised/SSD states */
.singularity-app.no-rounded-corners,
.singularity-app.maximized,
.singularity-app.fullscreen,
.singularity-app.tiled,
.singularity-app.tiled-left,
.singularity-app.tiled-right,
.singularity-app.tiled-top,
.singularity-app.tiled-bottom,
.singularity-app.ssd-mode {
    box-shadow: none;
}

/* Remove visual decoration AND margin/shadow on tiled / maximised / SSD
   states - the window is flush with the screen edge, no room for shadow. */
.singularity-app.no-rounded-corners .singularity-app-frame,
.singularity-app.maximized .singularity-app-frame,
.singularity-app.fullscreen .singularity-app-frame,
.singularity-app.tiled .singularity-app-frame,
.singularity-app.tiled-left .singularity-app-frame,
.singularity-app.tiled-right .singularity-app-frame,
.singularity-app.tiled-top .singularity-app-frame,
.singularity-app.tiled-bottom .singularity-app-frame,
.singularity-app.ssd-mode .singularity-app-frame {
    border-radius: 0;
    border: none;
    margin: 0;
    box-shadow: none;
}

window.singularity .dock-window,
window.singularity .panel-window,
.singularity.window .dock-window,
.singularity.window .panel-window {
    background-color: transparent;
}

.singularity button {
    background-color: @card_bg;
    color: white;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 6px 12px;
}

.singularity button:active {
    background-color: @accent_color;
    color: white;
}

.singularity button:disabled {
    background-color: alpha(@text_color, 0.05);
    color: alpha(@text_color, 0.3);
}

.singularity .page-header {
    min-height: 48px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.singularity .page-header .page-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.singularity .snapshot-tool {
    background-color: @window_tint;
    border: 1px solid @border_color;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 24px alpha(@shadow_color, 0.4);
}

.singularity button.navigation-button {
    background-color: transparent;
    border-radius: 8px;
    padding: 8px;
    min-width: 32px;
    min-height: 32px;
    outline: none;
    box-shadow: none;
    border: none;
}

.singularity button.navigation-button:hover {
    background-color: @card_hover_bg;
}

.singularity .app-grid-item {
    background-color: transparent;
    border-radius: 18px;
    padding: 8px;
    box-shadow: none;
    outline: none;
    margin: 2px;
}

.singularity .app-grid-item:hover {
    background-color: alpha(@text_color, 0.08);
}

.singularity .app-grid-item:active {
    background-color: alpha(@text_color, 0.2);
}

.singularity .dock-item {
    background-color: transparent;
    border-radius: 8px;
    padding: 6px;
    box-shadow: none;
    outline: none;
}

.singularity .dock-item:hover {
    background-color: alpha(@text_color, 0.15);
}

.singularity button.clock-button,
.singularity button.system-pill-button,
.singularity button.activities-button {
    background-color: transparent;
    box-shadow: none;
    padding: 4px 12px;
    outline: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.singularity button.clock-button:hover,
.singularity button.system-pill-button:hover,
.singularity button.activities-button:hover {
    background-color: @hover_white;
    color: @text_color;
}

.singularity button.circular-button {
    border-radius: 999px;
    background-color: @card_bg;
    padding: 8px;
    min-width: 32px;
    min-height: 32px;
    outline: none;
}

.singularity button.circular-button:hover {
    background-color: @hover_white;
    color: @text_color;
}

.singularity button.quick-toggle {
    background-color: @card_bg;
    border-radius: 24px;
    padding: 8px;
    outline: none;
}

.singularity button.quick-toggle:hover {
    background-color: @card_hover_bg;
}

.singularity button.quick-toggle.active {
    background-color: @accent_bg;
    color: @accent_fg;
}

.singularity button.quick-toggle.active:hover {
    background-color: alpha(@accent_bg, 0.85);
}

.singularity button.quick-toggle.active:focus {
    background-color: @accent_bg;
}

.singularity entry {
    background-color: alpha(@text_color, 0.06);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px;
    box-shadow: none;
    caret-color: @accent_color;
    outline: none;
}

.singularity entry:focus {
    background-color: alpha(@text_color, 0.09);
    box-shadow: 0 0 0 2px alpha(@accent_color, 0.4);
}

.singularity entry selection {
    background-color: @accent_color;
    color: white;
}

.singularity spinbutton {
    background-color: alpha(@text_color, 0.06);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
}

.singularity spinbutton text {
    background-color: transparent;
    color: white;
    padding: 8px;
}

.singularity spinbutton button {
    background-color: transparent;
    color: white;
    border-radius: 4px;
    margin: 2px;
    padding: 2px 6px;
    min-height: 24px;
    min-width: 24px;
}

.singularity spinbutton button:hover {
    background-color: alpha(@text_color, 0.1);
}

.singularity spinbutton button:active {
    background-color: @accent_color;
}

.singularity combobox {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.singularity combobox button.combo {
    background-color: @card_bg;
    color: white;
    border: none;
    box-shadow: none;
    outline: none;
    padding-right: 20px;
}

.singularity combobox button.combo:hover {
    background-color: @card_hover_bg;
}

.singularity-toolbar {
    background-color: @toolbar_bg;
    border-radius: 12px;
    margin: 7px;
    padding: 0 4px;
    min-height: 46px;
    box-shadow: 0 2px 8px alpha(@shadow_color, 0.2);
    border: 1px solid alpha(@text_color, 0.05);
}

.singularity-toolbar.ssd-mode {
    border-radius: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid alpha(@text_color, 0.05);
    box-shadow: none;
}

.singularity-toolbar.toolbar-scroll-under {
    background-color: @toolbar_bg;
    border-bottom: 1px solid alpha(@text_color, 0.07);
}

.singularity-toolbar.browser-toolbar {
    transition: margin-top 280ms ease-out, opacity 200ms ease;
}

.singularity-toolbar.browser-toolbar.toolbar-hidden {
    margin-top: -64px;
    opacity: 0;
}

.singularity-toolbar.browser-toolbar.toolbar-approaching {
    margin-top: -64px;
    opacity: 0;
}

.singularity-toolbar.browser-toolbar.toolbar-visible {
    margin-top: 8px;
    min-height: 46px;
    opacity: 1;
}

.incognito-toolbar {
    background: linear-gradient(to bottom, #3d2066, #2d1850);
    border-color: #4a2a7a;
}

.incognito-window {
    background-color: #1a0f2e;
}

.singularity-toolbar label.title {
    font-weight: bold;
    font-size: 15px;
}

/* All toolbar buttons: consistent height filling the toolbar, no extra padding variation */
.singularity-toolbar button,
.singularity-toolbar button.flat {
    min-height: 34px;
    min-width: 34px;
    padding: 0 8px;
    border-radius: 8px;
}

/* SegmentedControl base. Pill-style group, no border. */
.segmented-control {
    background-color: alpha(@text_color, 0.06);
    border-radius: 8px;
    padding: 2px;
}
.segmented-inner {
    min-height: 24px;
}
.segmented-button {
    background-color: transparent;
    color: alpha(@window_fg_color, 0.65);
    border-radius: 6px;
    padding: 2px 14px;
    font-size: 12px;
    min-height: 24px;
    min-width: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented-button:hover {
    color: @window_fg_color;
    background-color: alpha(@text_color, 0.04);
}
button.segmented-button.active,
button.segmented-button.active:hover,
button.segmented-button.active:focus,
button.segmented-button.active:checked {
    background-color: @accent_color;
    color: @accent_fg_color;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 1px 3px alpha(black, 0.18);
}

/* SegmentedControl inside toolbar: no vertical margin so toolbar stays 46px */
.singularity-toolbar .segmented-control {
    margin: 0 4px;
}
.singularity-toolbar .segmented-inner {
    min-height: 30px;
}
.singularity-toolbar .segmented-button {
    padding: 3px 14px;
}

.singularity-toolbar button:hover,
.singularity-toolbar button.flat:hover {
    min-height: 34px;
    padding: 0 8px;
}

.singularity-toolbar button image,
.singularity-toolbar button.flat image {
    min-width: 16px;
    min-height: 16px;
}

.singularity-toolbar entry {
    min-height: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.singularity-toolbar windowcontrols {
    margin-left: 12px;
}

.singularity-toolbar windowcontrols button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 2px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 999px;
    color: alpha(@text_color, 0.7);
}

.singularity-toolbar windowcontrols button:hover {
    background-color: @hover_white;
    color: @text_color;
}

.singularity-toolbar windowcontrols button:active {
    background-color: alpha(@text_color, 0.2);
}

.singularity combobox window {
    background-color: @window_tint;
    color: white;
    border: 1px solid alpha(@text_color, 0.1);
}

.singularity switch {
    border: none;
    background-color: alpha(@text_color, 0.1);
    border-radius: 999px;
    color: transparent;
    outline: none;
}

.singularity switch:checked {
    background-color: @accent_color;
}

.singularity switch slider {
    background-color: white;
    border-radius: 999px;
    margin: 2px;
    min-width: 20px;
    min-height: 20px;
    box-shadow: 0 2px 4px alpha(@shadow_color, 0.2);
    border: none;
    outline: none;
}

.singularity check,
.singularity radio {
    background-color: alpha(@text_color, 0.1);
    border: 1.5px solid alpha(@text_color, 0.35);
    color: @accent_fg;
    min-width: 18px;
    min-height: 18px;
    margin: 2px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.singularity check { border-radius: 5px; }
.singularity radio { border-radius: 100%; }

.singularity check:hover,
.singularity radio:hover { border-color: @accent_color; }

.singularity check:checked,
.singularity check:indeterminate,
.singularity radio:checked {
    background-color: @accent_color;
    border-color: @accent_color;
    color: @accent_fg;
}

.singularity scale trough {
    background-color: alpha(@text_color, 0.1);
    border-radius: 999px;
    min-height: 6px;
    border: none;
    outline: none;
}

.singularity scale highlight {
    background-color: @accent_color;
    border-radius: 999px;
    border: none;
    outline: none;
    min-height: 6px;
    min-width: 6px;
}

.singularity scale slider {
    background-color: white;
    border-radius: 999px;
    min-width: 16px;
    min-height: 16px;
    margin: -5px;
    box-shadow: 0 2px 4px alpha(@shadow_color, 0.2);
    border: none;
    outline: none;
}

.app-title {
    font-weight: bold;
    font-size: 14px;
}

/* Global Menu Bar (custom GlobalMenuBar widget) */
.singularity .global-menu-bar {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.singularity .global-menu-item {
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 6px;
    padding: 2px 8px;
    min-height: 0;
    color: inherit;
    transition: background-color 0.1s;
}

.singularity .global-menu-item:hover,
.singularity .global-menu-item.active {
    background-color: alpha(@text_color, 0.12);
    box-shadow: none;
    border: none;
    outline: none;
}

.singularity .global-menu-item:focus,
.singularity .global-menu-item:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

.singularity popover.global-menu-popover {
    padding: 4px;
}

.singularity popover {
    background-color: @surface_raised;
    border: 1px solid alpha(@text_color, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px alpha(@shadow_color, 0.5);
    padding: 0;
}

/* Context menus must carry their own opaque background unconditionally -
   not all parents sit under a `.singularity` ancestor (e.g. popovers
   parented from a ColumnView row in Files list mode), which otherwise left
   the menu transparent. Target the class directly + the contents node that
   actually paints in GTK4. */
/* Context menu: surface is transparent + padded so the visible card can
   carry a real drop shadow without being clipped. The ContextMenu Vala
   class compensates the visual offset with set_offset(-20, -20) so the
   card still lands where the user clicked. */
popover.context-menu,
popover.menu,
entry > popover,
entry > popover.background,
.entry > popover {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 20px;
}
popover.context-menu > contents,
popover.menu > contents,
entry > popover > contents,
entry > popover.background > contents,
.entry > popover > contents {
    background-color: @surface_raised;
    color: @text_color;
    border: 1px solid alpha(@text_color, 0.1);
    border-radius: 12px;
    /* Same two-layer recipe as .dialog-card for visual consistency. */
    box-shadow:
        0 1px 2px alpha(@shadow_color, 0.30),
        0 6px 14px alpha(@shadow_color, 0.42);
    padding: 4px;
}
popover.menu modelbutton,
entry > popover modelbutton {
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 0;
    color: @text_color;
}
popover.menu modelbutton:hover,
entry > popover modelbutton:hover {
    background-color: alpha(@accent_color, 0.2);
    color: @text_color;
}
popover.menu modelbutton:active,
popover.menu modelbutton:focus,
entry > popover modelbutton:active,
entry > popover modelbutton:focus {
    background-color: alpha(@accent_color, 0.3);
    color: @text_color;
}

.singularity modelbutton {
    border-radius: 6px;
    padding: 5px 10px;
    min-height: 0;
    color: white;
    transition: background-color 0.1s;
    border: none;
    box-shadow: none;
    outline: none;
}

.singularity modelbutton:hover,
.singularity modelbutton:focus,
.singularity modelbutton:focus-visible {
    background-color: alpha(@text_color, 0.1);
    box-shadow: none;
    outline: none;
    border: none;
}

.singularity modelbutton:checked {
    background-color: alpha(@text_color, 0.08);
    box-shadow: none;
    border: none;
}

/* Separator inside dropdown menus */
.singularity popover separator,
.singularity popover.menu separator {
    background-color: alpha(@text_color, 0.08);
    min-height: 1px;
    margin: 3px 8px;
    border: none;
    box-shadow: none;
}

/* Sub-menu arrow indicator */
.singularity modelbutton.has-submenu>arrow {
    min-width: 14px;
    min-height: 14px;
}

.osd-toolbar {
    background-color: alpha(@shadow_color, 0.7);
    transition: opacity 0.3s ease;
    border-radius: 0 0 12px 12px;
    margin: 0 20px;
    border: none;
}

.osd-controls {
    background-color: alpha(@shadow_color, 0.7);
    border-radius: 24px;
    padding: 16px;
    transition: opacity 0.3s ease;
    border: 1px solid alpha(@text_color, 0.1);
}

.large-button {
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 999px;
}

.large-button image {
    -gtk-icon-size: 24px;
}

/* Context Menu (ContextMenu widget / MenuRow) */
.menu-row,
button.menu-row,
button.flat.menu-row,
popover .menu-row {
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 6px;
    padding: 2px 8px;
    min-height: 28px;
    min-width: 180px;
    transition: background-color 0.1s;
}

/* Override GTK4 Adwaita default button padding with high specificity */
.singularity popover.context-menu button.flat.menu-row,
.singularity popover.context-menu .menu-row {
    padding: 2px 8px;
    min-height: 28px;
}

.singularity popover.context-menu button.flat.menu-row > box,
.singularity popover.context-menu .menu-row > box,
.singularity popover.context-menu button.flat.menu-row > *,
.singularity popover.context-menu .menu-row > * {
    margin: 0;
    padding: 0 2px;
}

.menu-row:hover,
button.menu-row:hover,
button.flat.menu-row:hover,
popover .menu-row:hover {
    background-color: @accent_color;
    color: white;
    box-shadow: none;
}

/* Destructive menu rows (e.g. Force Kill exposed via Shift+right-click on
   the dock). Red text in idle state, red background on hover. */
.singularity popover.context-menu .menu-row.destructive-action {
    color: #e01b24;
}
.singularity popover.context-menu .menu-row.destructive-action:hover {
    background-color: #e01b24;
    color: white;
}
.singularity popover.context-menu .menu-row.destructive-action:hover * {
    color: white;
}

/* Labels and images inside hovered menu rows must also be white */
.menu-row:hover *,
button.menu-row:hover *,
button.flat.menu-row:hover *,
popover .menu-row:hover * {
    color: white;
}

.menu-row:focus,
button.menu-row:focus,
button.flat.menu-row:focus {
    outline: none;
    box-shadow: none;
}

.menu-row label,
button.menu-row label,
button.flat.menu-row label {
    font-weight: 400;
    font-size: 13px;
}

.global-menu-popover .menu-row label {
}

.singularity popover.context-menu {
    padding: 4px;
}

.singularity popover.context-menu>contents {
    padding: 4px;
}

.singularity popover.context-menu separator {
    background-color: alpha(@text_color, 0.08);
    min-height: 1px;
    margin: 3px 4px;
    border: none;
    box-shadow: none;
}

.singularity popover.context-menu .menu-row.selected {
    background-color: alpha(@accent_color, 0.2);
}

.singularity popover.context-menu .dock-mpris-widget {
    border-radius: 6px;
    background-color: alpha(@accent_color, 0.08);
}
.singularity popover.context-menu .dock-mpris-cover {
    border-radius: 12px;
}
.singularity popover.context-menu .dock-mpris-cover image {
    border-radius: 12px;
}
.singularity popover.context-menu .dock-mpris-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
}

/* Override any gridview/flowbox button padding for context menu items */
gridview popover.context-menu button.menu-row,
flowbox popover.context-menu button.menu-row {
    padding: 0 4px;
    min-height: 28px;
    min-width: 0;
    font-size: 13px;
}

.singularity separator {
    background-color: alpha(@text_color, 0.08);
    min-height: 1px;
    border: none;
}

.singularity scrollbar trough {
    background-color: transparent;
    border: none;
}

.singularity scrollbar slider {
    background-color: alpha(@text_color, 0.2);
    border-radius: 999px;
    min-width: 6px;
    min-height: 6px;
    margin: 2px;
    border: none;
}

.singularity scrollbar slider:hover {
    background-color: alpha(@text_color, 0.4);
}

.singularity scrollbar.hovering slider {
    background-color: alpha(@text_color, 0.3);
}

.singularity .wallpaper-gallery {
    background-color: @card_bg;
    border-radius: 12px;
    padding: 12px;
}

.singularity .wallpaper-item {
    padding: 4px;
    border-radius: 8px;
    background-color: transparent;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.singularity .wallpaper-item:hover {
    background-color: @card_hover_bg;
}

.singularity .wallpaper-item:active,
.singularity .wallpaper-item:checked {
    background-color: @accent_color;
    border-color: @accent_color;
}

.singularity .wallpaper-image {
    border-radius: 6px;
}

.singularity .suggested-action {
    background-color: @accent_color;
    color: white;
}

.singularity .suggested-action:hover {
    background-color: alpha(@accent_color, 0.9);
}

.singularity .preview-frame {
    border-radius: 12px;
    padding: 0;
    border: none;
    background-color: transparent;
}

.singularity .wallpaper-preview {
    border-radius: 12px;
    box-shadow: 0 4px 12px alpha(@shadow_color, 0.3);
}

.singularity .delete-button {
    background-color: alpha(@shadow_color, 0.6);
    color: white;
    border-radius: 999px;
    padding: 4px;
    min-width: 24px;
    min-height: 24px;
    border: none;
    box-shadow: none;
}

.singularity .delete-button:hover {
    background-color: @destructive_color;
}

.toggles-grid {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
}

.singularity .toggle-tile {
    background-color: alpha(@text_color, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
    transition: all 200ms ease;
    min-height: 0;
    border: none;
    margin: 3px;
    color: alpha(@text_color, 0.9);
    box-shadow: none;
}

.singularity .toggle-tile:hover {
    background-color: alpha(@text_color, 0.15);
}

.singularity .toggle-tile.active {
    background-color: @accent_color;
    color: white;
}

.singularity .toggle-tile.active:hover {
    filter: brightness(1.1);
}

.singularity .toggle-tile image {
    margin-right: 8px;
}

.singularity .toggle-tile label {
    font-weight: 500;
    font-size: 13px;
}

.singularity popover:not(.context-menu)>contents {
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 5px;
}

.singularity popover arrow {
    background-color: transparent;
    border: none;
}

.singularity .flat {
    background-color: transparent;
}

.singularity .tab-bar {
    padding: 0 4px;
    margin: 0 4px;
    border-bottom: none;
}

.singularity .tab-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 6px;
    padding: 4px 10px;
    margin: 1px 2px;
    min-width: 80px;
    min-height: 0;
    color: alpha(@text_color, 0.5);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.singularity .tab-button:hover {
    background-color: alpha(@text_color, 0.08);
    color: white;
}

.singularity .tab-button:active {
    background-color: alpha(@text_color, 0.12);
    color: white;
    box-shadow: none;
}

.singularity .tab-button.active {
    background-color: alpha(@text_color, 0.15);
    color: white;
    font-weight: 600;
    box-shadow: none;
    border-radius: 6px;
}

/* Single tab mode: no background, no hover highlight */
.singularity .tab-button.single-tab,
.singularity .tab-button.single-tab:hover,
.singularity .tab-button.single-tab:active {
    background-color: transparent;
    box-shadow: none;
    color: white;
    font-weight: 600;
}

.singularity button.tab-close-button {
    min-width: 20px;
    min-height: 20px;
    padding: 2px;
    margin-left: 4px;
    background: none;
    border: none;
    box-shadow: none;
    color: alpha(@text_color, 0.5);
    opacity: 0;
    transition: opacity 0.15s ease;
    border-radius: 50%;
}

.singularity button.tab-close-button image {
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.singularity .tab-button:hover button.tab-close-button {
    opacity: 1;
}

.singularity button.tab-close-button:hover {
    background-color: alpha(@text_color, 0.2);
    color: white;
    border-radius: 50%;
}

.singularity columnview header button {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    border: none;
    min-height: 24px;
    padding: 4px 8px;
    margin: 0;
}

.singularity columnview header button:hover {
    background-color: alpha(@text_color, 0.05);
}

.singularity columnview header {
    border-bottom: 1px solid @border_color;
    background-color: transparent;
    color: alpha(@text_color, 0.7);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    margin: 0;
}

.singularity .file-picker-scroll {
    border: 1px solid @border_color;
    border-radius: 12px;
    background-color: transparent;
}

.singularity .file-picker-scroll columnview,
.singularity .file-picker-scroll listview,
.singularity .file-picker-scroll gridview {
    background-color: transparent;
}

.singularity .file-picker-scroll columnview row,
.singularity .file-picker-scroll listview row {
    background-color: transparent;
}

.singularity .file-picker-scroll columnview header {
    background-color: alpha(@text_color, 0.03);
    border-bottom: 1px solid @border_color;
}

.singularity .file-picker-scroll columnview header button:first-child {
    border-top-left-radius: 12px;
}

.singularity .file-picker-scroll columnview header button:last-child {
    border-top-right-radius: 12px;
}

.singularity .places-sidebar {
    background-color: transparent;
    border-right: 1px solid @border_color;
}

.singularity .places-sidebar list {
    background-color: transparent;
}

.singularity .places-sidebar row {
    padding: 0;
    margin: 4px 8px;
    border-radius: 8px;
}

.singularity-shell .places-sidebar row:selected {
    background-color: alpha(@text_color, 0.1);
}

.singularity-shell .places-sidebar row:hover {
    background-color: alpha(@text_color, 0.05);
}

/* Force native GTK4 view widgets to use our dark background */
.singularity gridview,
.singularity listview,
.singularity columnview,
.singularity .view {
    background-color: @window_bg;
    color: @text_color;
}

/* Viewport itself is transparent so it inherits the parent frame background
 * (@window_tint on app-frame). Data views above set their own solid color. */
.singularity scrolledwindow > viewport {
    background-color: transparent;
    color: @text_color;
}

.singularity .file-grid {
    background-color: transparent;
    padding: 12px;
    padding-top: 60px;
}

.singularity .file-grid gridview > child {
    margin: 2px 6px;
    padding: 0;
    min-height: 90px;
}

.singularity .file-grid-item {
    padding: 8px;
    border-radius: 10px;
    margin: 0;
    min-width: 100px;
    min-height: 74px;
}

.singularity .file-grid-item:hover {
    background-color: alpha(@text_color, 0.05);
}

/* Suppress default GTK square selection highlight on the gridview child node */
.singularity gridview>child:selected {
    background: none;
    box-shadow: none;
    outline: none;
}

/* Rounded accent selection on the item itself */
.singularity .file-grid-item:selected,
gridview>child:selected>.file-grid-item,
columnview row:selected {
    background-color: alpha(@accent_color, 0.2);
    border-radius: 10px;
    color: inherit;
}

/* Suppress default GTK square selection on list rows */
columnview row:selected:focus,
columnview row:selected {
    outline: none;
    box-shadow: none;
}

/* Suppress square inner cell selection - only outer row gets accent */
.singularity columnview row:selected > *,
.singularity columnview row:selected > * > *,
.singularity columnview row:selected > * > * > * {
    background: none;
    box-shadow: none;
    outline: none;
    border: none;
}

.singularity .file-grid-item label {
    font-size: 12px;
    color: alpha(@text_color, 0.9);
}

/* Cut visual feedback - dim the item and show scissors badge */
.singularity .file-grid-item.cut {
    opacity: 0.4;
}

.singularity columnview row .cut {
    opacity: 0.4;
}

.cut-badge {
    margin: 2px;
    opacity: 0.85;
}

.properties-dialog {
    min-width: 350px;
}

.properties-dialog grid {
    padding: 8px 0;
}

.dialog-titlebar {
    background: transparent;
    border: none;
    padding: 12px 16px;
    min-height: 40px;
}

.dialog-titlebar .title {
    font-weight: 600;
    font-size: 14px;
}

button.circular-button {
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: alpha(@text_color, 0.05);
}

button.circular-button:hover {
    background-color: @hover_white;
}

button.circular-button:active {
    background: alpha(@text_color, 0.15);
}

.close-button,
.dialog button.close-button,
button.close-button {
    min-width: 32px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 6px;
    background: alpha(@text_color, 0.08);
    border: none;
    box-shadow: none;
    color: alpha(@text_color, 0.9);
}

.close-button:hover,
.dialog .close-button:hover,
.dialog button.close-button:hover,
button.close-button:hover {
    background: alpha(@text_color, 0.15);
    box-shadow: none;
    color: white;
}

.close-button:active,
.dialog .close-button:active,
.dialog button.close-button:active,
button.close-button:active {
    background: alpha(@text_color, 0.2);
    box-shadow: none;
}

.close-button:checked,
button.close-button:checked,
togglebutton.close-button:checked {
    background: @accent_color;
    box-shadow: none;
    color: white;
}

.desktop-icons {
    background: transparent;
}

.desktop-icon {
    padding: 8px;
    border-radius: 8px;
    transition: background 200ms ease;
}

.desktop-icon:hover {
    background: alpha(@text_color, 0.15);
}

.desktop-icon:active {
    background: alpha(@text_color, 0.2);
}

.desktop-icon image {
    border-radius: 4px;
    -gtk-icon-shadow: 0 2px 4px alpha(@shadow_color, 0.4);
}

.desktop-icon-label {
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.desktop-icon-placeholder {
    background: alpha(@text_color, 0.2);
    border: 2px dashed alpha(@text_color, 0.5);
    border-radius: 8px;
}

.preview-dialog {
    background: @window_tint;
    border-radius: 16px;
    padding: 0;
}

.preview-area {
    background: alpha(@shadow_color, 0.2);
    border-radius: 8px;
}

.preview-image {
    border-radius: 8px;
}

.preview-text-scroll {
    background: white;
    border-radius: 8px;
    color: black;
}

.preview-text-scroll textview {
    background: transparent;
    color: black;
}

.preview-icon {
    opacity: 0.8;
}

.singularity .settings-row {
    min-height: 40px;
    padding: 4px 8px;
    border-radius: 8px;
}

.singularity .settings-row:hover {
    background-color: alpha(@text_color, 0.05);
}

.singularity .close-button {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 999px;
    background-color: alpha(@text_color, 0.1);
    color: white;
    border: none;
    box-shadow: none;
    transition: all 0.2s;
}

.singularity .close-button:hover {
    background-color: alpha(@text_color, 0.2);
}

.singularity .close-button:active,
.singularity .close-button:checked {
    background-color: @hover_white;
    color: white;
}

.dim-label {
    opacity: 0.6;
    font-size: 13px;
}

.dialog-title {
    font-size: 16px;
    font-weight: bold;
}

.dialog-subtitle {
    font-size: 13px;
    opacity: 0.7;
}

window.singularity.dock-window,
window.singularity.panel-window,
window.singularity.desktop-icons,
.singularity.window.dock-window,
.singularity.window.panel-window,
.singularity.window.desktop-icons {
    background-color: transparent;
}

/* AppDialog: window itself is transparent; the visible card lives a few
   pixels inside so its drop shadow has room to render. */
window.singularity.dialog {
    background-color: transparent;
    border: none;
    padding: 0;
}
/* Two-layer drop shadow for real depth: tight contact + softer ambient,
   stays inside SHADOW_MARGIN (20 px). The 1px border on top adds the
   crisp edge that sells the raised-card look. */
.dialog-card {
    background-color: @window_tint;
    color: @text_color;
    border-radius: 16px;
    border: 1px solid @border_color;
    box-shadow:
        0 1px 2px alpha(black, 0.22),
        0 6px 14px alpha(black, 0.34);
}

/* Legacy: kept so anything still keying on `.singularity.dialog` (e.g. the
   plain-content dialog used before the card refactor) still looks decent. */
.singularity.dialog .dialog-content {
    color: @text_color;
}

/* Full-screen overlay dialogs: dim the whole screen, card is in content_box */
.singularity.dialog.dialog-overlay {
    background-color: alpha(@shadow_color, 0.55);
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.singularity.dialog.dialog-overlay .dialog-content {
    background-color: @window_tint;
    border-radius: 20px;
    border: 1px solid alpha(white, 0.10);
    box-shadow: 0 12px 48px alpha(@shadow_color, 0.55);
}

.singularity.dialog.transparent {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.singularity .workspace-preview {
    background-color: transparent;
    margin: 4px 12px;
    padding: 0;
    transition: all 250ms ease;
    border: none;
    border-radius: 16px;
}

.singularity .workspace-clipper {
    border-radius: 12px;
    box-shadow: 0 4px 12px alpha(@shadow_color, 0.4);
    border: 1px solid transparent;
    transition: all 250ms ease;
}

.singularity .workspace-clipper picture,
.singularity .workspace-clipper image,
.singularity .workspace-clipper .workspace-preview-content {
    border-radius: 12px;
    /* Arrotonda anche il contenuto interno */
}

.singularity .workspace-preview:hover .workspace-clipper {
    border-color: alpha(@text_color, 0.2);
    box-shadow: 0 8px 24px alpha(@shadow_color, 0.5);
    background-color: alpha(@text_color, 0.05);
}

.singularity .workspace-preview.active .workspace-clipper {
    border-color: alpha(@accent_color, 0.4);
    box-shadow: 0 0 0 1px alpha(@accent_color, 0.2), 0 8px 32px alpha(@shadow_color, 0.4);
}

.singularity .workspace-preview.selected .workspace-clipper {
    border-color: @accent_color;
    border-width: 2px;
    box-shadow: 0 0 0 1px @accent_color, 0 0 15px alpha(@accent_color, 0.4), 0 8px 32px alpha(@shadow_color, 0.6);
}

.singularity .workspace-preview.drag-over .workspace-clipper {
    border-color: white;
    box-shadow: 0 0 15px alpha(@text_color, 0.4);
    background-color: alpha(@text_color, 0.15);
}

.singularity .workspace-card-label-box {
    background-color: alpha(@shadow_color, 0.5);
    border-radius: 6px;
    padding: 2px 8px;
    border: 1px solid alpha(@text_color, 0.05);
    margin: 6px;
}

.singularity .workspace-card-label {
    font-size: 10px;
    font-weight: 800;
    color: white;
    opacity: 0.8;
}

.singularity .ghost-workspace .workspace-clipper {
    background-color: alpha(@text_color, 0.03);
    border: 1px dashed alpha(@text_color, 0.15);
    box-shadow: none;
}

.singularity .ghost-workspace:hover .workspace-clipper {
    background-color: alpha(@text_color, 0.08);
    border-color: alpha(@text_color, 0.3);
    border-style: solid;
}

.singularity .ghost-workspace image {
    opacity: 0.4;
    transition: all 0.2s ease;
}

.singularity .ghost-workspace:hover image {
    opacity: 1.0;
    transform: scale(1.1);
}

.singularity .workspace-window-preview {
    background-color: alpha(@text_color, 0.1);
    border-radius: 4px;
    border: 1px solid alpha(@text_color, 0.1);
}

.singularity .workspace-window-preview image {
    border-radius: 4px;
}

.singularity .ghost-workspace:hover {
    background-color: alpha(@text_color, 0.1);
    border-color: alpha(@text_color, 0.4);
}

.singularity .heading {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
}

.singularity .preferences-group {
    background-color: @card_bg;
    border: 1px solid @border_color;
    border-radius: 24px;
    padding: 0;
}

.singularity .preferences-group .heading {
    font-size: 17px;
    font-weight: 700;
}

.singularity .preferences-list {
    background-color: transparent;
    border-radius: 0;
}

.singularity .preferences-row {
    background-color: transparent;
    border-bottom: 1px solid alpha(@text_color, 0.05);
    min-height: 50px;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s;
    border-radius: 0;
}

.singularity .preferences-row:last-child {
    border-bottom: 0;
}

.singularity .preferences-row:hover {
    background-color: alpha(@text_color, 0.05);
}

.singularity .preferences-row:first-child {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.singularity .preferences-row:last-child {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.title {
    font-weight: 800;
    font-size: 15px;
}

.subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}

.singularity .confirm-row .confirm-content {
    background-color: alpha(@destructive_color, 0.08);
    border-top: 1px solid alpha(@destructive_color, 0.2);
    border-radius: 0 0 8px 8px;
    padding: 8px 12px;
}

.singularity .confirm-row.revealed {
    background-color: alpha(@destructive_color, 0.04);
}

.singularity .expander-content {
    background-color: alpha(@shadow_color, 0.2);
    border-top: 1px solid alpha(@text_color, 0.05);
    padding: 0;
}

.singularity .page-header {
    min-height: 48px;
    padding: 12px 12px 0 12px;
    margin-bottom: 16px;
}

.singularity .preferences-row .circular-button {
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    margin: 0;
}

.singularity-calendar {
    padding: 10px;
    background-color: transparent;
}

.calendar-day-btn {
    border-radius: 50%;
    padding: 0;
    min-width: 32px;
    min-height: 32px;
    color: @text_color;
    background-color: transparent;
    font-size: 13px;
    transition: all 0.2s;
}

.calendar-day-btn:hover {
    background-color: alpha(@text_color, 0.1);
}

.calendar-day-btn.today {
    background-color: @accent_color;
    color: white;
    font-weight: bold;
}

.calendar-day-btn.dim-label {
    opacity: 0.3;
}

.event-dot {
    background-color: @accent_color;
    border-radius: 50%;
    min-width: 4px;
    min-height: 4px;
    margin-top: 2px;
}

.calendar-day-btn.today .event-dot {
    background-color: black;
}

/* Notification Bubbles (live popup display) */
window.notification-display {
    background: transparent;
}

.notification-bubble {
    background-color: @window_bg;
    border-radius: 16px;
    border: 1px solid alpha(@text_color, 0.10);
    box-shadow: 0 4px 24px alpha(@shadow_color, 0.55);
    min-width: 340px;
    margin: 20px;
}

.notification-header {
    /* no extra background */
}

.notification-app-name {
    font-size: 11px;
    font-weight: 600;
    color: alpha(white, 0.50);
}

.notification-close {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    color: alpha(white, 0.35);
}

.notification-close:hover {
    background-color: alpha(white, 0.12);
    color: white;
}

.notification-icon {
    opacity: 0.95;
}

.notification-title {
    font-size: 13px;
    font-weight: 700;
    color: white;
}

.notification-body {
    font-size: 12px;
    color: alpha(white, 0.65);
}

.notification-actions-box {
    padding: 0 12px 12px 12px;
}

.notification-action {
    background-color: alpha(@text_color, 0.10);
    border: none;
    box-shadow: none;
    border-radius: 99px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    margin: 2px 3px;
}

.notification-action:hover {
    background-color: alpha(@text_color, 0.18);
}

.notification-action:active {
    background-color: alpha(@text_color, 0.25);
}

/* Notification Item Card */
.notification-item-card {
    background-color: alpha(@text_color, 0.08);
    border-radius: 16px;
    border: 1px solid alpha(@text_color, 0.05);
    transition: background-color 0.2s;
}

.notification-item-card:hover {
    background-color: alpha(@text_color, 0.12);
}

.notification-item-card .bold {
    font-weight: 600;
    font-size: 14px;
}

.notification-item-card .caption {
    font-size: 12px;
}

.notification-group {
    background-color: alpha(@text_color, 0.08);
    border-radius: 16px;
    border: 1px solid alpha(@text_color, 0.05);
    padding: 0;
}

.notification-group-header {
    border-radius: 16px;
}

.notification-group-header:hover {
    background-color: alpha(@text_color, 0.06);
}

.notification-group-badge {
    background-color: @accent_color;
    color: white;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    padding: 0;
}

.notification-group-badge-text {
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 0;
    margin: 0;
}

.notification-group-appname {
    font-size: 13px;
    font-weight: 600;
}

.notification-group-preview {
    font-size: 11px;
    opacity: 0.55;
}

.notification-group-sep {
    margin: 0 8px;
    opacity: 0.3;
}

.notification-group-item {
    border-radius: 0;
    border: none;
    border-top: 1px solid alpha(@text_color, 0.05);
}

.notification-group-item:last-child {
    border-radius: 0 0 16px 16px;
}

/* Page Specifics */
.calendar-notifications-page {
    background-color: transparent;
}

.calendar-notifications-page .h3 {
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 4px;
}

.singularity .avatar {
    border-radius: 100%;
    background-color: @card_bg;
    border: 2px solid transparent;
}

.auth-dim-window {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.auth-dim-overlay {
    background-color: alpha(@shadow_color, 0.5);
}

/* auth-dialog now uses ShellDialog full-overlay - card styled like power-card */
window.auth-dialog .dialog-overlay-bg {
    background-color: alpha(@shadow_color, 0.55);
}
window.auth-dialog .dialog-content {
    background-color: @window_bg;
    border-radius: 20px;
    border: 1px solid alpha(@text_color, 0.10);
    box-shadow: 0 12px 48px alpha(@shadow_color, 0.55);
}
window.auth-dialog .power-card {
    min-width: 360px;
}

/* placeholder dimmed in preferences entry rows */
.singularity .preferences-entry > text > placeholder {
    opacity: 0.4;
}

/* Flat entry inside a row: no background, no padding so text aligns with title */
.singularity .preferences-entry {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    outline: none;
}

.singularity .preferences-entry > text {
    padding: 0;
}

.singularity .preferences-entry:focus {
    background: transparent;
    box-shadow: none;
}

/* password-reveal-button kept for backward compat but now uses flat+circular */
.password-reveal-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 24px;
    min-height: 24px;
    border-radius: 999px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    outline: none;
}

.password-reveal-button:hover {
    background-color: transparent;
    opacity: 0.4;
    box-shadow: none;
}

.password-reveal-button:active {
    background-color: transparent;
    opacity: 1.0;
    box-shadow: none;
}

/* Generalized data-view styling shared by file/process/task lists.
   Apps add the `singularity-data-view` class to a Gtk.ColumnView (or
   add `file-view` for the Files-specific legacy alias) and inherit
   consistent row height + transparent background so the parent
   surface (`.singularity-content`) shows through. */
.singularity-data-view columnview row,
.file-view columnview row {
    min-height: 36px;
}

.singularity columnview.singularity-data-view,
.singularity columnview.singularity-data-view > listview,
.singularity columnview.file-view,
.singularity columnview.file-view > listview {
    background-color: transparent;
}

.singularity .col-browser-wrapper,
.singularity .col-browser-wrapper > scrolledwindow > viewport {
    background-color: transparent;
}

/* Top padding only when bubble-bar (CSD) is active. SSD mode has no
   overlay bubbles so no top reserve is needed. Column view (.file-view)
   is excluded - its wrapper already carries the .singularity-view-edge
   margin-top, and the simpler .file-view { padding-top: 0 } rule below
   needs to win. */
.singularity-app:not(.ssd-mode) .file-grid {
    padding-top: 60px;
}

.singularity .monitor-preview-container {
    background-color: @surface_overlay;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 12px alpha(@shadow_color, 0.3);
    border: 1px solid alpha(@text_color, 0.1);
}

/* HoverControls widget */

/* Default: bubble bar is always visible. Apps whose content can't make
   room for it (video playback, fullscreen photo viewer) add the
   `singularity-hover-on-content` class to the overlay so the bar fades
   in on hover and out otherwise. */
.singularity-hover-controls {
    opacity: 1;
    transition: opacity 0.18s ease;
}
.singularity-hover-on-content .singularity-hover-controls {
    opacity: 0;
}
.singularity-hover-on-content:hover .singularity-hover-controls,
.singularity-hover-on-content .singularity-hover-controls:hover {
    opacity: 1;
}
/* Bubble base: neutral translucent dark glass that reads on any
   background. Padding leaves breathing room on left/right so the pill
   rounding never clips inner content; icon-only buttons (GTK adds
   `.image-button` when built from an icon name) tighten to 20x20.
   For a suggested-action bubble (picker confirm, primary CTA), add
   `.suggested-action` to opt into the chip-active accent treatment. */
.singularity-hover-btn,
button.singularity-hover-btn,
button.flat.singularity-hover-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 99px;
    background-color: alpha(black, 0.45);
    border: 1px solid alpha(white, 0.18);
    color: white;
    box-shadow: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.singularity-hover-btn.image-button,
button.singularity-hover-btn.image-button,
button.flat.singularity-hover-btn.image-button {
    padding: 2px;
}
.singularity-hover-btn.text-button,
button.singularity-hover-btn.text-button,
button.flat.singularity-hover-btn.text-button {
    padding: 0 10px;
}
.singularity-hover-btn image,
button.singularity-hover-btn image,
button.flat.singularity-hover-btn image {
    -gtk-icon-size: 12px;
    color: white;
}
.singularity-hover-btn label,
button.singularity-hover-btn label,
button.flat.singularity-hover-btn label {
    color: white;
    font-size: 12px;
    font-weight: 500;
    min-height: 0;
    margin: 0;
    padding: 0;
}
.singularity-hover-btn box,
button.singularity-hover-btn box,
button.flat.singularity-hover-btn box {
    min-height: 0;
    margin: 0;
    padding: 0;
}
.singularity-hover-btn:hover,
button.singularity-hover-btn:hover,
button.flat.singularity-hover-btn:hover {
    background-color: alpha(black, 0.6);
    border-color: alpha(white, 0.28);
}
.singularity-hover-btn:active,
button.singularity-hover-btn:active,
button.flat.singularity-hover-btn:active {
    background-color: alpha(black, 0.75);
}

/* Label bubble (status text in the bubble bar). Tight horizontal
   padding so it doesn't read as a separate pill, white text to match
   the icon bubbles. Apps can opt back into the dimmed look via the
   dim-label + caption classes (auto-applied via add_bubble_label
   with `dimmed: true`). */
.singularity-hover-label {
    padding: 2px 13px;
    color: white;
    font-size: 12px;
    font-weight: 500;
}

/* Search bubble: same outer-shape contract as the path bubble in
   Files. The SearchBubble Box carries the bubble shell (via the
   .singularity-hover-btn class auto-added by add_bubble_*), and
   everything inside resets so the inner entry doesn't pile on its
   own border / padding / shadow. */
.singularity-search-bubble {
    padding: 2px;
}
.singularity-search-bubble entry,
.singularity-search-bubble .search-entry {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0 6px;
    min-height: 18px;
    color: white;
    font-size: 12px;
}
.singularity-search-bubble entry:focus-within,
.singularity-search-bubble .search-entry:focus-within {
    border: none;
    box-shadow: none;
}
.singularity-search-bubble entry > text,
.singularity-search-bubble .search-entry > text {
    color: white;
    caret-color: white;
}
.singularity-search-bubble image {
    color: alpha(white, 0.7);
    -gtk-icon-size: 12px;
}

/* Segmented control inside a bubble: kill the outer panel chrome so
   the SegmentedControl reads as a compact segmented pill matching
   the bubble visual. Inner buttons reuse the bubble's white-on-dark
   palette; the selected one gets an accent tint. */
.singularity-hover-segmented {
    background-color: transparent;
    padding: 0;
    border-radius: 99px;
    min-height: 0;
}
.singularity-hover-segmented .segmented-inner {
    background-color: alpha(white, 0.10);
    border-radius: 99px;
    padding: 2px;
    min-height: 0;
}
.singularity-hover-segmented button.segmented-button {
    background-color: transparent;
    color: white;
    border: none;
    box-shadow: none;
    border-radius: 99px;
    padding: 2px 10px;
    min-height: 0;
    font-size: 12px;
    font-weight: 500;
}
.singularity-hover-segmented button.segmented-button:hover {
    background-color: alpha(white, 0.10);
}
.singularity-hover-segmented button.segmented-button.active {
    background-color: alpha(@accent_color, 0.65);
    color: white;
}

/* Suggested-action variant: opt-in chip-active accent treatment for
   primary CTAs only (e.g. picker confirm). */
.singularity-hover-btn.suggested-action,
button.singularity-hover-btn.suggested-action,
button.flat.singularity-hover-btn.suggested-action {
    background-color: alpha(@accent_color, 0.45);
    border-color: alpha(@accent_color, 0.6);
}
.singularity-hover-btn.suggested-action:hover,
button.singularity-hover-btn.suggested-action:hover,
button.flat.singularity-hover-btn.suggested-action:hover {
    background-color: alpha(@accent_color, 0.6);
    border-color: alpha(@accent_color, 0.75);
}
.singularity-hover-btn.suggested-action:active,
button.singularity-hover-btn.suggested-action:active,
button.flat.singularity-hover-btn.suggested-action:active {
    background-color: alpha(@accent_color, 0.75);
}

/* Path bubble internals: breadcrumb buttons / home icon must round-match
   the bubble so the hover halo isn't a square clipped at the bubble
   edge. Padding kept tight so the bubble sizes to the breadcrumb. */
.files-path-bubble {
    min-height: 0;
    padding: 2px;
}

/* Standard content surface auto-applied by Window.set_content().
   Every app's main content area gets this translucent dark wash so
   the visual rhythm matches across windows. */
.singularity-content {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Top divider + reserve for content surfaces (list, column, process
   table) that sit directly under the bubble bar. The bar is an overlay
   so the content needs its own top margin to not flow under it. Single
   libsingularity primitive - every first-party app uses this class. */
.singularity-app:not(.ssd-mode) .singularity-view-edge {
    border-top: 1px solid alpha(@text_color, 0.08);
}

.file-view {
    padding-top: 0px;
}

.singularity-view-edge .file-view { padding-top: 0; }

/* Hard reset on every descendant: GTK's default `flat` button + inner
   Label/Image/Entry keep contributing min-height/padding that snowballs
   into the parent bubble, making it taller than the other bubbles. */
.files-path-bubble box,
.files-path-bubble label,
.files-path-bubble image,
.files-path-bubble entry,
.files-path-bubble spinbutton {
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}
.files-path-bubble entry,
.files-path-bubble spinbutton {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 2px 6px;
}
.files-path-bubble entry:focus-within,
.files-path-bubble spinbutton:focus-within {
    box-shadow: none;
    border: none;
}
.files-path-bubble .path-button,
.files-path-bubble button.path-button,
.files-path-bubble button.flat.path-button {
    border-radius: 20px;
}
.files-path-bubble label {
    color: alpha(white, 0.85);
    font-size: 12px;
}

/* Split container */
.welcome-page-split {
    background: transparent;
}

/* Right pane gets a visible divider in wide/horizontal mode */
.welcome-page-right {
    border-left: 1px solid alpha(@borders, 0.7);
}
/* Whatever widget set_extra_widget() injects gets a small left gutter
   so it doesn't butt up against the divider. */
.welcome-page-right-content {
    margin-left: 12px;
}

/* Card layout (1-2 actions): stacked horizontal cards */
.welcome-page-card {
    border-radius: 12px;
    border: 1px solid alpha(@text_color, 0.08);
    background-color: alpha(@text_color, 0.05);
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.welcome-page-card:hover {
    background-color: alpha(@text_color, 0.10);
    border-color: alpha(@accent_color, 0.35);
}
.welcome-page-card:active {
    background-color: alpha(@accent_color, 0.12);
}

/* List layout (3+ actions): grouped list like iOS Settings */
.welcome-page-list {
    border-radius: 12px;
    border: 1px solid alpha(@text_color, 0.08);
    background-color: alpha(@text_color, 0.04);
    box-shadow: none;
}
.welcome-page-row {
    border-radius: 0;
    background-color: transparent;
    transition: background-color 0.12s ease;
}
.welcome-page-row:hover {
    background-color: alpha(@text_color, 0.06);
}
.welcome-page-row:active {
    background-color: alpha(@accent_color, 0.12);
}
.welcome-page-row + .welcome-page-row {
    border-top: 1px solid alpha(@text_color, 0.06);
}

/* Chip / ChipBar */
.chip-bar {
    background-color: alpha(@shadow_color, 0.25);
    border-top: 1px solid alpha(@text_color, 0.07);
    min-height: 34px;
}

.chip {
    border-radius: 20px;
    background-color: alpha(@accent_color, 0.18);
    border: 1px solid alpha(@accent_color, 0.25);
    transition: background-color 0.12s ease;
}

.chip:hover {
    background-color: alpha(@accent_color, 0.28);
}

.chip.active {
    background-color: alpha(@accent_color, 0.45);
    border-color: alpha(@accent_color, 0.6);
}

/* Drag-to-reorder: the chip being dragged is dimmed in place while its
   translucent copy (the drag icon) follows the cursor. */
.chip.chip-dragging {
    opacity: 0.35;
}

/* Insertion marker showing which side the dragged chip will land on. */
.chip.drop-before {
    box-shadow: inset 3px 0 0 0 @accent_color;
}
.chip.drop-after {
    box-shadow: inset -3px 0 0 0 @accent_color;
}

.chip-body {
    padding: 2px 8px 2px 12px;
    font-size: 12px;
    font-weight: 500;
    color: alpha(white, 0.75);
    min-height: 0;
    border-radius: 20px 0 0 20px;
}

.chip.active .chip-body {
    color: white;
}

.chip-close {
    padding: 2px 6px 2px 2px;
    min-height: 0;
    min-width: 0;
    border-radius: 0 20px 20px 0;
    color: alpha(white, 0.5);
}

.chip-close:hover {
    color: white;
    background-color: alpha(white, 0.1);
}

/* Monitor OSD (displays page) */
window.monitor-osd {
    background-color: transparent;
}
.monitor-osd-number {
    font-size: 120px;
    font-weight: 900;
    color: white;
}

/* Column browser (Miller columns) */
.col-browser {
    background-color: transparent;
}
.col-browser-pane {
    min-width: 240px;
    background-color: transparent;
}
.col-browser-sep {
    min-width: 1px;
    background-color: @border_color;
}
.col-browser-list {
    background-color: transparent;
}
.col-browser-row {
    border-radius: 0;
    min-height: 28px;
}
.col-browser-row:hover {
    background-color: alpha(@accent_color, 0.08);
}
.col-browser-row:selected,
.col-browser-row:selected:hover {
    background-color: alpha(@accent_color, 0.18);
    color: @text_color;
}

/* Disk usage level bar */
.disk-usage-bar {
    min-height: 4px;
    border-radius: 2px;
    margin: 2px 0;
}
.disk-usage-bar trough {
    border-radius: 2px;
    min-height: 4px;
}
.disk-usage-bar block.filled {
    background: @accent_color;
    border-radius: 2px;
}
.disk-usage-bar.disk-usage-high block.filled {
    background: @error_color;
}
.disk-usage-bar.disk-usage-moderate block.filled {
    background: @warning_color;
}

/* Disk cards in Disks page */
button.disk-card {
    border-radius: 10px;
    padding: 0;
    min-width: 160px;
    min-height: 160px;
}
button.disk-card:hover {
    background-color: alpha(@text_color, 0.08);
}
.disk-card-child,
flowboxchild.disk-card-child {
    background: none;
    border: none;
    padding: 0;
    min-width: 0;
}
flowboxchild.disk-card-child:selected,
flowboxchild.disk-card-child:focus {
    background: none;
    outline: none;
    box-shadow: none;
}

/* Sidebar file picker */
.file-picker-shortcuts {
    margin-top: 4px;
}
.file-picker-shortcut {
    padding: 4px 6px;
    border-radius: 6px;
}
.file-picker-shortcut label.caption {
    font-size: 0.7em;
}
.file-picker-row {
    border-radius: 6px;
}
.file-picker-list row {
    border-radius: 6px;
}

/* Hot corner visual hints - dedicated overlay windows per corner */
.corner-hint {
    min-width: 112px;
    min-height: 112px;
    opacity: 0;
    transition: opacity 180ms ease, transform 220ms ease;
}
.corner-hint.visible {
    opacity: 1;
}
.corner-hint-glow {
    min-width: 112px;
    min-height: 112px;
}
.corner-hint-badge {
    background: radial-gradient(circle at 30% 30%, alpha(@accent_color, 0.8), alpha(@accent_color, 0.3));
    border-radius: 50%;
    padding: 6px;
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translate(0, 0);
}
.corner-hint-badge.visible {
    animation: corner-bounce 300ms cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
}

@keyframes corner-bounce {
    0% { transform: translate(0, 0); }
    50% { transform: translate(12px, 12px); }
    100% { transform: translate(8px, 8px); }
}
.corner-hint-badge image {
    margin: 0;
    padding: 0;
}
.corner-hint.visible .corner-hint-badge {
    transform: scale(1.0);
}
.corner-hint-tl {
    transform: scale(0.75);
}
.corner-hint-tl .corner-hint-glow {
    background: radial-gradient(circle at 0% 0%, alpha(@accent_color, 0.28) 0%, alpha(@accent_color, 0.10) 42%, transparent 72%);
}
.corner-hint-tl .corner-hint-badge {
}
.corner-hint-tr {
    transform: scale(0.75);
}
.corner-hint-tr .corner-hint-glow {
    background: radial-gradient(circle at 100% 0%, alpha(@accent_color, 0.28) 0%, alpha(@accent_color, 0.10) 42%, transparent 72%);
}
.corner-hint-tr .corner-hint-badge {
}
.corner-hint-bl {
    transform: scale(0.75);
}
.corner-hint-bl .corner-hint-glow {
    background: radial-gradient(circle at 0% 100%, alpha(@accent_color, 0.28) 0%, alpha(@accent_color, 0.10) 42%, transparent 72%);
}
.corner-hint-bl .corner-hint-badge {
}
.corner-hint-br {
    transform: scale(0.75);
}
.corner-hint-br .corner-hint-glow {
    background: radial-gradient(circle at 100% 100%, alpha(@accent_color, 0.28) 0%, alpha(@accent_color, 0.10) 42%, transparent 72%);
}
.corner-hint-br .corner-hint-badge {
}
.corner-hint.visible.corner-hint-tl,
.corner-hint.visible.corner-hint-tr,
.corner-hint.visible.corner-hint-bl,
.corner-hint.visible.corner-hint-br {
    transform: scale(1.0);
}

/* Debug HUD Overlay */
.debug-hud {
    background-color: alpha(@window_bg_color, 0.92);
    border-radius: 12px;
    border: 1px solid alpha(@accent_color, 0.45);
    box-shadow: 0 4px 24px alpha(black, 0.4);
    min-width: 230px;
}

.debug-hud-title {
    font-weight: bold;
    color: @accent_color;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.debug-hud-row {
    font-family: monospace;
    font-size: 11px;
    color: @window_fg_color;
    opacity: 0.9;
}

/* DevTools modular overlay - shares the debug-hud d3d aesthetic */
.devtools-overlay {
    background: transparent;
}

.devtools-sidebar {
    background-color: alpha(@window_bg_color, 0.92);
    border-radius: 0 12px 12px 0;
    border: 1px solid alpha(@accent_color, 0.45);
    border-left: none;
    box-shadow: 0 4px 24px alpha(black, 0.5);
    padding: 10px 8px;
}

.devtools-sidebar-title {
    font-family: monospace;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: @accent_color;
    margin-bottom: 4px;
}

.devtools-sidebar-section {
    font-family: monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: @window_fg_color;
    opacity: 0.45;
}

.devtools-sidebar-btn {
    font-family: monospace;
    font-size: 11px;
    color: @window_fg_color;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 0;
}

.devtools-sidebar-btn:hover {
    background-color: alpha(@accent_color, 0.18);
}

.devtools-sidebar-btn.devtools-active {
    background-color: alpha(@accent_color, 0.30);
    color: @accent_color;
}

.devtools-panel {
    background-color: alpha(@window_bg_color, 0.90);
    border-radius: 10px;
    border: 1px solid alpha(@accent_color, 0.45);
    box-shadow: 0 6px 28px alpha(black, 0.55);
}

.devtools-panel-header {
    background-color: alpha(@accent_color, 0.22);
    border-radius: 9px 9px 0 0;
    padding: 4px 6px 4px 10px;
}

.devtools-panel-title {
    font-family: monospace;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: @accent_color;
}

.devtools-panel-close {
    font-family: monospace;
    font-size: 11px;
    color: @window_fg_color;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 5px;
}

.devtools-panel-close:hover {
    background-color: alpha(#ff4d4d, 0.6);
    color: white;
}

.devtools-panel-body {
    padding: 8px;
}

.devtools-row {
    padding: 2px 0;
}

.devtools-row-key,
.devtools-tree-node,
.devtools-event-row,
.devtools-note {
    font-family: monospace;
    font-size: 11px;
    color: @window_fg_color;
}

.devtools-note {
    opacity: 0.5;
}

.devtools-tree-sing {
    color: @accent_color;
    font-weight: bold;
}

.devtools-tree-root {
    font-family: monospace;
    font-size: 11px;
    color: @accent_color;
}

.devtools-event-row {
    font-size: 10px;
    opacity: 0.92;
}

.devtools-events {
    background: transparent;
}

.devtools-events row {
    padding: 1px 2px;
}

.devtools-outline {
    outline: 2px solid #39ff14;
    outline-offset: -2px;
}

.devtools-resize {
    background-image: linear-gradient(135deg,
        transparent 0%, transparent 55%,
        alpha(@accent_color, 0.7) 55%, alpha(@accent_color, 0.7) 70%,
        transparent 70%, transparent 80%,
        alpha(@accent_color, 0.7) 80%, alpha(@accent_color, 0.7) 95%,
        transparent 95%);
    border-radius: 0 0 9px 0;
}


/* Window flat mode */

/* Transparent drag strip - invisible but grabbable */
.flat-drag-strip {
    background: transparent;
    min-height: 24px;
}

/* Close button shown in flat mode (must be visible on any background) */
.flat-close-btn {
    background-color: rgba(0, 0, 0, 0.35);
    color: white;
    border-radius: 50%;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.flat-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.55);
}

.singularity .media-player-card {
    border-radius: 24px;
    border: 1px solid @border_color;
}

/* --------------------- Overview widgets --------------------- */

.overview-widget {
    border-radius: 20px;
    transition: box-shadow 180ms ease, transform 180ms ease;
}
.overview-widget-loading {
    background-color: alpha(@window_fg_color, 0.05);
    border-radius: 20px;
}
.overview-widget.dragging {
    opacity: 0.5;
    transform: scale(0.97);
}
.overview-widget-handle {
    background: alpha(@window_bg_color, 0.55);
    border-radius: 999px;
    padding: 3px 12px;
    color: alpha(@window_fg_color, 0.7);
    transition: opacity 160ms ease;
}

/* Resize mode - accent outline + pill handles on the dragged edges. */
.overview-widget-resize-active {
    outline: 2px dashed @accent_bg_color;
    outline-offset: -1px;
    border-radius: 22px;
}
.overview-resize-handle {
    background: @accent_bg_color;
    border-radius: 999px;
    box-shadow: 0 0 0 2px alpha(white, 0.7);
    transition: transform 120ms ease;
}
.overview-resize-handle:hover { transform: scale(1.18); }

/* Live resize preview - translucent accent frame floated over the grid
   showing the widget's target footprint while a handle is being dragged. */
.overview-resize-preview {
    background: alpha(@accent_bg_color, 0.18);
    border: 2px solid alpha(@accent_bg_color, 0.85);
    border-radius: 22px;
}

/* Drop indicator - soft accent halo around the item where the dragged
   element would be inserted. No layout change, just visual feedback. */
.drop-target-here {
    box-shadow: 0 0 0 3px alpha(@accent_bg_color, 0.65),
                0 0 24px alpha(@accent_bg_color, 0.45);
    border-radius: 18px;
    transition: box-shadow 120ms ease;
}

/* Clock - soft frosted veil so it doesn't disappear into the wallpaper. */
.overview-clock {
    border-radius: 20px;
    background: alpha(@window_bg_color, 0.35);
    border: 1px solid alpha(@window_fg_color, 0.08);
    box-shadow: 0 1px 2px alpha(black, 0.18) inset,
                0 1px 4px alpha(black, 0.12);
}
.overview-clock-time {
    letter-spacing: 0.5px;
}

/* System stats - uses individual "cards" per metric. */
.overview-sysstats {
    border-radius: 20px;
    background: alpha(@window_bg_color, 0.30);
    border: 1px solid alpha(@window_fg_color, 0.08);
}
.overview-sysstats-card {
    border-radius: 12px;
    background: alpha(@window_fg_color, 0.04);
}

/* Quick notes - paper-yellow tint with dark text. The dark theme bleeds
   through the TextView's `text` node, so override colour + background on
   every nested node explicitly. */
.overview-notes,
.overview-notes-view {
    background-color: #fff4b8;
    color: #2b2b2b;
    border-radius: 20px;
    border: 1px solid alpha(black, 0.06);
}
.overview-notes label { color: #2b2b2b; }
.overview-notes textview,
.overview-notes textview.view,
.overview-notes scrolledwindow,
.overview-notes scrolledwindow viewport,
.overview-notes textview text,
.overview-notes textview > text {
    background-color: #fff4b8;
    background-image: none;
    color: #2b2b2b;
    caret-color: #2b2b2b;
}
.overview-notes textview text selection {
    background-color: alpha(#000, 0.18);
    color: #2b2b2b;
}

/* Calculator - distinct flat buttons with grouped accents. */
.overview-calculator {
    border-radius: 20px;
    background: alpha(@window_bg_color, 0.50);
    border: 1px solid alpha(@window_fg_color, 0.10);
}
.overview-calc-display {
    padding: 6px 12px;
    font-feature-settings: "tnum";
}
.overview-calc-btn {
    border-radius: 12px;
    padding: 8px;
    min-width: 0;
    min-height: 0;
    font-weight: 600;
}
.overview-calc-num    { background: alpha(@window_fg_color, 0.06); }
.overview-calc-func   { background: alpha(@window_fg_color, 0.12); }
.overview-calc-op     { background: alpha(@accent_bg_color, 0.20); }
.overview-calc-accent { background: @accent_bg_color; color: @accent_fg_color; }
.overview-calc-btn:hover  { background-color: alpha(@window_fg_color, 0.18); }
.overview-calc-accent:hover { background-color: shade(@accent_bg_color, 1.1); }

/* Photos carousel - full-bleed images. */
.overview-photos {
    border-radius: 20px;
    background: black;
}
.overview-photo {
    border-radius: 18px;
}

/* ----------------- Dock resource stack (macOS-style) ----------------- */
.dock-resources-sep {
    margin: 8px 4px;
    min-width: 1px;
    background: alpha(@window_fg_color, 0.18);
}
.dock-resource-thumb,
.dock-polaroid {
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 0 1px 4px alpha(black, 0.35);
}
.dock-polaroid-fan { }
.dock-folder-popover > contents {
    border-radius: 16px;
    padding: 4px;
}
.dock-folder-entry button {
    border-radius: 12px;
    padding: 4px;
}

/* Definitive context-menu contents background (must be LAST). The popover
   node itself stays transparent (the shadow padding around the card needs
   to be see-through); only the inner contents carries the opaque bg so
   the visible pill is always solid, even when parented outside the
   `.singularity` subtree (Files ColumnView, Monitor list, etc.). */
popover.context-menu > contents {
    background-color: @surface_raised;
    color: @text_color;
}

/* Singularity OverlaySearch: floating spotlight / palette card. Same
   two-layer shadow recipe as the dialog card so depth feels consistent.
   The OverlaySearch widget itself is always added inside an Overlay so
   the card floats above the host content; the outer box is transparent
   and ignores hit-tests when the search is closed (the widget toggles
   visibility internally). */
.singularity-overlay-search-card {
    background-color: @window_tint;
    border: 1px solid @border_color;
    border-radius: 12px;
    padding: 6px;
    min-width: 480px;
    box-shadow:
        0 1px 2px alpha(black, 0.22),
        0 6px 14px alpha(black, 0.34);
}
.singularity-overlay-search-entry {
    min-height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    background-color: transparent;
}
.singularity-overlay-search-entry:focus {
    background-color: alpha(@text_color, 0.04);
}
.singularity-overlay-search-list {
    background-color: transparent;
    padding: 4px 0;
}
.singularity-overlay-search-list row {
    border-radius: 6px;
    margin: 1px 2px;
    background-color: transparent;
}
/* Selected row tracks the system accent so the active entry pops. */
.singularity-overlay-search-list row:selected {
    background-color: @accent_color;
    color: @accent_fg_color;
}
.singularity-overlay-search-list row:hover {
    background-color: alpha(@accent_color, 0.18);
}

/* Singularity Carousel: dot indicator under the stack. */
.singularity-carousel-dots { padding: 2px 0; }
.singularity-carousel-dot {
    background-color: alpha(@text_color, 0.25);
    border-radius: 99px;
    transition: background-color 0.2s ease;
}
.singularity-carousel-dot.active {
    background-color: @accent_color;
}
