/**
 * Munin Manager - Custom Styles
 */

/* General */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.section {
    flex: 1;
}

.footer {
    padding: 1.5rem;
}

/* Navbar */
.navbar-item.is-active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Cards and boxes */
.box {
    transition: box-shadow 0.2s ease;
}

.box:hover {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.15), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}

/* Stats boxes */
.box .heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.box .title {
    font-size: 2.5rem;
    margin-top: 0.5rem;
}

/* Tables */
.table-container {
    overflow-x: auto;
}

.table th {
    white-space: nowrap;
}

.table td {
    vertical-align: middle !important;
}

/* Buttons */
.buttons.are-small .button {
    margin-bottom: 0;
}

/* Tags */
.tags .tag {
    margin-bottom: 0.25rem;
}

/* Log viewer */
#logContent {
    background: #1a1a2e;
    color: #eee;
    padding: 1rem;
    border-radius: 4px;
    line-height: 1.6;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

#logContent .has-text-danger {
    color: #ff6b6b !important;
}

#logContent .has-text-warning-dark {
    color: #ffc107 !important;
}

#logContent .has-text-grey {
    color: #888 !important;
}

/* Modal */
.modal-card {
    max-width: 600px;
    width: 100%;
}

.modal-card-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 1rem !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .level-left + .level-right {
        margin-top: 1rem;
    }

    .box .title {
        font-size: 2rem;
    }

    .buttons .button span:not(.icon) {
        display: none;
    }
}

/* Loading spinner */
.fa-pulse {
    animation: fa-spin 1s infinite steps(8);
}

/* Status indicators */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-dot.is-success {
    background-color: #48c774;
}

.status-dot.is-warning {
    background-color: #ffdd57;
}

.status-dot.is-danger {
    background-color: #f14668;
}

/* Import modal */
#importProgress {
    padding: 1rem 0;
}

#importProgress .progress {
    margin-bottom: 1rem;
}

/* Tree View */
.tree-view {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
    padding: 1rem;
}

.tree-node {
    margin: 0;
}

.tree-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.tree-header:hover {
    background-color: #f5f5f5;
}

.tree-header.level-0 {
    font-weight: 700;
    font-size: 1.1rem;
    background-color: #f0f7ff;
    margin-bottom: 0.25rem;
}

.tree-header.level-1 {
    font-weight: 600;
    padding-left: 1.5rem;
}

.tree-header.level-2 {
    padding-left: 3rem;
}

.tree-header.level-3 {
    padding-left: 4.5rem;
}

.tree-toggle {
    width: 1.5rem;
    text-align: center;
    cursor: pointer;
    color: #7a7a7a;
}

.tree-toggle:hover {
    color: #363636;
}

.tree-spacer {
    width: 1.5rem;
    display: inline-block;
}

.tree-label {
    flex: 1;
    margin-left: 0.5rem;
}

.tree-count {
    color: #7a7a7a;
    font-size: 0.9em;
    margin-left: 0.5rem;
}

.tree-header .tag {
    margin-left: 0.5rem;
}

.tree-children {
    border-left: 2px solid #e8e8e8;
    margin-left: 0.75rem;
}

.tree-children.is-hidden {
    display: none;
}

/* Host items in tree */
.tree-hosts {
    padding: 0.25rem 0 0.25rem 2rem;
}

.tree-host {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.tree-host:hover {
    background-color: #f9f9f9;
}

.tree-host-name {
    flex: 1;
    margin-left: 0.5rem;
    font-family: monospace;
    font-size: 0.9rem;
}

.tree-host-ip {
    font-size: 0.8rem;
    background: #f5f5f5;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.tree-host-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.tree-host:hover .tree-host-actions {
    opacity: 1;
}

.tree-host-actions .button {
    padding: 0.25rem 0.5rem;
    height: auto;
}

/* View toggle buttons */
.field.has-addons .button.is-selected {
    z-index: 1;
}

/* Responsive tree */
@media screen and (max-width: 768px) {
    .tree-header.level-1 {
        padding-left: 1rem;
    }
    .tree-header.level-2 {
        padding-left: 1.5rem;
    }
    .tree-header.level-3 {
        padding-left: 2rem;
    }
    .tree-hosts {
        padding-left: 1rem;
    }
    .tree-host-actions {
        opacity: 1;
    }
    .tree-host-ip {
        display: none;
    }
}