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

body.light-mode .dashboard-app-item .app-name {
    color: #1e293b;
}

/* 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);
    min-height: 450px;
    margin-bottom: 0;
    margin-right: 0;
}

/* Widget expanded state - all types */
.widget.widget-expanded,
[data-widget-type].widget-expanded,
.widget-expanded {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Widget expanded content should be visible */
.widget.widget-expanded .widget-content,
[data-widget-type].widget-expanded .widget-content,
.widget-expanded .widget-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Nested containers inside expanded widgets */
.widget-expanded div[style*="overflow: hidden"] {
    overflow: visible !important;
}

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

body.light-mode .widget-title {
    color: #1e293b;
}

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

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

body.light-mode .widget-content {
    color: #475569;
}

.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-label {
    color: #475569;
}

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)); */
    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;
    min-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 1 auto;
    overflow-y: auto;
    height: 100%;
    background-color: #232323;
    padding:10px;
    min-width: 0;
}

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

/* Desktop: sidebar vertical amb icones en columna */
@media (min-width: 768px) {
    #apps {
        width: 50px;
        flex-direction: column;
    }

    .dashboard-apps {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .dashboard-app-item {
        min-width: auto;
        width: 100%;
        padding: 0px;
    }

    .app-icon-wrapper {
        width: 30px;
        height: 30px;
    }
}

/* Responsive: Reduir sidebar apps per pantalles petites */
@media (max-width: 767px) {
    /* Layout principal en columna per mòbil */
    .dashboard-layout-flex {
        flex-direction: column !important;
    }

    #apps {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0 !important;
    }

    #dashboard-widgets {
        width: 100vw !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dashboard-apps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Dashboard apps grid ocupa tot l'ample */
    div#dashboard-apps-grid {
        width: 100% !important;
    }

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

    /* Grid per icones a mòbil */
    .dashboard-app-item {
        padding: 0px !important;
        min-width: 50px !important;
        width: 50px !important;
        flex-shrink: 0 !important;
    }

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

    /* Contents ocupa tot l'ample */
    #dashboard.contents,
    body.kms_dashboard #dashboard.contents,
    body.kms_dashboard #kmsbody > .contents {
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #dashboard {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Forçar kmsbody a mostrar-se */
    body.dashboard #kmsbody,
    body.kms_dashboard #kmsbody,
    #kmsbody {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Forçar application a ocupar tot l'ample i posició estàtica */
    body.dashboard #dashboard .application,
    body.dashboard .dashboard-contents .application,
    body.dashboard #application,
    body.kms_dashboard #application,
    #dashboard .application,
    .dashboard-contents .application,
    #application {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .dashboard-widgets-modern {
        width: 100% !important;
    }

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

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

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

    #preferences {
        position: inherit !important;
        bottom: inherit !important;
        left: 6px !important;
    }

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

/* Extra petit: encara més reduït per mòbils */
@media (max-width: 480px) {
    /* Layout principal en columna per mòbil */
    .dashboard-layout-flex {
        flex-direction: column !important;
    }

    #apps {
        width: 100% !important;
        height: auto !important;
        padding: 5px !important;
        flex-direction: row !important;
        flex-shrink: 0 !important;
    }

    #dashboard-widgets {
        width: 100vw !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dashboard-apps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 5px !important;
    }

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

    .dashboard-app-item {
        padding: 0px !important;
        min-width:30px !important;
        width: 30px !important;
        flex-shrink: 0 !important;
    }

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

    /* Contents ocupa tot l'ample */
    #dashboard.contents,
    body.kms_dashboard #dashboard.contents,
    body.kms_dashboard #kmsbody > .contents {
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #dashboard {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Forçar kmsbody a mostrar-se */
    body.dashboard #kmsbody,
    body.kms_dashboard #kmsbody,
    #kmsbody {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Forçar application a ocupar tot l'ample i posició estàtica */
    body.dashboard #dashboard .application,
    body.dashboard .dashboard-contents .application,
    body.dashboard #application,
    body.kms_dashboard #application,
    #dashboard .application,
    .dashboard-contents .application,
    #application {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .dashboard-widgets-modern {
        width: 100% !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: 20px;
    padding-top: 0px;
    font-weight: 800;
    vertical-align: middle;
}

body.light-mode .dashboard-title {
    color: #1e293b;
}

/* Dashboard widgets content */
.dashboard-widgets-content {
    padding: 0px;
}

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

body.light-mode .cache-info {
    color: #475569;
}

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

/* Light mode for app-icon */
[data-theme="light"] .app-icon {
    color: #32afcc;
}

/* Apps grid specific styles (moved from inline <style>) */
/* .dashboard-apps definition removed - using the grid definition from line 27 */


html[data-theme="dark"] body, html[data-theme="dark"] #dashboard, html[data-theme="dark"] #main_tab, html[data-theme="dark"] .dashboard_window {
    background-color: #000 !important;
}

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

.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;
    width:30px;
}

#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 definition removed - using the grid definition from line 27 */

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

.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: relative;
  bottom: 0px;
  left: 0;
  width: 100%;
  padding: 8px 9px;
  z-index: 1000;
  background: none;
}
/* Hide footer only on dashboard */
body.kms_dashboard #kms-footer {
    display: none;
}

