*{box-sizing:border-box}body{margin:0;font:16px 'Segoe UI',Arial,sans-serif;background:#f3f6fb;color:#18304d}.ix-side{position:fixed;top:0;left:0;bottom:0;width:224px;background:linear-gradient(155deg,#12223e,#203d68);padding:22px 14px;color:#fff}.ix-brand{font-size:20px;font-weight:700;padding:8px 8px 34px}.ix-brand b{background:white;color:#19345a;padding:8px;border-radius:5px;font-size:16px}.ix-section{color:#9fb4d2;font-size:11px;letter-spacing:1px;margin:15px 10px}.ix-side a{display:block;color:#edf4ff;text-decoration:none;font-size:17px;padding:13px;border-radius:9px;margin:3px 0}.ix-side a:hover,.ix-side a.selected{background:#3e619b}.work{margin-left:224px;min-width:0}header{background:white;border-bottom:1px solid #e0e7f1;padding:15px 24px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}header strong{font-size:20px}header small{font-size:13px;color:#8191a6;font-weight:400}header form{display:inline-block}header a{color:#315b91;text-decoration:none;margin-right:10px}main{padding:22px 24px}h1{font-size:28px;margin:0 0 14px}h2{font-size:21px;margin:0 0 15px}.muted{color:#667e99;font-size:14px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.tile{background:#e9f1fb;border:1px solid #dae6f5;border-radius:12px;padding:20px}.tile span{display:block;color:#547092;font-size:15px}.tile b{display:block;font-size:29px;margin-top:8px}.card{background:#fff;border:1px solid #e1e7ef;border-radius:13px;padding:23px;margin:18px 0;box-shadow:0 3px 12px #17375d09}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:block;font-size:16px;font-weight:600;margin:12px 0 6px}input,select,textarea{width:100%;padding:11px;border:1px solid #c7d4e2;border-radius:8px;font:inherit}textarea{min-height:80px}button{background:#20599c;border:0;color:white;border-radius:8px;padding:11px 16px;cursor:pointer;font:inherit;margin-top:12px}button.secondary{background:#e8eff8;color:#294a73;margin:0}button.danger{background:#a23e42;margin-left:5px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:15px}th,td{padding:13px 11px;border-bottom:1px solid #e7ecf3;text-align:left;vertical-align:middle}th{background:#eef3f9;white-space:nowrap}.badge{display:inline-block;background:#e7effa;border-radius:20px;padding:5px 9px;white-space:nowrap}.notice{padding:13px;background:#e3f5ea;border-radius:8px}.notice.error{background:#ffe8e8}.login{max-width:460px;margin:60px auto}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}@media(max-width:700px){.ix-side{position:static;width:auto;height:auto;padding:12px}.ix-side a{display:inline-block;font-size:13px;padding:8px}.ix-side .ix-section{display:none}.ix-brand{padding:4px}.work{margin-left:0}main{padding:12px}.grid{grid-template-columns:1fr}.tile b{font-size:22px}}


/* IONEX Inventory V2.6 Leave Design */

@media (min-width: 701px) {
    .ix-side {
        width: 244px;
        background: linear-gradient(165deg,#0a1d37,#153356);
        padding: 22px 13px;
    }

    .work {
        margin-left: 244px;
    }
}

.ix-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 27px;
    text-decoration: none;
    color: white;
}

.ix-brand img {
    width: 104px;
    max-height: 43px;
    object-fit: contain;
    background: white;
    border-radius: 5px;
    padding: 3px;
}

.ix-brand span {
    font-size: 18px;
    font-weight: 600;
}

.ix-section {
    font-size: 12px;
    letter-spacing: 1.2px;
    margin: 20px 12px 10px;
}

.ix-side > a:not(.ix-brand) {
    font-size: 17px;
    line-height: 1.35;
    padding: 15px 16px;
    border-radius: 9px;
}

.ix-side > a:hover,
.ix-side > a.selected {
    background: #255f9e;
}

.work > header {
    min-height: 70px;
    padding: 0 28px;
    border-bottom: 1px solid #e1e9f2;
}

.work > main {
    padding: 24px 26px;
}

.work h1 {
    font-size: 29px;
}

.work h2 {
    font-size: 21px;
}

.work .card {
    border: 1px solid #e1e9f2;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 5px 18px #16375b0c;
}

.work input,
.work select,
.work textarea {
    font-size: 16px;
    border-radius: 8px;
}

.work button {
    font-size: 15px;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .ix-brand {
        padding: 4px;
    }

    .work > header {
        padding: 12px;
    }

    .work > main {
        padding: 12px;
    }
}


/* IONEX Inventory V2.6 - Leave final alignment */
.ix-side {
    width: 244px;
    flex: 0 0 244px;
    box-sizing: border-box;
}

.ix-side nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ix-side > a:not(.ix-brand) {
    display: block;
    color: #dbe8f5;
    font-size: 17px;
    line-height: 1.35;
    padding: 15px 16px;
    border-radius: 9px;
}

.ix-side .ix-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 27px;
}

.ix-side .ix-brand img {
    width: 104px;
    max-height: 43px;
    object-fit: contain;
    background: white;
    border-radius: 5px;
    padding: 3px;
}

