html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.rb-grid-fixed .col-id,
.rb-grid-fixed .col-postcode,
.rb-grid-fixed .col-address {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-grid-fixed .col-id {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.rb-grid-fixed .col-voted {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.rb-grid-fixed .col-district {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.rb-grid-fixed .col-postcode {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
}

.rb-grid-fixed .col-address {
    width: 250px;
    min-width: 250px;
    max-width: 650px;
}

/* App Landing Page */
.app-tile {
    cursor: pointer;
    transition: transform 120ms ease;
}

    .app-tile:hover {
        transform: translateY(-2px);
    }

.app-tile-locked {
    opacity: 0.8;
}

/* --- CllrWay landing page --- */

.cllr-metric b {
    font-weight: 700;
}

.cllr-hero {
    border-radius: 16px;
    color: white;
    background: linear-gradient(135deg, rgba(0,107,183,0.95), rgba(62,160,255,0.70));
    position: relative;
    overflow: hidden;
}

    /* subtle highlight blob */
    .cllr-hero::after {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 220px;
        height: 220px;
        border-radius: 999px;
        background: rgba(255,255,255,0.18);
    }

.cllr-hero-title {
    font-weight: 700;
}

.cllr-hero-sub {
    opacity: 0.92;
    max-width: 72ch;
    justify-content: center;
}

.cllr-tile {
    cursor: pointer;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

    /* left accent bar */
    .cllr-tile::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, rgba(0,107,183,1), rgba(62,160,255,1));
    }

    .cllr-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    }

.cllr-icon {
    padding: 10px;
    border-radius: 12px;
    background: rgba(0,107,183,0.10);
}

.cllr-tile-locked {
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.06);
}

    .cllr-tile-locked::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: rgba(0,0,0,0.10);
    }

.cllr-icon-locked {
    padding: 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.06);
    opacity: 0.9;
}

.cllr-locked-chip {
    opacity: 0.85;
}

/* Carousel slide styling */
.cllr-slide {
    height: 220px;
    border-radius: 12px;
    color: white;
    justify-content: center;
}

.cllr-slide-1 {
    background: linear-gradient(135deg, rgba(0,107,183,0.95), rgba(0,180,255,0.70));
}

.cllr-slide-2 {
    background: linear-gradient(135deg, rgba(52,115,255,0.92), rgba(120,60,255,0.70));
}

.cllr-slide-3 {
    background: linear-gradient(135deg, rgba(0,150,120,0.92), rgba(0,107,183,0.70));
}

/* Carousel base */
.cllr-slide {
    height: 220px;
    border-radius: 12px;
    color: white;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    /* Dark overlay for text readability */
    .cllr-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, rgba(0,0,0,0.55), rgba(0,0,0,0.20) );
        z-index: 0;
    }

    /* Ensure text is above overlay */
    .cllr-slide > * {
        position: relative;
        z-index: 1;
    }

/* Image backgrounds */
.cllr-slide-img-1 {
    background: url('/images/carousel/carousel-1.jpg') center / cover no-repeat;
}

.cllr-slide-img-2 {
    background: url('/images/carousel/carousel-2.jpg') center / cover no-repeat;
}

.cllr-slide-img-3 {
    background: url('/images/carousel/carousel-3.jpg') center / cover no-repeat;
}

/* New Bits */
/* Set the carousel height */
.cllr-carousel {
    height: 220px;
}

    /* Force MudCarousel internals to fill height (MudBlazor uses these classes) */
    .cllr-carousel .mud-carousel,
    .cllr-carousel .mud-carousel-items,
    .cllr-carousel .mud-carousel-item,
    .cllr-carousel .mud-carousel-item-content {
        height: 100%;
    }

/* Full-bleed slide */
.cllr-slide {
    height: 100%;
    width: 100%;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background: center / cover no-repeat;
    display: flex;
    align-items: center;
}

    /* Overlay for readability */
    .cllr-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.20));
    }

/* Text above overlay */
.cllr-slide-content {
    position: relative;
    z-index: 1;
    padding: 16px 20px;
    color: white;
    max-width: 720px;
}

/* Background images */
.cllr-slide-img-1 {
    background-image: url('/images/carousel/carousel-1.png');
}

.cllr-slide-img-2 {
    background-image: url('/images/carousel/carousel-2.png');
}

.cllr-slide-img-3 {
    background-image: url('/images/carousel/carousel-3.png');
}





/* Main Layout */
/* Layout frame: full viewport height */
.cw-shell {
    height: 100vh;
}

/* Fixed appbar height (Dense + logo 44px typically ~56px total) */
.cw-appbar {
    z-index: 1300; /* above content */
}

