/* Estils Kosmos.coop per a la intranet */
/* Fons violeta + llums rosa/blau + botons blanc/negre del landing */

/* ============================================ */
/* VARIABLES CSS PERSONALITZADES */
/* ============================================ */

:root[data-theme="dark"] {
    --card-bg: rgba(30, 20, 40, 0.85);
    --dark-accent: #a61d64;
    --dark-accent-hover: #a61d64;
    --dark-bg-primary: #000;
    --dark-bg-secondary: #151618;
    --dark-bg-tertiary: #151618;
    --dark-text-primary: #aaa;
    --dark-text-secondary: #959191;
    --kms-slider-fill: #77234f;
    --kms-slider-track-bg: #282626;
}

/* ============================================ */
/* LOGIN CARD - adaptat a data-theme            */
/* ============================================ */

html[data-theme="dark"] .login-card {
    background: #1a1a2e !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

html[data-theme="light"] .login-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
}

/* Logo adaptatiu: negre per light, blanc per dark */
html[data-theme="light"] .logo-light-theme { display: block !important; }
html[data-theme="light"] .logo-dark-theme  { display: none !important; }
html[data-theme="dark"]  .logo-light-theme { display: none !important; }
html[data-theme="dark"]  .logo-dark-theme  { display: block !important; }

