/*
==========================================================

    CITY REGISTRY STYLE

==========================================================
*/


/* =========================
   BASE
========================= */


body{

    background:var(--bg,#050505);

    color:var(--text,#b9b9c6);

}









/* =========================
   HEADER
========================= */


.registry-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px;

    margin-bottom:20px;

    background:
    linear-gradient(
        135deg,
        var(--panel,#111),
        var(--panel2,#050505)
    );

    border-bottom:
    2px solid var(--accent,#1f2231);

}



.registry-title{

    display:flex;

    align-items:center;

    gap:20px;

}



.registry-title i{

    font-size:45px;

    color:var(--accent,#666666);

}



.registry-title h1{

    margin:0;

    font-size:32px;

}



.registry-title p{

    margin:5px 0 0;

    color:var(--muted,#aaa);

}









/* =========================
   BUTTONS
========================= */


.archive-button{

    padding:12px 20px;

    border-radius:10px;

    background:var(--accent,#b9b9c6);

    color:#000;

    text-decoration:none;

    font-weight:bold;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.2s;

}



.archive-button:hover{

    transform:translateY(-3px);

    filter:brightness(1.2);

}









/* =========================
   SEARCH AREA
========================= */


.registry-toolbar{

    display:flex;

    gap:15px;

    padding:20px;

    flex-wrap:wrap;

}



.registry-toolbar input,
.registry-toolbar select{


    background:var(--panel,#111);

    color:var(--text,#fff);

    border:

    1px solid var(--accent,#1f2231);


    padding:12px;

    border-radius:8px;

    font-size:15px;


}



.registry-toolbar input{

    flex:1;

    min-width:260px;

}









/* =========================
   STATS
========================= */


.registry-stats{

    display:grid;

    grid-template-columns:
    repeat(
        5,
        1fr
    );

    gap:15px;

    padding:20px;

}



.stat-card{

    background:

    linear-gradient(
        145deg,
        var(--panel,#111),
        var(--panel2,#050505)
    );


    border-radius:12px;

    padding:20px;

    text-align:center;


    border:

    1px solid rgba(
        255,
        255,
        255,
        .1
    );


}



.stat-card h3{

    margin:0;

    font-size:35px;

    color:var(--accent,#00ffff);

}



.stat-card small{

    color:var(--muted,#aaa);

}









/* =========================
   REGISTRY GRID
========================= */


.registry-grid{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            260px,
            1fr
        )
    );


    gap:20px;


    padding:20px;


}









/* =========================
   REGISTRY CARD
========================= */

.dog-card{

    display:flex;

    align-items:center;

    gap:8px;

    padding:15px;

    background:
    linear-gradient(
        145deg,
        var(--panel,#111),
        var(--panel2,#050505)
    );

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    transition:.2s;

    cursor:pointer;

}



.dog-card:hover{

    transform:translateY(-4px);

    border-color:var(--accent);

    box-shadow:0 0 18px rgba(0,255,255,.12);

}



.dog-photo{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:50%;

    flex-shrink:0;

    border:2px solid var(--accent);

    background:#111;

}



.dog-info{

    flex:1;

    min-width:0;

}



.dog-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}



.dog-name{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:20px;

    font-weight:700;

    line-height:1.1;

}



.dog-type{

    margin-top:3px;

    color:var(--muted,#aaa);

    font-size:15px;

}



.dog-role{

    margin-top:6px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:var(--accent);

    font-weight:600;

}

.dog-name .fa-dog,
.dog-name .fa-cat,
.dog-name .fa-carrot, /* rabbit */
.dog-name .fa-bacon, /* pig */
.dog-name .fa-crow, /* all birds */
.dog-name .fa-wolf-pack-battalion, /* wolf */
.dog-name .fa-mask, /* raccoon */
.dog-name .fa-cheese, /* rat */
.dog-name .fa-paw{

    color:var(--accent);

    font-size:18px;

}

.fa-mars{

    color:#59a7ff;

}

.fa-venus{

    color:#ff78b5;

}



/* BADGES */


.badge{


    display:inline-flex;

    align-items:center;

    gap:5px;


    padding:5px 10px;

    border-radius:20px;

    background:

    var(--accent,#00ffff);


    color:#000;


    font-size:12px;

    margin:3px;

    font-weight:bold;

}









/* =========================
   MODAL
========================= */


.modal{


    position:fixed;

    inset:0;


    background:

    rgba(
        0,
        0,
        0,
        .75
    );


    display:none;


    align-items:center;

    justify-content:center;


    z-index:999;


}



.modal.active{

    display:flex;

}



.modal-content{

    width:min(580px, 90vw);

    max-width:90vw;

    max-height:90vh;

    overflow-y:auto;

    background:

    var(--panel,#111);


    border-radius:16px;


    padding:16px;


    border:

    2px solid var(--accent,#00ffff);


    box-sizing:border-box;


}



#modal-close{


    float:right;

    cursor:pointer;


    font-size:30px;


    color:var(--accent,#00ffff);


}




/* MODAL IMAGE */


.modal-content .dog-photo{

    width:180px;

    height:180px;


    object-fit:cover;


    border-radius:12px;


    display:block;


    margin:15px auto;


}
.modal-profile-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

    padding-bottom:8px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.modal-profile-header .dog-photo{

    width:96px;

    height:96px;

    margin:0;

    flex-shrink:0;

}

.modal-profile-info{

    flex:1;

    min-width:0;

}

.modal-content p{

    margin:8px 0;

    line-height:1.3;

}


.modal-content h2{

    text-align:left;

    margin:0 0 6px;

    font-size:24px;

}

.modal-subtitle{

    color:var(--muted,#aaa);

    font-size:14px;

}

.modal-details-grid{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    column-gap:6px;

    row-gap:1px;

    max-width:80%;

    margin:0 auto;

    padding:0;

    align-content:start;

}

.detail-box{

    padding:2px 6px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:7px;

    background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

    min-height:24px;

    width:100%;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.detail-box small{

    display:block;

    color:var(--muted,#aaa);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:1px;

    line-height:1;

}

.detail-box strong{

    display:block;

    font-size:12px;

    line-height:1.1;

}

.player-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--accent,#00ffff);

    text-decoration:none;

}

.modal-actions{

    margin-top:12px;

}

.modal-actions .archive-button{

    display:inline-flex;

    padding:10px 14px;

    border-radius:10px;

}



/* =========================
   MOBILE
========================= */


@media(max-width:700px){


.registry-header{


    flex-direction:column;

    gap:20px;

    text-align:center;


}



.registry-stats{


    grid-template-columns:

    repeat(
        2,
        1fr
    );


}


}



@media(max-width:400px){


.registry-stats{


    grid-template-columns:

    1fr;


}


}
.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:10px;

}



/* =========================
   PLAYER LINKS
========================= */

.stream-link{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(145,70,255,.12);

    font-size:18px;

    color:#9146FF;

    transition:.2s;

}



.stream-link:hover{

    background:#9146FF;

    color:white;

    transform:scale(1.08);

}



.player-link{

    color:var(--accent);

    text-decoration:none;

    font-weight:bold;

}



.player-link:hover{

    text-decoration:underline;

}
/*
==========================================================
    ROLE COLORS
==========================================================
*/


.dog-card{

    border-left:5px solid transparent;

}




.role-pd{

    border-left-color:#2979FF; /* Royal Blue */

}
.role-doc{

    border-left-color:#999999; /* L Grey */

}



.role-fib{

    border-left-color:#FF0055; /* Crimson Red */

}




.role-service{

    border-left-color:#FF5000; /* Coral Orange */

}




.role-stray{

    border-left-color:#FFAA00; /* Golden Orange */

}




.role-missing{

    border-left-color:#4d0505; /* Sun Yellow */

}




.role-deceased{

    border-left-color:#353535; /* dark grey */

}




.role-farm{

    border-left-color:#00E676; /* Spring Green */

}




.role-wild{

    border-left-color:#00bebe; /* Vivid Cyan */

}

.role-ems{

    border-left-color:#ff7dd8; /* Pink */

}


.role-civilian{

    border-left-color:#651FFF; /* Deep Purple */

}
.role-foster{

    border-left-color:#AA00FF; /* Neon Magenta */

}

.role-legend{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:20px 0;

}

.legend-chip{

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    border-radius:999px;

    background:#1b1b1b;

    border:2px solid #444;

    font-size:13px;

    font-weight:600;

    transition:.15s;

}

.legend-chip i{

    font-size:14px;

}


.legend-pd{

    border-color:#2979FF;

    color:#2979FF;

}

.legend-fib{

    border-color:#FF0055;

    color:#FF0055;

}
.legend-doc{

    border-color:#999999;

    color:#999999;

}


.legend-ems{

    border-color:#ff7dd8;

    color:#ff7dd8;

}

.legend-stray{

    border-color:#FFAA00;

    color:#FFAA00;

}

.legend-service{

    border-color:#FF5000;

    color:#FF5000;

}

.legend-farm{

    border-color:#00E676;

    color:#00E676;

}

.legend-civilian{ /* adopted */

    border-color:#651FFF;

    color:#651FFF;

}
.legend-foster{

    border-color:#AA00FF;

    color:#AA00FF;

}
.legend-deceased{

    border-color:#353535;

    color:#c0c0c0;

}
.legend-wild{

    border-color:#00bebe;

    color:#00bebe;

}

/* =========================
   REGISTRY PROFILE MODAL
========================= */

.modal-profile-header{

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;

    margin-bottom:8px;

    padding-bottom:8px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.modal-profile-info{

    flex:1;

    min-width:0;

}

.modal-profile-info h2{

    margin:0 0 6px;

    font-size:24px;

}

.modal-profile-header h2{

    margin:0;

}

.modal-subtitle{

    color:var(--muted,#aaa);

    font-size:14px;

    line-height:1.3;

}

.modal-deceased-icon{

    margin-left:6px;

    color:#797979;

    font-size:18px;

}

.dog-name .fa-skull{

    color:#797979;

    font-size:16px;

    margin-left:0px;

}

.modal-details-grid{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    column-gap:6px;

    row-gap:2px;

    max-width:82%;

    margin:0 auto;

    padding:0;

    align-content:start;

}

.detail-box{

    margin:0;

    padding:2px 6px;

    background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

    border:1px solid rgba(255,255,255,.08);

    border-radius:7px;

    min-height:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-sizing:border-box;

}

.detail-box small{

    display:block;

    color:var(--muted,#aaa);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:2px;

    line-height:1;

}

.detail-box strong{

    display:block;

    color:var(--text,#fff);

    font-size:12px;

    line-height:1.2;

    word-break:break-word;

}

/*style for legend filtering */
.role-filter-btn{

    cursor:pointer;

    transition:0.2s;

}


.role-filter-btn:hover{

    transform:translateY(-2px);

}


.role-filter-btn.active{

    box-shadow:
    0 0 0 3px white,
    0 0 10px currentColor;

}

/*modal - form OLD

#registry-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

#registry-form input,
#registry-form select,
#registry-form textarea{

    width:100%;

    padding:10px 12px;

    border-radius:8px;

    border:1px solid rgba(255,255,255,.12);

    background:#111;

    color:white;

    font:inherit;

}

#registry-form textarea{

    resize:vertical;

}

#registry-form hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

    margin:10px 0;

}

#registry-form h3{

    margin:5px 0;

}

#registry-form small{

    opacity:.7;

}

#registry-form label{

    font-weight:bold;

}
    */

/*form stuff*/
.roles-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:8px 18px;

    margin-bottom:15px;

}

.roles-grid label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:normal;

}

.roles-grid input{

    width:auto !important;

}

/*buttons top fix */
.header-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

}

.footer-actions{

    padding-right:20px;

    margin-top:20px;

}

/*form patch lol */
/* =========================
   Registry submission form
========================= */


#submit-modal .modal-content{

    width:min(850px, 95vw);

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

}



#registry-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}



#registry-form h3{

    margin:10px 0 4px;

    color:var(--accent);

    font-size:16px;

}



#registry-form hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.1);

    margin:8px 0;

}




/* two column layout */

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px 18px;

}



.form-full{

    grid-column:1 / -1;

}




/* labels */

#registry-form label{

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:13px;

    color:rgba(255,255,255,.75);

}




/* inputs */

#registry-form input,
#registry-form select,
#registry-form textarea{


    width:100%;

    box-sizing:border-box;

    padding:11px 13px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.12);

    background:#090909;

    color:white;

    font:inherit;

    transition:.2s;

}




#registry-form input:focus,
#registry-form select:focus,
#registry-form textarea:focus{


    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 10px rgba(0,255,255,.15);

}




#registry-form textarea{

    resize:vertical;

    min-height:100px;

}




/* radio buttons */

.submission-type{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}


.submission-type label{

    display:flex !important;

    flex-direction:row !important;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    color:white;

}




/* roles */

.roles-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}



.roles-grid label{

    flex-direction:row !important;

    align-items:center;

    gap:8px;

    color:white;

    font-weight:normal;

}



.roles-grid input{

    width:auto !important;

}




/* mobile */

@media(max-width:700px){


    .form-grid{

        grid-template-columns:1fr;

    }


    .roles-grid{

        grid-template-columns:1fr 1fr;

    }


}