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

/*:root {
    --mat-primary: #2196F3;
}
*/


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

a {
    text-decoration:none;
    color:black;
}

a.disabled {
    pointer-events: none; /* NO clics */
    cursor: default; /* NO pointer */
    opacity: 0.5; /* aspecte desactivat */
    color: #6c757d; /* gris suau */
    text-decoration: none; /* opcional */
}

    a.disabled:hover,
    a.disabled:active,
    a.disabled:focus {
        text-decoration: none;
        color: #6c757d;
    }

.page-wrapper-600 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
}

.page-wrapper-900 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 900px;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.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;
}*/

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


.nav-list {
    background-color: white;
    padding-top: 20px;
    width: 150px;
}


    .nav-list .item {
        display: block;
        padding: 4px 7px 2px 4px;
        border-bottom: 1px solid darkgray;
        /*z-index: 20;*/
    }

    .nav-list .parent {
        font-weight: 600;
    }

@media(pointer:fine) {
    .nav-list .item:hover {
        background-color: #EFEFEF;
    }
}

@media(pointer:coarse) {
    .nav-list .item {
        padding: 10px;
    }
}


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

/* Primary button */
.btn-primary {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    color: #ffffff !important;
    background-color: #0d6efd !important;
    border: 1px solid #0d6efd;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .06s;
}

    /* Hover */
    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    /* Active / pressed */
    .btn-primary:active,
    .btn-primary.active {
        background-color: #0a53be;
        border-color: #094aa8;
        transform: translateY(1px);
    }

    /* Focus (keyboard) */
    .btn-primary:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
    }

    /* Disabled */
    .btn-primary:disabled,
    .btn-primary.disabled {
        opacity: 0.65;
        pointer-events: none;
        box-shadow: none;
    }

/* Outline variant */
.btn-outline-primary {
    color: #0d6efd;
    background-color: transparent;
    border: 1px solid #0d6efd;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0b5ed7;
    }


/* Cancel button */
.btn-cancel {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #ced4da;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease-in-out, border-color .12s ease-in-out, box-shadow .12s ease-in-out, transform .06s;
}

    /* Hover */
    .btn-cancel:hover {
        background-color: #e9ecef;
        border-color: #bfc7cc;
    }

    /* Active / pressed */
    .btn-cancel:active,
    .btn-cancel.active {
        background-color: #e2e6ea;
        border-color: #adb5bd;
        transform: translateY(1px);
    }

    /* Focus (keyboard) */
    .btn-cancel:focus {
        outline: 0;
        box-shadow: 0 0 0 0.15rem rgba(108,117,125,0.15);
    }

    /* Disabled */
    .btn-cancel:disabled,
    .btn-cancel.disabled {
        opacity: 0.6;
        pointer-events: none;
        box-shadow: none;
    }

/* Outline variant */
.btn-outline-cancel {
    color: #212529;
    background-color: transparent;
    border: 1px solid #ced4da;
}

    .btn-outline-cancel:hover {
        color: #212529;
        background-color: #e9ecef;
        border-color: #bfc7cc;
    }


/* Danger button */
.btn-danger {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    color: #fff;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    /* Hover */
    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    /* Active / pressed */
    .btn-danger:active,
    .btn-danger.active {
        background-color: #b21f2d;
        border-color: #a71d2a;
        transform: translateY(1px);
    }

    /* Focus (keyboard) */
    .btn-danger:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25);
    }

    /* Disabled */
    .btn-danger:disabled,
    .btn-danger.disabled {
        opacity: 0.65;
        pointer-events: none;
        box-shadow: none;
    }

/* Outline variant */
.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    border: 1px solid #dc3545;
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: #dc3545;
        border-color: #c82333;
    }

/* ============================================================
   MAT LIST
   ============================================================ */

@media(pointer:fine) {

    /* ---------- GRID PRINCIPAL ---------- */

    .mat-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
    }

    .col-headers, .summary,
    .mat-list-item,
    .mat-list-item-content {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/-1;
    }

        .mat-list-item-content:hover {
            background-color: #EFEFEF;
            cursor: pointer;
        }

        .mat-list-item-content div:not(.ico) {
            padding: 4px 0 2px;
        }



    .mat-cell {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/-1;
    }

        .mat-cell.selected {
            background: #2196F3;
            color: white;
        }

        .mat-cell:hover {
            background-color: #EFEFEF;
            cursor: pointer;
        }
}


/*==========================================================
    MAT MENU
==========================================================*/

.mat-menu-popup {
    position: fixed;
    min-width: 220px;
    background-color: white;
    border: 1px solid #b8b8b8;
    box-shadow: 2px 2px 10px rgba(0,0,0,.25);
    border-radius: 4px;
    overflow: hidden;
}

.mat-menu {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 2px 0;
    user-select: none;
}

.mat-menu-item {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    cursor: pointer;
}

.mat-menu-item:hover {
    background: #e6e6e6;
}

.mat-menu-item:not(:last-child){
    border-bottom:1px solid gray;
}

    .mat-menu-item.selected {
        background: #2196F3;
        color: white;
    }

.mat-menu-icon {
    width: 20px;
}

.mat-menu-title {
    flex: 1;
}

.mat-menu-shortcut {
    margin-left: 24px;
    opacity: .65;
}

.mat-menu-arrow {
    margin-left: 12px;
}

.mat-menu-separator {
    margin: 4px 0;
    border-top: 1px solid #d0d0d0;
}

.mat-menubar {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 4px;
    border-bottom: 1px solid #d0d0d0;
    background: #f5f5f5;
    user-select: none;
}