/* Botó login - override del btn-primary blanc genèric */
html[data-theme="light"] .login-form .btn-primary,
html[data-theme="light"] .login-form button[type="submit"] {
    background: linear-gradient(135deg, #0891b2 0%, #14b8a6 50%, #22d3ee 100%) !important;
    color: #ffffff !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* ============================================ */
/* FONS AMB DEGRADAT VIOLETA + LLUMS KOSMOS */
/* ============================================ */

html[data-theme="dark"] body {
    background-attachment: fixed !important;
    color: #ffffff !important;
    min-height: 100vh !important;
    position: relative !important;
}

html[data-theme="light"] body {
    background: #ffffff !important;
    color: #212529 !important;
    min-height: 100vh !important;
    position: relative !important;
}


/* Llum radial blau */
/* body::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    background: radial-gradient(ellipse 60% 50% at 80% 70%,
        rgba(30, 110, 200, 0.10) 0%,
        rgba(38, 105, 165, 0.10) 30%,
        rgba(25, 70, 110, 0.05) 60%,
        rgba(0, 0, 0, 0) 85%) !important;
    pointer-events: none !important;
} */

/* Assegurar que el contingut estigui per sobre */
#app, .main-content, .wrapper, .content, header, nav, main {
    position: relative !important;
    z-index: 1 !important;
}


/* ============================================ */
/* BOTONS DEL SISTEMA - Blanc/Negre (Landing) */
/* ============================================ */

:root[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary,
.btn-primary,
:root[data-theme="dark"] button[type="submit"]:not(.customButton),
html[data-theme="dark"] button[type="submit"]:not(.customButton),
button[type="submit"]:not(.customButton) {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-align: center !important;
    text-shadow: none !important;
}

:root[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-info,
.btn-info {
    background: linear-gradient(135deg, rgb(30, 110, 200) 0%, rgb(50, 140, 220) 100%) !important;
    border: 1px solid rgb(30, 110, 200) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:hover,
.btn-info:hover {
    background: linear-gradient(135deg, rgb(50, 130, 220) 0%, rgb(70, 160, 240) 100%) !important;
    box-shadow: 0 0 30px rgba(30, 110, 200, 0.6) !important;
    filter: brightness(1.2) !important;
}

:root[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-success,
.btn-success {
    background: linear-gradient(135deg, rgb(30, 180, 100) 0%, rgb(20, 140, 80) 100%) !important;
    border: 1px solid rgb(30, 180, 100) !important;
    color: #ffffff !important;
}


/* ============================================ */
/* PANELLS I TARGETES */
/* ============================================ */

.panel, .card, .box, .content-wrapper {
    background-color: rgba(30, 20, 40, 0.85) !important;
    border: 1px solid rgba(180, 50, 140, 0.4) !important;
    color: #e0e0e0 !important;
    backdrop-filter: blur(10px) !important;
}

.panel-heading, .card-header, .box-header {
    background: linear-gradient(135deg,
        rgba(180, 50, 140, 0.5) 0%,
        rgba(135, 38, 105, 0.4) 50%,
        rgba(90, 25, 70, 0.3) 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(180, 50, 140, 0.6) !important;
}

/* ============================================ */
/* TAULES */
/* ============================================ */

table, .table {
    /* background-color: rgba(30, 20, 40, 0.7) !important; */
    color: #e0e0e0 !important;
}


html[data-theme="dark"] table tbody tr:nth-child(even) {
    background-color: rgba(40, 30, 50, 0.3) !important;
}



/* Fons negre per head-app en dark mode */
/* html[data-theme="dark"] table#head-app tbody tr {
    background: #000 !important;
} */


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

.sidebar, .main-sidebar {
    background: linear-gradient(to bottom, #2d1b3d 0%, #1a0f26 100%) !important;
    border-right: 1px solid rgba(180, 50, 140, 0.3) !important;
}

.sidebar .menu li a:hover {
    background: linear-gradient(90deg,
        rgba(180, 50, 140, 0.4) 0%,
        rgba(135, 38, 105, 0.3) 100%) !important;
    border-left: 3px solid rgb(180, 50, 140) !important;
}

/* ============================================ */
/* MODALS */
/* ============================================ */

.modal-content {
    background: linear-gradient(to bottom, #2d1b3d 0%, #1a0f26 100%) !important;
    border: 1px solid rgba(180, 50, 140, 0.5) !important;
}

.modal-header {
    background: #2a2a2a !important;
    border-bottom: 1px solid #444 !important;
    color: #e8e8e8 !important;
}

html[data-theme="light"] .modal-header {
    background: #3a3a3a !important;
    border-bottom: 1px solid #555 !important;
    color: #f0f0f0 !important;
}

/* ============================================ */
/* BOTONS MAPA CRIDES - sobreescriure btn-primary genèric */
/* ============================================ */

/* Restaurar estil del botó primari als panels del mapa (crm_calls_map_view) */
.btn-modal.btn-primary,
html[data-theme="light"] .btn-modal.btn-primary,
html[data-theme="dark"] .btn-modal.btn-primary {
    background: #47d2a2 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.btn-modal.btn-primary:hover,
html[data-theme="light"] .btn-modal.btn-primary:hover,
html[data-theme="dark"] .btn-modal.btn-primary:hover {
    background: #3ab88c !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ============================================ */
/* TEXT */
/* ============================================ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #ffffff !important;
}

/* ============================================ */
/* BOTONS SECUNDARIS DATAEDITOR */
/* ============================================ */

/* kms-styles.css | https://intranet.kosmos.coop/kms/css/kms-styles.css?k=20260214114445 */

.dataEditor button.secondary, .dataEditor .btn-secondary, .dataEditor input[type="button"][value*="Cancel"], .dataEditor input[type="button"][value*="Tancar"] {
    /* background: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%); */
    background: var(--dark-bg-secondary);
}

/* ============================================ */
/* ALTRES */
/* ============================================ */

.content, .wrapper, .main-content {
    background: transparent !important;
}

.badge {
    background: linear-gradient(135deg, rgb(180, 50, 140) 0%, rgb(135, 38, 105) 100%) !important;
    color: #ffffff !important;
}

.progress-bar {
    background: linear-gradient(90deg, rgb(180, 50, 140) 0%, rgb(30, 110, 200) 100%) !important;
}

/* ============================================ */
/* MENÚ LATERAL - ELEMENT SELECCIONAT */
/* ============================================ */

#leftmenu li.selected div#butmenu, #leftmenu li.sub_selected div#butmenu {
    background: linear-gradient(90deg, #ff239442 0%, #ff239442 100%);
    border-left-color: var(--dark-accent-hover);
}

/* ============================================ */
/* TOP OPTIONS USER NAME */
/* ============================================ */

td.topoptions b {
    color: var(--dark-text-primary);
}

/* ============================================ */
/* NOTIFICACIONS KMS - Personalització */
/* ============================================ */

/* Dark theme: fons blanc, text negre */
:root[data-theme="dark"] .kms-notifications,
html[data-theme="dark"] .kms-notifications,
:root[data-theme="dark"] .kms-notification,
html[data-theme="dark"] .kms-notification {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

:root[data-theme="dark"] .kms-notification .notification-title,
html[data-theme="dark"] .kms-notification .notification-title {
    color: #000000 !important;
}

:root[data-theme="dark"] .kms-notification .notification-message,
html[data-theme="dark"] .kms-notification .notification-message {
    color: #000000 !important;
}

/* Forçar text negre per tots els elements dins de les notificacions en dark theme */
:root[data-theme="dark"] .kms-notification *,
html[data-theme="dark"] .kms-notification *,
:root[data-theme="dark"] .kms-notification p,
html[data-theme="dark"] .kms-notification p,
:root[data-theme="dark"] .kms-notification span,
html[data-theme="dark"] .kms-notification span,
:root[data-theme="dark"] .kms-notification div,
html[data-theme="dark"] .kms-notification div {
    color: #000000 !important;
}

/* Light theme: fons negre, text blanc */
:root[data-theme="light"] .kms-notifications,
html[data-theme="light"] .kms-notifications,
:root[data-theme="light"] .kms-notification,
html[data-theme="light"] .kms-notification {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

:root[data-theme="light"] .kms-notification .notification-title,
html[data-theme="light"] .kms-notification .notification-title {
    color: #ffffff !important;
}

:root[data-theme="light"] .kms-notification .notification-message,
html[data-theme="light"] .kms-notification .notification-message {
    color: #e0e0e0 !important;
}

/* Mapa de clusters/crides - Color del text del badge */
.cluster-badge,
.cluster-badge svg {
    color: #fff !important;
    fill: #fff !important;
}

/* ============================================ */
/* BADGES per STATUS, TIPUS, PRIORITAT */
/* ============================================ */
.kms-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.kms-badge i {
    font-size: 10px;
}

/* ============================================ */
/* BADGES CRM_CALLS - Tipus de crida */
/* ============================================ */

/* Voluntariat - Vermell suau */
.kms-badge-voluntariat {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
html[data-theme="dark"] .kms-badge-voluntariat {
    background-color: rgba(231, 76, 60, 0.2);
    color: #ff6b6b;
}

/* Mentoria - Violeta */
.kms-badge-mentoria {
    background-color: rgba(108, 52, 131, 0.15);
    color: #6c3483;
    border: 1px solid rgba(108, 52, 131, 0.3);
}
html[data-theme="dark"] .kms-badge-mentoria {
    background-color: rgba(108, 52, 131, 0.2);
    color: #bb8fce;
}

/* Formació - Verd turquesa */
.kms-badge-formacio {
    background-color: rgba(20, 143, 119, 0.15);
    color: #148f77;
    border: 1px solid rgba(20, 143, 119, 0.3);
}
html[data-theme="dark"] .kms-badge-formacio {
    background-color: rgba(20, 143, 119, 0.2);
    color: #76d7c4;
}

/* Coordinació - Violeta fosc */
.kms-badge-coordinacio {
    background-color: rgba(142, 68, 173, 0.15);
    color: #8e44ad;
    border: 1px solid rgba(142, 68, 173, 0.3);
}
html[data-theme="dark"] .kms-badge-coordinacio {
    background-color: rgba(142, 68, 173, 0.2);
    color: #c39bd3;
}

/* Comunicació - Blau */
.kms-badge-comunicacio {
    background-color: rgba(40, 116, 166, 0.15);
    color: #2874a6;
    border: 1px solid rgba(40, 116, 166, 0.3);
}
html[data-theme="dark"] .kms-badge-comunicacio {
    background-color: rgba(40, 116, 166, 0.2);
    color: #85c1e9;
}

/* Difusió - Blau cel */
.kms-badge-difusio {
    background-color: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.3);
}
html[data-theme="dark"] .kms-badge-difusio {
    background-color: rgba(23, 162, 184, 0.2);
    color: #5dade2;
}

/* Disseny - Rosa */
.kms-badge-disseny {
    background-color: rgba(236, 64, 122, 0.15);
    color: #ec407a;
    border: 1px solid rgba(236, 64, 122, 0.3);
}
html[data-theme="dark"] .kms-badge-disseny {
    background-color: rgba(236, 64, 122, 0.2);
    color: #f48fb1;
}

/* Tecnologia - Blau fosc */
.kms-badge-tecnologia {
    background-color: rgba(27, 79, 114, 0.15);
    color: #1b4f72;
    border: 1px solid rgba(27, 79, 114, 0.3);
}
html[data-theme="dark"] .kms-badge-tecnologia {
    background-color: rgba(27, 79, 114, 0.2);
    color: #7fb3d5;
}

/* Suport - Groc mostassa */
.kms-badge-suport {
    background-color: rgba(214, 137, 16, 0.15);
    color: #d68910;
    border: 1px solid rgba(214, 137, 16, 0.3);
}
html[data-theme="dark"] .kms-badge-suport {
    background-color: rgba(214, 137, 16, 0.2);
    color: #f5b041;
}

/* Recerca - Violeta clar */
.kms-badge-recerca {
    background-color: rgba(125, 60, 152, 0.15);
    color: #7d3c98;
    border: 1px solid rgba(125, 60, 152, 0.3);
}
html[data-theme="dark"] .kms-badge-recerca {
    background-color: rgba(125, 60, 152, 0.2);
    color: #af7ac5;
}

/* Infraestructura - Gris */
.kms-badge-infraestructura {
    background-color: rgba(86, 101, 115, 0.15);
    color: #566573;
    border: 1px solid rgba(86, 101, 115, 0.3);
}
html[data-theme="dark"] .kms-badge-infraestructura {
    background-color: rgba(86, 101, 115, 0.2);
    color: #aab7b8;
}

/* Logística - Vermell terròs */
.kms-badge-logistica {
    background-color: rgba(123, 59, 59, 0.15);
    color: #7b3b3b;
    border: 1px solid rgba(123, 59, 59, 0.3);
}
html[data-theme="dark"] .kms-badge-logistica {
    background-color: rgba(123, 59, 59, 0.2);
    color: #e6b0aa;
}

/* Traducció - Verd clar */
.kms-badge-traduccio {
    background-color: rgba(14, 102, 85, 0.15);
    color: #0e6655;
    border: 1px solid rgba(14, 102, 85, 0.3);
}
html[data-theme="dark"] .kms-badge-traduccio {
    background-color: rgba(14, 102, 85, 0.2);
    color: #7dcea0;
}

/* ============================================ */
/* BADGES CRM_CALLS - Prioritat */
/* ============================================ */

/* Baixa - Gris */
.kms-badge-prioritat-baixa {
    background-color: rgba(127, 140, 141, 0.15);
    color: #7f8c8d;
    border: 1px solid rgba(127, 140, 141, 0.3);
}
html[data-theme="dark"] .kms-badge-prioritat-baixa {
    background-color: rgba(127, 140, 141, 0.2);
    color: #bdc3c7;
}

/* Mitjana - Groc taronja */
.kms-badge-prioritat-mitjana {
    background-color: rgba(243, 156, 18, 0.15);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.3);
}
html[data-theme="dark"] .kms-badge-prioritat-mitjana {
    background-color: rgba(243, 156, 18, 0.2);
    color: #f8c471;
}

/* Alta - Taronja */
.kms-badge-prioritat-alta {
    background-color: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}
html[data-theme="dark"] .kms-badge-prioritat-alta {
    background-color: rgba(230, 126, 34, 0.2);
    color: #eb984e;
}

/* Urgent - Vermell */
.kms-badge-prioritat-urgent {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
html[data-theme="dark"] .kms-badge-prioritat-urgent {
    background-color: rgba(231, 76, 60, 0.2);
    color: #ec7063;
}

/* ============================================ */
/* BADGES CRM_CALLS - Status (amb icones) */
/* ============================================ */

/* Activa - Verd */
.kms-badge-status-activa {
    background-color: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}
html[data-theme="dark"] .kms-badge-status-activa {
    background-color: rgba(39, 174, 96, 0.2);
    color: #82e0aa;
}

/* Tancada - Gris fosc */
.kms-badge-status-tancada {
    background-color: rgba(127, 140, 141, 0.15);
    color: #7f8c8d;
    border: 1px solid rgba(127, 140, 141, 0.3);
}
html[data-theme="dark"] .kms-badge-status-tancada {
    background-color: rgba(127, 140, 141, 0.2);
    color: #95a5a6;
}

/* Pausada - Taronja */
.kms-badge-status-pausada {
    background-color: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}
html[data-theme="dark"] .kms-badge-status-pausada {
    background-color: rgba(230, 126, 34, 0.2);
    color: #eb984e;
}

/* Arxivada - Gris clar */
.kms-badge-status-arxivada {
    background-color: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.3);
}
html[data-theme="dark"] .kms-badge-status-arxivada {
    background-color: rgba(149, 165, 166, 0.2);
    color: #bdc3c7;
}

/* ============================================
   TIPUS D'ACTOR - Badges (ent_actors module)
   ============================================ */

/* Autònom - Cian/Turquoise */
.kms-badge-autonom {
    background-color: rgba(26, 188, 156, 0.15);
    color: #16a085;
    border: 1px solid rgba(26, 188, 156, 0.3);
}
html[data-theme="dark"] .kms-badge-autonom {
    background-color: rgba(26, 188, 156, 0.2);
    color: #1abc9c;
}

/* Empresa - Blue */
.kms-badge-empresa {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
    border: 1px solid rgba(52, 152, 219, 0.3);
}
html[data-theme="dark"] .kms-badge-empresa {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

/* Fundació - Purple */
.kms-badge-fundacio {
    background-color: rgba(155, 89, 182, 0.15);
    color: #8e44ad;
    border: 1px solid rgba(155, 89, 182, 0.3);
}
html[data-theme="dark"] .kms-badge-fundacio {
    background-color: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}

/* Associació - Green */
.kms-badge-associacio {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
html[data-theme="dark"] .kms-badge-associacio {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

/* Comunitat - Orange */
.kms-badge-comunitat {
    background-color: rgba(230, 126, 34, 0.15);
    color: #d35400;
    border: 1px solid rgba(230, 126, 34, 0.3);
}
html[data-theme="dark"] .kms-badge-comunitat {
    background-color: rgba(230, 126, 34, 0.2);
    color: #e67e22;
}

/* Institució - Grey */
.kms-badge-institucio {
    background-color: rgba(127, 140, 141, 0.15);
    color: #7f8c8d;
    border: 1px solid rgba(127, 140, 141, 0.3);
}
html[data-theme="dark"] .kms-badge-institucio {
    background-color: rgba(127, 140, 141, 0.2);
    color: #95a5a6;
}

/* ============================================
   TIPUS DE PROJECTE - Badges (crm_projects module)
   ============================================ */

/* Projecte - Blue */
.kms-badge-projecte {
    background-color: rgba(41, 128, 185, 0.15);
    color: #2471a3;
    border: 1px solid rgba(41, 128, 185, 0.3);
}
html[data-theme="dark"] .kms-badge-projecte {
    background-color: rgba(41, 128, 185, 0.2);
    color: #2980b9;
}

/* Programa - Purple */
.kms-badge-programa {
    background-color: rgba(142, 68, 173, 0.15);
    color: #7d3c98;
    border: 1px solid rgba(142, 68, 173, 0.3);
}
html[data-theme="dark"] .kms-badge-programa {
    background-color: rgba(142, 68, 173, 0.2);
    color: #8e44ad;
}

/* Plataforma - Teal */
.kms-badge-plataforma {
    background-color: rgba(22, 160, 133, 0.15);
    color: #17a589;
    border: 1px solid rgba(22, 160, 133, 0.3);
}
html[data-theme="dark"] .kms-badge-plataforma {
    background-color: rgba(22, 160, 133, 0.2);
    color: #16a085;
}

/* Eina - Orange */
.kms-badge-eina {
    background-color: rgba(211, 84, 0, 0.15);
    color: #ba4a00;
    border: 1px solid rgba(211, 84, 0, 0.3);
}
html[data-theme="dark"] .kms-badge-eina {
    background-color: rgba(211, 84, 0, 0.2);
    color: #d35400;
}

/* Agent - Pink */
.kms-badge-agent {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
html[data-theme="dark"] .kms-badge-agent {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* Servei - Cyan */
.kms-badge-servei {
    background-color: rgba(93, 173, 226, 0.15);
    color: #5499c7;
    border: 1px solid rgba(93, 173, 226, 0.3);
}
html[data-theme="dark"] .kms-badge-servei {
    background-color: rgba(93, 173, 226, 0.2);
    color: #5dade2;
}

/* Alçada uniforme per tots els widgets del dashboard (17/02/2026) */
.widget-with-loading {
    height: 630px !important;
    max-height: 630px !important;
}
/* Mantenir comportament normal pels widgets expandits */
.widget-with-loading:has(.widget-expanded),
.widget-with-loading.expanded-wrapper {
    height: auto !important;
    max-height: none !important;
}

/* ============================================ */
/* MOD ENT_ACTORS - ACCENT VERD KOSMOS          */
/* ============================================ */

body.ent_actors {
    --dark-accent: #47d2a2;
    --dark-accent-hover: #47d2a2;
}

body.ent_actors #leftmenu li.selected div#butmenu,
body.ent_actors #leftmenu li.sub_selected div#butmenu {
    background: linear-gradient(90deg, #47d2a242 0%, #47d2a242 100%);
    border-left-color: #47d2a2;
}

@media (max-width: 768px) {
    div#application_contents {
        width: 100%;
    }
}

#kms-footer {
    display: none;
}

/* ============================================ */
/* LOADING SPINNER - BLANC AMB TRANSPARÈNCIA */
/* ============================================ */

body.kms_dashboard .loader-spinner {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.85);
}

.content-loader-spinner i {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================ */
/* STATUS DOT - Bullets de color per ent_actors */
/* ============================================ */
.kms-status-dot {
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    cursor: default;
    margin: auto;
}
.kms-dot-active     { color: #00AA00; }
.kms-dot-pendent    { color: #FF8C00; }
.kms-dot-processing { color: #3b82f6; }
.kms-dot-inactive   { color: #9ca3af; }
.kms-dot-suspended  { color: #cc0000; }
.kms-dot-cancelled  { color: #cc0000; }

html[data-theme="dark"] .kms-dot-active     { color: #4ade80; }
html[data-theme="dark"] .kms-dot-pendent    { color: #fb923c; }
html[data-theme="dark"] .kms-dot-processing { color: #60a5fa; }
html[data-theme="dark"] .kms-dot-inactive   { color: #6b7280; }
html[data-theme="dark"] .kms-dot-suspended  { color: #f87171; }
html[data-theme="dark"] .kms-dot-cancelled  { color: #f87171; }

/* ============================================ */
/* BADGE TIPUS ACTOR - Icona + text (mobile: només icona) */
/* ============================================ */
body.dbtable-overflow.mobile-view table#dbtable .badge-text {
    display: none;
}

/* Badges: sense fons ni border en mobile (només icona) */
body.dbtable-overflow.mobile-view table#dbtable .kms-role-badge,
body.dbtable-overflow.mobile-view table#dbtable .kms-status-badge {
    background: none;
    border-color: transparent;
    padding: 0;
}

/* ============================================
   TIPUS CRIDA: color icona segons status de la fila
   Desktop: color del badge; Mobile: blanc
   ============================================ */
table#dbtable td[data-field="tipus"] .kms-status-badge i {
    color: inherit;
    padding-right: 5px;
}
body.dbtable-overflow.mobile-view table#dbtable td[data-field="tipus"] .kms-status-badge i {
    color: #fff;
}

/* Limitar amplada de columnes mobile al dataBrowser */
body.dbtable-overflow.mobile-view table#dbtable td.mobile,
body.dbtable-overflow.mobile-view table#dbtable th.mobile {
    max-width: 200px;
}

/* ============================================
   ROLS DE MEMBRES - Badges amb icona (mobile: només icona)
   ============================================ */

.kms-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* 1. Administrador - Blau fosc */
.kms-role-admin    { background: rgba(41,128,185,.15); color: #1a5276; border-color: rgba(41,128,185,.3); }
html[data-theme="dark"] .kms-role-admin    { background: rgba(41,128,185,.25); color: #5dade2; }

/* 2. President/a - Daurat */
.kms-role-president    { background: rgba(212,172,13,.15); color: #9a7d0a; border-color: rgba(212,172,13,.3); }
html[data-theme="dark"] .kms-role-president    { background: rgba(212,172,13,.25); color: #f4d03f; }

/* 3. Vicepresident/a - Taronja daurada */
.kms-role-vicepresident { background: rgba(230,126,34,.15); color: #a04000; border-color: rgba(230,126,34,.3); }
html[data-theme="dark"] .kms-role-vicepresident { background: rgba(230,126,34,.25); color: #eb984e; }

/* 4. Secretari/ària - Blau cel */
.kms-role-secretari { background: rgba(93,173,226,.15); color: #1a6fa5; border-color: rgba(93,173,226,.3); }
html[data-theme="dark"] .kms-role-secretari { background: rgba(93,173,226,.25); color: #85c1e9; }

/* 5. Tresorer/a - Verd fosc */
.kms-role-tresorer  { background: rgba(39,174,96,.15); color: #1d6a3d; border-color: rgba(39,174,96,.3); }
html[data-theme="dark"] .kms-role-tresorer  { background: rgba(39,174,96,.25); color: #58d68d; }

/* 6. Vocal - Porpra */
.kms-role-vocal     { background: rgba(142,68,173,.15); color: #6c3483; border-color: rgba(142,68,173,.3); }
html[data-theme="dark"] .kms-role-vocal     { background: rgba(142,68,173,.25); color: #bb8fce; }

/* 7. Gerent/Director - Gris fosc / Blau nit */
.kms-role-gerent    { background: rgba(44,62,80,.12); color: #2c3e50; border-color: rgba(44,62,80,.25); }
html[data-theme="dark"] .kms-role-gerent    { background: rgba(44,62,80,.35); color: #aab7b8; }

/* 8. Responsable d'àrea - Índigo */
.kms-role-responsable { background: rgba(94,92,230,.15); color: #3730a3; border-color: rgba(94,92,230,.3); }
html[data-theme="dark"] .kms-role-responsable { background: rgba(94,92,230,.25); color: #a5b4fc; }

/* 9. Treballador/a - Taronja */
.kms-role-treballador { background: rgba(243,156,18,.15); color: #9a5800; border-color: rgba(243,156,18,.3); }
html[data-theme="dark"] .kms-role-treballador { background: rgba(243,156,18,.25); color: #f8c471; }

/* 10. Soci/Sòcia - Verd menta */
.kms-role-soci      { background: rgba(26,188,156,.15); color: #148f77; border-color: rgba(26,188,156,.3); }
html[data-theme="dark"] .kms-role-soci      { background: rgba(26,188,156,.25); color: #76d7c4; }

/* 11. Col·laborador/a - Cian */
.kms-role-collaborador { background: rgba(23,162,184,.15); color: #0e6579; border-color: rgba(23,162,184,.3); }
html[data-theme="dark"] .kms-role-collaborador { background: rgba(23,162,184,.25); color: #76d7ea; }

/* 12. Voluntari/ària - Rosa/Vermell suau */
.kms-role-voluntari { background: rgba(231,76,60,.12); color: #922b21; border-color: rgba(231,76,60,.25); }
html[data-theme="dark"] .kms-role-voluntari { background: rgba(231,76,60,.22); color: #f1948a; }

/* 13. Assessor/a - Porpra clar */
.kms-role-assessor  { background: rgba(155,89,182,.15); color: #7d3c98; border-color: rgba(155,89,182,.3); }
html[data-theme="dark"] .kms-role-assessor  { background: rgba(155,89,182,.25); color: #d7bde2; }

/* 14. Aliat/da - Gris blavós */
.kms-role-aliat     { background: rgba(127,140,141,.15); color: #566573; border-color: rgba(127,140,141,.3); }
html[data-theme="dark"] .kms-role-aliat     { background: rgba(127,140,141,.25); color: #aab7b8; }

/* ============================================
   ACTOR AVATAR - Imatge circular a la columna actor_id
   ============================================ */
.kms-actor-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid var(--kms-border, #ddd);
    flex-shrink: 0;
}
.kms-actor-avatar-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(127,140,141,.15);
    border: 1px solid rgba(127,140,141,.3);
    font-size: 11px;
    color: #7f8c8d;
    vertical-align: middle;
    flex-shrink: 0;
}
html[data-theme="dark"] .kms-actor-avatar-ph {
    background: rgba(127,140,141,.25);
    border-color: rgba(127,140,141,.4);
    color: #aab7b8;
}

/* ============================================
   DATAEDITOR - altura en mòbil
   ============================================ */
@media (max-width: 768px) {
    div.dataEditor {
        height: calc(100% - 100px) !important;
    }
}

/* Estils específics de la vista de formulari/acció d'ent_actors */
body.kms_f.ent_actors #hamburger-toggle {
    display: none !important;
}
body.kms_f.ent_actors .topoptions-wrapper .top-user {
    padding: 5px 0px !important;
}

/* ============================================
   VISTA DE MAPA (view_on_map): leftmenu col·lapsat
   ============================================ */
#kmsbody:has(#application.view_on_map) {
    grid-template-columns: 50px 1fr !important;
}
#kmsbody:has(#application.view_on_map) .leftmenu-content-wrapper {
    display: none !important;
}

/* ============================================
   APP MAP: ocultar panel_header
   ============================================ */
#kmsbody:has(#application.view_on_map) .panel_header {
    display: none !important;
}

#dashboard-widgets {
    border-radius: 20px 0 0 0;
}