/* ===== DASHBOARD DARK MODE DESIGN ===== */

/* Force 100% width for ALL containers - Dashboard fix */
body.kms_dashboard,
body.kms_dashboard table,
body.kms_dashboard table.document,
body.kms_dashboard tbody,
body.kms_dashboard tr,
body.kms_dashboard td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Dashboard específic */
#dashboard,
#main_tab,
.dashboard_window {
    padding: 0px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box !important;
}

/* Grid d'icones/aplicacions */
.dashboard-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    padding: 10px 0px 20px 0px;
}

.dashboard-app-item {
    border-radius: 8px;
    padding: 0px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-app-item:hover {
    transform: translateY(-5px);
}

.dashboard-app-item img {
    width: 52px;
    height: 52px;
    margin: auto auto 12px auto;
    filter: brightness(0.8) contrast(1.1);
    transition: all 0.3s ease;
}

.dashboard-app-item:hover img {
    filter: brightness(1.4) contrast(1.2);
    transform: scale(1.1);
}

.dashboard-app-item .app-name {
    color: var(--dark-text-primary);
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
}

/* Light mode adjustments */
body.light-mode .dashboard-app-item {
    background: #ffffff;
    border-color: #e0e0e0;
}

body.light-mode .dashboard-app-item:hover {
    background: #f5f5f5;
    border-color: var(--dark-accent);
}

body.light-mode .dashboard-app-item img {
    filter: brightness(1) contrast(1);
}

body.light-mode .dashboard-app-item:hover img {
    filter: brightness(1.1) contrast(1.1);
}

/* Widgets area */
.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.widget {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dark-border);
}

.widget-title {
    color: var(--dark-text-primary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-title i {
    color: var(--dark-accent);
}

.widget-content {
    color: var(--dark-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.widget-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-content li {
    padding: 8px 0;
    border-bottom: 1px solid var(--dark-border);
}

.widget-content li:last-child {
    border-bottom: none;
}

.widget-content a {
    color: var(--dark-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.widget-content a:hover {
    color: var(--dark-accent-hover);
}

/* Light mode widgets */
body.light-mode .widget {
    background: #ffffff;
    border-color: #e0e0e0;
}

body.light-mode .widget-header {
    border-bottom-color: #e0e0e0;
}

body.light-mode .widget-content li {
    border-bottom-color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-apps {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
    }
    
    .dashboard-app-item {
        padding: 15px;
    }
    
    .dashboard-app-item img {
        width: 48px;
        height: 48px;
    }
    
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }
}

/* Stats widget specific */
.widget-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: var(--dark-bg-tertiary);
    border-radius: 6px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--dark-accent);
    display: block;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    color: var(--dark-text-secondary);
    text-transform: uppercase;
}

body.light-mode .stat-item {
    background: #f5f5f5;
}


/* Assegurem que html i body ocupin el 100% de l'altura */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* La taula document (capçalera) només ocupa l'espai necessari */
table.document {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Forçar 100% width per dashboard dins de taules */
body.kms_dashboard table.document,
body.kms_dashboard table.document tbody,
body.kms_dashboard table.document tr,
body.kms_dashboard table.document td {
    width: 100% !important;
    max-width: 100% !important;
}

/* kmsbody ha d'ocupar l'espai restant després de la capçalera */
#kmsbody {
    min-height: calc(100vh - var(--header-height, 60px));
    height: calc(100vh - var(--header-height, 60px));
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* IMPORTANT: Sobreescriure el grid de kms-styles.css per al dashboard */
/* Selector amb màxima especificitat per sobreescriure kms-styles.css */
html body.kms_dashboard #kmsbody,
html body.kms_dashboard div#kmsbody,
body.kms_dashboard div#kmsbody,
body.kms_dashboard #kmsbody {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - var(--header-height, 60px)) !important;
    overflow: visible !important;
}

/* dashboard i contents ocupen el 100% */
#dashboard.contents,
body.kms_dashboard #dashboard.contents,
body.kms_dashboard #kmsbody > .contents {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* application és un contenidor flex que ocupa el 100% */
#application.application {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    box-sizing: border-box !important;
}

/* dashboard-layout-flex ocupa l'espai restant - definit més avall al fitxer */

/* Apps sidebar amb scroll independent */
#apps {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 50px;
    min-height: 100%;
    padding: 0px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Dashboard widgets amb scroll independent */
#dashboard-widgets {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    background-color: #232323;
    padding:10px;
}

html[data-theme="light"] #dashboard-widgets {
    background-color: #f5f5f5;
}

