:root {
    /* ===== Colors principals ===== */
    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-primary-active: #0a53be;
    --color-secondary: #6c757d;
    --color-accent: #6366f1;
    /* ===== Auth Layout ===== */
    --auth-bg-gradient-top: #1e1e2f;
    --auth-bg-gradient-bottom: #3a3a5f;
    --auth-card-bg: rgba(255, 255, 255, 0.08);
    --auth-card-radius: 16px;
    --auth-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    --auth-card-text: #ffffff;
    /* Inputs */
    --auth-input-bg: #0f0f1a;
    --auth-input-border: #2e2e45;
    --auth-input-color: #e6e6f0;
    --auth-input-focus-border: #a855f7;
    --auth-input-focus-shadow: rgba(168, 85, 247, 0.35);
    /* Buttons */
    --auth-btn-gradient-start: #a855f7;
    --auth-btn-gradient-end: #6366f1;
    --auth-btn-text: #ffffff;
    /* Links */
    --auth-link-color: #9ca3c9;
    --auth-link-hover: #cbd0ff;
    /* Errors */
    --auth-error-color: #ff6b6b;
    /* ===== Buttons globals ===== */
    --btn-primary-bg: #0d6efd;
    --btn-primary-bg-hover: #0b5ed7;
    --btn-primary-bg-active: #0a53be;
    --btn-primary-border: #0d6efd;
    --btn-cancel-bg: #f8f9fa;
    --btn-cancel-bg-hover: #e9ecef;
    --btn-cancel-bg-active: #e2e6ea;
    --btn-danger-bg: #dc3545;
    --btn-danger-bg-hover: #c82333;
    --btn-danger-bg-active: #b21f2d;
    /* ===== Sidebar / Nav ===== */
    --nav-bg: #ffffff;
    --nav-item-hover: #efefef;
    --nav-item-border: #b8b8b8;
    /* ===== Menus ===== */
    --menu-bg: #ffffff;
    --menu-hover-bg: #e6e6e6;
    --menu-border: #b8b8b8;
    --menu-selected-bg: #2196f3;
    --menu-selected-text: #ffffff;
    /* ===== Lookup / Dropdown ===== */
    --dropdown-bg: #ffffff;
    --dropdown-hover-bg: #e0e0e0;
    --dropdown-border: #dddddd;
    /* ===== Modal ===== */
    --modal-bg: #ffffff;
    --modal-radius: 16px;
    --modal-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    /* ===== Property Grid ===== */
    --pg-label-color: #444444;
    --pg-border-color: #dddddd;
    --pg-hover-bg: #f7f7f7;
    /* ===== Misc ===== */
    --snackbar-bg: #323232;
    --snackbar-text: #ffffff;
    --snackbar-btn-bg: #4caf50;
}


    :root[data-app="identity-wasm"] {
        /* ===== Colors principals ===== */
        --color-primary: #0078D4;
        --color-primary-hover: #005A9E;
        --color-primary-active: #003B6F;
        --color-secondary: #E5F3FF;
        --color-accent: #4FA3E3;
        /* ===== Auth Layout ===== */
        --auth-bg-gradient-top: #003B6F;
        --auth-bg-gradient-bottom: #005A9E;
        --auth-card-bg: rgba(255, 255, 255, 0.10);
        --auth-card-radius: 18px;
        --auth-card-shadow: 0 24px 48px rgba(0, 0, 0, 0.40);
        --auth-card-text: #FFFFFF;
        /* Inputs */
        --auth-input-bg: #0F1A2A;
        --auth-input-border: #2E4A6F;
        --auth-input-color: #E5F3FF;
        --auth-input-focus-border: #4FA3E3;
        --auth-input-focus-shadow: rgba(79, 163, 227, 0.35);
        /* Buttons */
        --auth-btn-gradient-start: #0078D4;
        --auth-btn-gradient-end: #005A9E;
        --auth-btn-text: #FFFFFF;
        /* Links */
        --auth-link-color: #BBD9F5;
        --auth-link-hover: #E5F3FF;
        /* Errors */
        --auth-error-color: #FF6B6B;
        /* ===== Buttons globals ===== */
        --btn-primary-bg: #0078D4;
        --btn-primary-bg-hover: #005A9E;
        --btn-primary-bg-active: #003B6F;
        --btn-primary-border: #0078D4;
        --btn-cancel-bg: #F3F3F3;
        --btn-cancel-bg-hover: #E0E0E0;
        --btn-cancel-bg-active: #D0D0D0;
        --btn-danger-bg: #D83B01;
        --btn-danger-bg-hover: #BF360C;
        --btn-danger-bg-active: #A3330A;
        /* ===== Sidebar / Nav ===== */
        --nav-bg: #FFFFFF;
        --nav-item-hover: #E5F3FF;
        --nav-item-border: #D0D0D0;
        /* ===== Menus ===== */
        --menu-bg: #FFFFFF;
        --menu-hover-bg: #E5F3FF;
        --menu-border: #D0D0D0;
        --menu-selected-bg: #0078D4;
        --menu-selected-text: #FFFFFF;
        /* ===== Lookup / Dropdown ===== */
        --dropdown-bg: #FFFFFF;
        --dropdown-hover-bg: #E5F3FF;
        --dropdown-border: #D0D0D0;
        /* ===== Modal ===== */
        --modal-bg: #FFFFFF;
        --modal-radius: 18px;
        --modal-shadow: 0 -10px 30px rgba(0, 0, 0, 0.30);
        /* ===== Property Grid ===== */
        --pg-label-color: #003B6F;
        --pg-border-color: #D0D0D0;
        --pg-hover-bg: #E5F3FF;
        /* ===== Misc ===== */
        --snackbar-bg: #003B6F;
        --snackbar-text: #FFFFFF;
        --snackbar-btn-bg: #0078D4;
    }


    :root[data-app="cash-wasm"] {
        /* ===== Colors principals ===== */
        --color-primary: #009688;
        --color-primary-hover: #00796b;
        --color-primary-active: #00695c;
        --color-secondary: #80cbc4;
        --color-accent: #26a69a;
        /* ===== Auth Layout ===== */
        --auth-bg-gradient-top: #004d40;
        --auth-bg-gradient-bottom: #00695c;
        --auth-card-bg: rgba(255, 255, 255, 0.10);
        --auth-card-radius: 18px;
        --auth-card-shadow: 0 24px 48px rgba(0, 0, 0, 0.40);
        --auth-card-text: #e0f2f1;
        /* Inputs */
        --auth-input-bg: #00332e;
        --auth-input-border: #00564f;
        --auth-input-color: #e0f2f1;
        --auth-input-focus-border: #26a69a;
        --auth-input-focus-shadow: rgba(38, 166, 154, 0.35);
        /* Buttons */
        --auth-btn-gradient-start: #26a69a;
        --auth-btn-gradient-end: #009688;
        --auth-btn-text: #ffffff;
        /* Links */
        --auth-link-color: #b2dfdb;
        --auth-link-hover: #e0f2f1;
        /* Errors */
        --auth-error-color: #ff8a80;
        /* ===== Buttons globals ===== */
        --btn-primary-bg: #009688;
        --btn-primary-bg-hover: #00796b;
        --btn-primary-bg-active: #00695c;
        --btn-primary-border: #009688;
        --btn-cancel-bg: #f1f1f1;
        --btn-cancel-bg-hover: #e0e0e0;
        --btn-cancel-bg-active: #d5d5d5;
        --btn-danger-bg: #d84315;
        --btn-danger-bg-hover: #bf360c;
        --btn-danger-bg-active: #a3330a;
        /* ===== Sidebar / Nav ===== */
        --nav-bg: #ffffff;
        --nav-item-hover: #e0f2f1;
        --nav-item-border: #b2dfdb;
        /* ===== Menus ===== */
        --menu-bg: #ffffff;
        --menu-hover-bg: #e0f2f1;
        --menu-border: #b2dfdb;
        --menu-selected-bg: #009688;
        --menu-selected-text: #ffffff;
        /* ===== Lookup / Dropdown ===== */
        --dropdown-bg: #ffffff;
        --dropdown-hover-bg: #e0f2f1;
        --dropdown-border: #b2dfdb;
        /* ===== Modal ===== */
        --modal-bg: #ffffff;
        --modal-radius: 18px;
        --modal-shadow: 0 -10px 30px rgba(0, 0, 0, 0.30);
        /* ===== Property Grid ===== */
        --pg-label-color: #004d40;
        --pg-border-color: #b2dfdb;
        --pg-hover-bg: #e0f2f1;
        /* ===== Misc ===== */
        --snackbar-bg: #004d40;
        --snackbar-text: #e0f2f1;
        --snackbar-btn-bg: #26a69a;
    }

    /*:root[data-app="mat.loxone-wasm"] {
        --sidebar-bg: #111114;
        --sidebar-text: #e5e5e5;*/ /* gris clar */
    /*}*/


    :root[data-app="matgen-wasm"] {
        --color-primary: #a855f7;
        --auth-bg-gradient-top: #1e1e2f;
        --auth-bg-gradient-bottom: #3a3a5f;
        --mat-list-selected-bg: #2196F3;
        --mat-list-selected-text: #FFFFFF;
    }
    :root[data-app="album-manager"] {
        --color-primary: #a855f7;
        --auth-bg-gradient-top: #1e1e2f;
        --auth-bg-gradient-bottom: #3a3a5f;
    }
    :root[data-app="Tatita-web"] {
        --color-primary: #a855f7;
        --auth-bg-gradient-top: #1e1e2f;
        --auth-bg-gradient-bottom: #3a3a5f;
    }

    :root[data-tenant="MM_VR"] {
        --color-primary: #ff9800;
        --btn-primary-bg: #ff9800;
        --btn-primary-bg-hover: #fb8c00;
    }

    :root[data-tenant="Tatita"] {
        --color-primary: #3f51b5;
        --btn-primary-bg: #3f51b5;
        --btn-primary-bg-hover: #3949ab;
    }

    :root[data-tenant="Rosa"] {
        --color-primary: #3f51b5;
        --btn-primary-bg: #3f51b5;
        --btn-primary-bg-hover: #3949ab;
    }





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

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-color, #000000);
    background-color: var(--background-color, #ffffff);
}

