/* Glassmorphism Styles */

:root {
    /* Palette from user */
    --color-first: #363b4e;
    --color-second: #4f3b78;
    --color-third: #927fbf;
    --color-fourth: #c4bbf0;

    /* RGB versions for transparency */
    --rgb-first: 54, 59, 78;
    --rgb-second: 79, 59, 120;
    --rgb-third: 146, 127, 191;
    --rgb-fourth: 196, 187, 240;
}

body {
    background: linear-gradient(135deg, var(--color-first) 0%, var(--color-second) 100%);
    min-height: 100vh;
    background-attachment: fixed;
    color: #ffffff;
}

/* Glass Containers (Cards, Dropdowns, Alerts) */
.card, 
.dropdown-content, 
.alert, 
.modal-box,
.toast .alert {
    background: rgba(var(--rgb-first), 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--rgb-fourth), 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

/* Override daisyUI base backgrounds to prevent opaque layers */
.bg-base-100, 
.bg-base-200, 
.bg-base-300,
.bg-base-content {
    background-color: transparent !important;
}

/* Inputs, Selects */
.input, .select, .textarea, .file-input {
    background: rgba(var(--rgb-first), 0.3);
    border: 1px solid rgba(var(--rgb-fourth), 0.3);
    color: #ffffff;
    backdrop-filter: blur(5px);
}

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-fourth);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--rgb-fourth), 0.2);
}

/* Buttons */
.btn {
    border: none;
    backdrop-filter: blur(5px);
}

.btn-primary {
    background: rgba(var(--rgb-second), 0.8);
    color: #fff;
    border: 1px solid rgba(var(--rgb-third), 0.4);
}

.btn-primary:hover {
    background: rgba(var(--rgb-second), 1);
}

.btn-ghost {
    color: var(--color-fourth);
}

.btn-ghost:hover {
    background: rgba(var(--rgb-fourth), 0.1);
}

/* Tables */
.table {
    background: transparent;
    color: #fff;
}

.table :where(thead, tfoot) {
    background: rgba(var(--rgb-first), 0.5);
    color: var(--color-fourth);
    border-bottom: 1px solid rgba(var(--rgb-fourth), 0.2);
}

.table-zebra tbody tr:nth-child(even) {
    background-color: rgba(var(--rgb-fourth), 0.05);
}

.table td, .table th {
    border-bottom: 1px solid rgba(var(--rgb-fourth), 0.1);
}

.table tr.hover:hover th, 
.table tr.hover:hover td {
    background-color: rgba(var(--rgb-third), 0.2);
}

/* Text Colors */
.card-title {
    color: var(--color-fourth);
}

.label-text {
    color: var(--color-fourth);
}

/* SVG Icons */
svg.stroke-current {
    stroke: var(--color-fourth);
}

/* D3 Chart Text Overrides */
.chart-text, g.tick text {
    fill: var(--color-fourth) !important;
}