/* ============================================================
   GLOBALS
   ============================================================ */

.ico svg {
    stroke: black;
    stroke-width: 1px;
}

svg {
    stroke: black;
    stroke-width: 1px;
}

@media(pointer:coarse) {
    .hide-on-mobile {
        display: none;
    }
}

@media(pointer:fine) {
    .hide-on-desktop {
        display: none;
    }
}

mark {
    background-color: #ffeb3b;
    padding: 0 2px;
    border-radius: 2px;
}

/*mark {
    background-color: transparent;
    color: #d9534f;
    font-weight: bold;
}*/


/* ============================================================
   PAGE OPTIONS
   ============================================================ */

.mat-pageoptions-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*gap:10px;*/
}

    .mat-pageoptions-wrapper > * {
        padding: 0 10px;
        white-space: nowrap;
    }

        .mat-pageoptions-wrapper > *:hover {
            background-color: #f0f0f0;
        }


        .mat-pageoptions-wrapper > *:first-child {
            padding: 0 10px 0 0;
            text-align: left;
        }

        .mat-pageoptions-wrapper > *:not(:first-child) {
            border-left: 1px solid black;
        }

/* ============================================================
   NAV
   ============================================================ */

.disabled-navlink {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================
   UPDATE BANNER
   ============================================================ */

.snackbar {
    visibility: hidden;
    min-width: 260px;
    background-color: #323232;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    padding: 14px 20px;
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease, bottom 0.4s ease;
}

    .snackbar.show {
        visibility: visible;
        opacity: 1;
        bottom: 50px;
    }

    .snackbar button {
        background: #4CAF50;
        border: none;
        padding: 6px 12px;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }



/* ============================================================
   LOOKUP
   ============================================================ */

.lookup-root {
    position: relative;
    /*width:100%; removed to prevent PageOptions item expansion*/
    cursor: pointer;
}

.lookup-display {
}

.lookup-placeholder {
}

.lookup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* Keep it inside the viewport */
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    top: 1.8em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    background-color: white;
    min-width: 100px;
    width: min-content;
    padding: 0 10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: 5px 10px 10px;
}

.lookup-option {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 4px 7px 2px 4px;
}

lookup-option.lookup-option--placeholder {
}


.lookup-option:hover {
    background-color: #E0E0E0;
}

@media(pointer:coarse) {
    .lookup-option {
        padding: 10px;
        border-bottom: 1px solid gray;
    }
}


/* ============================================================
   BUTTONS
   ============================================================ */
.mat-btn {
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-size: 0.9rem;
}

    .mat-btn svg {
        display: block;
    }

.mat-btn-primary {
    background: #0078d4;
    color: white;
}

.mat-btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.mat-btn-danger {
    background: #d83b01;
    color: white;
}

.mat-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}




/* ============================================================
   SEARCHBOX
   ============================================================ */



.searchbox-wrapper {
    position: relative;
    display: flex;
    gap: 5px;
}

    .searchbox-wrapper input[type=text] {
        /* Remove input-like styling */
        -webkit-appearance: none;
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        font-size: inherit;
        /* Prevent horizontal overflow */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        /*    border-color: #DDDDDD;
    border-radius: 4px;
*/
    }

.searchbox-lupa {
    width: 2em;
    cursor: pointer;
    display: inline-block;
    width: min-content;
}

.searchbox-clear-btn {
    /*    position: absolute;
    right: 5px;
*/ z-index: 2;
}

.searchbox-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, background-color 160ms ease;
}

/* Show when searchbox has text */
.searchbox:not(:placeholder-shown) .searchbox-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Hover / active states */
.searchbox-clear-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

.searchbox-clear-btn:active {
    background: rgba(0, 0, 0, 0.18);
}





/* ============================
   DROPDOWN
   ============================ */

.dropdown-container {
    position: relative;
    cursor: pointer;
}

.dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1.8em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    background-color: white;
    min-width: 100px;
    width: min-content;
    padding: 0 10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding-top: 5px;
}

    .dropdown > * {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        .dropdown > * :hover {
            background-color: #E0E0E0;
        }


@media(pointer:coarse) {
    .dropdown > * {
        padding: 10px;
        border-bottom: 1px solid gray;
    }
}


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


    .mat-modal-backdrop {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        transition: background-color 260ms ease;
        z-index: 1050;
    }

    /* Wrapper */
    .mat-modal-wrapper {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
        will-change: transform;
        position: relative;
    }

    /* OPEN (spring) */
    .mat-modal-open {
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* CLOSE (gravity) */
    .mat-modal-closed {
        transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Handle area */
    .mat-modal-handle-area {
        position: relative;
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mat-modal-handle {
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background-color: #ccc;
    }

    /* Close button */
    .mat-modal-close-btn {
        position: absolute;
        right: 12px;
        top: 8px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: none;
        background: rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
    }

        .mat-modal-close-btn:hover {
            background: rgba(0, 0, 0, 0.08);
        }

    /* Content */
    .mat-modal-content {
        padding: 12px 16px 24px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }



    /* ============================================================
   PROPERTY GRID
   ============================================================ */

    /* Contenidor principal */
    .mat-propertygrid-container {
        --mat-propertygrid-label-width: 160px;
        color: #333;
        border: 1px solid #DDDDDD;
    }

    /* Fila del grid */
    .mat-propertygrid-row {
        display: flex;
        align-items: flex-start;
        min-height: 28px;
        padding: 2px 0;
        border-bottom: 1px solid #eee;
        transition: background 0.15s ease;
        width: 100%;
    }

        .mat-propertygrid-row:hover {
            background: #f7f7f7;
        }

    /* Columna esquerra (labels) */
    .mat-propertygrid-label {
        width: var(--mat-propertygrid-label-width);
        padding: 4px 6px;
        font-weight: 500;
        color: #444;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mat-propertygrid-container more {
        display: block;
        ;
        padding: 4px 6px;
    }

    /* Splitter discret i elegant */
    .mat-propertygrid-splitter {
        width: 6px;
        cursor: col-resize;
        background: transparent;
        transition: background 0.15s ease;
        align-self: stretch;
    }

        .mat-propertygrid-splitter:hover {
            background: #d0d0d0;
        }

    /* Columna dreta (editors) */
    .mat-propertygrid-editor {
        flex: 1;
        padding: 2px 0;
    }

        .mat-propertygrid-editor input[type=text] {
            width =100%;
        }


    .buttons-bar {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding-top: 15px;
    }

    /* Base button style */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 1rem;
        border-radius: 6px;
        font-size: 0.95rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        color: white !important;
        transition: background-color 0.15s ease, opacity 0.15s ease;
    }

        .btn ::deep * {
            color: white;
        }

    /* Accept / Confirm / Save */
    .btn-accept {
        background-color: #28A745;
    }

        .btn-accept:hover {
            background-color: #218838;
        }

        .btn-accept:active {
            background-color: #1e7e34;
        }

    /* Cancel / Neutral */
    .btn-cancel {
        background-color: #6C757D;
    }

        .btn-cancel:hover {
            background-color: #5a6268;
        }

        .btn-cancel:active {
            background-color: #545b62;
        }

    /* Delete / Destructive */
    .btn-delete {
        background-color: #DC3545;
    }

        .btn-delete:hover {
            background-color: #c82333;
        }

        .btn-delete:active {
            background-color: #bd2130;
        }

    /* Optional: disabled state */
    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }


    /* ============================
   PROPERTY GRID RESPONSIVE MODE
   ============================ */
    @media (max-width: 600px) {
        /* Fila vertical */
        .mat-propertygrid-row {
            flex-direction: column;
            align-items: stretch;
            padding: 6px 0;
        }
        /* Label a dalt */
        .mat-propertygrid-label {
            width: 100% !important;
            padding: 4px 2px;
            font-weight: 600;
            border: none;
            background: transparent;
        }
        /* Splitter desapareix */
        .mat-propertygrid-splitter {
            display: none;
        }
        /* Editor ocupa tot l’ample */
        .mat-propertygrid-editor {
            width: 100%;
            padding-top: 2px;
        }
    }

    /* ============================
   PROPERTY GRID TEXT EDITOR
   ============================ */

    .mat-propertygrid-editor input {
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        width: 100%;
    }

    /* ============================
   PROPERTY GRID FILE UPLOAD EDITOR
   ============================ */

    .mc-file-upload-preview {
        /*    width: 200px;
    height: 200px;
*/ border: 2px dashed #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .mc-file-upload-preview img {
            max-width: auto;
            max-height: 100%;
        }

    .mc-file-upload-placeholder {
        color: #888;
        font-size: 0.9rem;
    }



    /* ============================
   PROPERTY GRID BOOL EDITOR
   ============================ */

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 46px;
        height: 24px;
    }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 24px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }

    input:checked + .slider {
        background-color: #4caf50;
    }

        input:checked + .slider:before {
            transform: translateX(22px);
        }




    /* ============================
   SWIPE
   ============================ */

    .swipe-cell {
        position: relative;
        /* overflow:  allow overflow-x+y to prevent hidding dropdowns */
        touch-action: pan-y;
        background: white;
        height: 100%;
    }

    .swipe-cell-actions {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        z-index: 1;
    }

    .swipe-cell-left-actions, .swipe-cell-right-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
    }

    .swipe-cell-actions .swipe-action {
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: center;
        align-items: center;
        min-width: 40px;
    }

        .swipe-cell-actions .swipe-action svg {
            stroke: black;
            width: 20px;
            height: 20px;
            stroke-width: 1px;
        }

    .swipe-cell-slider {
        position: relative;
        z-index: 2;
        background: white;
        transition: transform 0.2s ease-out;
        will-change: transform;
        height: 100%;
    }

    /*paleta de colors */

    .swipe-action-green {
        background: #16a34a;
    }

    .swipe-action-red {
        background: #dc2626;
    }

    .swipe-action-blue {
        background: #2563eb;
    }

    .swipe-action-orange {
        background: #f97316;
    }

    .swipe-action-gray {
        background: #e5e7eb;
        color: #111827;
    }


    /* ============================
   CONTEXT MENU
   ============================ */

    @media(pointer:fine) {
        /*overriden ruby mat.css*/
    }

    /* ============================
   ERROR BANNER
   ============================ */

    .mat-errorbanner {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px 15px;
        border-radius: 4px;
        border: 1px solid #f5c6cb;
        /* Optional: add a subtle animation */
        animation: fadeIn 0.3s ease-out;
    }

    .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }