/* Basic Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
/* Ginagamit na natin .container ng Bootstrap */
h1 {
    color: #0056b3;
    font-weight: 700;
}
h2 {
    color: #007bff;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 700;
}
.section {
    margin-bottom: 40px;
}

/* Intro Text Styles */
#introText {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 20px 30px;
    border-radius: 8px;
}
#introText h3 {
    color: #0056b3;
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 700;
}
#introText h4 {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}
#introText ul {
    margin-left: 20px;
    padding-left: 15px;
}
#introText li {
    margin-bottom: 8px;
}

/* Form Group Styles */
.form-group {
    margin-bottom: 20px;
    border-left: 4px solid #ccc;
    padding-left: 15px;
}
.form-group.required { border-left-color: #d9534f; }
.form-group.recommended { border-left-color: #f0ad4e; }
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
.input-row {
    display: flex;
    align-items: center;
}
.input-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 15px;
    flex-shrink: 0;
    border: 1px solid #ccc;
}
/* Ginamit na natin .form-control ng Bootstrap */


/* === BAGONG-BAGONG TOPOLOGY STYLES (FLEXIBLE / CSS GRID) === */

.topology-diagram {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    /* Ito 'yung layout plan */
    grid-template-areas:
        "online online online"
        ". internet ."
        ". modem ."
        ". router ."
        "server local-clients repeater"
        ". . far-clients";
    gap: 3vh 15px; /* Ginamit ko na 'yung 'vh' para sa vertical spacing */
    padding-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent horizontal scroll */
}

.grid-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ito 'yung default (horizontal center for column) */
    gap: 5px; /* Spacing sa loob ng node */
}

/* Universal line drawing (pataas) */
.grid-node::before {
    content: '';
    position: absolute;
    width: 3px;
    background: #aaa;
    height: 3vh; /* vh para sa spacing */
    top: -3vh;  /* vh para sa spacing */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
/* Alisin ang linyang pataas sa pinaka-unang row */
.grid-node[style*="grid-area: online"]::before { display: none; }

/* Horizontal line for Row 5 */
.grid-node[style*="grid-area: server"]::after,
.grid-node[style*="grid-area: local-clients"]::after,
.grid-node[style*="grid-area: repeater"]::after {
    content: '';
    position: absolute;
    height: 3px;
    background: #aaa;
    top: -3vh; /* vh para sa spacing */
    z-index: 0;
}
/* Paggawa ng horizontal 'bus' */
.grid-node[style*="grid-area: server"]::after { left: 50%; width: 50%; }
.grid-node[style*="grid-area: local-clients"]::after { left: 0; width: 100%; }
.grid-node[style*="grid-area: repeater"]::after { left: 0; width: 50%; }

/* Special lines */
.grid-node[style*="grid-area: online"] {
    flex-direction: row;
    justify-content: center;
    gap: 20px; /* Paghiwalayin 'yung online services */
    flex-wrap: wrap; /* === ITO 'YUNG FIX #1 para mag-wrap sa mobile === */
}
/* Linya galing internet papuntang online */
.grid-node[style*="grid-area: internet"]::before {
    height: 6vh; /* Mas mahaba, lagpas sa online row */
}


/* Linya ng server papunta sa Online (Dashed) */
.grid-node[style*="grid-area: server"]::before {
    background: none;
    border-left: 3px dashed #d9534f;
    height: calc(18vh + 390px); /* Aakyatin lahat */
    top: calc(-18vh - 390px);
    left: calc(50% + 10px); /* I-offset sa gilid */
    z-index: 0;
}
/* Linya ng router papunta sa Online (Dashed) */
.grid-node[style*="grid-area: router"]::before {
    background: none;
    border-left: 3px dashed #f0ad4e;
    height: calc(6vh + 260px); 
    top: calc(-6vh - 260px);
    left: calc(50% + 10px); 
    z-index: 0;
}

/* Device Node Styles */
.device-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    border: 1px solid #007bff;
    background: #f0f6ff;
    border-radius: 8px;
    width: 160px; /* Nilakihan ng konti para sa spacing */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    min-height: 140px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.device-node img {
    max-width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 5px;
}
.device-node span {
    font-size: 13px;
    font-weight: 500;
}
.device-node span.ip-info {
    font-size: 11px;
    font-weight: 400;
    color: #555;
    margin-top: 4px;
}
.view-btn {
    margin-top: 5px;
    padding: 0.1rem 0.6rem; /* Mas mukhang button */
    font-size: 12px;
    font-weight: 500;
}

/* Special Device Styles */
.device-node.client {
    border-color: #198754; 
    background: #f0fff0;
}
.device-node.service {
    border-color: #ffc107; 
    background: #fffaf0;
    width: 160px;
}
.device-node.service i {
    font-size: 36px;
    margin-bottom: 10px;
    color: #ffc107;
}

/* Accessory (UPS) Styles */
.accessory-device {
    position: absolute;
    top: 5px;
    right: -85px; /* PINANTAY LAHAT SA SERVER-UPS OFFSET */
    width: 55px;  /* Default width para sa mini */
    background: #fff;
    border: 1px dashed #fd7e14; 
    border-radius: 5px;
    padding: 2px;
    text-align: center;
    z-index: 3;
}
/* Linya para sa UPS */
.accessory-device::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    border-top: 2px dashed #fd7e14;
    top: 50%;
    right: 100%;
    z-index: -1;
}
.accessory-device img {
    width: 100%;
    height: 30px;
    object-fit: contain;
    margin-bottom: 0;
}
.accessory-device span {
    font-size: 9px;
    color: #888;
}
.accessory-device.ups-server {
    width: 80px; /* Mas malapad lang 'to */
}
.accessory-device.ups-server img {
    max-height: 40px;
    height: 40px;
}
.view-btn-accessory {
    font-size: 10px !important;
    padding: 0.05rem 0.2rem;
    margin-top: 2px;
}

/* Modal Image Style */
#modalImage {
    max-width: 300px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 15px;
}


/* === MOBILE RESPONSIVE (FIXED LAHAT) === */
@media (max-width: 768px) {
    .topology-diagram {
        /* Magiging 1 column nalang lahat */
        grid-template-columns: 1fr;
        grid-template-areas:
            "online"
            "internet"
            "modem"
            "router"
            "server"
            "local-clients"
            "repeater"
            "far-clients";
        gap: 5vh 0; /* Mas malaking vertical space sa mobile */
    }

    /* === ITO 'YUNG FIX #2 para gumitna lahat ng single cards === */
    .device-node {
        /* Piliting gumitna 'yung card mismo */
        margin-left: auto;
        margin-right: auto;
    }
    .grid-node[style*="grid-area: online"] .device-node {
        margin-left: 0; /* Ibalik sa default para 'yung parent ang mag-center */
        margin-right: 0;
    }


    /* Alisin lahat ng horizontal lines */
    .grid-node[style*="grid-area: server"]::after,
    .grid-node[style*="grid-area: local-clients"]::after,
    .grid-node[style*="grid-area: repeater"]::after {
        display: none;
    }
    
    /* Ayusin ang line height sa mobile */
    .grid-node::before { height: 5vh; top: -5vh; }

    /* Ayusin ang 'far-clients' (Mobile/Tablet) */
    .grid-node[style*="grid-area: far-clients"] {
        flex-direction: row; 
        gap: 10px;
        justify-content: center; /* ETO YUNG NAGSE-CENTER */
    }
    .grid-node[style*="grid-area: far-clients"] .device-node {
        width: 110px; /* NILITTAN PA */ 
        min-height: 120px;
        padding: 8px 5px; /* Binawasan padding */
        margin-left: 0; /* I-override 'yung fix #2 */
        margin-right: 0; /* I-override 'yung fix #2 */
    }
    .grid-node[style*="grid-area: far-clients"] .device-node img {
        max-width: 40px; /* NILITTAN YUNG IMAGE */
        height: 40px;
    }
    .grid-node[style*="grid-area: far-clients"] .device-node span {
        font-size: 11px; /* NILITTAN YUNG FONT */
    }
    .grid-node[style*="grid-area: far-clients"] .device-node span.ip-info {
        font-size: 10px; /* NILITTAN YUNG FONT */
    }
    
    /* Ayusin ang UPS sa mobile (ilagay sa ilalim, SA LOOB NG CARD) */
    .accessory-device {
        position: relative; /* Gawing part of the flow, hindi absolute */
        top: auto;          /* I-reset ang absolute positioning */
        right: auto;        /* I-reset ang absolute positioning */
        transform: none;    /* I-reset ang transform */
        
        margin-left: auto;  /* I-center */
        margin-right: auto; /* I-center */
        margin-top: 10px;   /* Space mula sa button */
        width: 80px;
    }
    /* Tanggalin 'yung connector line sa mobile */
    .accessory-device::before {
        display: none;
    }
    .accessory-device.ups-server {
        width: 80px;
    }

    /* Ayusin ang mga dashed line sa mobile */
    .grid-node[style*="grid-area: server"]::before,
    .grid-node[style*="grid-area: router"]::before {
        display: none; /* Masyadong magulo sa mobile, tanggalin na */
    }
}