/* Make MainContent fill the space between AppBar and Footer */
.cw-main {
    height: 100%;
    padding-top: var(--mud-appbar-height);
    padding-bottom: 56px; /* must match footer height below */
    box-sizing: border-box;
}

/* The only scrollable area */
.cw-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    box-sizing: border-box;
}

/* Fixed footer styling */
.cw-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300; /* above content; similar to appbar layering */
}







/* Logo click affordance */
.cw-logo {
    cursor: pointer;
}

/* Title spacing */
.cw-title {
    margin-left: 12px;
}


.app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 1 auto;
    overflow: auto; /* content scrolls, header/footer stay put */
}

.app-footer {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-appbar .mud-toolbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Legal Modal backdrop */
.legal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: #0F74BC;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal */
.legal-modal {
    background: #ffffff;
    color: #202124;
    max-width: 520px;
    width: calc(100% - 32px);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

    .rb-modal h2 {
        margin-top: 0;
    }

    .rb-modal h3 {
        margin-top: 20px;
    }

.rb-modal-actions {
    margin-top: 24px;
    text-align: right;
}

@media print {
    .no-print,
    .rb-modal-backdrop {
        display: none !important;
    }

    /* Admin */
    .admin-tile {
        cursor: pointer;
        transition: transform 120ms ease, box-shadow 120ms ease;
    }

        .admin-tile:hover {
            transform: translateY(-2px);
        }
}

/* Case manager Issue Hyperlinks */
/* Make links inside issue updates look like links */
.issue-update a,
.issue-latest-update a,
.issue-original a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    font-weight: 500;
}

    .issue-update a:hover,
    .issue-latest-update a:hover,
    .issue-original a:hover {
        text-decoration: none;
    }


/* ═══════════════════════════════════════════════════════════
   PROFILE PHOTO — circular avatar (profile page + top bar)
═══════════════════════════════════════════════════════════ */
.profile-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(15,116,188,.3);
}

.profile-avatar-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 160ms ease;
}

.profile-avatar-wrap:hover .profile-avatar-overlay {
    opacity: 1;
}

/* Top-bar avatar */
.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 4px;
    position: relative;
    flex-shrink: 0;
    transition: box-shadow 140ms ease;
}

.topbar-avatar:hover {
    box-shadow: 0 0 0 3px rgba(255,255,255,.4);
}

.topbar-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(255,255,255,.6);
}

.topbar-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.5);
}

/* ═══════════════════════════════════════════════════════════
   REDESIGNED DASHBOARD
═══════════════════════════════════════════════════════════ */

/* Hero welcome card */
.dash-hero {
    background: linear-gradient(135deg, #0F74BC 0%, #0A5A96 60%, #064578 100%);
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(15,116,188,.35);
}

.dash-hero-avatar-link {
    position: relative;
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.dash-hero-avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.7);
    display: block;
}

