/* ---------- Reset ---------- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

       html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #222;
    background: #f5f7fa;
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}
        .container {
            width: min(1120px, 92%);
            margin: auto;
        }

        /* ---------- Top header ---------- */
        .top-header {
            
            color: #fff;
            padding: 14px 0;
            background: #0b2239;
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .header-text {
            font-size: 14px;
            text-align: right;
        }

   
/* ---------- Sticky navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    color: #fff;
    background: #12355b;
    
}

.nav-content {
    display: flex;
    align-items: center;
}

/* ---------- Main tree menu ---------- */
.nav-tree,
.nav-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-tree {
    display: flex;
    align-items: center;
}

.nav-tree > li {
    position: relative;
}

.nav-tree a,
.submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 11px;
    color: #fff;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-tree > li > a,
.nav-tree > li > .submenu-toggle {
    min-height: 45px;
}

.nav-tree a:hover,
.nav-tree > li:hover > .submenu-toggle,
.nav-tree > li.active > a {
    background: #1d6fa5;
}

.arrow {
    font-size: 12px;
}

/* ---------- First-level submenu ---------- */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    display: none;
    min-width: 220px;
    background: #12355b;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .25);
}

.submenu li {
    position: relative;
    width: 100%;
}

.submenu a,
.submenu .submenu-toggle {
    padding: 6px 8px;
    color: #fff;
}

.submenu a:hover,
.submenu .submenu-toggle:hover {
    background: #1d6fa5;
}

/* Open first-level submenu on desktop hover */
@media (min-width: 651px) {
    .nav-tree > li.has-children:hover > .submenu {
        display: block;
    }

    /* Open nested submenu to the right */
    .submenu .nested-submenu {
        top: 0;
        left: 100%;
    }

    .submenu li.has-children:hover > .nested-submenu {
        display: block;
    }
}

