/* === QUASAR TEMPLATE — Architect split-shell ===
   Glassmorphism + soft gradients + minimalist spacing.
   Rounded-XL cards, pill buttons, subtle blur everywhere. */

html[data-template="Quasar"] body {
    font-size: 14px;
    letter-spacing: .15px;
    background:
        radial-gradient(1400px 700px at 5% -5%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
        radial-gradient(1000px 600px at 100% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent) 0%, transparent 55%),
        radial-gradient(900px 500px at 50% 110%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-template="Quasar"] header {
    background: color-mix(in srgb, var(--header-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
            backdrop-filter: blur(24px) saturate(1.3);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    position: sticky;
    top: 0;
    z-index: 50;
}

html[data-template="Quasar"] .header-top {
    background: transparent;
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}

html[data-template="Quasar"] .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 14px;
    padding: 10px 16px !important;
    border-radius: 999px;
    transition: background 180ms var(--ease), color 180ms var(--ease);
}
html[data-template="Quasar"] .navbar-nav .nav-link:hover,
html[data-template="Quasar"] .navbar-nav .nav-link.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

html[data-template="Quasar"] .page-title {
    font-weight: 300;
    font-size: 34px;
    letter-spacing: -.02em;
    color: var(--text-strong);
    line-height: 1.1;
}

html[data-template="Quasar"] .card,
html[data-template="Quasar"] .groupstabes,
html[data-template="Quasar"] .panel,
html[data-template="Quasar"] .fusion-card,
html[data-template="Quasar"] .modal-content {
    background: color-mix(in srgb, var(--card) 75%, transparent) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 20px;
    box-shadow:
        0 2px 8px rgba(0,0,0,.04),
        0 20px 48px rgba(0,0,0,.08),
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
    transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
html[data-template="Quasar"] .card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow:
        0 4px 12px rgba(0,0,0,.06),
        0 24px 64px var(--accent-glow),
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
}

html[data-template="Quasar"] .btn,
html[data-template="Quasar"] input[type="submit"],
html[data-template="Quasar"] input[type="button"] {
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .1px;
    border: 0;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
html[data-template="Quasar"] .btn-primary,
html[data-template="Quasar"] .btn-success {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
    color: var(--accent-fg) !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}
html[data-template="Quasar"] .btn-primary:hover,
html[data-template="Quasar"] .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}
html[data-template="Quasar"] .btn-secondary {
    background: color-mix(in srgb, var(--card-2) 70%, transparent) !important;
    color: var(--text) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
}

html[data-template="Quasar"] input[type="text"],
html[data-template="Quasar"] input[type="email"],
html[data-template="Quasar"] input[type="password"],
html[data-template="Quasar"] input[type="search"],
html[data-template="Quasar"] input[type="url"],
html[data-template="Quasar"] select,
html[data-template="Quasar"] textarea,
html[data-template="Quasar"] .form-control {
    border-radius: 999px !important;
    padding: 11px 20px !important;
    background: color-mix(in srgb, var(--card) 60%, transparent) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
    color: var(--text) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
html[data-template="Quasar"] textarea,
html[data-template="Quasar"] textarea.form-control {
    border-radius: 20px !important;
}
html[data-template="Quasar"] input:focus,
html[data-template="Quasar"] select:focus,
html[data-template="Quasar"] textarea:focus,
html[data-template="Quasar"] .form-control:focus {
    background: color-mix(in srgb, var(--card) 90%, transparent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
    outline: 0 !important;
}

html[data-template="Quasar"] h1,
html[data-template="Quasar"] h2,
html[data-template="Quasar"] h3 {
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--text-strong);
}
html[data-template="Quasar"] h4,
html[data-template="Quasar"] h5,
html[data-template="Quasar"] h6 {
    font-weight: 500;
    letter-spacing: -.005em;
}

html[data-template="Quasar"] .badge-success,
html[data-template="Quasar"] .badge-warning {
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .2px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
html[data-template="Quasar"] .badge-success {
    background: color-mix(in srgb, var(--success) 22%, transparent) !important;
    color: var(--success) !important;
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}
html[data-template="Quasar"] .badge-warning {
    background: color-mix(in srgb, var(--warning) 22%, transparent) !important;
    color: var(--warning) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

html[data-template="Quasar"] .breadcrumb {
    background: color-mix(in srgb, var(--card) 50%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 12px;
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    display: inline-flex;
}

html[data-template="Quasar"] footer {
    background: color-mix(in srgb, var(--header-bg) 60%, transparent);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

html[data-template="Quasar"] .bg-gray {
    background: color-mix(in srgb, var(--bg-2) 70%, transparent) !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

html[data-template="Quasar"] .modal-content {
    border-radius: 24px;
}

html[data-template="Quasar"] .dropdown-menu {
    background: color-mix(in srgb, var(--card) 75%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
            backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
}