.dash-hero-avatar-initials {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 3px solid rgba(255,255,255,.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.dash-hero-avatar-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(15,116,188,.9);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-hero-text {
    flex: 1;
    min-width: 160px;
}

.dash-hero-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.dash-hero-sub {
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    margin-top: 4px;
}

/* Quick stats */
.dash-hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-stat {
    min-width: 72px;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: center;
}

.dash-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.dash-stat-lbl {
    font-size: .68rem;
    color: rgba(255,255,255,.8);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dash-stat-blue   { background: rgba(255,255,255,.18); }
.dash-stat-orange { background: rgba(245,158,11,.55); }
.dash-stat-teal   { background: rgba(16,185,129,.45); }
.dash-stat-purple { background: rgba(139,92,246,.5); }

/* Section label */
.dash-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: -4px;
}

/* Colourful app tiles — per-module accent colours */
.home-tile { cursor: pointer; border-radius: 16px; padding: 18px; border: 1px solid rgba(0,0,0,.08); transition: transform 140ms ease, box-shadow 140ms ease; display: flex; flex-direction: column; height: 100%; min-height: 120px; }
.home-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.home-tile-title { font-weight: 600; margin-top: 8px; }
.home-tile-metric { font-size: .72rem; color: rgba(0,0,0,.55); margin-top: 4px; }
.home-tile-metric span { font-weight: 600; }
.home-tile-metric-spacer { margin-top: 4px; min-height: 1rem; } /* keeps tiles same height when no metric */

/* Per-key colours — double-class for specificity over MudPaper defaults */
.home-tile                             { background: linear-gradient(135deg,#F8FAFC,#F1F5F9) !important; }
.home-tile.home-tile--dashboard        { background: linear-gradient(135deg,#EFF6FF,#DBEAFE) !important; }
.home-tile.home-tile--case             { background: linear-gradient(135deg,#EFF6FF,#DBEAFE) !important; }
.home-tile.home-tile--contacts         { background: linear-gradient(135deg,#F0FDF4,#DCFCE7) !important; }
.home-tile.home-tile--surgery          { background: linear-gradient(135deg,#ECFEFF,#CFFAFE) !important; }
.home-tile.home-tile--calendar         { background: linear-gradient(135deg,#ECFEFF,#CFFAFE) !important; }
.home-tile.home-tile--canvassing       { background: linear-gradient(135deg,#FFF7ED,#FEE4C4) !important; }
.home-tile.home-tile--potholes         { background: linear-gradient(135deg,#FFFBEB,#FEF3C7) !important; }
.home-tile.home-tile--hmo              { background: linear-gradient(135deg,#F5F3FF,#EDE9FE) !important; }
.home-tile.home-tile--rb26             { background: linear-gradient(135deg,#FFF1F2,#FFE4E6) !important; }
.home-tile.home-tile--core             { background: linear-gradient(135deg,#F0F9FF,#E0F2FE) !important; }
.home-tile.home-tile--interests        { background: linear-gradient(135deg,#FDF4FF,#FAE8FF) !important; }
.home-tile.home-tile--planning         { background: linear-gradient(135deg,#F0F9FF,#E0F2FE) !important; }
.home-tile.home-tile--insights         { background: linear-gradient(135deg,#F0FDFA,#CCFBF1) !important; }
.home-tile.home-tile--admin            { background: linear-gradient(135deg,#F9FAFB,#F3F4F6) !important; }

/* Icon colours per tile */
.home-tile.home-tile--dashboard .home-tile-icon .mud-icon-root { color: #3B82F6; }
.home-tile.home-tile--case      .home-tile-icon .mud-icon-root { color: #3B82F6; }
.home-tile.home-tile--contacts  .home-tile-icon .mud-icon-root { color: #22C55E; }
.home-tile.home-tile--surgery   .home-tile-icon .mud-icon-root { color: #06B6D4; }
.home-tile.home-tile--calendar  .home-tile-icon .mud-icon-root { color: #06B6D4; }
.home-tile.home-tile--canvassing .home-tile-icon .mud-icon-root { color: #F97316; }
.home-tile.home-tile--potholes  .home-tile-icon .mud-icon-root { color: #EAB308; }
.home-tile.home-tile--hmo       .home-tile-icon .mud-icon-root { color: #8B5CF6; }
.home-tile.home-tile--rb26      .home-tile-icon .mud-icon-root { color: #EF4444; }
.home-tile.home-tile--core      .home-tile-icon .mud-icon-root { color: #0EA5E9; }
.home-tile.home-tile--interests .home-tile-icon .mud-icon-root { color: #A855F7; }
.home-tile.home-tile--planning  .home-tile-icon .mud-icon-root { color: #0EA5E9; }
.home-tile.home-tile--insights  .home-tile-icon .mud-icon-root { color: #14B8A6; }
.home-tile.home-tile--admin     .home-tile-icon .mud-icon-root { color: #6B7280; }


.home-tile.home-tile--admin {
    background: linear-gradient(135deg,#EEF6FF,#F3F4F6) !important;
    /* Dash card (map + chart) */
    .dash-card {
        border-radius: 16px !important;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,.07);
    }

    .dash-card-header {
        display: flex;
        align-items: center;
        padding: 14px 16px 10px;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

/* ── Register of Interests page ── */
.roi-page { max-width: 1000px; margin: 24px auto; padding: 0 20px; }

.roi-header { display: flex; align-items: center; margin-bottom: 16px; }
.roi-header-title { display: flex; align-items: center; gap: 10px; }
.roi-title { font-weight: 600; margin: 0; }
.roi-icon { color: #A855F7; }

.roi-card { border-radius: 12px !important; }

.roi-table { border-radius: 0 !important; }
.roi-table .mud-table-head th { background: #f8f9fa; font-weight: 600; }

.roi-item-ceased { opacity: 0.55; text-decoration: line-through; }

/* ── Pledge Support Map page ── */
.pledge-map-page { max-width: 1200px; margin: 24px auto; padding: 0 20px; }
.pledge-map-header { display: flex; align-items: center; margin-bottom: 16px; }
.pledge-map-icon { color: #22c55e; }
.pledge-map-title { font-weight: 600; margin: 0; }

/* ── Planning Tracker page ── */
.planning-page { max-width: 1100px; margin: 24px auto; padding: 0 20px; }

.planning-header { display: flex; align-items: center; margin-bottom: 16px; }
.planning-header-title { display: flex; align-items: center; gap: 10px; }
.planning-title { font-weight: 600; margin: 0; }
.planning-icon { color: #0EA5E9; }

.planning-card { border-radius: 12px !important; }
.planning-table { border-radius: 0 !important; }
.planning-table .mud-table-head th { background: #f8f9fa; font-weight: 600; }