/* Light mode adaptation */
[data-theme="light"] #kms-footer {
    background-color: #f8f9fa;
}

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

body.light-mode .kms-footer-content {
    color: #475569;
}

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

body.light-mode .kms-separator {
    color: #64748b;
}

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

body.light-mode .kms-copyright {
    color: #64748b;
}


/* ========================================= */
/* 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;
    grid-auto-rows: minmax(480px, auto) !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;
    border-radius: 8px;
}

/* Widget expandit dins del grid - permet créixer i ocupa totes les columnes */
#dashboard-widgets-grid > .widget-expanded,
#dashboard-widgets-grid > .widget.widget-expanded,
#dashboard-widgets-grid > [data-widget-type].widget-expanded {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !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:not(.has-expanded) {
        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:not(.has-expanded) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

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

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

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

/* ============================================
   WIDGETS - Classes reutilitzables
   Movides des d'estils inline
   ============================================ */

/* Widget Base */
.widget-base {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    padding: 12px;
}

/* Widget Layout */
.widget-flex-column {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 100%;
}

.widget-content-flex {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Widget Header */
.widget-header-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dark-border);
}

/* Widget Icon Containers (gradient boxes) */
.widget-icon-box {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.widget-icon-box-purple {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.widget-icon-box-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.widget-icon-box-cyan {
    background: linear-gradient(135deg, #3dbdd9 0%, #2ca8c5 100%);
}

.widget-icon-box-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.widget-icon-box i,
.widget-icon-box svg {
    font-size: 20px;
    color: white;
}

/* Widget Header Text */
.widget-header-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--dark-text-primary);
    margin: 0;
}

.widget-header-subtitle {
    font-size: 12px;
    color: var(--dark-text-secondary);
    margin: 0;
}

/* Widget Statistics Cards */
.widget-stat-card-base {
    padding: 12px;
    background: var(--dark-bg-tertiary);
    border-radius: var(--radius);
    border: 1px solid var(--dark-border);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.widget-stat-card-base.active {
    border-color: #3dbdd9;
    background: rgba(61, 189, 217, 0.1);
}

.widget-stat-label {
    font-size: 11px;
    color: var(--dark-text-secondary);
    margin: 0;
}

.widget-stat-value {
    font-size: 20px;
    font-weight: bold;
    margin: 4px 0 0 0;
}

.widget-stat-value-lg {
    font-size: 32px;
    font-weight: bold;
    margin: 4px 0 0 0;
}

/* Widget Table/List Container */
.widget-list-container {
    background: var(--dark-bg-tertiary);
    border-radius: var(--radius);
    border: 1px solid var(--dark-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.widget-list-header {
    padding: 8px 12px;
    background: var(--dark-bg-primary);
    border-bottom: 1px solid var(--dark-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-text-primary);
    margin: 0;
}

.widget-list-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Widget Search Input */
.widget-search-wrapper {
    position: relative;
    width: 200px;
}

.widget-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9ca3af;
    pointer-events: none;
}

.widget-search-input {
    width: calc(100% - 40px);
    padding: 6px 8px 6px 28px;
    font-size: 11px;
    border: 1px solid #6b7280;
    border-radius: 4px;
    background: transparent;
    color: var(--dark-text-primary);
}

/* Widget Row Items */
.widget-row-base {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dark-border);
}

.widget-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-row-content {
    flex: 1;
}

.widget-row-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--dark-text-primary-highlighted);
    margin: 0;
}

.widget-row-subtitle {
    font-size: 10px;
    color: var(--dark-text-secondary);
    margin: 2px 0 0 0;
}

.widget-row-title-md {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-text-primary-highlighted);
    margin: 0;
}

.widget-row-subtitle-md {
    font-size: 11px;
    color: var(--dark-text-secondary);
    margin: 0;
}

/* Widget Buttons */
.widget-btn-base {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--dark-border);
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.widget-btn-base svg,
.widget-btn-base i {
    flex-shrink: 0;
}

.widget-btn-base:hover {
    background: var(--dark-bg-primary);
    border-color: var(--dark-text-secondary);
}

.widget-btn-white {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.widget-btn-white:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.widget-btn-sm {
    padding: 4px 8px;
    font-size: 11px;
}

/* Widget Actions Section */
.widget-actions-base {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dark-border);
    display: flex;
    flex-direction: row !important;
    gap: 8px;
    flex-wrap: wrap;
}

/* Widget Progress Bar */
.widget-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--dark-bg-primary);
    border-radius: 6px;
    overflow: hidden;
}

.widget-progress-fill {
    height: 100%;
    transition: width 0.3s;
    border-radius: 3px 0 0 3px;
}

.widget-progress-bar-sm {
    height: 6px;
    border-radius: 3px;
}

[data-theme="dark"] .widget-progress-bar-sm {
  background-color: #2f2f2f;
}



/* Widget Progress Fill Colors */
.widget-progress-fill-success {
    background: #10b981;
}

.widget-progress-fill-warning {
    background: #f59e0b;
}

.widget-progress-fill-danger {
    background: #ff6868;
}

/* Widget Grid Layouts */
.widget-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.widget-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.widget-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.widget-grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Widget Alert Box */
.widget-alert {
    padding: 10px;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.widget-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.widget-alert-text {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
}

.widget-alert-text svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    margin-right: 4px;
    flex-shrink: 0;
}

