:root{
    /* Burgundy theme */
    --bg:#6b0e0e; /* deep burgundy */
    --bg2:#3a0707; /* darker burgundy */
    --card:#ffffff; /* keep card white for contrast */
    --accent:#ffd56b; /* warm accent that contrasts burgundy */
    --accent-2:#ff8a00; /* secondary accent */
    --muted:#6b7280;
    --danger:#dc2626;
    --radius:12px;
    --gap:16px;
    --transition:200ms cubic-bezier(.2,.8,.2,1);
    --max-w:420px;
    --shadow:0 6px 24px rgba(16,24,40,.08);
    --form-padding:24px;
}

/* Page */
html,body{
    height:100%;
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:linear-gradient(180deg, var(--bg), var(--bg2) 60%);
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Center container */
.signup-container{
    min-height:100dvh;
    display:flex;
    align-items:flex-start; /* pin signup container to the top */
    justify-content:center;
    padding:24px 12px; /* top padding and some horizontal padding */
    box-sizing:border-box;
}

/* Card */
.signup-card{
    width:100%;
    max-width:var(--max-w);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:var(--form-padding);
    box-sizing:border-box;
    border:1px solid rgba(15,23,42,.04);
}

/* Header */
.signup-card .title{
    margin:0 0 6px 0;
    font-size:1.125rem;
    font-weight:600;
    letter-spacing:0.01em;
}
.signup-card .subtitle{
    margin:0 0 18px 0;
    color:var(--muted);
    font-size:0.9rem;
}

/* Form layout */
.signup-form{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
}

/* Form row */
.form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* Labels */
.form-row label{
    font-size:0.85rem;
    color: #111827;
    font-weight:500;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea{
    appearance:none;
    width:100%;
    padding:12px 14px;
    font-size:0.95rem;
    border-radius:10px;
    border:1px solid rgba(15,23,42,.08);
    background:transparent;
    outline:none;
    transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
    box-sizing:border-box;
}

input::placeholder{
    color:rgba(15,23,42,.35);
}

/* Focus & validation */
input:focus,
select:focus,
textarea:focus{
    border-color:var(--accent);
    box-shadow:0 6px 18px rgba(37,99,235,.12);
    transform:translateY(-1px);
}

/* Error state */
.input-error{
    border-color:var(--danger) !important;
    box-shadow:0 6px 18px rgba(220,38,38,.08) !important;
}

/* Helper and error text */
.helper-text{
    font-size:0.82rem;
    color:var(--muted);
}
.error-text{
    font-size:0.82rem;
    color:var(--danger);
    display:block;
}

/* Password row with visibility toggle */
.password-row{
    position:relative;
    display:flex;
    align-items:center;
}
.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:0;
    padding:6px;
    cursor:pointer;
    color:var(--muted);
    border-radius:8px;
}
.password-toggle:focus{
    outline:2px solid rgba(37,99,235,.14);
}

/* Actions */
.actions{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.primary-btn{
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    color:#fff;
    padding:10px 14px;
    border:0;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 8px 28px rgba(37,99,235,.14);
    transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:14px;
    border:0;
    cursor:pointer;
    color:#fff;
    font-weight:800;
    font-size:1rem;
    background:linear-gradient(90deg,var(--accent-2),#ff8a00);
    background-size:200% 100%;
    position:relative;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, background-position .4s ease;
    box-shadow: 0 10px 30px rgba(124,92,255,0.08), 0 2px 0 rgba(0,0,0,0.12);
    align-self: center; /* center horizontally in the column layout */
    margin-top: 8px;
}
.cta-btn .cta-icon{ color:#fff; transform:translateX(0); transition:transform .18s ease; }
.cta-btn:hover{ transform:translateY(-3px); background-position:100% 0; box-shadow: 0 14px 40px rgba(124,92,255,0.12), 0 6px 10px rgba(0,0,0,0.10); }
.cta-btn:hover .cta-icon{ transform:translateX(6px); }
.cta-btn:active{ transform:translateY(-1px) scale(.995); }
.cta-btn:focus{ outline:3px solid rgba(124,92,255,0.18); }
.cta-btn::before{
    content:"";
    position:absolute; inset:0; border-radius:14px; padding:2px; z-index:-1;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
    mix-blend-mode: overlay;
    opacity:.8;
}
.cta-btn::after{
    content:"";
    position:absolute; inset:-4px; border-radius:18px; z-index:-2;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    filter:blur(6px); opacity:.06;
}

/* Make button responsive */
@media (max-width:420px){
    .cta-btn{ width:100%; justify-content:center; }
}

/* small icon sizing */
.cta-icon{ width:16px; height:16px; }
.primary-btn:hover{ transform:translateY(-2px); }
.primary-btn:active{ transform:translateY(0); }
.primary-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
}

/* Secondary link */
.link-btn{
    background:transparent;
    border:0;
    color:var(--accent);
    font-weight:600;
    cursor:pointer;
    padding:8px;
}

/* Checkbox row */
.checkbox-row{
    display:flex;
    gap:10px;
    align-items:center;
    font-size:0.92rem;
    color:var(--muted);
}
.checkbox-row input[type="checkbox"]{
    position:absolute; /* visually hidden but still focusable */
    width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

/* Fancy check visual */
.fancy-check{
    position:relative; gap:10px;
}
.signup-form .fancy-check{ margin:10px 0 14px 0; align-items:center; }
.custom-checkbox{
    width:22px; height:22px; border-radius:6px; display:inline-block; position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03));
    border:2px solid rgba(15,23,42,0.08);
    box-shadow:0 6px 18px rgba(2,6,23,0.06), inset 0 -2px 6px rgba(255,255,255,0.02);
    transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.fancy-check input[type="checkbox"]:focus + .custom-checkbox{ box-shadow: 0 6px 18px rgba(37,99,235,0.12), 0 0 0 6px rgba(37,99,235,0.06); }
.fancy-check input[type="checkbox"]:checked + .custom-checkbox{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-color:transparent;
    transform:translateY(-1px) scale(1.01);
}
.custom-checkbox::after{
    content:''; position:absolute; left:6px; top:2px; width:6px; height:10px; border: solid rgba(255,255,255,0.95); border-width:0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin:center; transition:transform .18s ease; opacity:0;
}
.fancy-check input[type="checkbox"]:checked + .custom-checkbox::after{ transform: rotate(45deg) scale(1); opacity:1; }

/* Hover effect */
.fancy-check:hover .custom-checkbox{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(124,92,255,0.06); }

/* Terms link */
.terms-link{ color: var(--accent-2); text-decoration:underline; font-weight:600; }
.terms-link:hover{ color: #163b8f; text-decoration:none; }

/* Modal overlay and dialog */
.modal-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.5); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; z-index:9000; }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{ width:min(720px,92%); background:var(--card); border-radius:12px; padding:20px; box-shadow:0 20px 80px rgba(7,12,35,0.6); border:1px solid rgba(15,23,42,.04); }
.modal .modal-close{ position:absolute; right:14px; top:8px; background:transparent; border:0; font-size:22px; cursor:pointer; color:var(--muted); }
.modal h3{ margin:0 0 8px 0; font-size:1.125rem; }
.modal-body{ font-size:0.95rem; color:var(--muted); max-height:48vh; overflow:auto; margin-bottom:12px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; }
.modal-accept{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); padding:8px 12px; border:0; color:#fff; border-radius:8px; cursor:pointer; }
.modal-close.alt{ background:transparent; border:1px solid rgba(15,23,42,.06); padding:8px 12px; border-radius:8px; }

/* Divider */
.divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:0.85rem;
}
.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(15,23,42,.06), transparent);
}

