/* Match Waybar palette exactly */
@define-color base     rgba(30, 30, 46, 1.0);
@define-color text     rgba(255, 255, 255, 1.0);
@define-color blue     rgba(51, 204, 255, 0.933);
@define-color green    rgba(0, 255, 153, 0.933);
@define-color surface1 rgba(255, 255, 255, 0.08);
@define-color subtext1 rgba(255, 255, 255, 0.35);
@define-color red      rgba(255, 0, 0, 0.90);

/* Opaque so it visually matches Waybar */
@define-color panel_rgba rgba(30, 30, 46, 1.0);
@define-color card_rgba  rgba(30, 30, 46, 1.0);

* {
    color: @text;
    font-family:
        Aporetic Sans Mono,
        Iosevka Nerd Font,
        Sans;
    font-size: 13px;
}

/* Notification popup */
window#notification-window {
    background-color: @base;
}

/* Control center */
.control-center {
    background-color: @panel_rgba;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Widget headers */
.widget-title {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background-color: @surface1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Cards */
.notification-background .notification {
    background-color: @card_rgba;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Accent by urgency */
.notification.critical {
    border-left: 4px solid @red;
}
.notification.low {
    border-left: 4px solid @blue;
}
.notification.normal {
    border-left: 4px solid @green;
}

/* Meta */
.notification .app-name {
    color: @subtext1;
    font-weight: 700;
}
.notification .time {
    color: @subtext1;
    font-size: 12px;
}

/* Text */
.notification .summary {
    color: @text;
    font-weight: 800;
    font-size: 14px;
}

.notification .body {
    color: @subtext1;
    margin-top: 6px;
}

/* Buttons */
.notification button {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.notification button:hover {
    background-color: rgba(255, 255, 255, 0.14);
}