a {
    text-decoration: none;
    color: var(--link-color, #000000);
}

    a:hover {
        color: var(--link-hover-color, var(--color-primary));
    }

    a.disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.5;
        color: var(--disabled-text-color, #6c757d);
    }

input, select {
    box-sizing: border-box;
    color: var(--input-text-color, #000);
    background-color: var(--input-bg, #fff);
    border: 1px solid var(--input-border, #ccc);
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.page-wrapper-600 {
    max-width: 600px;
}

.page-wrapper-900 {
    max-width: 900px;
}

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

.ico svg,
svg {
    stroke: var(--icon-stroke, black);
    stroke-width: 1px;
}

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

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

mark {
    background-color: var(--highlight-bg, #ffeb3b);
    padding: 0 2px;
    border-radius: 2px;
}


/* ============================================================
   AUTH (refactoritzat amb tokens)
   ============================================================ */

.auth-layout {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( to bottom, var(--auth-bg-gradient-top), var(--auth-bg-gradient-bottom) );
    font-family: 'Segoe UI', sans-serif;
    color: var(--auth-card-text);
}

.auth-card {
    width: 380px;
    padding: 32px;
    border-radius: var(--auth-card-radius);
    background: var(--auth-card-bg);
    backdrop-filter: blur(12px);
    box-shadow: var(--auth-card-shadow);
    color: var(--auth-card-text);
    text-align: center;
}

    .auth-card h2 {
        margin-bottom: 24px;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--auth-card-text);
    }

.auth-input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-input-border);
    border-radius: 8px;
    color: var(--auth-input-color);
    font-size: 0.95rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

    .auth-input:focus {
        outline: none;
        border-color: var(--auth-input-focus-border);
        box-shadow: 0 0 0 3px var(--auth-input-focus-shadow);
    }

.auth-button {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: linear-gradient( 90deg, var(--auth-btn-gradient-start), var(--auth-btn-gradient-end) );
    border: none;
    border-radius: 8px;
    color: var(--auth-btn-text);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.25s;
}

    .auth-button:hover {
        opacity: 0.85;
    }

.auth-links {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

    .auth-links a {
        color: var(--auth-link-color);
    }

        .auth-links a:hover {
            color: var(--auth-link-hover);
        }

.auth-error {
    margin-top: 16px;
    color: var(--auth-error-color);
    font-size: 0.9rem;
}

/* --- Responsive per mòbil --- */
@media (max-width: 480px) {
    .auth-layout {
        padding: 20px 0;
        align-items: flex-start;
    }

    .auth-card {
        width: 90%;
        padding: 24px;
        border-radius: calc(var(--auth-card-radius) - 2px);
        margin: 0 16px;
    }

        .auth-card h2 {
            font-size: 1.4rem;
            margin-bottom: 20px;
        }

    .auth-input {
        padding: 12px;
        font-size: 0.9rem;
        margin-bottom: 16px;
    }

    .auth-button {
        padding: 14px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .auth-links {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        margin-top: 20px;
    }

        .auth-links a {
            font-size: 0.9rem;
        }

    .auth-error {
        font-size: 0.85rem;
        margin-top: 14px;
    }
}

/* --- Responsive per tablets --- */
@media (max-width: 768px) {
    .auth-layout {
        padding: 40px 0;
    }

    .auth-card {
        width: 420px;
        padding: 32px;
        border-radius: var(--auth-card-radius);
        margin: 0 24px;
    }

        .auth-card h2 {
            font-size: 1.5rem;
            margin-bottom: 22px;
        }

    .auth-input {
        padding: 14px;
        font-size: 1rem;
        margin-bottom: 18px;
    }

    .auth-button {
        padding: 16px;
        font-size: 1.05rem;
        border-radius: 10px;
    }

    .auth-links {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        margin-top: 22px;
    }

        .auth-links a {
            font-size: 0.95rem;
        }

    .auth-error {
        font-size: 0.9rem;
        margin-top: 16px;
    }
}



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

.nav-list {
    background-color: var(--nav-bg);
    padding-top: 20px;
    width: 150px;
}

    .nav-list .item {
        display: block;
        padding: 4px 7px 2px 4px;
        border-bottom: 1px solid var(--nav-item-border);
    }

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

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

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



/* ============================================================
   BUTTONS (migrated to design tokens)
   ============================================================ */

/* 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: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-border);
    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;
}

    .btn-primary:hover {
        background-color: var(--btn-primary-bg-hover);
        border-color: var(--btn-primary-bg-hover);
    }

    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--btn-primary-bg-active);
        border-color: var(--btn-primary-bg-active);
        transform: translateY(1px);
    }

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

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

/* Outline variant */
.btn-outline-primary {
    color: var(--btn-primary-bg);
    background-color: transparent;
    border: 1px solid var(--btn-primary-bg);
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--btn-primary-bg);
        border-color: var(--btn-primary-bg-hover);
    }

/* 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: var(--btn-cancel-bg) !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;
}

    .btn-cancel:hover {
        background-color: var(--btn-cancel-bg-hover);
    }

    .btn-cancel:active,
    .btn-cancel.active {
        background-color: var(--btn-cancel-bg-active);
        transform: translateY(1px);
    }

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

    .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 {
        background-color: var(--btn-cancel-bg-hover);
    }

/* 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: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-bg);
    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;
}

    .btn-danger:hover {
        background-color: var(--btn-danger-bg-hover);
        border-color: var(--btn-danger-bg-hover);
    }

    .btn-danger:active,
    .btn-danger.active {
        background-color: var(--btn-danger-bg-active);
        border-color: var(--btn-danger-bg-active);
        transform: translateY(1px);
    }

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

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

/* Outline variant */
.btn-outline-danger {
    color: var(--btn-danger-bg);
    background-color: transparent;
    border: 1px solid var(--btn-danger-bg);
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: var(--btn-danger-bg);
        border-color: var(--btn-danger-bg-hover);
    }


/* ============================================================
   MAT LIST (migrated to design tokens)
   ============================================================ */

@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: var(--mat-list-hover-bg, #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: var(--mat-list-selected-bg, #2196F3);
            color: var(--mat-list-selected-text, #FFFFFF);
        }

        .mat-cell:hover {
            background-color: var(--mat-list-hover-bg, #EFEFEF);
            cursor: pointer;
        }
}

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


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

/* =========================================================
   MenuBar
   ========================================================= */

.mat-menubar {
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    width: 100%;
    max-width: 900px;
}


/* =========================================================
   MenuBar item
   ========================================================= */

.mat-menubar-item {
    position: relative;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

    .mat-menubar-item:hover {
        background: var(--menu-hover-bg);
    }

    .mat-menubar-item.active,
    .mat-menubar-item:focus {
        outline: none;
        background: var(--menu-selected-bg);
        color: var(--menu-selected-text);
    }


/* =========================================================
   Popup
   ========================================================= */

.mat-menu-popup {
    position: fixed;
    z-index: 10000;
    min-width: 220px;
    padding: .25rem 0;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .10);
}


/* =========================================================
   Menu
   ========================================================= */

.mat-menu {
    display: flex;
    flex-direction: column;
    background: var(--menu-bg);
    padding: 2px 0;
    user-select: none;
}


/* =========================================================
   Menu item
   ========================================================= */

.mat-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

    .mat-menu-item:hover,
    .mat-menu-item:focus {
        outline: none;
        background: var(--menu-hover-bg);
    }

    .mat-menu-item.selected {
        background: var(--menu-selected-bg);
        color: var(--menu-selected-text);
    }

    .mat-menu-item.disabled,
    .mat-menu-item:disabled {
        opacity: .5;
        cursor: default;
    }

        .mat-menu-item.disabled:hover,
        .mat-menu-item:disabled:hover {
            background: transparent;
        }


/* =========================================================
   Menu content
   ========================================================= */

.mat-menu-icon {
    width: 20px;
    flex: 0 0 20px;
    margin-right: 8px;
}

.mat-menu-title {
    flex: 1;
    min-width: 0;
}

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

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

.mat-menu-separator {
    height: 1px;
    margin: 4px 8px;
    background: var(--menu-border);
}

.mat-menu-loader {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

/* =========================================================
   Separator
   ========================================================= */

.mat-menu-separator {
    height: 1px;
    margin: 4px 0;
    background: var(--menu-border);
}


/* =========================================================
   Overlay
   ========================================================= */

.mat-menu-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}


/* =========================================================
   ContextMenu target
   ========================================================= */

.mat-contextmenu-target {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* =========================================================
   Menu root button — MenuBar
   ========================================================= */

.mat-menu-root-button {
    position: relative;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

    .mat-menu-root-button:hover {
        background: var(--menu-hover-bg);
    }

    .mat-menu-root-button.selected {
        background: var(--menu-selected-bg);
        color: var(--menu-selected-text);
    }


/* =========================================================
   Menu button — submenu
   ========================================================= */

.mat-menu-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

    .mat-menu-button:hover {
        background: var(--menu-hover-bg);
    }

    .mat-menu-button.selected,
    .mat-menu-button:focus {
        outline: none;
        background: var(--menu-selected-bg);
        color: var(--menu-selected-text);
    }


@media (pointer: coarse) {
    .mat-menu-root-button {
        min-height: 44px;
        padding: 0 12px;
    }

    .mat-menu-item,
    .mat-menu-button {
        min-height: 48px;
        padding-left: 16px;
        padding-right: 16px;
    }

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

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

    .mat-menu-popup {
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }

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

    .mat-menubar,
    .mat-menu,
    .mat-menu-popup {
        user-select: none;
        -webkit-user-select: none;
    }
}

@media (pointer: coarse) and (max-width: 600px) {

    .mat-menu-popup {
        left: 0 !important;
        right: 0 !important;
        width: 100vw;
        min-width: 100vw;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

.mat-menu-root-button:focus-visible,
.mat-menu-button:focus-visible,
.mat-menu-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.mat-menu-root-button,
.mat-menu-button,
.mat-menu-item {
    transition: background-color .08s ease, color .08s ease;
}


/* ============================================================
   NAV (refactoritzat amb tokens)
   ============================================================ */

.disabled-navlink {
    opacity: var(--navlink-disabled-opacity, 0.5);
    cursor: var(--navlink-disabled-cursor, not-allowed);
    color: var(--navlink-disabled-color, #6c757d);
}

.navlink {
    color: var(--navlink-color, var(--color-primary));
    text-decoration: none;
    cursor: pointer;
}

    .navlink:hover {
        color: var(--navlink-hover-color, var(--color-primary-hover));
    }

    .navlink.active {
        color: var(--navlink-active-color, var(--color-primary-active));
        font-weight: 600;
    }



/* ============================================================
   SNACKBAR (refactoritzat amb tokens)
   ============================================================ */

.mat-snackbar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 12px 18px;
    background-color: var(--snackbar-bg);
    color: var(--snackbar-text);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2000;
    animation: snackbar-slide-in .25s ease-out;
}

    .mat-snackbar button {
        background-color: var(--snackbar-btn-bg);
        color: var(--snackbar-text);
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
    }

        .mat-snackbar button:hover {
            opacity: 0.85;
        }

@keyframes snackbar-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* ============================================================
   LOOKUP (refactoritzat amb tokens)
   ============================================================ */

.lookup-root {
    position: relative;
    cursor: pointer;
}

.lookup-display {
}

.lookup-placeholder {
}

.lookup-dropdown {
    position: absolute;
    top: 1.8em;
    left: 0;
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid var(--dropdown-border);
    border-right: 1px solid var(--dropdown-border);
    border-bottom: 1px solid var(--dropdown-border);
    background-color: var(--dropdown-bg);
    min-width: 100px;
    width: min-content;
    padding: 5px 10px 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;
}

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

    .lookup-option:hover {
        background-color: var(--dropdown-hover-bg);
    }

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



/* ============================================================
   BUTTONS (mat-btn) refactoritzat amb tokens)
   ============================================================ */

.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: var(--btn-primary-bg);
    color: var(--text-color, #fff);
}

.mat-btn-secondary {
    background: var(--btn-cancel-bg);
    color: var(--text-color, #333);
}

.mat-btn-danger {
    background: var(--btn-danger-bg);
    color: var(--text-color, #fff);
}

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

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



/* ============================================================
   SEARCHBOX (refactoritzat amb tokens)
   ============================================================ */

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

    .searchbox-wrapper input[type=text] {
        -webkit-appearance: none;
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        font-size: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        color: var(--input-text-color);
    }

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

.searchbox-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--input-bg);
    color: var(--input-text-color);
    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;
}

.searchbox:not(:placeholder-shown) .searchbox-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

.searchbox-clear-btn:hover {
    background: var(--input-hover-bg, rgba(0,0,0,0.12));
}

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





/* ============================
   DROPDOWN (refactoritzat amb tokens)
   ============================ */

.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 var(--dropdown-border);
    border-right: 1px solid var(--dropdown-border);
    border-bottom: 1px solid var(--dropdown-border);
    background-color: var(--dropdown-bg);
    min-width: 100px;
    width: min-content;
    padding: 5px 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: 10100;
}

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

        .dropdown > *:hover {
            background-color: var(--dropdown-hover-bg);
        }

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



/* ============================================================
   MODAL (refactoritzat amb tokens)
   ============================================================ */

.mat-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--modal-bg);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    padding: 24px;
    z-index: 3000;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.mat-modal-header {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-color, #000);
}

.mat-modal-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}



/* ============================================================
   PROPERTY GRID (refactoritzat amb tokens)
   ============================================================ */

.mat-propertygrid-container {
    --mat-propertygrid-label-width: 160px;
    color: var(--text-color);
    border: 1px solid var(--pg-border-color);
}

.mat-propertygrid-row {
    display: flex;
    align-items: flex-start;
    min-height: 28px;
    padding: 2px 0;
    border-bottom: 1px solid var(--pg-border-color);
    transition: background 0.15s ease;
    width: 100%;
}

    .mat-propertygrid-row:hover {
        background: var(--pg-hover-bg);
    }

.mat-propertygrid-label {
    width: var(--mat-propertygrid-label-width);
    padding: 4px 6px;
    font-weight: 500;
    color: var(--pg-label-color);
    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: var(--pg-hover-bg);
    }

.mat-propertygrid-editor {
    flex: 1;
    padding: 2px 0;
}

    .mat-propertygrid-editor input {
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        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 {
    border: 2px dashed var(--pg-border-color);
    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: var(--text-color);
    opacity: 0.6;
    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: var(--pg-border-color);
    transition: .3s;
    border-radius: 24px;
}

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

input:checked + .slider {
    background-color: var(--color-primary);
}

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



/* ============================
   ERROR BANNER (refactoritzat amb tokens)
   ============================ */

.mat-errorbanner {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--error-bg, #f8d7da);
    color: var(--error-text, #721c24);
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid var(--error-border, #f5c6cb);
    animation: fadeIn 0.3s ease-out;
}

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