/* Calcula dinàmicament l'altura de la capçalera amb JavaScript */
body.header-measured {
    --header-height: var(--measured-header-height);
}

/* Dashboard header cache info */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.refresh-indicator {
    animation: pulse 2s infinite;
}

/* Responsive: ocultar cache info en pantalles petites */
@media (max-width: 768px) {
    .dashboard-header-cache {
        display: none !important;
    }
}

/* Responsive: Reduir sidebar apps per pantalles petites */
@media (max-width: 767px) {
    #apps {
        width: 44px !important;
    }

    /* Ajustar padding del títol Dashboard */
    div[style*='padding-left:140px'] {
        padding-left: 35px !important;
    }

    /* Fer les icones i text més petits */
    .dashboard-app-item {
        padding: 2px !important;
        min-width: 33px !important;
    }

    .app-icon-wrapper {
        width: 24px !important;
        height: 24px !important;
    }

    .app-icon-wrapper img {
        width: 22px !important;
        height: 22px !important;
    }

    .app-icon {
        font-size: 17px !important;
    }

    .app-name {
        font-size: 8px !important;
    }

    #preferences {
        left: 6px !important;
    }

    #ai-assistant {
        left: 7px !important;
    }
}

/* Extra petit: encara més reduït per mòbils */
@media (max-width: 480px) {
    #apps {
        width: 30px !important;
        padding: 1px !important;
    }

    div[style*='padding-left:140px'],
    div[style*='padding-left:80px'],
    div[style*='padding-left:35px'] {
        padding-left: 30px !important;
    }

    .dashboard-app-item {
        padding: 1px !important;
        min-width: 28px !important;
    }

    .app-icon-wrapper {
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 2px !important;
    }

    .app-icon-wrapper img {
        width: 18px !important;
        height: 18px !important;
    }

    .app-icon {
        font-size: 14px !important;
    }

    .app-name {
        font-size: 7px !important;
        line-height: 1.1 !important;
    }

    #preferences {
        left: 0px !important;
    }

    #ai-assistant {
        left: 0px !important;
    }
}


/* ===== ESTILS DASHBOARD INLINE MOVITS ===== */

/* Dashboard layout flex */













/* Dashboard header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 10px 5px 10px;
    flex: 0 0 auto;
}

/* Dashboard header left */
.dashboard-header-left {
    /* Placeholder per si cal en el futur */
}

/* Dashboard header icon */
.dashboard-header-icon {
    font-size: 22px;
    vertical-align: middle;
    margin-right: 10px;
}

/* Dashboard title */
.dashboard-title {
    font-size: 16px;
    padding-top: 5px;
    font-weight: bold;
    vertical-align: middle;
}

/* Dashboard header cache */
.dashboard-header-cache {
    padding-right: 20px;
}

/* Cache info */
.cache-info {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--dark-text-secondary);
}

/* Refresh indicator */
.refresh-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

/* ===== AI POPUP ESTILS ===== */

#ai-popup {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    max-height: calc(100vh - 160px);
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 20px;
    z-index: 9999;
    overflow-y: auto;
}

#ai-popup.show {
    display: block;
}

#ai-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#ai-popup-title {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: bold;
}

#ai-popup-close {
    cursor: pointer;
    color: #9ca3af;
    font-size: 24px;
    line-height: 1;
    transition: color 0.2s;
}

#ai-popup-close:hover {
    color: #f3f4f6;
}

#ai-tokens-used {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 10px;
}

.ai-popup-header-actions {
    display: flex;
    gap: 8px;
}

#ai-clear-history {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
}

#ai-conversation-history {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 8px;
    background: #1f2937;
    border-radius: 6px;
    display: none;
}

#ai-thinking {
    display: none;
    padding: 12px;
    background: rgb(22, 23, 24);
    border-radius: 6px;
    margin-bottom: 10px;
}