.widget-alert-danger .widget-alert-text {
    color: #ef4444;
}

/* Widget Empty State */
.widget-empty-state {
    padding: 12px;
    background: rgba(107, 114, 128, 0.1);
    border-radius: var(--radius);
    border: 1px solid rgba(107, 114, 128, 0.2);
    text-align: center;
    margin-bottom: 12px;
}

.widget-empty-text {
    font-size: 12px;
    color: var(--dark-text-secondary);
    margin: 0;
}

/* Widget Flex Utilities */
.widget-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-flex-center {
    display: flex;
    align-items: center;
}

.widget-flex-gap-6 {
    gap: 6px;
}

.widget-flex-gap-8 {
    gap: 8px;
}

/* Widget Text Utilities */
.widget-text-xs {
    font-size: 10px;
}

.widget-text-sm {
    font-size: 11px;
}

.widget-text-md {
    font-size: 13px;
}

/* Widget Color Utilities */
.widget-color-white {
    color: #ffffff;
}

.widget-color-warning {
    color: #f59e0b;
}

.widget-color-danger {
    color: #ef4444;
}

.widget-color-success {
    color: #10b981;
}

.widget-color-cyan {
    color: #3dbdd9;
}

.widget-color-purple {
    color: #a855f7;
}

.widget-color-blue {
    color: #3b82f6;
}

/* Widget Badge/Status */
.widget-status-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Widget SVG Icons */
.widget-icon-xs {
    width: 12px;
    height: 12px;
}

.widget-icon-sm {
    width: 14px;
    height: 14px;
}

.widget-icon-md {
    width: 16px;
    height: 16px;
}

.widget-icon-lg {
    width: 20px;
    height: 20px;
}

/* Responsive Utilities for Widgets */
@media (max-width: 768px) {
    .widget-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .widget-grid-3 {
        grid-template-columns: 1fr;
    }

    .widget-search-wrapper {
        width: 150px;
    }
}

/* ============================================
   WIDGETS - Additional Utilities
   ============================================ */

/* Spacing utilities */
.widget-mb-6 {
    margin-bottom: 6px;
}

.widget-mb-8 {
    margin-bottom: 8px;
}

.widget-mt-6 {
    margin-top: 6px;
}

.widget-mr-2 {
    margin-right: 2px;
}

.widget-mr-4 {
    margin-right: 4px;
}

.widget-mr-8 {
    margin-right: 8px;
}

/* Text alignment */
.widget-text-left {
    text-align: left;
}

.widget-text-center {
    text-align: center;
}

.widget-text-right {
    text-align: right;
}

/* Font weight */
.widget-font-semibold {
    font-weight: 600;
}

/* Flex utilities */
.widget-flex-1 {
    flex: 1;
}

/* Min-width utilities */
.widget-min-w-40 {
    min-width: 40px;
}

.widget-min-w-60 {
    min-width: 60px;
}

/* Icon margins */
.widget-icon-mr-2 {
    margin-right: 2px;
    vertical-align: middle;
}

.widget-icon-mr-4 {
    margin-right: 4px;
    vertical-align: middle;
}

/* App icons container */
.widget-apps-container {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.widget-app-icon {
    opacity: 0.4;
    cursor: pointer;
}

.widget-app-icon.active {
    opacity: 1;
}

.widget-app-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke-width: 2;
    stroke: #6b7280; /* Default inactive color */
}

.widget-app-icon.active svg {
    stroke: #a855f7; /* Active purple color */
}

/* Server Widget Specific Classes */
.server-status-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.server-status-active {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.server-status-inactive {
    background: #6b7280;
}

.server-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    text-transform: uppercase;
}

