* {
    box-sizing: border-box
}

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

header {
    height: 64px;
    background: #17365d;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px
}

.container {
    display: flex;
    gap: 20px;
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}

.sidebar {
    width: 240px;
    transition: transform 240ms ease, box-shadow 240ms ease, width 240ms ease, padding 240ms ease;
}

/* Desktop collapse */
.sidebar.collapsed {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg,#17365d 0,#1f4e78 100%);
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

/* When sidebar is collapsed ensure content uses full width */
.sidebar.collapsed + .content-main, .container .content-main {
    flex: 1 1 auto;
}

.sidebar a, .sidebar summary {
    color: #fff;
    text-decoration: none;
    padding: 10px 12px;
    display: block;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.sidebar a:hover, .sidebar summary:hover { background: rgba(255,255,255,0.06); }

.submenu a { padding-left: 18px; font-size: 0.95rem }

.sidebar a.active, .sidebar a:focus, .sidebar a:hover { background: rgba(255,255,255,0.06); }

/* Overlay for mobile when sidebar is open */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900; }
.overlay.visible { display: block; }

/* Responsive: collapse sidebar into hamburger */
@media(max-width:800px) {
    .container { padding: 0 12px; }
    .sidebar {
        position: fixed;
        top: 64px;
        left: 0;
        height: calc(100% - 64px);
        transform: translateX(-110%);
        width: 260px;
        z-index: 1000;
        border-radius: 0 12px 12px 0;
    }
    .sidebar.open { transform: translateX(0); }
    .content-main { padding-top: 12px; }
    header { padding: 10px 14px; }
    .brand { font-size: 18px }
    .linkbtn { font-size: 20px; margin-right: 8px }
}

/* small polish for buttons */
.btn { box-shadow: 0 2px 6px rgba(15,35,64,0.12); }

.content-main { flex: 1; padding: 0 }

.brand {
    font-size: 20px;
    font-weight: 700;
    margin-right: 12px
}

nav {
    display: flex;
    gap: 18px;
    flex: 1
}

    nav a {
        color: #fff;
        text-decoration: none
    }

.linkbtn {
    background: none;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 14px
}

/* main replaced by .content-main when sidebar is present */

h1 {
    margin-top: 0
}

.cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.card {
    background: #fff;
    border-radius: 10px;
    padding: 22px;
    box-shadow: 0 2px 8px #0001
}

.num {
    font-size: 30px;
    font-weight: 700
}

.toolbar, .formcard {
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 18px
}

.toolbar {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

input, select {
    padding: 9px;
    border: 1px solid #bbb;
    border-radius: 5px
}

button, .btn {
    padding: 9px 14px;
    border: 0;
    border-radius: 5px;
    background: #1f4e78;
    color: #fff;
    text-decoration: none;
    cursor: pointer
}
    .btn:hover {
        background: #287d3c
    }

    .btn.secondary {
        background: #0094ff;
        color: #fff
    }

        .btn.secondary:hover {
            background: #4800ff
        }

    .btn.green {
        background: #287d3c
    }

    .btn.red {
        background: #a33
    }

.tablewrap {
    overflow: auto;
    background: #fff;
    border-radius: 10px
}

table {
    border-collapse: collapse;
    width: 100%
}

th, td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    white-space: nowrap
}

th {
    background: #1f4e78;
    color: #fff
}

.alert {
    background: #ffe1e1;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px
}

.login {
    max-width: 420px;
    margin: 80px auto
}

    .login h1 {
        text-align: center
    }

.actions {
    display: flex;
    gap: 8px
}

.small {
    font-size: 12px;
    color: #666
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

@media(max-width:900px) {
    .cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .cards, .grid2 {
        grid-template-columns: 1fr
    }

    header {
        height: auto;
        flex-wrap: wrap;
        padding: 14px
    }

    nav {
        order: 3;
        width: 100%;
        overflow: auto
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 16px;
    margin: 16px 0
}

    .form-grid label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-weight: 600
    }

    .form-grid input, .form-grid select {
        padding: 9px
    }

.toolbar {
    margin: 15px 0
}

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.button {
    display: inline-block;
    padding: 9px 14px;
    text-decoration: none
}

.secondary {
    margin-left: 8px
}

.muted {
    color: #666;
    font-size: .9rem
}

.about-card {
    max-width: 680px;
    margin: 60px auto;
    background: #fff;
    border-radius: 14px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 3px 14px #0001
}

.about-logo {
    width: 100%;
    max-width: 220px;
    margin: 0 auto 20px;
    display: block;
}

/* image inside about logo - show full image */
.about-logo-img {
    width: 100%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    display: block;
}

.about-card h1 {
    margin-bottom: 8px
}

.about-version {
    font-size: 18px;
    font-weight: 600;
    color: #1f4e78
}

.about-details {
    margin-top: 28px;
    text-align: left;
    border-top: 1px solid #eee
}

    .about-details div {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 12px 0;
        border-bottom: 1px solid #eee
    }

    .about-details span {
        color: #555
    }

.hierarchy-assignment {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 18px 0
}

.assignment-panel {
    min-width: 0
}

    .assignment-panel h4 {
        margin: 0 0 4px
    }

.assignment-list {
    width: 100%;
    min-height: 300px;
    padding: 6px
}

    .assignment-list option {
        padding: 7px 5px
    }

.assignment-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .assignment-buttons .btn {
        min-width: 90px
    }

.small {
    font-size: .9rem
}

@media(max-width:800px) {
    .hierarchy-assignment {
        grid-template-columns: 1fr
    }

    .assignment-buttons {
        flex-direction: row;
        justify-content: center
    }
}


.list-search {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

/* company logo and name in header */
.company {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.company img {
    height: 44px;
    width: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.company-name {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
}

@media(max-width:800px) {
    .company img { height: 34px }
    .company-name { display: none }
}

/* brand logo on left */
.brand-logo {
    height: 44px;
    width: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

@media(max-width:800px) {
    .brand-logo { height: 34px }
}