/* TR-069 ACS — Custom Skin v3 (con device view bonita) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --color1: #e2e8f0;
    --color2: #94a3b8;
    --color3: #f1f5f9;
    --color4: #0d9488 !important;
    --color5: #0f172a !important;
    --base-font-size: 14px;
    --base-line-height: 20px;
    --header-bg: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0d9488 100%);
    --acs-shadow-sm: 0 1px 3px rgba(15,23,42,0.04);
    --acs-shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --acs-shadow-lg: 0 12px 24px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
}

html, body, input, button, select, option, textarea {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.005em !important;
}
body { background: #f8fafc !important; color: #0f172a !important; }

/* ============ HEADER (top bar) ============ */
#header {
    background: var(--header-bg) !important;
    border-bottom: none !important;
    padding: 0 !important;
    box-shadow: 0 4px 16px rgba(15,23,42,0.2) !important;
    overflow: visible !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
}
#header > .logo { margin: 0 !important; padding: 0 24px !important; display: flex !important; align-items: center !important; }
#header > .logo > img { display: none !important; }
#header > .logo::before {
    content: "📡 TR-069 ACS";
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
#header > .logo > .version {
    position: static !important;
    margin-left: 8px !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
    font-family: 'Menlo', monospace !important;
}
#header > nav { position: static !important; margin-left: 8px !important; flex-grow: 1 !important; }
#header > nav > ul { margin: 0 !important; display: flex !important; }
#header > nav > ul > li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: background 0.15s !important;
    border-bottom: 3px solid transparent !important;
}
#header > nav > ul > li:hover { background: rgba(255,255,255,0.06) !important; }
#header > nav > ul > li.active {
    background: rgba(255,255,255,0.08) !important;
    border-bottom-color: #5eead4 !important;
}
#header > nav > ul > li > a, #header > nav > ul > li > a:visited {
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none !important;
    padding: 22px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: transparent !important;
}
#header > nav > ul > li > a:hover, #header > nav > ul > li.active > a {
    color: #fff !important;
}
#header > .user-menu {
    float: none !important; margin: 0 24px !important;
    color: rgba(255,255,255,0.85) !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
}
#header > .user-menu button {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
#header > .user-menu button:hover:enabled { background: rgba(255,255,255,0.2) !important; }

/* ============ CONTENT ============ */
#content-wrapper { background: #f8fafc !important; }
#content { margin: 24px !important; }

/* ============ TÍTULO PÁGINA (h1) — con estilo según contexto ============ */
h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 20px 0 !important;
}

/* En device detail: el h1 es el ID del device → estilo monospace card */
#content > h1 {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0d9488 100%) !important;
    color: #fff !important;
    padding: 18px 24px !important;
    border-radius: 16px !important;
    font-family: 'Menlo', 'Monaco', monospace !important;
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 8px 24px rgba(13,148,136,0.18) !important;
    word-break: break-all !important;
}

/* ============ SECCIONES (cards con h2) ============ */
.acs-section {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid var(--color1) !important;
    overflow: hidden !important;
    margin: 16px 0 !important;
    box-shadow: var(--acs-shadow-md) !important;
    transition: box-shadow 0.2s !important;
}
.acs-section:hover { box-shadow: var(--acs-shadow-lg) !important; }