.ai-thinking-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-thinking-spinner {
    color: #f3f4f6;
}

.ai-thinking-text {
    color: #f3f4f6;
    font-size: 13px;
}

.ai-model-selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ai-model-label {
    color: #9ca3af;
    font-size: 12px;
}

#ai-model-selector {
    background: #1f252e;
    color: #f3f4f6;
    border: 1px solid #4b5563;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

.ai-prompt-wrapper {
    position: relative;
}

#ai-prompt {
    width: 100%;
    min-height: 60px;
    background: #1f252e;
    border: 1px solid #4b5563;
    border-radius: 8px;
    color: #f3f4f6;
    padding: 16px;
    padding-right: 45px;
    font-size: 14px;
    resize: none;
    line-height: 1.5;
    transition: all 0.2s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

#ai-prompt:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#ai-attach-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
}

#ai-attach-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

#ai-attach-btn i {
    color: #9ca3af;
    font-size: 18px;
}

#ai-attach-btn:hover i {
    color: #3b82f6;
}

#ai-file-input {
    display: none;
}

/* ===== APP ICONS ESTILS ===== */

.app-icon {
    font-size: 24px;
    color: #3dbdd9;
}

/* Apps grid specific styles (moved from inline <style>) */
.dashboard-apps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

html[data-theme="dark"] #dashboard-apps-grid {
    background-color: #000;
}

html[data-theme="light"] #dashboard-apps-grid {
    background-color: #ffffff;
}

.dashboard-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: auto;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
}

.dashboard-app-item:hover {
    transform: translateY(-2px);
    background-color: rgba(59, 130, 246, 0.1);
}

.app-icon-wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.app-name {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: #1f252e;
}

body.dark-mode .dashboard-app-item:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .app-name {
    color: #d1d5db;
}

#preferences {
    position: fixed;
    bottom: 100px;
    left: 10px;
}

#ai-assistant {
    position: fixed;
    bottom: 50px;
    left: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ai-assistant:hover {
    transform: scale(1.1);
}

/* Dashboard Apps Sidebar */
.dashboard-apps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

html[data-theme="light"] #dashboard-apps-grid {
    background-color: #ffffff;
}

.dashboard-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: auto;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
}

.dashboard-app-item:hover {
    transform: translateY(-2px);
    background-color: rgba(59, 130, 246, 0.1);
}

.app-icon-wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.app-name {
    display: none;
    font-size: 13px;
    font-weight: 500;
    color: #1f252e;
}

body.dark-mode .dashboard-app-item:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .app-name {
    color: #d1d5db;
}

/* Nota: Els estils de #ai-assistant ja existeixen més amunt en aquest fitxer */

/* KMS Footer */
#kms-footer {
    position: fixed;
    bottom: 0px;
    left: 50px;
    width: 250px;
    padding: 8px 9px;
    z-index: 1000;
    background-color: #1a1a1a;
}
/* Hide footer only on dashboard */
body.kms_dashboard #kms-footer {
    display: none;
}

.kms-footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 0px;
    gap: 3px;
    font-size: 9px;
    color: var(--dark-text-secondary);
    text-align: left;
}

.kms-link {
    color: var(--dark-accent);
    text-decoration: none;
    transition: color 0.2s;
    font-size: 9px;
}

.kms-link:hover {
    color: var(--dark-accent-hover);
    text-decoration: underline;
}

.kms-separator {
    color: var(--dark-text-tertiary);
    font-size: 9px;
    margin: 0 3px;
}

.kms-copyright {
    color: var(--dark-text-tertiary);
    font-size: 9px;
}


/* ========================================= */
/* SYSADMIN WIDGETS GRID - RESPONSIVE CSS */
/* ========================================= */

/* Updated: Wed Oct 15 13:09:58 CEST 2025 */
/* Dashboard Widgets - Enhanced Responsive CSS */

.bg-server-group-color {
    background-color: #7d90ae73;
}
/* RESPONSIVE GRID SYSTEM - Sistema simètric: 1 → 2 → 4 columnes (mai 3) */
#dashboard-widgets-grid {
    display: grid !important;
    gap: 16px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Per defecte: 1 columna per pantalles menors a 1380px */
    grid-template-columns: 1fr !important;
}

