/* ==========================================================================
   Aelixar CMS — Glassmorphism utility layer
   Reusable surfaces & helpers intended for JSP class hooks
   ========================================================================== */

.glass {
    background: var(--surface);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.glass-strong {
    background: var(--surface-strong);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--border-inner-hl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.glass-card {
    background: var(--surface);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 20px;
}

.glass-panel {
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

/* gradient accents */
.bg-accent { background: var(--accent-grad); color: #fff; }
.bg-accent-soft { background: var(--accent-grad-soft); }

.text-accent {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* border styles */
.border-subtle { border: 1px solid var(--border-subtle) !important; }
.border-soft { border: 1px solid var(--border-soft) !important; }

/* rounded helpers */
.rounded-sm { border-radius: var(--radius-xs) !important; }
.rounded-md { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-md) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* shadow helpers */
.shadow-soft   { box-shadow: var(--shadow-sm) !important; }
.shadow-medium { box-shadow: var(--shadow-md) !important; }
.shadow-elev   { box-shadow: var(--shadow-lg) !important; }
.shadow-glow   { box-shadow: var(--shadow-glow) !important; }

/* glass chip — inline pill */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    color: var(--text-2);
    font-weight: 500;
}

.chip.chip-primary { background: rgba(99,102,241,.12); color: var(--accent-1); border-color: transparent; }
.chip.chip-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.chip.chip-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.chip.chip-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.chip.chip-info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }

/* list-card, used as card shell for list screens */
.list-card {
    background: var(--surface);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.list-card .card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.list-card .card-toolbar h2,
.list-card .card-toolbar h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.list-card .card-toolbar-actions { display: flex; gap: 8px; }

.list-card .card-inner { padding: 0; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-3);
}
.empty-state .icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-grad-soft);
    color: var(--accent-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.empty-state h3 { font-size: 1rem; color: var(--text-1); margin: 0 0 4px; }
.empty-state p { font-size: 0.88rem; color: var(--text-3); margin: 0 0 14px; }

/* Sticky form action bar */
.form-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    margin: 24px -20px -20px;
    background: var(--surface-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border-subtle);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    z-index: 20;
}

/* Responsive helpers specific to redesign */
@media (max-width: 768px) {
    .list-card .card-toolbar { flex-wrap: wrap; }
}

/* Decorative animated gradient (auth orbs / hero) — reusable */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .6;
    pointer-events: none;
}
.gradient-orb.orb-indigo { background: radial-gradient(circle, rgba(99,102,241,.5), transparent 70%); }
.gradient-orb.orb-pink   { background: radial-gradient(circle, rgba(236,72,153,.45), transparent 70%); }
.gradient-orb.orb-violet { background: radial-gradient(circle, rgba(168,85,247,.45), transparent 70%); }