/* ============================================================
   MEDICHPLUS — INVENTORY CONTENT
   ============================================================
   IMPORTANT:
   - Does NOT style the global navbar.
   - Styles Inventory content only.
   - Supports:
       .mplus-simple-inventory
       .mplus-inventory-cards
       .card
       .widefat / inventory tables
       inventory forms
       inventory dashboard content
   - Uses existing MedichPlus visual language.
   ============================================================ */

.mplus-simple-inventory,
.mplus-inventory-cards,
.mplus-simple-inventory ~ * {

    --inv-navy-950: #0d2140;
    --inv-navy-900: #14315c;
    --inv-navy-700: #1b3a6b;

    --inv-green-600: #2f8f3b;
    --inv-green-500: #3ea24a;
    --inv-green-400: #5cb85f;

    --inv-teal-600: #1e7f8c;
    --inv-teal-500: #2596a3;

    --inv-bg: #f5f7f9;
    --inv-card: #ffffff;
    --inv-ink: #132133;
    --inv-muted: #5a6572;
    --inv-line: #e2e7ec;

    --inv-radius: 20px;
    --inv-radius-sm: 14px;
}


/* ============================================================
   SIMPLE INVENTORY — MAIN CONTAINER
   ============================================================ */

.mplus-simple-inventory {
    max-width: 1180px !important;

    margin: 30px auto 65px !important;

    padding:
        0 24px 30px !important;

    font-family: 'Inter', sans-serif;

    color: var(--inv-ink);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


/* ============================================================
   UNIVERSAL BOX SIZING
   ============================================================ */

.mplus-simple-inventory *,
.mplus-simple-inventory *::before,
.mplus-simple-inventory *::after {
    box-sizing: border-box;
}


/* ============================================================
   PAGE TITLE
   ============================================================ */

.mplus-simple-inventory > div:first-child {

    position: relative;

    overflow: hidden;

    padding: 38px 40px !important;

    margin-bottom: 24px !important;

    border-radius: var(--inv-radius);

    background:
        radial-gradient(
            100% 150% at 5% 0%,
            #1b477e 0%,
            var(--inv-navy-950) 55%,
            #09182e 100%
        );

    box-shadow:
        0 26px 55px -25px rgba(13,33,64,.55);

    animation:
        inv-rise .6s cubic-bezier(.2,.7,.2,1) both;
}

.mplus-simple-inventory > div:first-child::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(92,184,95,.28),
            transparent 70%
        );

    animation:
        inv-float 9s ease-in-out infinite;
}

.mplus-simple-inventory > div:first-child h2 {

    position: relative;
    z-index: 2;

    margin: 0 !important;

    color: #fff;

    font-family: 'Manrope', sans-serif;

    font-size: clamp(25px,3vw,33px);

    font-weight: 800;

    letter-spacing: -.02em;
}

.mplus-simple-inventory > div:first-child p {

    position: relative;
    z-index: 2;

    margin: 7px 0 0 !important;

    color: rgba(255,255,255,.76);

    font-size: 14.5px;
}


/* ============================================================
   SUCCESS / MESSAGE AREA
   ============================================================ */

.mplus-simple-inventory > div[style*="background:#eef7ee"] {

    position: relative;

    border: 1px solid rgba(62,162,74,.18) !important;

    background:
        linear-gradient(
            135deg,
            #f0f9f1,
            #f5fbf9
        ) !important;

    color: var(--inv-green-600);

    box-shadow:
        0 10px 25px -20px rgba(46,159,90,.4);

    animation:
        inv-rise .45s ease both;
}


/* ============================================================
   STAT CARDS
   ============================================================ */

.mplus-simple-inventory
> div[style*="display:grid"] {

    margin-bottom: 28px !important;
}

.mplus-simple-inventory
> div[style*="display:grid"]
> div {

    position: relative;

    overflow: hidden;

    min-height: 125px;

    padding: 23px !important;

    border: 1px solid var(--inv-line) !important;

    border-radius: 17px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafb
        ) !important;

    box-shadow:
        0 13px 30px -22px rgba(13,33,64,.38);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        box-shadow .28s ease,
        border-color .28s ease;
}

.mplus-simple-inventory
> div[style*="display:grid"]
> div::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            var(--inv-green-500),
            var(--inv-teal-500)
        );

    transform: scaleY(.35);

    transform-origin: center;

    transition:
        transform .3s ease;
}

.mplus-simple-inventory
> div[style*="display:grid"]
> div:hover {

    transform: translateY(-6px);

    border-color:
        rgba(37,150,163,.25) !important;

    box-shadow:
        0 24px 42px -25px rgba(13,33,64,.45);
}