.server-type-dedicat {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.server-type-cloud {
    background: rgba(116, 95, 218, 0.15);
    color: #745fda;
    border: 1px solid rgba(116, 95, 218, 0.3);
}

.server-stat-card.active {
    border-color: #3dbdd9 !important;
    background: rgba(61, 189, 217, 0.1) !important;
}

/* Server list container - enables flex layout for scrolling */
.server-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Domain list container - enables flex layout for scrolling */
.domain-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.domain-list-hidden {
    display: none;
}

.server-list-hidden {
    display: none;
}

/* Server-specific: Type badges */
.server-type-hosting {
    background: rgba(24, 153, 204, 0.15);
    color: #1899cc;
    border: 1px solid rgba(24, 153, 204, 0.3);
}

/* Widget flex utilities */
.widget-flex-row {
    display: flex;
    align-items: center;
}

/* ============================================
   WIDGETS - Light Theme Adaptations
   ============================================ */
div#head-block { font-size:14px}

html[data-theme="light"] .widget-base {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-header-flex {
    border-bottom: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-header-title {
    color: #1e293b;
}

html[data-theme="light"] .widget-header-subtitle {
    color: #64748b;
}

html[data-theme="light"] .widget-stat-card-base {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-stat-card-base:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

html[data-theme="light"] .widget-stat-card-base.active {
    border-color: #3dbdd9;
    background: rgba(61, 189, 217, 0.08);
}

html[data-theme="light"] .widget-stat-label {
    color: #64748b;
}

html[data-theme="light"] .widget-list-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-list-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-list-title {
    color: #1e293b;
}

html[data-theme="light"] .widget-search-input {
    border: 1px solid #cbd5e1;
    color: #1e293b;
    background: #ffffff;
}

html[data-theme="light"] .widget-search-input::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .widget-search-input:focus {
    border-color: #3b82f6;
    outline: none;
}

html[data-theme="light"] .widget-search-icon {
    color: #94a3b8;
}

html[data-theme="light"] .widget-row-base {
    border-bottom: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-row-title,
html[data-theme="light"] .widget-row-title-md {
    color: #1e293b;
}

html[data-theme="light"] .widget-row-subtitle,
html[data-theme="light"] .widget-row-subtitle-md {
    color: #64748b;
}

html[data-theme="light"] .widget-btn-base {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
}

html[data-theme="light"] .widget-btn-base:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html[data-theme="light"] .widget-actions-base {
    border-top: 1px solid #e2e8f0;
}

html[data-theme="light"] .widget-progress-bar,
html[data-theme="light"] .widget-progress-bar-sm {
    background: #e2e8f0;
}

html[data-theme="light"] .widget-alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

html[data-theme="light"] .widget-empty-state {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

html[data-theme="light"] .widget-empty-text {
    color: #64748b;
}

/* Widget Color Utilities - Light Theme */
html[data-theme="light"] .widget-color-white {
    color: #1e293b;
}

html[data-theme="light"] .widget-color-warning {
    color: #ea580c;
}

html[data-theme="light"] .widget-color-danger {
    color: #dc2626;
}

html[data-theme="light"] .widget-color-success {
    color: #059669;
}

html[data-theme="light"] .widget-color-cyan {
    color: #0891b2;
}

html[data-theme="light"] .widget-color-purple {
    color: #9333ea;
}

/* Specific widget stat cards hover states */
html[data-theme="light"] .domain-stat-card.widget-stat-card-base.active {
    border-color: #3dbdd9;
    background: rgba(61, 189, 217, 0.1);
}

html[data-theme="light"] .support-stat-card.widget-stat-card-base.active {
    border-color: #3dbdd9;
    background: rgba(61, 189, 217, 0.1);
}

html[data-theme="light"] .apps-card.widget-stat-card-base.active {
    border-color: #3dbdd9;
    background: rgba(61, 189, 217, 0.1);
}

/* Widget progress bars with colors in light theme */
html[data-theme="light"] .widget-progress-fill {
    /* El color es defineix inline segons l'estat, però assegurem bon contrast */
}

/* Alert classes specific styles */
html[data-theme="light"] .domain-alert-critical {
    color: #dc2626;
    font-weight: 600;
}

html[data-theme="light"] .domain-alert-warning {
    color: #ea580c;
    font-weight: 600;
}

html[data-theme="light"] .domain-alert-ok {
    color: #059669;
}

/* ========================================
   WIDGET UNIFORM HEIGHT SYSTEM (moved from widget-uniform-height.css)
   ======================================== */
/* Widget Dynamic Uniform Height System */
/* Tots els widgets tindran l altura del més alt automàticament */

/* CSS Grid automàticament iguala les altures dels items a la mateixa fila */
#dashboard-widgets-grid {
    align-items: stretch;
    /* Limitar alçada màxima de les files a 673px */
    grid-auto-rows: minmax(min-content, 673px);
}

/* El wrapper del widget ha de créixer per omplir l espai disponible */
.widget-with-loading {
    display: flex;
    flex-direction: column;
    min-height: 300px; /* Mínim 300px per aparença uniforme */
    max-height: 673px; /* Màxim 673px per widgets no desplegats */
}

/* Quan està expandit, el wrapper creix automàticament */
.widget-with-loading.expanded-wrapper,
.widget-with-loading:has(.widget-expanded) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* El contingut del widget ha de créixer */
.widget-with-loading .widget-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Permet scroll si el contingut excedeix max-height */
}

/* PERÒ quan està expandit, creix amb el contingut */
.widget-with-loading.expanded-wrapper .widget-content,
.widget-with-loading:has(.widget-expanded) .widget-content {
    flex: 0 0 auto !important;
    height: auto !important;
    display: block !important;
}

/* Els widgets específics han d utilitzar flexbox per omplir l espai */
.widget[data-widget-type]:not(.expanded) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0; /* Permet scroll dins del widget */
}

/* IMPORTANT: NO forçar flex-direction column als divs interns amb display:flex
   (són layouts de dues columnes que han de mantenir flex-row)
   I TAMPOC quan el widget està expandit
   I TAMPOC al widget-header-flex que necessita flex-row per alinear icona i text */
.widget[data-widget-type]:not(.expanded) > div:not([style*="display: flex"]):not(.widget-header-flex) {
    display: flex;
    flex-direction: column;
}

/* Chart containers flexibles */
.widget-chart-container {
    flex: 1;
    min-height: 200px;
    position: relative;
}

/* Canvas de Chart.js responsive */
.widget canvas {
    max-height: 100% !important;
    width: 100% !important;
}

/* Widget details sense scroll per defecte (creixen) */
.widget-details {
    flex: 1;
}

/* Columnes flexibles */
.widget-left-column,
.widget-right-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Content wrapper flexible */
.widget-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Grid items s estiren per omplir la fila */
#dashboard-widgets-grid > div {
    display: flex;
    flex-direction: column;
}

/* Regles per widgets no desplegats - permetre que respectin max-height */
div.widget-content:not(.expanded):not(:has(.widget-expanded)) {
    flex: 1;
    min-height: 0;
}

div.widget:not(.expanded):not(.widget-expanded) {
    flex: 1;
    min-height: 0;
}

div.widget[data-widget-type]:not(.expanded):not(.widget-expanded) {
    flex: 1;
    min-height: 0;
}

div.widget-with-loading:not(.expanded):not(.expanded-wrapper) > div.widget-content {
    flex: 1;
    min-height: 0;
}

div.widget-with-loading:not(.expanded):not(.expanded-wrapper) > div.widget-content > div.widget {
    flex: 1;
    min-height: 0;
}

/* Assegurar que els widgets expandits ocupen tot l'espai disponible */
.widget.expanded,
.widget.widget-expanded,
.widget-with-loading.expanded,
.widget-with-loading.expanded-wrapper,
div.widget.expanded,
div.widget.widget-expanded,
div.widget[data-widget-type].expanded,
div.widget[data-widget-type].widget-expanded {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Widget content dins d'un widget expandit també ha de créixer */
.widget-with-loading.expanded-wrapper .widget-content,
.widget-with-loading:has(.widget-expanded) .widget-content {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* ===== WIDGET LOADING SPINNER STYLES ===== */
/* Gradient Version - Migrat de widget-loading.css */

.widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: transparent;
    border-radius: 8px;
    padding: 20px;
}

.widget-loading-spinner {
    text-align: center;
    position: relative;
}

/* Spinner circular amb degradat - més discret */
.widget-loading-spinner::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: rgba(74, 158, 255, 0.3);
    border-right-color: rgba(74, 158, 255, 0.5);
    border-bottom-color: rgba(74, 158, 255, 0.7);
    border-left-color: rgba(74, 158, 255, 0.9);
    animation: spin-gradient 1.2s linear infinite;
    margin: 0 auto;
}

.widget-loading-text {
    color: #666;
    font-size: 12px;
    margin-top: 15px;
    opacity: 0.7;
}

/* Animació de rotació suau */
@keyframes spin-gradient {
    0% { 
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% { 
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* Loading per a widget placeholder al grid */
.widget-placeholder-loading {
    background: transparent;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner per placeholder - encara més petit i discret */
.widget-placeholder-loading .widget-loading-spinner::before {
    width: 32px;
    height: 32px;
    border-width: 2px;
    border-top-color: rgba(74, 158, 255, 0.2);
    border-right-color: rgba(74, 158, 255, 0.4);
    border-bottom-color: rgba(74, 158, 255, 0.6);
    border-left-color: rgba(74, 158, 255, 0.8);
}

/* Widget wrapper amb loading overlay */
.widget-with-loading {
    position: relative;
}

.widget-with-loading .widget-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(45, 45, 45, 0.95) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    backdrop-filter: blur(2px);
}

/* Light mode - adapt loading overlay background */
html[data-theme="light"] .widget-with-loading .widget-loading-overlay {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
}

.widget-with-loading.loaded .widget-loading-overlay {
    opacity: 0;
    pointer-events: none;
}

.widget-with-loading .widget-content {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.widget-with-loading.loaded .widget-content {
    opacity: 1;
}

/* Estat hidden per ocultar el loading quan carrega */
.widget-loading.hidden,
.widget-placeholder-loading.hidden,
.widget-loading-overlay.hidden {
    display: none !important;
}

/* Remover l icona Font Awesome (ja no la necessitem) */
.widget-loading-spinner i,
.widget-placeholder-loading i {
    display: none !important;
}

/* Widget expandit - overlay ha d'adaptar-se a l'alçada del contingut */
.widget-with-loading.expanded .widget-loading-overlay,
.widget-with-loading.expanded-wrapper .widget-loading-overlay {
    position: absolute !important;
    min-height: 100vh !important;
    height: auto !important;
}

/* ============================================
   REUSABLE STATS CLASSES
   ============================================ */

/* Stats bar container */
.stats-bar-container {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Stats bar */
.stats-bar {
    flex: 1;
    height: 40px;
    background: var(--dark-bg-primary);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
}

/* Stats bar segment - active */
.stats-bar-segment-active {
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s;
}

/* Stats bar segment - inactive */
.stats-bar-segment-inactive {
    background: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s;
}

/* Stats bar value */
.stats-bar-value {
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* Stats legend container */
.stats-legend {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

/* Stats legend item */
.stats-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Stats legend dot - active */
.stats-legend-dot-active {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 2px;
}

/* Stats legend dot - inactive */
.stats-legend-dot-inactive {
    width: 8px;
    height: 8px;
    background: #6b7280;
    border-radius: 2px;
}

/* Stats legend label */
.stats-legend-label {
    color: var(--dark-text-secondary);
}

/* Empty state message */
.widget-empty-message {
    font-size: 11px;
    color: var(--dark-text-secondary);
    text-align: center;
    margin: 0;
}

/* Light theme adaptations */
html[data-theme="light"] .stats-bar {
    background: #e5e5e5;
}

html[data-theme="light"] .stats-legend-label {
    color: #666;
}

html[data-theme="light"] .widget-empty-message {
    color: #666;
}
/* Fix KMS Header icon and title alignment */
.panel_container .mod_header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel_container .mod_header > div {
    float: none !important;
    padding: 0 !important;
}

.panel_container .mod_header img {
    width: 32px;
    height: 32px;
    display: block;
    opacity: 0.9;
}

.panel_container .mod_header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

@media (prefers-color-scheme: dark) {
    .panel_container .mod_header h2 {
        color: #e2e8f0;
    }

    .panel_container .mod_header img {
        opacity: 0.8;
        filter: brightness(1.2);
    }
}

/* Dark Theme (default) */
.hosting-stats-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: transparent;
    padding: 0;
    margin: 0;
    --hs-bg: transparent;
    --hs-card-bg: #1a1a1a;
    --hs-text: #e2e8f0;
    --hs-text-secondary: #94a3b8;
    --hs-text-tertiary: #64748b;
    --hs-border: #334155;
    --hs-shadow: rgba(0, 0, 0, 0.3);
    --hs-shadow-hover: rgba(0, 0, 0, 0.5);
}

/* Light Theme */
html[data-theme="light"] .hosting-stats-wrapper {
    background: transparent;
    --hs-bg: transparent;
    --hs-card-bg: #ffffff;
    --hs-text: #1e293b;
    --hs-text-secondary: #64748b;
    --hs-text-tertiary: #94a3b8;
    --hs-border: #e2e8f0;
    --hs-shadow: rgba(0, 0, 0, 0.06);
    --hs-shadow-hover: rgba(0, 0, 0, 0.1);
}

.hosting-stats-wrapper * { box-sizing: border-box; }

.hosting-stats-wrapper .hs-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    color: white;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .hosting-stats-wrapper .hs-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #1e293b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.hosting-stats-wrapper .hs-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hosting-stats-wrapper .hs-subtitle {
    font-size: 12px;
    opacity: 0.92;
    margin: 0;
}

.hosting-stats-wrapper .hs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.hosting-stats-wrapper .hs-card {
    background: var(--hs-card-bg);
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px var(--hs-shadow);
    transition: all 0.2s ease;
    border-left: 2px solid var(--hs-border);
}

.hosting-stats-wrapper .hs-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px var(--hs-shadow-hover);
    border-left-color: var(--hs-text-tertiary);
}

.hosting-stats-wrapper .hs-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.hosting-stats-wrapper .hs-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    background: var(--hs-border);
    color: var(--hs-text-secondary);
}

/* Dark theme icons (default) */
.hosting-stats-wrapper .hs-icon.blue,
.hosting-stats-wrapper .hs-icon.green,
.hosting-stats-wrapper .hs-icon.purple,
.hosting-stats-wrapper .hs-icon.orange,
.hosting-stats-wrapper .hs-icon.red,
.hosting-stats-wrapper .hs-icon.pink,
.hosting-stats-wrapper .hs-icon.cyan,
.hosting-stats-wrapper .hs-icon.teal {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

/* Light theme icons */
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.blue,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.green,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.purple,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.orange,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.red,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.pink,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.cyan,
html[data-theme="light"] .hosting-stats-wrapper .hs-icon.teal {
    background: var(--hs-border);
    color: var(--hs-text-secondary);
}

.hosting-stats-wrapper .hs-label {
    font-size: 9px;
    color: var(--hs-text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.hosting-stats-wrapper .hs-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--hs-text);
    margin: 3px 0 2px 0;
}

.hosting-stats-wrapper .hs-sub {
    font-size: 10px;
    color: var(--hs-text-tertiary);
    margin: 0;
}

.hosting-stats-wrapper .hs-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
}

.hosting-stats-wrapper .hs-chart-box {
    background: var(--hs-card-bg);
    border-radius: 6px;
    padding: 18px;
    box-shadow: 0 2px 4px var(--hs-shadow);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.hosting-stats-wrapper .hs-chart-box * {
    max-width: 100%;
    box-sizing: border-box;
}

.hosting-stats-wrapper .hs-chart-area {
    max-width: 100%;
    overflow: hidden;
}

.hosting-stats-wrapper .hs-chart-area canvas {
    max-width: 100% !important;
    height: auto !important;
}

.hosting-stats-wrapper .hs-chart-box.full {
    grid-column: 1 / -1;
}

.hosting-stats-wrapper .hs-chart-box.compact {
    padding: 14px;
}

.hosting-stats-wrapper .hs-chart-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hs-border);
}

.hosting-stats-wrapper .hs-chart-head.compact {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hs-border);
}

.hosting-stats-wrapper .hs-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--hs-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
}

.hosting-stats-wrapper .hs-chart-title i { color: #667eea; }

.hosting-stats-wrapper .hs-chart-desc {
    font-size: 11px;
    color: var(--hs-text-secondary);
    margin: 0;
}

.hosting-stats-wrapper .hs-chart-area {
    position: relative;
    height: 320px;
    max-width: 100%;
    overflow: hidden;
}

.hosting-stats-wrapper .hs-chart-area.compact {
    height: 240px;
    max-width: 100%;
    overflow: hidden;
}

.hosting-stats-wrapper .hs-nodata {
    background: var(--hs-card-bg);
    border-radius: 8px;
    padding: 50px;
    text-align: center;
    color: var(--hs-text-tertiary);
}

.hosting-stats-wrapper .hs-nodata i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.hosting-stats-wrapper .hs-nodata h3 {
    font-size: 16px;
    color: var(--hs-text-secondary);
    margin: 0 0 6px 0;
}

.hosting-stats-wrapper .hs-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}


@media (max-width: 1024px) {
    .hosting-stats-wrapper .hs-charts { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hosting-stats-wrapper .hs-grid { grid-template-columns: repeat(2, 1fr); }
    .hosting-stats-wrapper { padding: 14px; }
}

@media (max-width: 480px) {
    .hosting-stats-wrapper .hs-grid { grid-template-columns: 1fr; }
}

/* ============================================
   DEDICATED HOSTING MANAGEMENT PAGE STYLES
   ============================================ */

/* Dashboard container */
.dh-dashboard {
  width: calc(100% - 50px);
  margin: 0px;
  background: #1a1d24;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  color: #e4e6eb;
}

/* Item cards */
.dh-item {
  margin-bottom: 0px;
  padding: 14px;
  background: #242830;
  border-radius: 8px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

.dh-item strong {
  color: #4a90e2;
}

/* Header containers */
.dh-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}

.dh-item-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dh-item-header-icon {
  color: #4a90e2;
  font-size: 16px;
}

.dh-item-title {
  font-size: 14px;
}

/* Content containers */
.dh-item-content {
  font-size: 13px;
  line-height: 1.6;
}

.dh-item-content-small {
  font-size: 12px;
  line-height: 1.8;
}

/* Badges */
.dh-badge-managed {
  background: #4a90e2;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.dh-badge-selfmanaged {
  background: #2d3139;
  color: #8b8f98;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #4a90e2;
}

/* Status */
.dh-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dh-status-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.dh-status-text {
  font-size: 13px;
}

.dh-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dh-bullet.running {
  background: #4caf50;
  box-shadow: 0 0 8px #4caf50;
}

.dh-bullet.stopped {
  background: #f44336;
  box-shadow: 0 0 8px #f44336;
}

.dh-bullet.warning {
  background: #ff9800;
  box-shadow: 0 0 8px #ff9800;
}

/* Buttons */
.dh-btn {
  display: inline-block;
  padding: 10px 16px;
  margin: 5px 0;
  border: none;
  border-radius: 6px;
  background: #4a90e2;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  transition: all .3s ease;
}

.dh-btn:hover {
  background: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

.dh-btn.danger {
  background: #dc3545;
}

.dh-btn.danger:hover {
  background: #c82333;
}

.dh-btn.secondary {
  background: #6c757d;
}

.dh-btn.secondary:hover {
  background: #5a6268;
}

.dh-btn-reset-white {
  display: inline-block;
  padding: 6px 12px;
  margin: 5px 5px 5px 0;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  transition: all .2s ease;
  font-weight: 500;
}

.dh-btn-reset-white:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255,255,255,.3);
}

.dh-btn-reset-black {
  display: inline-block;
  padding: 6px 12px;
  margin: 5px 0;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #000;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  transition: all .2s ease;
  font-weight: 500;
}

.dh-btn-reset-black:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255,255,255,.2);
}