.mat-menubar-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: default;
}

    .mat-menubar-item:hover {
        background: #e6e6e6;
    }

    .mat-menubar-item.active {
        background: #dbe8ff;
    }

.mat-contextmenu-target {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

.mat-contextmenu-target {
    /*Evitem que en dispositius tàctils, 
        Chrome/Edge generin alguns gestos propis 
        (selecció de text, menú contextual, etc.)*/
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (pointer: coarse) {
    .mat-menu-popup {
        inset: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .mat-menu {
        width: 100%;
        height: 100%;
    }

    .mat-menu-header {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 18px;
        height: 56px;
        border-bottom: 1px solid #ddd;
        background: white;
    }


        .mat-menu-header:hover {
            background: var(--mat-hover,#f5f5f5);
        }

    .mat-menu-arrow {
        font-size: 20px;
        opacity: .45;
    }

    .mat-menu-back-arrow {
        font-size: 18px;
    }

    .mat-menu-item {
        min-height: 56px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

        .mat-menu-item:active {
            background: #ececec;
        }

    .mat-menu-item {
        transition: background .12s;
    }


    .mat-menu-back {
        width: 56px;
        height: 56px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mat-menu-back-icon {
        font-size: 22px;
    }

    .mat-menu-header-title {
        font-size: 17px;
        font-weight: 600;
    }

    .mat-menu-popup-touch .mat-menu {
        width: 100%;
        height: calc(100dvh - 56px);
        overflow-y: auto;
    }

    .mat-slide-in {
        animation: mat-slide-in .20s ease;
    }

    @keyframes mat-slide-in {
        from {
            opacity: .8;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes mat-slide-back {
        from {
            opacity: .8;
            transform: translateX(-35%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}


/* ============================================================
       SUBMENU DEPRECATED
       ============================================================ */


.mat-list .context-menu-wrapper,
.mat-list .context-menu-contents {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}


/* ---------- AÏLLAR EL MENÚ DEL SUBGRID ---------- */

.context-menu-items,
.context-menu-items * {
    display: block !important;
    grid-template-columns: initial !important;
    grid-column: auto !important;
}

.context-menu-items {
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 0;
    min-width: 180px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* ---------- ESTIL BASE DELS ITEMS ---------- */

.menu-items-host > * {
    position: relative;
    padding: 6px 12px;
    color: #333;
    border-bottom: 1px solid gray;
}

    .menu-items-host > *:last-child {
        border-bottom: none;
    }

    .menu-items-host > *:hover {
        background: #f2f2f2;
    }



/* Wrapper del submenu */
.mat-submenu-wrapper {
    position: relative;
    padding: 0 !important; /* ← EVITA DOBLE ALÇADA */
    border-bottom: none !important; /* gestionem manualment */
}

    /* PRIMER NIVELL: submenus normals → a la dreta */
    .mat-submenu-wrapper > .mat-submenu-items {
        top: 0;
        left: 100%;
    }

/* SEGON NIVELL: submenus dins submenus → també a la dreta, però alineats amb el parent */
.mat-submenu-items .mat-submenu-wrapper > .mat-submenu-items {
    top: 0; /* o 100% si vols que surtin a sota */
    left: 100%;
}

/* DINS PAGEOPTIONS → sempre a sota */
.mat-pageoptions-wrapper .mat-submenu-wrapper > .mat-submenu-items {
    top: 100%;
    left: 0;
}




.mat-pageoptions-wrapper .mat-submenu-title {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px; /* igual que els altres items de PageOptions */
    border-bottom: none; /* eliminem la vora per defecte */
}




/* Títol del submenu: rep EXACTAMENT el mateix padding que un item normal */
.mat-submenu-title {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px; /* ← igual que un item normal */
    cursor: pointer;
    color: #333;
    border-bottom: 1px solid gray;
}

/* Dins PageOptions → sense vora per defecte */
.mat-pageoptions-wrapper .mat-submenu-title {
    border-bottom: none;
}

/* Dins PageOptions → vora només en hover */
/*  .mat-pageoptions-wrapper .mat-submenu-wrapper:hover .mat-submenu-title {
        border-bottom: 1px solid gray;
    }*/

/* Últim submenu sense línia */
.menu-items-host > .mat-submenu-wrapper:last-child > .mat-submenu-title {
    border-bottom: none;
}


/* ---------- SUBMENU FLOTANT ---------- */

.mat-submenu-items {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    width: max-content; /* ← amplada segons el contingut */
    min-width: 100%; /* 180px ← amplada mínima */
    box-sizing: border-box;
}


    .mat-submenu-items > * {
        background: #fff;
        display: block;
        width: 100%;
        padding: 6px 12px;
        border-bottom: 1px solid gray;
        box-sizing: border-box;
    }


        .mat-submenu-items > *:last-child {
            border-bottom: none;
        }

        .mat-submenu-items > *:hover {
            background: #f2f2f2;
        }


/* Submenus dins PageOptions → a sota */
.mat-pageoptions-wrapper .mat-submenu-wrapper .mat-submenu-items {
    top: 100%;
    left: 0;
    background: #fff !important;
    z-index: 9999 !important;
}

/* El wrapper ha de ser relative per permetre flotació */
.mat-pageoptions-wrapper .mat-submenu-wrapper {
    position: relative;
}

}

@media(pointer:coarse) {
    .mat-list-item-content {
        padding: 6px 0;
        border-bottom: 1px solid gray;
    }
}


/* ============================================================
   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;
}

.mat-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}


/* ============================================================
   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;
    }



/* 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;
}