.mplus-simple-inventory
> div[style*="display:grid"]
> div:hover::before {

    transform: scaleY(1);
}


/* ============================================================
   INVENTORY SECTION HEADINGS
   ============================================================ */

.mplus-simple-inventory h3 {

    margin: 0 0 15px;

    color: var(--inv-navy-900);

    font-family: 'Manrope', sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -.015em;
}

.mplus-simple-inventory h3::after {

    content: "";

    display: block;

    width: 38px;
    height: 3px;

    margin-top: 7px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--inv-green-500),
            var(--inv-teal-500)
        );
}


/* ============================================================
   INVENTORY FORMS / FORM CARDS
   ============================================================ */

.mplus-simple-inventory
> div[style*="grid-template-columns:1fr 1fr"] {

    gap: 18px !important;

    margin-bottom: 30px !important;
}

.mplus-simple-inventory
> div[style*="grid-template-columns:1fr 1fr"]
> div {

    position: relative;

    padding: 25px !important;

    border: 1px solid var(--inv-line) !important;

    border-radius: var(--inv-radius-sm) !important;

    background: #fff !important;

    box-shadow:
        0 15px 35px -25px rgba(13,33,64,.38);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mplus-simple-inventory
> div[style*="grid-template-columns:1fr 1fr"]
> div:hover {

    transform: translateY(-4px);

    box-shadow:
        0 23px 42px -25px rgba(13,33,64,.45);
}

.mplus-simple-inventory
> div[style*="grid-template-columns:1fr 1fr"]
> div h3 {

    padding-bottom: 12px;

    border-bottom: 1px solid var(--inv-line);
}


/* ============================================================
   FORM LABELS
   ============================================================ */

.mplus-simple-inventory label {

    display: block;

    color: var(--inv-navy-900);

    font-size: 13px;

    font-weight: 700;
}

.mplus-simple-inventory label br {

    display: block;

    content: "";

    margin-bottom: 5px;
}


/* ============================================================
   INPUTS
   ============================================================ */

.mplus-simple-inventory input[type="text"],
.mplus-simple-inventory input[type="number"],
.mplus-simple-inventory input[type="date"],
.mplus-simple-inventory select,
.mplus-simple-inventory textarea {

    width: 100% !important;

    min-height: 44px;

    padding: 10px 13px !important;

    border: 1px solid #dbe3e8 !important;

    border-radius: 10px !important;

    background: #fff !important;

    color: var(--inv-ink);

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.mplus-simple-inventory input:focus,
.mplus-simple-inventory select:focus,
.mplus-simple-inventory textarea:focus {

    border-color:
        var(--inv-teal-500) !important;

    box-shadow:
        0 0 0 4px rgba(37,150,163,.10);

    outline: none;
}


/* ============================================================
   INVENTORY ACTION BUTTONS
   ============================================================ */

.mplus-simple-inventory button {

    min-height: 43px;

    padding: 10px 18px !important;

    border: 0 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            var(--inv-green-500),
            var(--inv-teal-600)
        ) !important;

    color: #fff !important;

    font-family: 'Manrope', sans-serif;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 22px -14px rgba(37,150,163,.65);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.mplus-simple-inventory button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 27px -14px rgba(37,150,163,.75);
}


/* ============================================================
   INVENTORY TABLES
   ============================================================ */

.mplus-simple-inventory
> div[style*="overflow:auto"] {

    margin-top: 30px !important;

    padding: 24px !important;

    border: 1px solid var(--inv-line);

    border-radius: var(--inv-radius);

    background: #fff;

    box-shadow:
        0 15px 35px -25px rgba(13,33,64,.35);

    animation:
        inv-rise .6s .15s cubic-bezier(.2,.7,.2,1) both;
}

.mplus-simple-inventory
> div[style*="overflow:auto"] table {

    width: 100%;

    border-collapse: separate !important;

    border-spacing: 0;

    border: 1px solid var(--inv-line);

    border-radius: 13px;

    overflow: hidden;

    background: #fff;
}

.mplus-simple-inventory
> div[style*="overflow:auto"] th {

    padding: 14px 13px !important;

    border-bottom: 1px solid var(--inv-line) !important;

    background:
        linear-gradient(
            180deg,
            #f8fafb,
            #f1f5f7
        );

    color: var(--inv-navy-900);

    font-family: 'Manrope', sans-serif;

    font-size: 11.5px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .04em;

    white-space: nowrap;
}

.mplus-simple-inventory
> div[style*="overflow:auto"] td {

    padding: 14px 13px !important;

    border-bottom: 1px solid #edf0f2 !important;

    color: var(--inv-ink);

    font-size: 13.5px;
}

.mplus-simple-inventory
> div[style*="overflow:auto"] tbody tr {

    transition:
        background .2s ease;
}

.mplus-simple-inventory
> div[style*="overflow:auto"] tbody tr:hover {

    background:
        linear-gradient(
            90deg,
            #f7fbfa,
            #ffffff
        );
}

.mplus-simple-inventory
> div[style*="overflow:auto"] tbody tr:last-child td {

    border-bottom: 0 !important;
}


/* ============================================================
   STOCK STATUS
   ============================================================ */

.mplus-simple-inventory
> div[style*="overflow:auto"] td:last-child {

    font-weight: 700;
}


/* ============================================================
   ADMIN / DASHBOARD INVENTORY CARDS
   ============================================================
   These classes are already generated by the Inventory dashboard.
   ============================================================ */

.mplus-inventory-cards {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0,1fr));

    gap: 16px;

    margin: 24px 0 28px;
}