/* Social buttons (optional) */
.socials{
    display:flex;
    gap:10px;
}
.social-btn{
    flex:1;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid rgba(15,23,42,.06);
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:transform var(--transition);
}
.social-btn:hover{ transform:translateY(-2px) }

/* Responsive tweaks */
@media (max-width:420px){
    .signup-card{ padding:18px; border-radius:10px; }
    :root { --form-padding:18px; --gap:12px; }
}

/* Form grid: place fields like Username / Email side-by-side, make others span full width */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--gap);
    align-items:start;
    width:100%;
    box-sizing:border-box;
}
/* Keep existing form-row behavior inside the grid */
.form-grid .form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
}

/* Make a row span both columns (useful for password, textarea, actions) */
.form-row.wide{
    grid-column:1 / -1;
}

/* Explicit half-width helper (optional) */
.form-row.half{
    grid-column:auto;
}

/* Responsive: stack into a single column on small screens */
@media (max-width:520px){
    .form-grid{ grid-template-columns:1fr; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }

    /* Non-animated, simplified image style for reduced motion */
    .sickle-image{
        max-width:100px;
        margin-bottom:var(--gap);
        filter:grayscale(100%);
        border:2px solid var(--accent);
        border-radius:8px;
    }
}

/* Portal header & subtitle styling */
.portal-header{
    font-size:1.5rem;
    margin:0 0 6px 0;
    color:var(--accent-2);
    text-align:center;
    text-transform:capitalize;
}
.subtitle{ color:var(--muted); text-align:center; margin:0 0 14px 0; }

