@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;600;700&display=swap');

:root {
    --ukb-ink: #18333a;
    --ukb-ink-soft: #547078;
    --ukb-ink-faint: #8aa0a3;
    --ukb-paper: #f3f7f4;
    --ukb-paper-deep: #e8f0ec;
    --ukb-panel: #fcfefc;
    --ukb-line: #d7e4df;
    --ukb-line-strong: #c4d5d0;
    --ukb-petrol: #15545b;
    --ukb-petrol-deep: #123f47;
    --ukb-mint: #52b897;
    --ukb-mint-soft: #dff3ea;
    --ukb-amber: #bd7b28;
    --ukb-red: #b65254;
    --ukb-shadow: 0 11px 35px rgba(34, 76, 73, .06), 0 2px 5px rgba(34, 76, 73, .035);
}

body.theme-elegant,
body.theme-elegant-auth,
body.theme-elegant-portal {
    color: var(--ukb-ink);
    background: var(--ukb-paper);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

body.theme-elegant {
    background:
        radial-gradient(circle at 7% 2%, rgba(82, 184, 151, .08), transparent 24rem),
        var(--ukb-paper);
}

body.theme-elegant .app-shell {
    background: var(--ukb-paper);
}

body.theme-elegant .app-sidebar {
    background: var(--ukb-petrol-deep) !important;
    color: #d9f4ec;
}

body.theme-elegant .app-sidebar > div:first-child,
body.theme-elegant .app-sidebar > div:last-child {
    border-color: rgba(215, 244, 236, .13) !important;
}

body.theme-elegant .app-sidebar > div:first-child > div > div:first-child,
body.theme-elegant .app-header [style*="linear-gradient(135deg, #1d4ed8"],
body.theme-elegant .app-sidebar [style*="linear-gradient(135deg, #1d4ed8"] {
    background: linear-gradient(135deg, var(--ukb-mint), var(--ukb-petrol)) !important;
    box-shadow: 0 4px 12px rgba(82, 184, 151, .22) !important;
}

body.theme-elegant .app-sidebar [style*="color:#f1f5f9"],
body.theme-elegant .app-sidebar [style*="color:#e2e8f0"] {
    color: #effcf8 !important;
}

body.theme-elegant .app-sidebar [style*="color:#475569"] {
    color: #9fcac2 !important;
}

body.theme-elegant .nav-item {
    color: #a7c4c0;
    border-radius: 9px;
}

body.theme-elegant .nav-item:hover {
    color: #effcf8;
    background: rgba(82, 184, 151, .12);
}

body.theme-elegant .nav-item.active {
    color: #f3fffb;
    background: rgba(82, 184, 151, .2);
}

body.theme-elegant .nav-item.active .nav-icon,
body.theme-elegant .nav-item:hover .nav-icon {
    color: #8de2c0;
}

body.theme-elegant .nav-item.active::before {
    background: var(--ukb-mint);
}

body.theme-elegant .nav-icon {
    color: #769a98;
}

body.theme-elegant .section-label {
    color: #6d9691;
}

body.theme-elegant .sidebar-divider {
    background: rgba(215, 244, 236, .13);
}

body.theme-elegant .app-main-shell {
    background: var(--ukb-paper);
}

body.theme-elegant .app-header {
    color: var(--ukb-ink);
    border-color: var(--ukb-line) !important;
    background: rgba(252, 254, 252, .86) !important;
    box-shadow: 0 1px 3px rgba(34, 76, 73, .04) !important;
    backdrop-filter: blur(14px);
}

body.theme-elegant .app-header h1 {
    color: var(--ukb-petrol-deep) !important;
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: -.035em;
}

body.theme-elegant .app-header p {
    color: var(--ukb-ink-faint) !important;
}

body.theme-elegant .app-header-date {
    color: var(--ukb-ink-soft) !important;
    border-color: var(--ukb-line) !important;
    background: var(--ukb-paper) !important;
}

body.theme-elegant .app-content {
    color: var(--ukb-ink);
    background:
        radial-gradient(circle at 90% 0%, rgba(189, 123, 40, .045), transparent 23rem),
        var(--ukb-paper) !important;
}

/* Shared Tailwind surfaces */
body.theme-elegant .bg-white,
body.theme-elegant .bg-gray-50,
body.theme-elegant .bg-slate-50,
body.theme-elegant [class~="bg-white/90"],
body.theme-elegant [class~="bg-white/80"] {
    background-color: rgba(252, 254, 252, .92) !important;
}

body.theme-elegant .bg-gray-100,
body.theme-elegant .bg-slate-100,
body.theme-elegant .bg-slate-200,
body.theme-elegant [class~="bg-slate-800/50"],
body.theme-elegant [class~="bg-slate-800/70"],
body.theme-elegant [class~="bg-slate-800/80"] {
    background-color: var(--ukb-paper-deep) !important;
}

body.theme-elegant .bg-slate-950,
body.theme-elegant .bg-slate-900,
body.theme-elegant .bg-slate-800,
body.theme-elegant .bg-gray-900,
body.theme-elegant .bg-gray-800 {
    background-color: rgba(252, 254, 252, .94) !important;
}

body.theme-elegant .bg-slate-700,
body.theme-elegant .bg-gray-700 {
    background-color: #edf4f0 !important;
}

body.theme-elegant .border-white,
body.theme-elegant .border-gray-50,
body.theme-elegant .border-gray-100,
body.theme-elegant .border-gray-200,
body.theme-elegant .border-slate-700,
body.theme-elegant .border-slate-800,
body.theme-elegant .border-slate-900 {
    border-color: var(--ukb-line) !important;
}

body.theme-elegant .text-gray-900,
body.theme-elegant .text-gray-800,
body.theme-elegant .text-gray-700,
body.theme-elegant .text-slate-100,
body.theme-elegant .text-slate-200,
body.theme-elegant .text-slate-300 {
    color: var(--ukb-ink) !important;
}

body.theme-elegant .text-gray-600,
body.theme-elegant .text-gray-500,
body.theme-elegant .text-slate-400,
body.theme-elegant .text-slate-500 {
    color: var(--ukb-ink-soft) !important;
}

body.theme-elegant .text-gray-400,
body.theme-elegant .text-slate-600 {
    color: var(--ukb-ink-faint) !important;
}

body.theme-elegant .text-blue-100,
body.theme-elegant .text-blue-200,
body.theme-elegant .text-blue-300,
body.theme-elegant .text-blue-400,
body.theme-elegant .text-blue-500,
body.theme-elegant .text-blue-600,
body.theme-elegant .text-cyan-300,
body.theme-elegant .text-cyan-400,
body.theme-elegant .text-cyan-500 {
    color: var(--ukb-petrol) !important;
}

body.theme-elegant .text-emerald-300,
body.theme-elegant .text-emerald-400,
body.theme-elegant .text-emerald-500,
body.theme-elegant .text-green-500,
body.theme-elegant .text-green-600 {
    color: #2f896c !important;
}

body.theme-elegant .text-violet-300,
body.theme-elegant .text-violet-400,
body.theme-elegant .text-violet-500 {
    color: #6f7095 !important;
}

body.theme-elegant .text-amber-500,
body.theme-elegant .text-amber-600,
body.theme-elegant .text-amber-700 {
    color: var(--ukb-amber) !important;
}

body.theme-elegant .text-red-500,
body.theme-elegant .text-red-600,
body.theme-elegant .text-red-700 {
    color: var(--ukb-red) !important;
}

body.theme-elegant .bg-blue-600,
body.theme-elegant .bg-blue-500,
body.theme-elegant [class~="bg-blue-600/10"],
body.theme-elegant [class~="bg-blue-500/10"] {
    background-color: var(--ukb-petrol) !important;
}

body.theme-elegant .bg-emerald-500,
body.theme-elegant .bg-green-500,
body.theme-elegant [class~="bg-emerald-500/10"],
body.theme-elegant [class~="bg-emerald-400/10"] {
    background-color: var(--ukb-mint-soft) !important;
}

body.theme-elegant .bg-violet-500,
body.theme-elegant [class~="bg-violet-400/10"] {
    background-color: #eff1f8 !important;
}

body.theme-elegant [class~="bg-blue-600"][class~="text-white"],
body.theme-elegant [class~="bg-blue-500"][class~="text-white"] {
    color: #f4fffb !important;
}

body.theme-elegant [class~="hover:bg-blue-700"]:hover,
body.theme-elegant [class~="hover:bg-blue-600"]:hover {
    background-color: var(--ukb-petrol-deep) !important;
}

body.theme-elegant [class~="hover:bg-gray-50"]:hover,
body.theme-elegant [class~="hover:bg-gray-100"]:hover,
body.theme-elegant [class~="hover:bg-slate-800/50"]:hover {
    background-color: rgba(82, 184, 151, .08) !important;
}

/* Shared cards, controls, tables and overlays */
body.theme-elegant .shadow,
body.theme-elegant .shadow-sm,
body.theme-elegant .shadow-md,
body.theme-elegant .shadow-lg,
body.theme-elegant .shadow-xl,
body.theme-elegant .shadow-2xl {
    box-shadow: var(--ukb-shadow) !important;
}

body.theme-elegant input:not([type="checkbox"]):not([type="radio"]),
body.theme-elegant select,
body.theme-elegant textarea {
    color: var(--ukb-ink) !important;
    border-color: var(--ukb-line) !important;
    background-color: #f8fbf9 !important;
}

body.theme-elegant input::placeholder,
body.theme-elegant textarea::placeholder {
    color: #9aadae !important;
}

body.theme-elegant input:focus,
body.theme-elegant select:focus,
body.theme-elegant textarea:focus {
    border-color: var(--ukb-mint) !important;
    box-shadow: 0 0 0 3px rgba(82, 184, 151, .15) !important;
    outline: none !important;
}

body.theme-elegant table thead,
body.theme-elegant thead {
    color: var(--ukb-ink-faint);
    background-color: rgba(232, 240, 236, .6) !important;
}

body.theme-elegant table th {
    color: var(--ukb-ink-faint) !important;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.theme-elegant table td {
    border-color: rgba(215, 228, 223, .8) !important;
}

body.theme-elegant tbody tr {
    border-color: var(--ukb-line) !important;
}

body.theme-elegant tbody tr:hover {
    background-color: rgba(82, 184, 151, .065) !important;
}

body.theme-elegant button:not(.nav-item) {
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

body.theme-elegant button:not(.nav-item):hover {
    transform: translateY(-1px);
}

body.theme-elegant .fixed.inset-0 {
    background-color: rgba(18, 63, 71, .48) !important;
    backdrop-filter: blur(4px);
}

body.theme-elegant .rounded-2xl,
body.theme-elegant .rounded-xl {
    border-color: var(--ukb-line);
}

body.theme-elegant .app-header button:hover {
    background-color: var(--ukb-mint-soft) !important;
}

/* Staff login and customer portal use the same visual language. */
body.theme-elegant-auth,
body.theme-elegant-portal,
body.theme-elegant-public {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(82, 184, 151, .2), transparent 26rem),
        radial-gradient(circle at 95% 90%, rgba(189, 123, 40, .12), transparent 22rem),
        var(--ukb-paper);
}

body.theme-elegant-auth::before,
body.theme-elegant-portal::before,
body.theme-elegant-public::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    content: "";
    background-image: linear-gradient(rgba(21, 84, 91, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 84, 91, .035) 1px, transparent 1px);
    background-size: 32px 32px;
}

body.theme-elegant-auth .bg-white,
body.theme-elegant-portal .bg-white,
body.theme-elegant-public .bg-white {
    border: 1px solid var(--ukb-line);
    background: rgba(252, 254, 252, .93) !important;
    box-shadow: var(--ukb-shadow) !important;
}

body.theme-elegant-auth .text-white,
body.theme-elegant-portal .text-gray-900,
body.theme-elegant-public .text-slate-900 {
    color: var(--ukb-petrol-deep) !important;
}

body.theme-elegant-auth .text-blue-200,
body.theme-elegant-auth .text-blue-300,
body.theme-elegant-portal .text-gray-500,
body.theme-elegant-public .text-slate-600 {
    color: var(--ukb-ink-soft) !important;
}

body.theme-elegant-auth .text-blue-700,
body.theme-elegant-portal .text-blue-600,
body.theme-elegant-public .text-blue-600 {
    color: var(--ukb-petrol) !important;
}

body.theme-elegant-auth .bg-blue-600,
body.theme-elegant-portal .bg-blue-600,
body.theme-elegant-public .bg-blue-600 {
    background-color: var(--ukb-petrol) !important;
}

body.theme-elegant-auth button.bg-blue-600.text-white,
body.theme-elegant-portal button.bg-blue-600.text-white,
body.theme-elegant-public button.bg-blue-600.text-white {
    color: #f4fffb !important;
}

body.theme-elegant-auth [class~="hover:bg-blue-700"]:hover,
body.theme-elegant-portal [class~="hover:bg-blue-700"]:hover,
body.theme-elegant-public [class~="hover:bg-blue-700"]:hover {
    background-color: var(--ukb-petrol-deep) !important;
}

body.theme-elegant-auth input,
body.theme-elegant-portal input,
body.theme-elegant-public input {
    color: var(--ukb-ink) !important;
    border-color: var(--ukb-line-strong) !important;
    background: #f8fbf9 !important;
}

body.theme-elegant-auth input:focus,
body.theme-elegant-portal input:focus,
body.theme-elegant-public input:focus {
    border-color: var(--ukb-mint) !important;
    box-shadow: 0 0 0 3px rgba(82, 184, 151, .15) !important;
}

body.theme-elegant-auth [style*="linear-gradient(135deg,#1d4ed8"],
body.theme-elegant-portal [style*="linear-gradient(135deg,#1d4ed8"],
body.theme-elegant-public [style*="linear-gradient(135deg,#1d4ed8"] {
    background: linear-gradient(135deg, var(--ukb-mint), var(--ukb-petrol)) !important;
    box-shadow: 0 8px 20px rgba(21, 84, 91, .18) !important;
}

body.theme-elegant-auth .border-gray-100,
body.theme-elegant-portal .border-gray-100,
body.theme-elegant-public .border-gray-100 {
    border-color: var(--ukb-line) !important;
}

body.theme-elegant-public .card,
body.theme-elegant-public .box {
    color: var(--ukb-ink) !important;
}

body.theme-elegant-public .card {
    border-color: var(--ukb-line) !important;
    background: rgba(252, 254, 252, .94) !important;
    box-shadow: var(--ukb-shadow) !important;
}

body.theme-elegant-public .mark {
    color: #f4fffb !important;
    background: linear-gradient(135deg, var(--ukb-mint), var(--ukb-petrol)) !important;
    box-shadow: 0 8px 20px rgba(21, 84, 91, .18) !important;
}

body.theme-elegant-public .brand,
body.theme-elegant-public h1,
body.theme-elegant-public h2,
body.theme-elegant-public strong {
    color: var(--ukb-petrol-deep);
}

body.theme-elegant-public .brand small,
body.theme-elegant-public .hint,
body.theme-elegant-public .lead,
body.theme-elegant-public .secure,
body.theme-elegant-public .provider {
    color: var(--ukb-ink-soft) !important;
}

body.theme-elegant-public .input,
body.theme-elegant-public select,
body.theme-elegant-public input {
    border-color: var(--ukb-line) !important;
    background: #f8fbf9 !important;
    color: var(--ukb-ink) !important;
}

body.theme-elegant-public .choice {
    border-color: var(--ukb-line) !important;
    background: rgba(255, 255, 255, .62) !important;
}

body.theme-elegant-public .choice:has(input:checked) {
    border-color: var(--ukb-mint) !important;
    background: var(--ukb-mint-soft) !important;
}

body.theme-elegant-public .pay,
body.theme-elegant-public .button,
body.theme-elegant-public .back-link,
body.theme-elegant-public .action {
    color: #f4fffb !important;
    background: linear-gradient(135deg, var(--ukb-petrol), var(--ukb-petrol-deep)) !important;
    box-shadow: 0 10px 24px rgba(18, 63, 71, .16) !important;
}

body.theme-elegant-public .button.secondary {
    color: var(--ukb-petrol) !important;
    background: var(--ukb-mint-soft) !important;
}

body.theme-elegant-public .button.copy {
    color: #f4fffb !important;
    background: #2f896c !important;
}

body.theme-elegant-public .summary {
    border-color: #bfe3d1 !important;
    color: #216c57 !important;
    background: var(--ukb-mint-soft) !important;
}

body.theme-elegant-public .detail {
    color: var(--ukb-petrol) !important;
    background: #edf6f1 !important;
}

body.theme-elegant-public .polling {
    border-color: #ecd8b2 !important;
    background: #fffaf0 !important;
}

body.theme-elegant-public .ref {
    color: var(--ukb-ink-soft) !important;
    background: var(--ukb-paper-deep) !important;
}

body.theme-elegant-public .scene {
    opacity: .72;
    border-radius: 18px;
}

@media (max-width: 767px) {
    body.theme-elegant .app-content {
        padding: 16px !important;
    }

    body.theme-elegant .app-header {
        padding: 12px 16px !important;
    }
}