.mplus-inventory-cards .card {

    position: relative;

    overflow: hidden;

    min-height: 130px;

    margin: 0 !important;

    padding: 23px !important;

    border: 1px solid var(--inv-line) !important;

    border-radius: 17px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faf9
        ) !important;

    box-shadow:
        0 14px 30px -22px rgba(13,33,64,.4);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.mplus-inventory-cards .card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--inv-green-500),
            var(--inv-teal-500)
        );

    transform: scaleX(.35);

    transform-origin: left;

    transition:
        transform .3s ease;
}

.mplus-inventory-cards .card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(37,150,163,.25) !important;

    box-shadow:
        0 25px 45px -25px rgba(13,33,64,.45);
}

.mplus-inventory-cards .card:hover::before {

    transform: scaleX(1);
}

.mplus-inventory-cards .card h2 {

    margin: 0 0 7px;

    color: var(--inv-navy-900);

    font-family: 'Manrope', sans-serif;

    font-size: 28px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            var(--inv-green-500),
            var(--inv-teal-600)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.mplus-inventory-cards .card p {

    margin: 0;

    color: var(--inv-muted);

    font-size: 12.5px;

    font-weight: 700;
}


/* ============================================================
   INVENTORY DASHBOARD CONTENT
   ============================================================ */

.mplus-inventory-cards
~ h2 {

    margin-top: 30px;

    color: var(--inv-navy-900);

    font-family: 'Manrope', sans-serif;

    font-size: 21px;

    font-weight: 800;
}


/* ============================================================
   GENERIC INVENTORY CONTENT CARDS
   ============================================================ */

.mplus-simple-inventory .card {

    border: 1px solid var(--inv-line);

    border-radius: var(--inv-radius-sm);

    background: #fff;

    box-shadow:
        0 12px 30px -22px rgba(13,33,64,.35);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.mplus-simple-inventory .card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px -25px rgba(13,33,64,.42);
}


/* ============================================================
   INVENTORY ADMIN TABLES
   ============================================================ */

.mplus-inventory-cards
~ .widefat,
.wrap .mplus-inventory-cards
~ table.widefat {

    border: 1px solid var(--inv-line);

    border-radius: 14px;

    overflow: hidden;

    border-spacing: 0;

    box-shadow:
        0 12px 28px -22px rgba(13,33,64,.35);
}

.mplus-inventory-cards
~ table.widefat th {

    background:
        linear-gradient(
            180deg,
            #f8fafb,
            #f1f5f7
        );

    color: var(--inv-navy-900);

    font-family: 'Manrope', sans-serif;

    font-weight: 800;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes inv-rise {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes inv-float {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-14px,18px);
    }

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .mplus-inventory-cards {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}

@media (max-width: 800px) {

    .mplus-simple-inventory {
        padding:
            0 16px 30px !important;
    }

    .mplus-simple-inventory > div:first-child {
        padding: 30px 25px !important;
    }

    .mplus-inventory-cards {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .mplus-simple-inventory
    > div[style*="grid-template-columns:1fr 1fr"] {

        grid-template-columns: 1fr !important;
    }

}

@media (max-width: 540px) {

    .mplus-simple-inventory {
        padding:
            0 12px 25px !important;
    }

    .mplus-simple-inventory > div:first-child {
        padding: 27px 20px !important;
    }

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

    .mplus-simple-inventory
    > div[style*="overflow:auto"] {

        padding: 15px !important;
    }

    .mplus-simple-inventory
    > div[style*="overflow:auto"] table {

        min-width: 720px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mplus-simple-inventory *,
    .mplus-simple-inventory *::before,
    .mplus-simple-inventory *::after,
    .mplus-inventory-cards *,
    .mplus-inventory-cards *::before,
    .mplus-inventory-cards *::after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;
    }

}