/* Força els widgets a respectar el grid */
#dashboard-widgets-grid > .widget,
#dashboard-widgets-grid > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Force all widget content to respect container width */
#dashboard-widgets-grid > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure flex containers inside widgets work properly */
#dashboard-widgets-grid .flex {
    display: flex !important;
    min-width: 0;
}

#dashboard-widgets-grid .flex > * {
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* Text wrapping for long content - only break when absolutely necessary */
#dashboard-widgets-grid * {
    overflow-wrap: break-word; /* Break long words only when necessary */
    /* word-break: break-word; */ /* Removed - too aggressive */
}

/* Tables inside widgets should be responsive */
#dashboard-widgets-grid table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
}

#dashboard-widgets-grid table td,
#dashboard-widgets-grid table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop mitjà: 2 columnes (>= 1380px fins < 1920px) */
/* Simètric amb 4 widgets: 2+2 */
@media (min-width: 1380px) {
    #dashboard-widgets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Pantalla ultra ampla: 2 columnes (>= 1920px fins < 2560px) */
/* Manté 2x2 per garantir espai suficient pel contingut */
@media (min-width: 1920px) and (max-width: 2559px) {
    #dashboard-widgets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Pantalla 4K: 4 columnes (>= 2560px) */
@media (min-width: 2560px) {
    #dashboard-widgets-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Animacions suaus */
.transition {
    transition: all 0.3s ease;
}

/* Millores de hover */
a:hover {
    transform: translateY(-1px);
}

/* Targetes de widgets més grans */
.flex-shrink {
    flex-shrink: 0;
}

/* Millores visuals pels widgets */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animació pel pulse */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Millores de tipografia */
.text-2xl {
    line-height: 1.2;
}

.text-3xl {
    line-height: 1.1;
}

/* Scroll suau pels widgets amb llista */
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Millores pels botons */
button, a.block {
    cursor: pointer;
    user-select: none;
}

button:active, a.block:active {
    transform: scale(0.98);
}

/* Gradients suaus */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Espaiat entre seccions */
.mb-6 {
    margin-bottom: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

/* Títols de secció - Responsive */
h2.text-2xl {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    h2.text-2xl {
        font-size: 1.25rem;
    }
}

/* Padding pels widgets */
.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

/* Millores de colors per estats */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }

/* Targeta hover effect */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-lg:hover {
    border-radius: 0.75rem;
}

/* Dashboard header responsive */
.dashboard-header {
    flex-direction: row;
    align-items: center;
}

@media (max-width: 767px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cache-info {
        font-size: 0.65rem;
    }
}

/* Container principal responsive */
.widget-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Override Tailwind img border */
img {
    border-style: none \!important;
    border-width: 0 \!important;
}

/* Assegurar que imatges dins de contenidors tampoc tinguin border */
.widget-container img,
.dashboard-widget img,
div img {
    border: none \!important;
}

/* Ocultar gràfiques en pantalles petites (< 730px) */
@media (max-width: 729px) {
    .widget-chart-container {
        display: none !important;
    }
}

/* Widget details section - només visible en pantalles 4K amb 4 columnes */
.widget-details {
    display: none !important;
}

@media (min-width: 2560px) {
    .widget-details {
        display: block !important;
    }
}

/* ============================================
   Estils moguts des de headers.php inline
   ============================================ */

/* Estils personalitzats - sobreescrits pel kms-dashboard.css quan body.kms_dashboard */
body:not(.dashboard) .dataBrowser_content {
    padding: 15px;
    /* background: url dinamica es defineix inline al headers.php per variables PHP */
}

body:not(.dashboard) .kms_icon {
    /* color dinàmic es defineix inline al headers.php per variables PHP */
}

body:not(.dashboard) .kms_icon div {
    /* margin-left: -10px; */
    /* width: 90px; */
}

/* Loader CSS - només per dashboard */
body.kms_dashboard #kms-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

body.kms_dashboard #kms-page-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

body.kms_dashboard .loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Dashboard layout flex */
.dashboard-layout-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 0px;
    flex: 1;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Dashboard widgets modern */
.dashboard-widgets-modern {
    flex: 1 !important;
    overflow-y: auto;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}