/* ==UserStyle==
@name           vacunate-validator mods
@namespace      github.com/openstyles/stylus
@version        1.0.2
@license        LGPL-3.0-or-later
@updateURL      https://raw.githubusercontent.com/Scydact/cedula-validator/main/validator.user.css
@description    Modificaciones de estilo para el sitio.
@author         Scydact
@preprocessor   less


@var checkbox fullscreen-map    'Scan en pantalla completa' 0
@var checkbox all-registries    'Mostrar todos los registros' 0
@var checkbox dark-mode         'Modo oscuro' 0
@var checkbox dark-mode-reader  'Invertir colores de scan' 0
@var checkbox bigger-row-num    'Indice de registro grande' 0
@var checkbox control-btn-up    'Botones de formulario en parte superior' 0
@var checkbox large-checkbox    'Checkbox grande' 0
@var checkbox confirm-table-mod 'Mods de tabla de confirmacion' 0
==/UserStyle== */
@-moz-document domain("vacunate-validator.tagshelf.io") {
    :root {
        --loaded: 1;
    }



    /* FULLSCREEN MOD */
    .fullscreen-mod(0) {}

    .fullscreen-mod(1) {
        nav.navbar {
            margin-bottom: 0 !important;
        }

        .container-fluid.px-5 {
            padding: 0 !important;
        }

        .py-3 {
            padding-left : 1.5em;
            padding-right: 1.5em;
        }

        app-page-validator {
            >div:nth-child(1) {
                margin: 0 !important;

                // Boton Atras
                >button {
                    z-index : 10;
                    position: absolute;
                    bottom  : 2em;
                    left    : 1em;

                    &::before {
                        content     : "↩";
                        margin-right: .5em;
                    }
                }
            }

            // Container for page division
            >div:nth-child(2) {
                margin      : 0 !important;
                --form-width: 400px;


                display              : grid;
                grid-template-rows   : calc(100vh - 56px);
                grid-template-columns: calc(100vw - var(--form-width)) var(--form-width);
                align-items          : stretch;
                justify-items        : stretch; // Map

                >div:nth-child(1) {
                    background  : #2f2f2f;
                    justify-self: stretch;
                    width       : auto;
                    padding     : 0;
                    position    : relative; // Separador

                    .drag-box {
                        background-color: rgba(65, 87, 207, .5);
                        backdrop-filter : blur(3px);
                        transition      : backdrop-filter 300ms;
                    }

                    .drag-box:hover {
                        backdrop-filter: blur(0px);
                    }

                    app-pdf-viewer {
                        .card {
                            box-shadow: none;
                        }

                        pdf-viewer {
                            height    : calc(100vh - 56px);
                            margin-top: -50px;
                        }

                        // Map controls
                        div:nth-child(2) {
                            position      : absolute;
                            bottom        : 50px;
                            right         : 30px;
                            z-index       : 10;
                            flex-direction: column;

                            button {
                                margin-right   : 0 !important;
                                margin-bottom  : 5px;
                                backdrop-filter: blur(2px);
                            }
                        }
                    }
                }

                // Form
                >div:nth-child(2) {
                    width   : auto;
                    padding : 20px 15px 40px;
                    overflow: auto;
                    z-index : 20;
                }
            }
        }
    }

    .fullscreen-mod(@fullscreen-map);



    /* FULLSCREEN MOD */
    .all-registries-mod(0) {}

    .all-registries-mod(1) {
        app-page-validator form {
            .collapse:not(.show) {
                display   : inherit;
                background: hsla(0, 0, 50%, 7%);
            }

            .accordion-item {
                margin-bottom: .5em;

                .accordion-button {
                    padding: .3em;
                }

                &:nth-child(12) .accordion-button {
                    background: #3589ff;
                    color     : white;
                }
            }

            .accordion-body {
                display            : grid;
                grid-template-areas: "cedula cedula cedula cedula""nombre nombre nombre nombre""edad dosis verificar modificar";

                place-items: stretch;
                padding    : .2em .2em 1em;

                >.form-group:nth-child(1) {
                    grid-area: cedula;
                }

                >.form-group:nth-child(2) {
                    grid-area: nombre;
                }

                >.form-group:nth-child(3) {
                    grid-area: edad;
                }

                >.form-group:nth-child(4) {
                    grid-area: dosis;
                }

                >.form-check:nth-child(5) {
                    grid-area: verificar;

                    &::after {
                        display: block;
                        content: "Verif."
                    }
                }

                >.form-check:nth-child(6) {
                    grid-area: modificar;

                    &::after {
                        display: block;
                        content: "Mod."
                    }
                }

                label {
                    font-size    : 0.8em;
                    max-width    : 3em;
                    overflow     : hidden;
                    white-space  : nowrap;
                    text-overflow: ".";
                    padding-right: .3em;
                }

                .mt-2 {
                    margin-top: 0 !important;
                }

                .form-control {
                    padding: .1em .5em;
                }

                >.form-check {
                    display       : flex;
                    flex-direction: column;
                    align-items   : center;
                    margin-bottom : -10px;

                    input {
                        margin-left: 0;
                    }

                    label {
                        display: none;
                    }
                }

                >.form-group {
                    display              : grid;
                    grid-template-columns: 2em auto;
                    align-items          : center;
                }
            }

            .accordion-item:last-child {
                margin-bottom: 5em;
            }
        }
    }

    .all-registries-mod(@all-registries);




    /* DARK MODE */
    .dark-mode-mod(0) {}

    .dark-mode-mod(1) {
        body {
            background-color: #242424;
            color           : white;
        }

        .accordion-item {
            background-color: #4a4a4a;
        }

        .mat-dialog-container {
            background: #2f2f2f;
            color     : #ddd;
        }

        tr {
            color: white !important;
        }

        .form-control {
            background: #000;
            color     : white;
        }

        .form-control:focus {
            background: #3c4d6a;
            color     : white;
        }

        .form-control:disabled,
        .form-control[readonly] {
            background: #6a6a6a;
        }

        .form-check input {
            filter: invert(1) hue-rotate(180deg)
        }

        .accordion-header .accordion-button {
            background: #002962;
            color     : #78a9f2;
        }
    }

    .dark-mode-mod(@dark-mode);



    /* DARK MODE READER */
    .dark-mode-reader-mod(0) {}

    .dark-mode-reader-mod(1) {
        pdf-viewer {
            filter: invert(1) hue-rotate(180deg);
        }

        app-pdf-viewer .card {
            background-color: #181818;
        }
    }

    .dark-mode-reader-mod(@dark-mode-reader);




    /* BIGGER ROW NUMBER */
    .bigger-row-num-mod(0) {}

    .bigger-row-num-mod(1) {
        .accordion {
            counter-reset: fila
        }

        .accordion-header {
            position: relative;
        }

        app-page-validator form .accordion-item .accordion-button {
            padding-left: 2.5em;
        }

        .accordion-header::after {
            counter-increment: fila;
            content          : counter(fila);
            z-index          : 5;
            position         : absolute;
            font-size        : 0.8em;
            top              : -.4rem;
            left             : -.5rem;
            background       : #6d76ff;
            color            : white;
            width            : 2.5rem;
            height           : 2.5rem;
            display          : grid;
            place-items      : center;
            border-radius    : 100%;
        }
    }

    .bigger-row-num-mod(@bigger-row-num);


    .compact-btn {
        width      : 2.5em;
        white-space: nowrap;
        overflow   : hidden;
    }

    /* MOVE CONTROL BTNS UP */
    .move-ctrl-btn-mod(0) {}

    .move-ctrl-btn-mod(1) {
        form>button {
            position: absolute;
            z-index : 50;
            top     : 0;

            &:nth-of-type(1) {
                right: 20em;
                .compact-btn();

                &::before {
                    content     : "➕";
                    margin-right: 2em;
                    margin-left : -.15em;
                }
            }

            &:nth-of-type(2) {
                right: 17em;
                .compact-btn();

                &::before {
                    content     : "➖";
                    margin-right: 2em;
                    margin-left : -.15em;
                }
            }

            &:nth-of-type(3) {
                right : 9.5em;
                top   : auto;
                bottom: 2em;
                left  : 7.5em;

                &::before {
                    content     : "🗑️";
                    margin-right: .5em;
                    margin-left : -.15em;
                }
            }

            &:nth-of-type(4) {
                .compact-btn();
                right: 2em;

                &::before {
                    content     : "💾";
                    margin-right: 2em;
                    margin-left : -.15em;
                }
            }
        }
    }

    .move-ctrl-btn-mod(@control-btn-up);



    /* LARGE CHECKBOX MOD */
    .large-checkbox-mod(0) {}

    .large-checkbox-mod(1) {
        input[type="checkbox"] {
            transform: scale(2, 2) translate(0, -3px)
        }

        .form-check {
            transform: translate(0, 10px)
        }
    }

    .large-checkbox-mod(@large-checkbox);



    /* CONFIRM TABLE MODIFICATIONS */
    .confirm-table-mod(0) {}

    .confirm-table-mod(1) {
        app-page-confirmation tbody {
            counter-reset: validation-list;
        }

        app-page-confirmation tr td:first-child::before {
            counter-increment: validation-list;
            content          : counter(validation-list) ")  ";
            opacity          : 40%;
        }

        app-page-confirmation .bi::before {
            transform: scale(2.5, 2.5) translate(.65em, 0);
        }

        .bi-check {
            color: green;
        }

        .bi-x {
            color: red;
        }
    }

    .confirm-table-mod(@confirm-table-mod);
}

@-moz-document url-prefix("https://vacunate-validator.tagshelf.io/pages/") {

    // overflow hidden only on validation page
    body when (@fullscreen-map=1) {
        overflow-y: hidden;
    }
}