/* Creative subtitle styles */
.creative-subtitle{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    position:relative;
}
.subtitle-icon{ color:var(--accent-2); opacity:.95; transform:translateY(1px); }
.subtitle-text{
    font-weight:700; font-size:1.15rem; letter-spacing:0.01em;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent; 
}
.subtitle-badge{
    background: linear-gradient(90deg,var(--accent-2),var(--accent));
    color: #06121a; font-weight:700; font-size:0.75rem; padding:6px 8px; border-radius:999px;
    box-shadow: 0 6px 18px rgba(124,92,255,0.08); transform:translateY(-1px);
}

/* animated decorative underline */
.creative-subtitle::after{
    content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-8px; width:36%; height:4px; border-radius:999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    mix-blend-mode:overlay; opacity:0.7; animation: slideGlow 2.6s infinite linear;
}
@keyframes slideGlow{
    0%{ filter:brightness(.95) blur(0); transform:translateX(-50%) scaleX(.95); }
    50%{ filter:brightness(1.2) blur(2px); transform:translateX(-50%) scaleX(1.02); }
    100%{ filter:brightness(.95) blur(0); transform:translateX(-50%) scaleX(.95); }
}

@media (max-width:420px){
    .subtitle-text{ font-size:1rem; }
    .creative-subtitle::after{ width:50%; }
}

/* Terms box */
.terms-box{
    display:inline-block;
    margin-left:10px;
    padding:10px 12px;
    background: linear-gradient(180deg, rgba(124,92,255,0.06), rgba(7,20,32,0.02));
    border-left: 4px solid var(--accent-2);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.95rem;
}
.terms-box a{ color: #1e40af; text-decoration:underline; }

/* Password meter and controls */
.pw-row{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.pw-meter{ flex:1; height:8px; background: rgba(15,23,42,0.06); border-radius:8px; overflow:hidden; position:relative; }
.pw-meter > i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#ff6b6b,#ffd56b,#7c5cff); transition:width .2s ease; }
.pw-toggle{ background:transparent; border:0; color:var(--muted); font-weight:600; cursor:pointer; padding:6px 8px; border-radius:8px; }

/* Small adjustment for the inline eye button inside input */
.password-row input[type="password"],
.password-row input[type="text"]{ padding-right:44px; }

.password-toggle svg{ color:var(--muted); }
.password-toggle:focus{ outline:2px solid rgba(37,99,235,.14); }

/* Neon frame for signup card */
.signup-card::before{ content: ''; position:absolute; inset:-6px; border-radius:14px; padding:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:-1; opacity:0.06; }
.signup-card{ position:relative; overflow:visible; }


/* ===== User Facility Assignment UI Improvement ===== */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.data-table th {
    background: #790000; /* Maroon theme */
    color: #fff;
    text-align: center;
    padding: 8px;
    white-space: nowrap;
}

.data-table td {
    padding: 6px 10px;
    text-align: center;
    border: 1px solid #ccc;
}

.data-table select,
.data-table input[type="text"] {
    height: 32px;
    padding: 4px 6px;
    border: 1px solid #999;
    border-radius: 4px;
    min-width: 110px;
}

.block-select,
.district-select,
.state-select {
    min-width: 120px;
}

.type-select,
.facility-select {
    min-width: 150px;
}

.gp-input {
    min-width: 140px;
}

.table-wrapper {
    overflow-x: auto;
    margin-top: 10px;
}

.btn.small {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 6px;
    background: #790000;
    color: #fff;
    border: none;
    cursor: pointer;
}

.btn.small:hover {
    background: #580000;
}

.status-linked {
    color: green;
    font-weight: bold;
}

.status-unlinked {
    color: #b30000;
    font-weight: bold;
}

/* Zebra stripe for readability */
.data-table tr:nth-child(even) {
    background: #f8f8f8;
}