.dh-btn-small {
  padding: 5px 12px;
  font-size: 12px;
}

.dh-btn-reset {
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #f8b4b4;
  border-radius: 4px;
  background: #f8b4b4;
  color: #721c24;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s ease;
}

.dh-btn-reset:hover {
  background: #f5989d;
  border-color: #f5989d;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220,53,69,.3);
}

.dh-btn-power {
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #dc3545;
  border-radius: 4px;
  background: #dc3545;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s ease;
}

.dh-btn-power:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220,53,69,.4);
}

/* Button container */
.dh-btn-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Text styles */
.dh-muted {
  color: #8b8f98;
  font-size: .9em;
}

.dh-muted-small {
  font-size: 11px;
}

.dh-muted-xsmall {
  font-size: 12px;
}

.dh-text-highlight {
  color: #4a90e2;
}

.dh-text-small {
  font-size: 12px;
}

.dh-text-xsmall {
  font-size: 11px;
  text-transform: uppercase;
}

/* Info and error boxes */
.dh-error-box {
  background: #3d1e1e;
  border-left: 3px solid #dc3545;
  padding: 12px;
  border-radius: 6px;
  margin: 10px 0;
  color: #f8d7da;
}

.dh-info-box {
  background: #1e2f3d;
  border-left: 3px solid #4a90e2;
  padding: 12px;
  border-radius: 6px;
  margin: 10px 0;
  color: #9fc9e8;
  font-size: 12px;
}