/* ---------- Mobile menu button ---------- */
.menu-button {
    display: none;
    margin: 8px 0 8px auto;
    padding: 6px 8px;
    color: #fff;
    background: #1d6fa5;
    border: 0;
    border-radius: 4px;
    font-size: 22px;
    cursor: pointer;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 650px) {
    .nav-content {
        display: block;
        padding: 8px 0;
    }

    .menu-button {
        display: block;
    }

    .nav-tree {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-tree.show {
        display: flex;
    }

    .nav-tree > li {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .nav-tree a,
    .nav-tree .submenu-toggle {
        width: 100%;
        padding: 13px 12px;
    }

    /* Mobile submenu becomes a vertical tree branch */
    .submenu,
    .submenu .nested-submenu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        background: #12355b;
        box-shadow: none;
    }

    .has-children.open > .submenu {
        display: block;
    }

    .submenu a,
    .submenu .submenu-toggle {
        padding-left: 30px;
    }

    .submenu .nested-submenu a,
    .submenu .nested-submenu .submenu-toggle {
        padding-left: 50px;
    }

    .submenu .nested-submenu .nested-submenu a,
    .submenu .nested-submenu .nested-submenu .submenu-toggle {
        padding-left: 70px;
    }

    .arrow {
        transition: transform .2s ease;
    }

    .has-children.open > .submenu-toggle > .arrow {
        transform: rotate(180deg);
    }
}
















        /* ---------- Main section ---------- */
        .hero {
            padding: 65px 0;
            color: #fff;
            text-align: center;
            background:
                linear-gradient(
                    rgba(18, 53, 91, .85),
                    rgba(29, 111, 165, .85)
                );
        }

        .hero h1 {
            margin-bottom: 15px;
            font-size: clamp(28px, 5vw, 48px);
        }

        .hero p {
            max-width: 700px;
            margin: auto;
            line-height: 1.6;
            font-size: 17px;
        }

        .section {
            padding: 45px 0;
        }

        .section-title {
            margin-bottom: 25px;
            color: #12355b;
            text-align: center;
        }

        /* ---------- Responsive cards ---------- */
        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .card {
            padding: 24px;
            background: #fff;
            border: 1px solid #e0e5eb;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
        }

        .card h3 {
            margin-bottom: 10px;
            color: #1d6fa5;
        }

        .card p {
            line-height: 1.6;
            color: #555;
        }

        .button {
            display: inline-block;
            margin-top: 18px;
            padding: 10px 18px;
            color: #fff;
            background: #1d6fa5;
            border-radius: 4px;
        }

        .button:hover {
            background: #12355b;
        }

        /* ---------- Footer ---------- */
   .footer {
    flex-shrink: 0;
    padding: 22px 0;
    color: #fff;
    background: #0b2239;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}    

        .footer-links {
            display: flex;
            gap: 18px;
        }

        .footer-links a:hover {
            color: #69c0ff;
        }

        /* ---------- Tablet ---------- */
        @media (max-width: 850px) {
            .cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .nav-links > li > a,
            .submenu-toggle {
                padding: 14px 12px;
            }
        }

        /* ---------- Mobile ---------- */
        @media (max-width: 650px) {
            .header-content {
                align-items: flex-start;
                flex-direction: column;
            }

            .header-text {
                text-align: left;
            }

            .nav-content {
                display: block;
                padding: 10px 0;
            }

            .menu-button {
                display: block;
                margin-left: auto;
            }

            .nav-links {
                display: none;
                width: 100%;
                margin-top: 10px;
                flex-direction: column;
                align-items: stretch;
            }

            .nav-links.show {
                display: flex;
            }

            .nav-links > li {
                width: 100%;
                border-top: 1px solid rgba(255, 255, 255, .12);
            }

            .nav-links > li > a,
            .submenu-toggle {
                width: 100%;
                padding: 13px 10px;
                text-align: left;
            }

            .submenu {
                position: static;
                width: 100%;
                box-shadow: none;
                background: #12355b;
            }

            .submenu li a {
                padding: 11px 25px;
                color: #fff;
            }

            .submenu li a:hover {
                background: #1d6fa5;
            }

            .has-submenu.open > .submenu {
                display: block;
            }

            .cards {
                grid-template-columns: 1fr;
            }

            .footer-content {
                align-items: flex-start;
                flex-direction: column;
            }

            .footer-links {
                flex-wrap: wrap;
            }
        }



        /* ---------- Image slider ---------- */
.hero-slider {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 30px;
    padding: 12px 0;
    background: rgba(255, 255, 255, .12);
    border-top: 1px solid rgba(255, 255, 255, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.slider-track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: scroll-left 35s linear infinite;
}

/*
Pause the complete scrolling track while the cursor is over
any image in the slider.
*/
.hero-slider:hover .slider-track {
    animation-play-state: paused;
}

.slider-item {
    flex: 0 0 auto;
    width: 220px;
    height: 140px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.slider-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.slider-item:hover img {
    transform: scale(1.05);
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Mobile slider */
@media (max-width: 650px) {
    .hero-slider {
        margin-bottom: 22px;
    }

    .slider-track {
        gap: 10px;
        animation-duration: 25s;
    }

    .slider-item {
        width: 150px;
        height: 100px;
    }
}

/* Respect users who disable motion */
@media (prefers-reduced-motion: reduce) {
    .slider-track {
        animation: none;
        transform: translateX(0);
    }
}



  * { box-sizing: border-box;    }
        .container {     max-width: 800px;  margin: 0 auto;  }
        .box {  background: #fff;  border: 1px solid #ccc; border-radius: 6px;
            padding: 18px;  margin-bottom: 20px;  }
        h2,  h3 {  margin-top: 0;  }
        .message {  padding: 10px; margin-bottom: 15px; border-radius: 4px;
        }
        .error {  color: #842029; background: #f8d7da;   }
        .success { color: #0f5132; background: #d1e7dd;  }
        .row { display: flex; gap: 12px;  }
        .row > div {   flex: 1;  }
        label { display: block;  margin-top: 10px; font-weight: bold; }
        input[type="text"],
        input[type="date"],
        input[type="number"],
        select { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #999;
            border-radius: 4px;  font-size: 14px;  }
        input[readonly] {  background: #eee;  }
        button, .button {  display: inline-block; padding: 8px 12px; margin-top: 12px;
            border: 0; border-radius: 4px; text-decoration: none;cursor: pointer;
            font-size: 13px; }
        .primary { color: #fff; background: #087f5b; }
        .blue { color: #fff; background: #1864ab; }
        .orange {color: #fff;  background: #d9480f;  }
        .red { color: #fff; background: #c92a2a;  }
        .gray { color: #fff; background: #555;        }
        .list-header { display: flex; justify-content: space-between;align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 12px; }
        .list-header h3 {  margin: 0; }
        .list-controls { display: flex; align-items: center; gap: 10px;
            flex-wrap: wrap; }
        .list-controls input { width: 230px; }
        table { width: 100%;  border-collapse: collapse; background: #fff;   }
        th, td {  padding: 8px; border: 1px solid #ccc; text-align: left;    }

        th { background: #eee;   }
        .actions { white-space: nowrap; }
        .pagination-footer {  display: flex; justify-content: space-between;          align-items: center;    gap: 15px; flex-wrap: wrap; margin-top: 14px;
        }
        .pagination a,.pagination strong { display: inline-block; margin-right: 4px;
            padding: 5px 9px;  border: 1px solid #aaa; border-radius: 3px;ext-decoration: none;    }
        .pagination strong {  color: #fff;  background: #087f5b;  }
        .note {  color: #666; font-size: 12px; margin-top: 5px;   }
        @media (max-width: 700px) {
            body { padding: 8px; }
            .row { display: block;  }
            .list-controls input {  width: 100%;  }
          table {  font-size: 11px;  }
        .actions { white-space: normal;   }
        }

    
     
        .insert-button {
            margin-top: 15px;
            color: #fff;
            background: #087f5b;
        }

        .delete-button {
            color: #fff;
            background: #c92a2a;
        }

       
        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .list-header h3 {
            margin: 0;
        }

        .record-selector {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .record-selector select {
            width: auto;
            margin-top: 0;
        }

        
        
        .used {
            color: #c92a2a;
            font-weight: bold;
        }

        .vacant {
            color: #087f5b;
            font-weight: bold;
        }



    </style>