body {
    background: radial-gradient(circle at top, #0d1a12, #020403);
    color: #3aff7a;
    font-family: "Share Tech Mono", monospace;
}

.mat-card,
.mat-dialog,
.mat-select-panel,
.mat-text-field {
    background: rgba(5, 20, 10, 0.95);
    border: 1px solid #3aff7a;
    box-shadow: none;
    border-radius: 2px;
}

.mat-button,
.mat-raised-button {
    background: #050807;
    border: 1px solid #3aff7a;
    color: #3aff7a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .mat-button:hover {
        background: #0e2a18;
    }

.magic {
    border-color: #7f5cff;
    color: #bba7ff;
    text-shadow: 0 0 6px #7f5cff;
}

.crystal {
    background: linear-gradient(135deg, #201040, #050807);
    border: 1px solid #7f5cff;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.08) 3px );
    pointer-events: none;
}

.mat-input,
.mat-select {
    box-shadow: 0 0 8px rgba(58,255,122,0.3);
}

.sidebar,
.top-row,
.navbar,
.nav-scrollable,
.nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Main sidebar background */
.sidebar {
    background: linear-gradient(180deg, #050807, #0b1a12) !important;
    border-right: 2px solid #3aff7a;
    box-shadow: inset -10px 0 20px rgba(58,255,122,0.15);
}

/* Title */
.navbar-brand {
    color: #3aff7a !important;
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 2px;
}

/* Links */
.nav-link {
    color: #3aff7a !important;
    font-family: "Share Tech Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(58,255,122,0.2);
}

/* Hover */
.nav-link:hover {
    background: #0e2a18 !important;
}

/* Active page */
.nav-link.active {
    background: linear-gradient(90deg, #102818, #050807) !important;
    border-left: 4px solid #7f5cff;
    color: #bba7ff !important;
    text-shadow: 0 0 6px #7f5cff;
}

.navlink-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    cursor: pointer;
}

.rainfall-brand {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(58,255,122,0.4);
}

.rainfall-logo {
    width: 180px;
    max-width: 100%;
    filter: drop-shadow(0 0 10px rgba(127,92,255,0.6));
}

.design-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.design-table th {
    color: #7f5cff;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid rgba(127,92,255,0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.design-table td {
    color: #3aff7a;
    padding: 12px;
    border-bottom: 1px solid rgba(58,255,122,0.15);
}

.design-table tr:hover {
    background: rgba(58,255,122,0.05);
}

.design-table .actions {
    width: 120px;
    white-space: nowrap;
}

.design-panel {
    margin-top: 20px;
}

.design-editor {
    width: 400px;
}

.design-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

.design-danger {
    border-color: #ff5555 !important;
    color: #ff7777 !important;
    box-shadow: 0 0 8px rgba(255,80,80,0.6);
}
/* ===== MDC TEXT FIELD FIX ===== */

.mdc-text-field__input {
    color: #3aff7a !important;
    font-family: "Share Tech Mono", monospace;
    caret-color: #3aff7a;
}

.mdc-text-field__label {
    color: #7f5cff !important;
}

.mdc-text-field--focused .mdc-text-field__label {
    color: #bba7ff !important;
}

/* Underline / outline */
.mdc-line-ripple,
.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
    border-color: #3aff7a !important;
}

/* Focus glow */
.mdc-text-field--focused {
    box-shadow: 0 0 10px rgba(58,255,122,0.4);
}

/* ===== TEXT FIELD LABELS (MDC floating label) ===== */

/* Default (not focused, no value) */
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: rgba(127, 92, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Focused */
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #bba7ff !important;
    opacity: 1 !important;
}

/* When label is floating above (value entered or focused) */
.mdc-text-field .mdc-floating-label--float-above {
    color: #bba7ff !important;
    opacity: 1 !important;
}

/* Outlined variant notch label */
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-floating-label {
    color: rgba(127, 92, 255, 0.9) !important;
}

/* Disabled */
.mdc-text-field--disabled .mdc-floating-label {
    color: rgba(127, 92, 255, 0.45) !important;
    opacity: 1 !important;
}

.groups-cell.clickable {
    cursor: pointer;
}

/* =========================
   Filters – MatSelect (closed)
   ========================= */

.filters-bar .mdc-select__anchor {
    background: rgba(16, 10, 28, 0.92) !important;
    border: 1px solid rgba(140, 90, 255, 0.65) !important;
    border-radius: 6px !important;
    padding: 2px 6px;
    min-width: 220px;
    box-shadow: 0 0 10px rgba(140, 90, 255, 0.15);
}

/* Texte sélectionné */
.filters-bar .mdc-select__selected-text {
    color: #3cff8f !important;
    font-weight: 500;
}

/* Label */
.filters-bar .mdc-floating-label {
    color: #9f8cff !important;
}

/* Icône dropdown */
.filters-bar .mdc-select__dropdown-icon {
    color: #9f8cff !important;
}

/* Hover */
.filters-bar .mdc-select__anchor:hover {
    box-shadow: 0 0 14px rgba(140, 90, 255, 0.35);
    border-color: #b89cff;
}

/* Focus */
.filters-bar .mdc-select--focused .mdc-select__anchor {
    border-color: #3cff8f !important;
    box-shadow: 0 0 16px rgba(60, 255, 143, 0.45);
}

/* =========================
   MatSelect dropdown (open)
   ========================= */

.mdc-menu-surface {
    background: rgba(16, 10, 28, 0.98) !important;
    border: 1px solid rgba(140, 90, 255, 0.65) !important;
    box-shadow: 0 0 18px rgba(140, 90, 255, 0.25) !important;
    backdrop-filter: blur(6px);
}

.mdc-list {
    padding: 6px 0 !important;
}

/* Texte des items */
.mdc-list-item__primary-text {
    color: #3cff8f !important;
}

/* Hover */
.mdc-list-item:hover {
    background: rgba(140, 90, 255, 0.18) !important;
}

/* Sélection */
.mdc-list-item[aria-selected="true"],
.mdc-list-item--selected {
    background: rgba(60, 255, 143, 0.12) !important;
}

    .mdc-list-item--selected .mdc-list-item__primary-text {
        color: #a6ffd8 !important;
    }

/* Scroll si liste longue */
.mdc-menu .mdc-list {
    max-height: 320px;
    overflow-y: auto;
}



/* Items NON sélectionnés – état normal */
.mdc-list-item {
    background-color: transparent !important;
}

.mdc-list-item__primary-text {
    color: #b6ffdc !important; /* plus clair */
    opacity: 1 !important; /* CRUCIAL */
    text-shadow: 0 0 6px rgba(60, 255, 143, 0.35);
}

.mdc-list-item:hover {
    background: rgba(140, 90, 255, 0.22) !important;
}

.mdc-list-item:hover .mdc-list-item__primary-text {
    color: #eafff5 !important;
}

.mdc-list-item[aria-selected="true"],
.mdc-list-item--selected {
    background: rgba(60, 255, 143, 0.22) !important;
}

.mdc-list-item--selected .mdc-list-item__primary-text {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(60, 255, 143, 0.6);
}

.mdc-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mdc-menu .mdc-list {
    color: #b6ffdc !important;
}

.order-cell {
    vertical-align: middle;
}

.order-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.order-btn {
    background: transparent;
    border: 1px solid #2cff9a;
    color: #2cff9a;
    font-size: 10px;
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 14px;
    cursor: pointer;
}

.order-btn:hover {
    background: #2cff9a;
    color: #0b0014;
    box-shadow: 0 0 6px #2cff9a;
}