.dh-info-box-hidden {
  display: none;
  margin-top: 10px;
}

/* Layout */
.dh-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dh-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Grid layouts */
.dh-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* IP and server info */
.dh-info-row {
  margin-bottom: 4px;
}

.dh-info-section {
  margin-bottom: 6px;
  font-weight: 600;
  color: #4a90e2;
  font-size: 11px;
  text-transform: uppercase;
}

/* Code blocks */
.dh-code {
  background: #2d3139;
  padding: 4px 8px;
  border-radius: 4px;
  color: #4a90e2;
  font-size: 11px;
  display: inline-block;
  margin-left: 5px;
}

/* SSH info */
.dh-ssh-info {
  margin-top: 8px;
  font-size: 11px;
}

/* Lists */
.dh-dashboard ul {
  color: #c4c6cd;
}

/* ============================================
   LIGHT THEME ADAPTATIONS
   ============================================ */

html[data-theme="light"] .dh-dashboard {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

html[data-theme="light"] .dh-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

html[data-theme="light"] .dh-item strong {
  color: #3b82f6;
}

html[data-theme="light"] .dh-item-header-icon {
  color: #3b82f6;
}

html[data-theme="light"] .dh-text-highlight {
  color: #3b82f6;
}

html[data-theme="light"] .dh-badge-managed {
  background: #3b82f6;
}

html[data-theme="light"] .dh-badge-selfmanaged {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

html[data-theme="light"] .dh-muted {
  color: #64748b;
}

html[data-theme="light"] .dh-error-box {
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  color: #991b1b;
}

html[data-theme="light"] .dh-info-box {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  color: #1e40af;
}

html[data-theme="light"] .dh-btn {
  background: #3b82f6;
}

html[data-theme="light"] .dh-btn:hover {
  background: #2563eb;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

html[data-theme="light"] .dh-btn.danger {
  background: #dc2626;
}

html[data-theme="light"] .dh-btn.danger:hover {
  background: #b91c1c;
}

html[data-theme="light"] .dh-btn.secondary {
  background: #64748b;
}

html[data-theme="light"] .dh-btn.secondary:hover {
  background: #475569;
}

html[data-theme="light"] .dh-btn-reset-white {
  background: #ffffff;
  color: #1e293b;
  border: 2px solid #cbd5e1;
}

html[data-theme="light"] .dh-btn-reset-white:hover {
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

html[data-theme="light"] .dh-btn-reset-black {
  background: #1e293b;
  color: #ffffff;
  border: 1px solid #334155;
}

html[data-theme="light"] .dh-btn-reset-black:hover {
  background: #334155;
}

html[data-theme="light"] .dh-btn-reset {
  background: #fecaca;
  border-color: #fca5a5;
  color: #991b1b;
}

html[data-theme="light"] .dh-btn-reset:hover {
  background: #fca5a5;
  border-color: #f87171;
}

html[data-theme="light"] .dh-btn-power {
  background: #dc2626;
  border-color: #dc2626;
}

html[data-theme="light"] .dh-btn-power:hover {
  background: #b91c1c;
}

html[data-theme="light"] .dh-dashboard ul {
  color: #475569;
}

html[data-theme="light"] .dh-code {
  background: #f1f5f9;
  color: #3b82f6;
}

html[data-theme="light"] .dh-info-section {
  color: #3b82f6;
}

/* Responsive */
@media (max-width:768px) {
  .dh-two-columns {
    grid-template-columns: 1fr;
  }
  #traffic-monitoring-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px) {
  .dh-dashboard {
    padding: 15px;
  }
  .dh-btn {
    width: 100%;
    text-align: center;
  }
  .dh-btn-reset-white,
  .dh-btn-reset-black {
    width: 100%;
    margin: 5px 0;
  }
}

/* Traffic and Monitoring Grid - Side by Side */
#traffic-monitoring-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  #traffic-monitoring-grid {
    grid-template-columns: 1fr;
  }
}

/* Evitar overflow en traffic-monitoring-grid */
#traffic-monitoring-grid > * {
  min-width: 0;
  overflow: hidden;
}

#traffic-monitoring-grid .dh-item {
  min-width: 0;
  overflow: hidden;
}