.ix-side .ix-brand span {
    font-size: 18px;
    font-weight: 600;
}

@media(max-width:700px) {
    .ix-side {
        width: auto;
        flex: initial;
    }
}

/* IONEX Expense V1.1 Sidebar Matching */
@media (min-width: 951px) {
    .ix-side {
        width: 258px !important;
        padding: 26px 14px !important;
    }

    .work {
        margin-left: 258px !important;
    }
}

.ix-side {
    background: linear-gradient(170deg,#081c35,#102e50) !important;
}

.ix-side .ix-brand {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 13px 34px !important;
}

.ix-side .ix-brand img {
    max-width: 132px !important;
    max-height: 45px !important;
}

.ix-side .ix-brand > span {
    font-size: 20px !important;
    font-weight: 300 !important;
}

.ix-side > a:not(.ix-brand) {
    font-size: 17px !important;
    padding: 15px 17px !important;
    border-radius: 11px !important;
    margin: 0 !important;
}

.ix-side .ix-section {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin: 15px 16px !important;
}

/* Final Expense Sidebar Match */
.ix-side .ix-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.ix-side .ix-nav a {
    display: block !important;
    font-size: 17px !important;
    padding: 15px 17px !important;
    border-radius: 11px !important;
    margin: 0 !important;
    line-height: normal !important;
}

.ix-side .ix-nav a:hover,
.ix-side .ix-nav a.selected {
    background: #3d6099 !important;
    color: white !important;
}

/* Final Sidebar Width Match - Expense V1.1 */
@media (min-width: 801px) {
    .ix-side {
        width: 244px !important;
        flex: 0 0 244px !important;
        box-sizing: border-box !important;
    }

    .work {
        margin-left: 244px !important;
        width: calc(100% - 244px) !important;
    }
}
@media (max-width: 800px) {
    .work {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* FINAL: Match Expense V1.1 / Inventory V2.6 */

@media (min-width: 801px) {
    .ix-side {
        width: 244px !important;
        flex: 0 0 244px !important;
        padding: 22px 13px !important;
        box-sizing: border-box !important;
        background: linear-gradient(165deg,#0a1d37,#153356) !important;
    }

    .work {
        margin-left: 244px !important;
        width: calc(100% - 244px) !important;
    }
}

/* Logo alignment */
.ix-side .ix-brand {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 7px 11px 27px !important;
}

.ix-side .ix-brand img {
    width: 104px !important;
    max-width: 104px !important;
    max-height: 43px !important;
    background: white !important;
    border-radius: 5px !important;
    padding: 3px !important;
}

.ix-side .ix-brand > span {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Menu spacing */
.ix-side > a:not(.ix-brand) {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    padding: 15px 16px !important;
    border-radius: 9px !important;
    margin: 0 0 16px !important;
}

.ix-side .ix-section {
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    margin: 20px 12px 10px !important;
}

/* Main content alignment */
.work main {
    max-width: none !important;
    width: calc(100% - 52px) !important;
    margin: 24px auto !important;
    padding: 0 !important;
}

@media (max-width: 800px) {
    .work {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .work main {
        width: calc(100% - 24px) !important;
        margin: 14px auto !important;
        padding: 0 !important;
    }
}

/* IONEX Inventory V2.6 - Employee Edit Modal */
.employee-editor > summary {
    list-style: none;
    cursor: pointer;
}

.employee-editor > summary::-webkit-details-marker {
    display: none;
}

.employee-editor > form {
    display: none;
}

.employee-editor .action-edit {
    display: inline-block;
}

.item-modal {
    border: 0;
    border-radius: 14px;
    padding: 0;
    width: min(640px, calc(100% - 32px));
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 24px 80px #172a4366;
    color: #19344d;
}

.item-modal::backdrop {
    background: #1526389c;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.modal-close {
    background: transparent !important;
    color: #52677b !important;
    font-size: 27px;
    padding: 0 7px;
}

.modal-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-form label {
    display: block;
    align-self: end;
}

.modal-form input,
.modal-form select {
    font-size: 14px;
    padding: 10px;
}

.modal-form button {
    grid-column: 1 / -1;
    justify-self: start;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
}

@media(max-width:600px) {
    .modal-form {
        grid-template-columns: 1fr;
    }
}

/* Employee Actions - Inventory V2.6 Standard */
.employee-editor {
    display: inline-block;
    margin-right: 5px;
}

.employee-editor > summary {
    list-style: none;
    cursor: pointer;
}

.employee-editor > summary::-webkit-details-marker {
    display: none;
}

.employee-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.employee-delete-form {
    display: inline-block;
}

.action-edit,
.action-delete {
    display: inline-block;
    font-size: 13px !important;
    line-height: 1.2;
    padding: 9px 12px !important;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.action-edit {
    background: #e7f0fb !important;
    color: #245b93 !important;
    font-weight: 700;
}

.action-delete {
    background: #fff0ee !important;
    color: #a83d36 !important;
    border: 1px solid #f1c9c5 !important;
}

.employee-editor > summary:hover,
.action-edit:hover {
    background: #d8e8f8 !important;
}

.action-delete:hover {
    background: #ffe3df !important;
}