.acs-section > h2 {
    background: linear-gradient(90deg, #f8fafc 0%, #fff 100%) !important;
    margin: 0 !important;
    padding: 16px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-bottom: 1px solid var(--color1) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ============ PARAMETER LIST (dentro de secciones) ============ */
.acs-section > table.parameter-list,
table.parameter-list {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    border-spacing: 0 !important;
}
table.parameter-list th {
    background: transparent !important;
    color: #475569 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-right: 1px solid #f1f5f9 !important;
    padding: 12px 22px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    vertical-align: middle !important;
    width: 260px !important;
    white-space: nowrap !important;
}
table.parameter-list td {
    background: #fff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
table.parameter-list tr:last-child th,
table.parameter-list tr:last-child td { border-bottom: none !important; }
table.parameter-list tr:hover th { background: #f8fafc !important; }
table.parameter-list tr:hover td { background: #f8fafc !important; }

/* Edit pencil iconos sutiles */
table.parameter-list svg.icon, .icon {
    opacity: 0.35 !important;
    transition: opacity 0.15s, color 0.15s !important;
}
table.parameter-list svg.icon:hover { opacity: 1 !important; color: var(--color4) !important; }

/* "Última conexión" inform - status dot inline + summon */
span.inform { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.overview-dot > svg > circle { stroke-width: 0 !important; }

/* Summon button — estilo discreto */
table.parameter-list button {
    background: rgba(13,148,136,0.1) !important;
    color: var(--color4) !important;
    border: 1px solid rgba(13,148,136,0.2) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
table.parameter-list button:hover:enabled {
    background: var(--color4) !important;
    color: #fff !important;
    border-color: var(--color4) !important;
}

/* ============ ACTIONS BAR (Reboot/Reset/etc) ============ */
.acs-section .actions-bar, .actions-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.actions-bar > button {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid var(--color1) !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.15s !important;
    margin: 0 !important;
}
.actions-bar > button:hover:enabled {
    background: var(--color4) !important;
    color: #fff !important;
    border-color: var(--color4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13,148,136,0.25) !important;
}

/* ============ INDEX TABLE (Devices listing) ============ */
table.table {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid var(--color1) !important;
    overflow: hidden !important;
    box-shadow: var(--acs-shadow-sm) !important;
    width: 100% !important;
    border-spacing: 0 !important;
}
table.table th {
    background: #f8fafc !important;
    color: #64748b !important;
    border-bottom: 1px solid var(--color1) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 16px !important;
}
table.table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
}
table.table tbody tr:last-child td { border-bottom: none !important; }
table.table.highlight > tbody > tr:hover { background: #f8fafc !important; }
table.table a { color: var(--color4) !important; text-decoration: none !important; font-weight: 600 !important; }
table.table a:hover { background: transparent !important; text-decoration: underline !important; }
.icon-unsorted { opacity: 0.35 !important; }
table th button {
    background: transparent !important;
    border: none !important;
    padding: 2px 4px !important;
    color: inherit !important;
    box-shadow: none !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}

/* ============ TABS — overview / devices / faults / admin ============ */
ul.tabs, .tabs {
    background: #fff !important;
    border-bottom: 1px solid var(--color1) !important;
    padding: 6px 16px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 4px !important;
    list-style: none !important;
}
ul.tabs li, .tabs li { list-style: none !important; }
ul.tabs a, .tabs a {
    display: inline-block !important;
    padding: 10px 20px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
}
ul.tabs a:hover { background: rgba(13,148,136,0.08) !important; color: var(--color4) !important; }
ul.tabs .active a, ul.tabs li.active a {
    background: var(--color4) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(13,148,136,0.25) !important;
}

/* ============ FILTER input ============ */
.filter {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid var(--color1) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--acs-shadow-sm) !important;
}
.filter > input { width: 100% !important; margin: 0 !important; padding: 10px 14px !important; }

/* ============ INPUTS / BUTTONS GLOBAL ============ */
:is(.CodeMirror, textarea, select, input) {
    border: 1px solid var(--color1) !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-family: inherit !important;
}
:is(textarea, select, input):focus, :is(textarea, select, input):hover {
    border-color: var(--color4) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.1) !important;
}
:is(input[type=button], button).primary {
    background: var(--color4) !important;
    color: #fff !important;
    border: 1px solid var(--color4) !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
:is(input[type=button], button).primary:hover:enabled {
    background: #0f766e !important;
    border-color: #0f766e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(13,148,136,0.3) !important;
}

/* ============ OVERVIEW (charts) ============ */
.page-overview > h1 { text-align: left !important; margin: 0 24px 24px !important; }
.overview-chart-group { gap: 16px !important; flex-wrap: wrap !important; }
.pie-chart {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid var(--color1) !important;
    padding: 24px !important;
    box-shadow: var(--acs-shadow-md) !important;
    margin: 0 !important;
    flex: 1 1 320px !important;
    min-width: 280px !important;
    transition: all 0.2s !important;
}
.pie-chart:hover { transform: translateY(-2px) !important; box-shadow: var(--acs-shadow-lg) !important; }
.pie-chart > svg > path { stroke: #fff !important; stroke-width: 2px !important; }
.pie-chart > .legend { text-align: left !important; margin: 16px 0 0 !important; font-size: 13px !important; }
.pie-chart > .legend > .legend-line > .color { height: 12px !important; width: 12px !important; border-radius: 4px !important; border: none !important; margin-right: 8px !important; }

/* ============ HEADINGS GLOBAL ============ */
h2 {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}
h3 {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ============ TAGS ============ */
span.tag {
    background-image: none !important;
    background: rgba(13,148,136,0.12) !important;
    color: #0f766e !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ============ ALL PARAMETERS search ============ */
.all-parameters > input { width: 100% !important; max-width: none !important; padding: 10px 14px !important; margin-bottom: 10px !important; }
.all-parameters > .parameter-list { padding: 0 22px 22px !important; }

/* ============ EMPTY STATES ============ */
table.table tbody > tr.empty {
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Links */
a { color: var(--color4) !important; }
a:visited { color: var(--color4) !important; }
a:hover { background: transparent !important; color: #0f766e !important; text-decoration: underline !important; }

/* Inform "Pinging X: Error!" subtle */
.acs-section ~ p,
body p { color: #64748b !important; font-size: 13px !important; }

/* ============ STATS CARDS en Overview ============ */
.acs-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    padding: 24px !important;
    margin-bottom: 8px !important;
}
.acs-stat-card {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid var(--color1) !important;
    padding: 20px !important;
    box-shadow: var(--acs-shadow-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.2s !important;
    border-left: 4px solid #0d9488 !important;
}
.acs-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--acs-shadow-lg) !important;
}
.acs-stat-icon {
    font-size: 32px !important;
    line-height: 1 !important;
    width: 56px !important;
    height: 56px !important;
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.acs-stat-content { flex: 1 !important; min-width: 0 !important; }
.acs-stat-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
}
.acs-stat-label {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.acs-stat-pct {
    background: #f1f5f9 !important;
    color: #475569 !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}
.acs-stat-online { border-left-color: #10b981 !important; }
.acs-stat-online .acs-stat-icon { background: rgba(16,185,129,0.1) !important; }
.acs-stat-online .acs-stat-pct { background: rgba(16,185,129,0.12) !important; color: #047857 !important; }
.acs-stat-recent { border-left-color: #f59e0b !important; }
.acs-stat-recent .acs-stat-icon { background: rgba(245,158,11,0.1) !important; }
.acs-stat-recent .acs-stat-pct { background: rgba(245,158,11,0.12) !important; color: #b45309 !important; }
.acs-stat-offline { border-left-color: #ef4444 !important; }
.acs-stat-offline .acs-stat-icon { background: rgba(239,68,68,0.1) !important; }
.acs-stat-offline .acs-stat-pct { background: rgba(239,68,68,0.12) !important; color: #b91c1c !important; }
.acs-stat-wifi { border-left-color: #6366f1 !important; }
.acs-stat-wifi .acs-stat-icon { background: rgba(99,102,241,0.1) !important; }
.acs-stat-wifi .acs-stat-pct { background: rgba(99,102,241,0.12) !important; color: #4338ca !important; }