#trafficContainer {
  position: relative;
  height: 400px;
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
  overflow: hidden;
}

#trafficChart {
  max-width: 100%;
  height: auto;
}

/* Assegurar que el canvas de Chart.js es redimensiona correctament */
canvas {
  max-width: 100% !important;
  height: auto !important;
}

#traffic-monitoring-grid canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================
   Auto-renew Status Icons - Theme Adaptive
   ============================================ */

/* Auto-renew Active Icon - Light theme */
.autorenew-icon-active {
  color: #fff;
  background: #4caf50;
  border-radius: 70px;
  font-size: 7pt !important;
  padding: 4px;
  width: 16px;
  height: 16px;
}

/* Auto-renew Inactive Icon - Light theme */
.autorenew-icon-inactive {
  color: #fff;
  background: #9c9c9c;
  border-radius: 70px;
  font-size: 7pt !important;
  padding: 4px;
  width: 16px;
  height: 16px;
  line-height: 100%;
}

/* Dark theme adjustments */
html[data-theme="dark"] .autorenew-icon-active {
  color: #1a1a1a;
  background: #4caf50;
}

html[data-theme="dark"] .autorenew-icon-inactive {
  color: #e0e0e0;
  background: #4e4e4e;
}

/* ============================================
   Domain Services Icons - Theme Adaptive
   ============================================ */

/* Services Enabled Icon */
.domain-services-enabled {
  color: #2dd1a3;
  font-size: 16px;
}

/* Services Disabled Icon - Light theme */
.domain-services-disabled {
  color: #cacaca;
  font-size: 16px;
}

/* Dark theme adjustments */
html[data-theme="dark"] .domain-services-disabled {
  color: #3e3e3e;
}