/* =====================================================================
   INVENTORY HEALTH
   STANDALONE FUTURE LIGHT UI
   ===================================================================== */

:root {
    --ih-sidebar: 208px;
    --ih-topbar: 64px;

    --ih-bg: #f5f7ff;
    --ih-card: rgba(255,255,255,.92);
    --ih-card-solid: #ffffff;

    --ih-line: #dfe6f2;
    --ih-line-soft: #edf1f8;

    --ih-text: #0d1c40;
    --ih-muted: #687996;

    --ih-blue: #4867ff;
    --ih-indigo: #5c4df5;
    --ih-violet: #8b5cf6;
    --ih-cyan: #31b8e8;
    --ih-teal: #21bba6;
    --ih-green: #20ae72;

    --ih-red: #e84e6a;
    --ih-amber: #e9a11b;

    --ih-shadow:
        0 10px 32px rgba(40, 62, 120, .08);

    --ih-shadow-soft:
        0 4px 16px rgba(40, 62, 120, .06);

    --ih-radius: 16px;
}


* {
    box-sizing: border-box;
}


html {
    background: var(--ih-bg);
}


body {
    margin: 0;

    color: var(--ih-text);

    background:
        radial-gradient(
            circle at 96% 2%,
            rgba(117, 92, 255, .16),
            transparent 24%
        ),
        radial-gradient(
            circle at 18% 93%,
            rgba(71, 135, 255, .11),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8faff 0%,
            #f4f7ff 52%,
            #f8f8ff 100%
        );

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height: 100vh;
}


/* =====================================================================
   SIDEBAR
   ===================================================================== */

.ih-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--ih-sidebar);

    display: flex;
    flex-direction: column;

    padding: 20px 14px 18px;

    background:
        rgba(255,255,255,.96);

    border-right:
        1px solid var(--ih-line);

    box-shadow:
        10px 0 28px rgba(54, 72, 120, .035);

    z-index: 100;
}


.ih-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 0 8px 14px;

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


.ih-brand-logo {
    width: 36px;
    max-height: 32px;

    object-fit: contain;
}


.ih-brand-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.ih-brand-copy strong {
    font-size: 15px;
    line-height: 1.1;
}


.ih-brand-copy span {
    margin-top: 3px;

    color: var(--ih-muted);

    font-size: 9px;
}


.ih-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 18px;
}


.ih-nav-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 40px;

    padding: 0 11px;

    color: #4e6388;

    border-radius: 10px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}


.ih-nav-item:hover {
    color: var(--ih-blue);
    background: #f3f5ff;
    transform: translateX(2px);
}


.ih-nav-item.active {
    color: #4554ee;

    background:
        linear-gradient(
            90deg,
            #eff1ff,
            #f6f5ff
        );
}


.ih-nav-icon {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    color: #6577a0;

    border:
        1px solid #e2e7f4;

    border-radius: 7px;

    background: #fff;

    font-size: 11px;
}


.ih-nav-item.active
.ih-nav-icon {
    color: #4858ff;

    border-color: #d8dcff;

    background: #fafaff;
}


.ih-sidebar-spacer {
    flex: 1;
}


.ih-sidebar-help {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 14px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #5d55ff,
            #7784ff
        );

    border-radius: 14px;

    box-shadow:
        0 10px 28px rgba(83, 77, 246, .20);
}


.ih-help-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    background: rgba(255,255,255,.16);

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 8px;

    font-weight: 900;
}


.ih-sidebar-help strong {
    font-size: 12px;
    line-height: 1.3;
}


.ih-sidebar-help span {
    color: rgba(255,255,255,.82);

    font-size: 9px;
    line-height: 1.45;
}


.ih-logout {
    margin-top: 10px;
}


.ih-logout button {
    width: 100%;

    height: 34px;

    color: #667794;

    background: transparent;

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

    border-radius: 9px;

    cursor: pointer;

    font-size: 10px;
    font-weight: 700;
}


/* =====================================================================
   TOPBAR
   ===================================================================== */

.ih-topbar {
    position: fixed;
    left: var(--ih-sidebar);
    right: 0;
    top: 0;

    height: var(--ih-topbar);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 22px;

    background:
        rgba(249, 251, 255, .88);

    backdrop-filter:
        blur(15px);

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

    z-index: 90;
}


.ih-global-search {
    width: min(540px, 52vw);

    height: 38px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    background: rgba(255,255,255,.94);

    border:
        1px solid #dbe3f2;

    border-radius: 11px;

    box-shadow:
        0 2px 10px rgba(41, 64, 120, .04);
}


.ih-global-search > span {
    color: #7082a3;

    font-size: 16px;
}


.ih-global-search input {
    flex: 1;

    min-width: 0;

    outline: 0;
    border: 0;

    color: var(--ih-text);

    background: transparent;

    font-size: 11px;
}


.ih-global-search kbd {
    padding: 3px 6px;

    color: #7785a0;

    background: #f4f6fb;

    border:
        1px solid #e3e8f3;

    border-radius: 6px;

    font-size: 8px;
}


.ih-account {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 12px 7px 8px;

    background: rgba(255,255,255,.9);

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

    border-radius: 12px;
}


.ih-avatar {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #5664ff,
            #7356f8
        );

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}


.ih-account > div:last-child {
    display: flex;
    flex-direction: column;
}


.ih-account strong {
    font-size: 10px;
}


.ih-account span {
    margin-top: 2px;

    color: var(--ih-muted);

    font-size: 8px;
}


/* =====================================================================
   MAIN
   ===================================================================== */

.ih-main {
    margin-left: var(--ih-sidebar);

    padding:
        calc(var(--ih-topbar) + 22px)
        22px
        46px;

    min-width: 0;
}


/* =====================================================================
   HERO
   ===================================================================== */

.ih-hero {
    position: relative;

    min-height: 86px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding: 4px 4px 14px;

    overflow: hidden;
}


.ih-hero::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 130px;

    right: -80px;
    top: -55px;

    border-radius: 50%;

    border:
        1px solid rgba(117, 93, 255, .16);

    box-shadow:
        0 0 0 18px rgba(105, 86, 255, .035),
        0 0 0 38px rgba(105, 86, 255, .025);

    transform:
        rotate(-11deg);

    pointer-events: none;
}


.ih-breadcrumb {
    margin-bottom: 7px;

    color: #8793aa;

    font-size: 8px;
}


.ih-eyebrow {
    margin-bottom: 5px;

    color: #4057e6;

    letter-spacing: .13em;

    font-size: 8px;
    font-weight: 900;
}


.ih-hero h1 {
    margin: 0;

    font-size: clamp(22px, 2vw, 31px);
    line-height: 1.08;

    letter-spacing: -.035em;
}


.ih-hero p {
    margin: 7px 0 0;

    color: var(--ih-muted);

    font-size: 10px;
}


.ih-period {
    position: relative;
    z-index: 2;

    min-width: 260px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    background: rgba(255,255,255,.82);

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

    border-radius: 12px;

    box-shadow: var(--ih-shadow-soft);
}


.ih-period-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    color: var(--ih-blue);

    background: #f0f3ff;

    border-radius: 8px;
}


.ih-period > div {
    display: flex;
    flex-direction: column;
}


.ih-period strong {
    font-size: 9px;
}


.ih-period span {
    margin-top: 3px;

    color: var(--ih-muted);

    font-size: 8px;
}


/* =====================================================================
   KPI
   ===================================================================== */

.ih-kpi-grid {
    display: grid;

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

    gap: 12px;

    margin-bottom: 13px;
}


.ih-kpi {
    position: relative;

    min-height: 100px;

    display: grid;

    grid-template-columns:
        44px 1fr 90px;

    align-items: center;

    gap: 10px;

    padding: 14px 15px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,255,255,.89)
        );

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

    border-radius: 14px;

    box-shadow: var(--ih-shadow-soft);
}


.ih-kpi-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 18px;
    font-weight: 800;
}


.ih-kpi.blue
.ih-kpi-icon {
    color: #3975f6;
    background: #ecf3ff;
}


.ih-kpi.red
.ih-kpi-icon {
    color: var(--ih-red);
    background: #fff0f3;
}


.ih-kpi.amber
.ih-kpi-icon {
    color: #da8f10;
    background: #fff6e7;
}


.ih-kpi.violet
.ih-kpi-icon {
    color: #7258f4;
    background: #f1eeff;
}


.ih-kpi-copy {
    display: flex;
    flex-direction: column;
}


.ih-kpi-copy > span {
    color: #5f708d;

    font-size: 9px;
    font-weight: 700;
}


.ih-kpi-copy strong {
    margin-top: 3px;

    font-size: 26px;
    line-height: 1;
}


.ih-kpi-copy small {
    margin-top: 6px;

    color: #7f8da5;

    font-size: 7px;
}


.ih-spark {
    height: 38px;

    display: flex;
    align-items: flex-end;

    gap: 3px;
}


.ih-spark i {
    flex: 1;

    min-width: 3px;

    height: 10px;

    border-radius: 4px 4px 0 0;

    background:
        linear-gradient(
            180deg,
            #526cff,
            rgba(82,108,255,.18)
        );
}


.ih-spark i:nth-child(2) {
    height: 15px;
}


.ih-spark i:nth-child(3) {
    height: 13px;
}


.ih-spark i:nth-child(4) {
    height: 24px;
}


.ih-spark i:nth-child(5) {
    height: 29px;
}


.ih-spark i:nth-child(6) {
    height: 35px;
}


/* =====================================================================
   PANEL
   ===================================================================== */

.ih-panel {
    background: var(--ih-card);

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

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

    box-shadow: var(--ih-shadow);

    backdrop-filter:
        blur(10px);
}


.ih-ranking {
    position: relative;

    margin-bottom: 13px;

    padding: 13px 15px;

    overflow: hidden;
}


.ih-ranking::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 100px;

    right: -70px;
    bottom: -65px;

    border-radius: 50%;

    border:
        1px solid rgba(78,110,255,.18);

    box-shadow:
        0 0 0 17px rgba(71,111,255,.035),
        0 0 0 35px rgba(120,91,255,.025);

    transform:
        rotate(-7deg);
}


.ih-panel-title-row {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


.ih-title-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #5265ff;

    background: #f0f2ff;

    border:
        1px solid #e0e3ff;

    border-radius: 9px;

    font-weight: 900;
}


.ih-panel-title-row h2 {
    margin: 0;

    font-size: 13px;
}


.ih-panel-title-row p {
    margin: 3px 0 0;

    color: var(--ih-muted);

    font-size: 8px;
}


.ih-rule-pills {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 10px;
}


.ih-rule-pills span,
.ih-meta-pills span {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 0 10px;

    color: #586a89;

    background:
        rgba(255,255,255,.78);

    border:
        1px solid #dfe6f3;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 650;
}


/* =====================================================================
   HEALTH PANEL
   ===================================================================== */

.ih-health-panel {
    overflow: visible;
}


.ih-health-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 13px 15px;

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


.ih-reset {
    height: 31px;

    padding: 0 10px;

    color: #4f60db;

    background: #f8f9ff;

    border:
        1px solid #dde1ff;

    border-radius: 8px;

    cursor: pointer;

    font-size: 8px;
    font-weight: 800;
}


/* =====================================================================
   FILTERS
   ===================================================================== */

.ih-filter-bar {
    position: sticky;
    top: var(--ih-topbar);

    z-index: 70;

    display: grid;

    grid-template-columns:
        minmax(240px, 1.55fr)
        90px
        minmax(145px, .85fr)
        minmax(145px, .85fr)
        minmax(140px, .8fr)
        minmax(140px, .8fr)
        34px;

    gap: 8px;

    align-items: end;

    margin: 10px 12px 0;

    padding: 9px;

    background:
        rgba(255,255,255,.98);

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

    border-radius: 12px;

    box-shadow:
        0 7px 24px rgba(38, 59, 116, .07);
}


.ih-filter-bar.unpinned {
    position: relative;
    top: auto;
}


.ih-field {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.ih-field > label {
    color: #5e6f8b;

    font-size: 7px;
    font-weight: 800;
}


.ih-field input,
.ih-field select,
.ih-multi-button {
    width: 100%;

    height: 34px;

    outline: 0;

    color: #263a61;

    background: #fff;

    border:
        1px solid #dbe4f2;

    border-radius: 8px;

    font-size: 9px;
}


.ih-field select {
    padding: 0 8px;
}


.ih-input-shell {
    height: 34px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 9px;

    background: #fff;

    border:
        1px solid #dbe4f2;

    border-radius: 8px;
}


.ih-input-shell > span {
    color: #7182a2;
}


.ih-input-shell input {
    height: 30px;

    padding: 0;

    border: 0;
}


.ih-multi-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 0 9px;

    cursor: pointer;

    text-align: left;
}


.ih-multi-button b {
    color: #7183a1;

    font-size: 10px;
}


.ih-multi-menu {
    position: absolute;

    left: 0;
    right: 0;
    top: calc(100% + 5px);

    display: none;

    min-width: 175px;

    padding: 6px;

    background: #fff;

    border:
        1px solid #dce4f0;

    border-radius: 10px;

    box-shadow:
        0 14px 34px rgba(38, 56, 105, .14);

    z-index: 150;
}


.ih-field.open
.ih-multi-menu {
    display: block;
}


.ih-multi-menu label {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 0 7px;

    border-radius: 7px;

    color: #455a7b;

    cursor: pointer;

    font-size: 9px;
}


.ih-multi-menu label:hover {
    background: #f5f7ff;
}


.ih-multi-menu input {
    width: 13px;
    height: 13px;
}


.ih-pin {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #5264ff;

    background: #f5f6ff;

    border:
        1px solid #dce1ff;

    border-radius: 8px;

    cursor: pointer;
}


/* =====================================================================
   RESULT META
   ===================================================================== */

.ih-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 42px;

    padding: 0 15px;

    color: #687996;

    border-bottom:
        1px solid var(--ih-line-soft);

    font-size: 8px;
}


.ih-page-controls {
    display: flex;
    align-items: center;

    gap: 7px;
}


.ih-page-controls button,
.ih-bottom-pager button {
    min-width: 30px;
    height: 28px;

    color: #52627e;

    background: #fff;

    border:
        1px solid #dfe5ef;

    border-radius: 7px;

    cursor: pointer;
}


.ih-page-controls button:disabled,
.ih-bottom-pager button:disabled {
    opacity: .35;
    cursor: default;
}


/* =====================================================================
   TABLE GRID
   ===================================================================== */

.ih-grid-head,
.ih-row {
    display: grid;

    grid-template-columns:
        64px
        160px
        minmax(310px, 1.65fr)
        92px
        90px
        84px
        84px
        84px
        100px
        92px;

    align-items: center;
}


.ih-grid-head {
    position: sticky;

    top:
        calc(
            var(--ih-topbar)
            + 62px
        );

    z-index: 55;

    min-height: 34px;

    color: #5e708e;

    background:
        rgba(247, 249, 254, .98);

    border-top:
        1px solid var(--ih-line-soft);

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

    font-size: 8px;
    font-weight: 850;
}


body.ih-filters-unpinned
.ih-grid-head {
    top: var(--ih-topbar);
}


.ih-grid-head > div {
    padding: 0 10px;
}


.ih-grid-head
.number {
    text-align: right;
}


.ih-sku-group {
    border-bottom:
        1px solid var(--ih-line-soft);
}


.ih-row {
    min-height: 57px;

    background: #fff;

    cursor: pointer;

    transition:
        background .14s ease,
        transform .14s ease;
}


.ih-row:hover {
    background: #fafbff;
}


.ih-row > div {
    min-width: 0;

    padding: 8px 10px;
}


.ih-rank {
    font-size: 10px;
    font-weight: 900;
}


.ih-sku-cell {
    display: flex;
    align-items: center;

    gap: 9px;
}


.ih-sku-flags {
    width: 45px;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 3px;

    flex: 0 0 auto;
}


.ih-flag {
    min-height: 16px;

    display: grid;
    place-items: center;

    padding: 0 5px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 900;
}


.ih-flag.top70 {
    color: #0574a6;

    background: #e4f6ff;

    border:
        1px solid #b8e6f9;
}


.ih-flag.priority {
    color: #5738cf;

    background: #f0ebff;

    border:
        1px solid #dcd1ff;
}


.ih-sku-codes {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.ih-sku-codes strong {
    overflow: hidden;

    color: #0e2046;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ih-sku-codes span {
    color: #697b98;

    font-size: 8px;
}


.ih-description {
    display: flex;
    align-items: center;

    gap: 9px;
}


.ih-description-text {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ih-status {
    flex: 0 0 auto;

    min-height: 20px;

    display: inline-flex;
    align-items: center;

    padding: 0 8px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 850;
}


.ih-status.both,
.ih-status.critical,
.ih-status.po-gap {
    color: #c72f47;

    background: #ffecef;

    border:
        1px solid #ffcfd7;
}


.ih-status.ok {
    color: #188358;

    background: #eafaf3;

    border:
        1px solid #c6efdd;
}


.ih-status.neutral {
    color: #60718e;

    background: #f0f3f8;

    border:
        1px solid #dce3ed;
}


.ih-number {
    text-align: right;

    color: #263957;

    font-size: 9px;
}


.ih-number.strong {
    color: #112242;

    font-weight: 850;
}


/* =====================================================================
   DETAIL
   ===================================================================== */

.ih-detail {
    display: none;

    padding: 13px 14px 16px;

    background:
        linear-gradient(
            180deg,
            #f7f9ff 0%,
            #f4f7ff 100%
        );

    border-top:
        1px solid #dfe5f2;
}


.ih-sku-group.expanded
.ih-detail {
    display: block;
}


.ih-detail-top {
    display: flex;
    justify-content: space-between;

    gap: 16px;
}


.ih-detail h3 {
    margin: 0;

    font-size: 13px;
}


.ih-meta-pills {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}


.ih-meta-pills
.danger {
    color: #c5334d;

    background: #fff0f2;

    border-color: #ffd1d8;
}


.ih-score-grid {
    display: grid;

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

    gap: 9px;

    margin-top: 11px;
}


.ih-score {
    position: relative;

    min-height: 70px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px;

    overflow: hidden;

    background: #fff;

    border:
        1px solid #dde5f2;

    border-radius: 11px;

    box-shadow: var(--ih-shadow-soft);
}


.ih-score::after {
    content: "";

    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #4a6dff,
            #8a5ef7
        );

    border-radius: 99px;
}


.ih-score.teal::after {
    background:
        linear-gradient(
            90deg,
            #22b6a5,
            #71d9ce
        );
}


.ih-score.green::after {
    background:
        linear-gradient(
            90deg,
            #20ac70,
            #5cd99c
        );
}


.ih-score-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #5567ff;

    background: #f0f2ff;

    border-radius: 10px;

    font-size: 15px;
}


.ih-score > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.ih-score small {
    color: #61738f;

    font-size: 7px;
    font-weight: 850;
}


.ih-score strong {
    margin-top: 2px;

    font-size: 15px;
}


.ih-score strong span {
    color: #8090a8;

    font-size: 8px;
}


.ih-score em {
    margin-top: 3px;

    overflow: hidden;

    color: #74839b;

    font-size: 7px;
    font-style: normal;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ih-city-caption {
    margin: 10px 0 7px;

    color: #71819c;

    font-size: 8px;
}


/* =====================================================================
   CITY CARDS
   ===================================================================== */

.ih-city-grid {
    display: grid;

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

    gap: 10px;
}


.ih-city-card {
    min-width: 0;

    overflow: hidden;

    background: #fff;

    border:
        1px solid #dbe4f1;

    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(42, 63, 115, .055);
}


.ih-city-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 10px 11px;

    border-bottom:
        1px solid #edf1f7;
}


.ih-city-identity {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.ih-city-logo {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    overflow: hidden;

    color: #4e5ff2;

    background:
        linear-gradient(
            145deg,
            #eef2ff,
            #f6f1ff
        );

    border:
        1px solid #dfe2ff;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 900;
}


.ih-city-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ih-city-title {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.ih-city-title strong {
    font-size: 11px;
}


.ih-city-title span {
    margin-top: 2px;

    overflow: hidden;

    color: #74839c;

    font-size: 7px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ih-city-badges {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 4px;
}


.ih-city-badge {
    min-height: 19px;

    display: inline-flex;
    align-items: center;

    padding: 0 7px;

    border-radius: 999px;

    font-size: 6.5px;
    font-weight: 850;
}


.ih-city-badge.po {
    color: #c82843;

    background: #ffecef;

    border:
        1px solid #ffcbd4;
}


.ih-city-badge.stock {
    color: #b26a00;

    background: #fff4df;

    border:
        1px solid #ffdca0;
}


.ih-city-badge.appointment {
    color: #a45313;

    background: #fff1e5;

    border:
        1px solid #ffd1ad;
}


.ih-city-badge.healthy {
    color: #147951;

    background: #eaf9f2;

    border:
        1px solid #c8ecdc;
}


.ih-city-badge.neutral {
    color: #60718d;

    background: #f0f3f8;

    border:
        1px solid #dce3ed;
}


.ih-city-body {
    padding: 9px 10px 10px;
}


.ih-city-metrics {
    display: grid;

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

    gap: 6px;
}


.ih-city-metric {
    min-height: 48px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 3px;

    padding: 7px;

    background: #f4f7fd;

    border:
        1px solid #edf1f7;

    border-radius: 8px;
}


.ih-city-metric small {
    color: #667791;

    font-size: 6.5px;
    font-weight: 800;
}


.ih-city-metric strong {
    font-size: 12px;
}


.ih-appointments {
    margin-top: 8px;

    padding-top: 7px;

    border-top:
        1px solid #edf1f7;
}


.ih-appointments-title {
    color: #667791;

    font-size: 6.5px;
    font-weight: 800;
}


.ih-appointment-list {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 5px;
}


.ih-appointment {
    padding: 4px 6px;

    color: #405372;

    background: #fff;

    border:
        1px solid #dce5f1;

    border-radius: 999px;

    font-size: 6.5px;
    font-weight: 700;
}


.ih-fc-button {
    margin-top: 7px;

    height: 27px;

    padding: 0 8px;

    color: #4e5fe2;

    background: #f7f8ff;

    border:
        1px solid #dce1ff;

    border-radius: 7px;

    cursor: pointer;

    font-size: 7px;
    font-weight: 800;
}


/* =====================================================================
   EMPTY / PAGER
   ===================================================================== */

.ih-city-loading,
.ih-empty {
    padding: 22px;

    color: #73819a;

    text-align: center;

    font-size: 9px;
}


.ih-bottom-pager {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 13px;
}


.ih-bottom-pager button {
    padding: 0 10px;

    font-size: 8px;
}


.ih-bottom-pager span {
    color: #657692;

    font-size: 8px;
}


/* =====================================================================
   MODAL
   ===================================================================== */

.ih-modal {
    position: fixed;
    inset: 0;

    z-index: 1000;
}


.ih-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(13, 26, 57, .32);

    backdrop-filter:
        blur(5px);
}


.ih-modal-card {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(920px, calc(100vw - 40px));
    max-height: calc(100vh - 60px);

    transform:
        translate(-50%, -50%);

    overflow: auto;

    background: #fff;

    border:
        1px solid #dfe5f1;

    border-radius: 15px;

    box-shadow:
        0 30px 80px rgba(16, 31, 68, .24);
}


.ih-modal-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 16px;

    border-bottom:
        1px solid #edf1f6;
}


.ih-modal-card small {
    color: #6b7b95;

    font-size: 7px;
    font-weight: 900;
}


.ih-modal-card h2 {
    margin: 3px 0 0;

    font-size: 15px;
}


.ih-modal-card header button {
    width: 31px;
    height: 31px;

    color: #687894;

    background: #f7f8fb;

    border:
        1px solid #e0e5ee;

    border-radius: 8px;

    cursor: pointer;

    font-size: 18px;
}


.ih-modal-body {
    padding: 15px;
}


.ih-fc-summary {
    display: grid;

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

    gap: 8px;

    margin-bottom: 12px;
}


.ih-fc-summary > div {
    padding: 10px;

    background: #f5f7fd;

    border:
        1px solid #e6ebf4;

    border-radius: 9px;
}


.ih-fc-summary small {
    display: block;

    margin-bottom: 4px;
}


.ih-fc-summary strong {
    font-size: 16px;
}


.ih-fc-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 8px;
}


.ih-fc-table th,
.ih-fc-table td {
    padding: 8px;

    border-bottom:
        1px solid #edf1f6;

    text-align: left;
}


.ih-fc-table th {
    color: #64758f;

    background: #f7f9fc;

    font-size: 7px;
}


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

@media (max-width: 1320px) {

    :root {
        --ih-sidebar: 180px;
    }


    .ih-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .ih-filter-bar {
        grid-template-columns:
            minmax(220px, 1.4fr)
            80px
            repeat(4, minmax(120px, 1fr))
            34px;
    }


    .ih-city-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .ih-score-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 1050px) {

    .ih-sidebar {
        display: none;
    }


    .ih-topbar {
        left: 0;
    }


    .ih-main {
        margin-left: 0;
    }


    .ih-grid-head,
    .ih-row {
        grid-template-columns:
            54px
            150px
            minmax(250px, 1.4fr)
            82px
            82px
            74px
            74px
            74px
            90px
            82px;
    }


    .ih-health-panel {
        overflow-x: auto;
    }


    .ih-grid-head,
    .ih-rows {
        min-width: 1100px;
    }

}


@media (max-width: 760px) {

    .ih-main {
        padding-left: 10px;
        padding-right: 10px;
    }


    .ih-topbar {
        padding:
            0 10px;
    }


    .ih-account {
        display: none;
    }


    .ih-global-search {
        width: 100%;
    }


    .ih-hero {
        flex-direction: column;
    }


    .ih-period {
        width: 100%;
    }


    .ih-kpi-grid,
    .ih-city-grid,
    .ih-score-grid {
        grid-template-columns: 1fr;
    }


    .ih-filter-bar {
        position: relative;
        top: auto;

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


    .ih-field.search {
        grid-column:
            1 / -1;
    }


    .ih-pin {
        display: none;
    }


    .ih-fc-summary {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   IH_TARGETED_UI_V2
   Compact desktop layout and horizontal city scroll
   ========================================================== */

.ih-brand-monogram {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#536bff,#8563f7);
    color: white;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.ih-asin-link {
    color: #3458d9;
    text-decoration: none;
    font-weight: 750;
    cursor: pointer;
}

.ih-asin-link:hover,
.ih-asin-link:focus-visible {
    text-decoration: underline;
    color: #253db2;
}

.ih-asin-link:focus-visible {
    outline: 2px solid #6a75ff;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Compact desktop workspace */
@media (min-width: 1100px) {
    .ih-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ih-kpi-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 10px;
    }

    .ih-kpi {
        min-width: 0;
        min-height: 105px;
        padding: 15px 13px;
    }

    .ih-kpi-copy strong {
        font-size: 26px;
    }

    .ih-hero {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .ih-panel {
        padding: 14px 16px;
    }

    .ih-score-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: 9px;
    }

    .ih-score {
        min-width: 0;
    }
}

/* Only the city-holder scrolls, not the entire page. */
.ih-city-holder {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #a4b4df #edf1fb;
    padding-bottom: 9px;
}

.ih-city-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    max-width: none;
    min-width: 100%;
}

.ih-city-grid > .ih-city-card {
    flex: 0 0 345px;
    width: 345px;
    max-width: 345px;
    min-width: 0;
}

/* Keep city metrics in three columns within each card. */
.ih-city-metrics {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

@media (max-width: 760px) {
    .ih-city-grid > .ih-city-card {
        flex-basis: 290px;
        width: 290px;
        max-width: 290px;
    }
}



/* =======================================================
   IH_LOCAL_ICONS_V1
   Page-local SVG icon and illustration treatment
   ======================================================= */

.ih-lucide {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: inherit;
}

.ih-nav-icon,
.ih-kpi-icon,
.ih-title-icon,
.ih-period-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ih-kpi-icon .ih-lucide {
    width: 23px;
    height: 23px;
}

.ih-nav-icon .ih-lucide {
    width: 18px;
    height: 18px;
}

.ih-title-icon .ih-lucide,
.ih-period-icon .ih-lucide {
    width: 19px;
    height: 19px;
}

.ih-pin .ih-lucide {
    width: 17px;
    height: 17px;
    margin: auto;
}

.ih-score-icon .ih-lucide {
    width: 20px;
    height: 20px;
}

.ih-city-logo.ih-city-illustration {
    width: 43px;
    height: 43px;
    border-radius: 11px;
    overflow: hidden;
    flex: 0 0 43px;
    background: #eef2ff;
    border: 1px solid #dce4fb;
}

.ih-city-logo.ih-city-illustration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}




/* ==============================================================
   IH_LAYOUT_STAGE_6C
   Desktop table width and compact dashboard geometry
   ============================================================== */

/* Prevent fixed or dynamic descendants from widening the page. */
html,
body.ih-body {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.ih-body {
    overflow-x: clip;
}

.ih-main,
.ih-health-panel,
.ih-rows,
.ih-sku-group,
.ih-detail {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* The ranking table must use exactly the workspace width. */
.ih-grid-head,
.ih-row {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns:
        minmax(0, 4.5fr)
        minmax(0, 14fr)
        minmax(0, 27fr)
        minmax(0, 7fr)
        minmax(0, 8fr)
        minmax(0, 7fr)
        minmax(0, 7fr)
        minmax(0, 7fr)
        minmax(0, 9fr)
        minmax(0, 9.5fr);
}

.ih-grid-head > div,
.ih-row > div {
    min-width: 0;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

.ih-grid-head {
    font-size: 10px;
}

.ih-row {
    min-height: 55px;
}

.ih-rank,
.ih-number {
    font-size: 11px;
}

.ih-sku-codes strong,
.ih-asin-link {
    font-size: 11px;
}

.ih-sku-codes span {
    font-size: 10px;
}

.ih-description-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.ih-description {
    min-width: 0;
    gap: 5px;
}

.ih-status {
    flex: 0 0 auto;
    font-size: 9px;
    padding: 4px 7px;
}

/* Keep headings, numeric cells and status pills separated. */
.ih-grid-head .number,
.ih-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Keep controls inside the workspace. */
.ih-filter-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(65px, .43fr)
        repeat(4, minmax(0, 1fr))
        38px;

    gap: 8px;
}

.ih-field,
.ih-input-shell,
.ih-multi-button {
    min-width: 0;
    max-width: 100%;
}

/* Preserve one row for desktop KPI/score cards. */
@media (min-width: 1100px) {

    .ih-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ih-score-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ih-kpi {
        min-height: 94px;
        padding: 12px;
        gap: 8px;
        grid-template-columns: 38px minmax(0,1fr) 58px;
    }

    .ih-kpi-icon {
        width: 38px;
        height: 38px;
    }

    .ih-kpi-copy {
        min-width: 0;
    }

    .ih-kpi-copy strong {
        font-size: 25px;
    }

    .ih-spark {
        min-width: 0;
        max-width: 58px;
    }

    .ih-score {
        min-width: 0;
        padding: 10px 11px;
    }

    .ih-hero h1 {
        font-size: 27px;
    }

    .ih-main {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Keep a little more space for the table at narrower
   desktop sizes without disturbing mobile breakpoints. */
@media (min-width: 1100px) and (max-width: 1380px) {

    .ih-grid-head > div,
    .ih-row > div {
        padding-left: 3px;
        padding-right: 3px;
    }

    .ih-description-text {
        font-size: 10px;
    }

    .ih-status {
        font-size: 8px;
        padding: 3px 5px;
    }

    .ih-filter-bar {
        gap: 6px;
    }
}

/* Restore isolated city scrolling, independent of the table. */
.ih-city-holder {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.ih-city-grid {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    min-width: 100%;
    gap: 12px;
}

.ih-city-grid > .ih-city-card {
    flex: 0 0 345px;
    width: 345px;
    max-width: 345px;
}

/* Mobile receives its own scrolling table viewport;
   desktop should have no page-level horizontal scroll. */
@media (max-width: 1099px) {
    .ih-health-panel {
        overflow-x: auto;
    }

    .ih-grid-head,
    .ih-rows {
        min-width: 1100px;
    }
}



/* ==========================================================
   IH_PO_DOC_STAGE_6D
   Balanced side spacing + parent-row PO DOC status
   ========================================================== */

/* More breathing space inside the dashboard workspace. */
@media (min-width: 1100px) {
    .ih-main {
        padding-left: 26px;
        padding-right: 26px;
    }

    .ih-health-panel {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ih-detail {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 761px) and (max-width: 1099px) {
    .ih-main {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ih-health-panel {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 760px) {
    .ih-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ih-health-panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ih-detail {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Parent-row Pan India PO DOC pill. */
.ih-po-doc-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ih-po-doc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;
    padding: 5px 8px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ih-po-doc-red {
    color: #b42336;
    background: #ffe7ec;
    border-color: #ffbcc8;
}

.ih-po-doc-orange {
    color: #a54b08;
    background: #fff0dc;
    border-color: #ffd4a3;
}

.ih-po-doc-yellow {
    color: #805b00;
    background: #fff7cc;
    border-color: #edda83;
}

.ih-po-doc-green {
    color: #167044;
    background: #dff8e9;
    border-color: #a2e5bf;
}

.ih-po-doc-neutral {
    color: #64748b;
    background: #f1f5f9;
    border-color: #dbe3eb;
}

@media (max-width: 1380px) {
    .ih-po-doc-pill {
        min-width: 42px;
        padding: 4px 6px;
        font-size: 9px;
    }
}



/* =======================================================
   IH_SEVERITY_STAGE_6E
   DOC pills + five-card severity + missing Case Size
   ======================================================= */

/* Existing DOC column, no additional table column. */
.ih-doc-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ih-doc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ih-doc-red {
    color: #b42336;
    background: #ffe7ec;
    border-color: #ffbcc8;
}

.ih-doc-orange {
    color: #a54b08;
    background: #fff0dc;
    border-color: #ffd4a3;
}

.ih-doc-yellow {
    color: #805b00;
    background: #fff7cc;
    border-color: #edda83;
}

.ih-doc-green {
    color: #167044;
    background: #dff8e9;
    border-color: #a2e5bf;
}

.ih-doc-neutral {
    color: #64748b;
    background: #f1f5f9;
    border-color: #dbe3eb;
}

/* Severity variables on the score cards. */
.ih-score.ih-sev-green {
    --ih-risk-bg: #ecfdf5;
    --ih-risk-edge: #a7f3d0;
    --ih-risk-ink: #047857;
    --ih-risk-icon: #d1fae5;
}

.ih-score.ih-sev-yellow {
    --ih-risk-bg: #fffbeb;
    --ih-risk-edge: #fde68a;
    --ih-risk-ink: #a16207;
    --ih-risk-icon: #fef3c7;
}

.ih-score.ih-sev-orange {
    --ih-risk-bg: #fff7ed;
    --ih-risk-edge: #fed7aa;
    --ih-risk-ink: #c2410c;
    --ih-risk-icon: #ffedd5;
}

.ih-score.ih-sev-red {
    --ih-risk-bg: #fff1f2;
    --ih-risk-edge: #fecdd3;
    --ih-risk-ink: #be123c;
    --ih-risk-icon: #ffe4e6;
}

.ih-score.ih-sev-neutral {
    --ih-risk-bg: #f8fafc;
    --ih-risk-edge: #cbd5e1;
    --ih-risk-ink: #475569;
    --ih-risk-icon: #e2e8f0;
}

/* Restrict overrides to score cards with applied severity. */
.ih-score[class*="ih-sev-"] {
    background: var(--ih-risk-bg);
    border-color: var(--ih-risk-edge);
}

.ih-score[class*="ih-sev-"]::after {
    background: var(--ih-risk-ink);
}

.ih-score[class*="ih-sev-"] .ih-score-icon {
    color: var(--ih-risk-ink);
    background: var(--ih-risk-icon);
}

.ih-score[class*="ih-sev-"] .ih-score-icon svg {
    color: var(--ih-risk-ink);
    stroke: currentColor;
}

.ih-score[class*="ih-sev-"] strong {
    color: var(--ih-risk-ink);
}

/* Also recolor an existing bottom bar if it is implemented
   as a pseudo-element rather than a real child. */
.ih-score[class*="ih-sev-"]::before {
    background-color: var(--ih-risk-ink);
}

/* Highlight only unavailable Case Size metadata. */
.ih-meta-pills > .ih-case-missing {
    color: #a54b08;
    background: #fff0dc;
    border-color: #f6b85d;
    box-shadow: inset 0 0 0 1px rgba(245,158,11,.10);
    font-weight: 750;
}

.ih-meta-pills > .ih-case-missing strong {
    color: #a54b08;
}

/* Keep badges readable in compact desktop layouts. */
@media (max-width: 1380px) {
    .ih-doc-pill {
        min-width: 42px;
        padding: 4px 6px;
        font-size: 9px;
    }
}


/* ===========================================================
   IH_FC_STAGE_6G
   City name FC action and color-coded popup
   =========================================================== */

.ih-city-name-action {
    display: inline-block;
    max-width: 100%;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #263ec5;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.ih-city-name-action:hover {
    color: #4f46e5;
    text-decoration-color: currentColor;
}

.ih-city-name-action:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Keep modal layout readable without changing overlay logic. */
.ih-modal-card {
    width: min(990px, calc(100vw - 32px));
    border-radius: 18px;
    border: 1px solid #dce3f6;
    box-shadow: 0 28px 75px rgba(23, 38, 79, .25);
}

.ih-modal-card > header {
    background: linear-gradient(110deg,#f4f6ff,#fff);
    padding: 18px 22px;
}

.ih-modal-card h2 {
    font-size: 19px;
    color: #14254a;
}

.ih-modal-body {
    padding: 20px;
}

.ih-fc-summary.ih-fc-summary-four {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}

.ih-fc-summary .ih-fc-kpi {
    min-width: 0;
    border-radius: 12px;
    padding: 14px;
}

.ih-fc-kpi strong {
    display: block;
    margin-top: 5px;
    font-size: 24px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.ih-fc-kpi > span {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
}

.ih-fc-kpi-stock {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca;
}

.ih-fc-kpi-po {
    background: #f1f5f9 !important;
    border-color: #dbe4ef !important;
    color: #334155;
}

.ih-fc-kpi-billable {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857;
}

.ih-fc-kpi-unmatched {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #c2410c;
}

.ih-fc-table {
    font-size: 12px;
}

.ih-fc-table th {
    padding: 12px 10px;
    font-size: 10px;
    font-weight: 850;
    color: #536581;
    background: #f1f5ff;
    white-space: nowrap;
}

.ih-fc-table td {
    padding: 12px 10px;
    font-size: 12px;
    color: #263751;
    font-variant-numeric: tabular-nums;
}

.ih-fc-table tbody tr:nth-child(even) {
    background: #fafbff;
}

.ih-fc-table tbody tr:hover {
    background: #eef4ff;
}

.ih-fc-table td:first-child {
    font-weight: 800;
    color: #1d3471;
}

.ih-fc-status {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.ih-fc-status-danger {
    background: #ffe7ec;
    color: #b42336;
    border-color: #ffbcc8;
}

.ih-fc-status-success {
    background: #dff8e9;
    color: #167044;
    border-color: #a2e5bf;
}

.ih-fc-status-warning {
    background: #fff0dc;
    color: #a54b08;
    border-color: #ffd4a3;
}

.ih-fc-status-neutral {
    background: #f1f5f9;
    color: #64748b;
    border-color: #dbe3eb;
}

@media (max-width: 760px) {
    .ih-fc-summary.ih-fc-summary-four {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ih-modal-body {
        padding: 12px;
        overflow-x: auto;
    }

    .ih-fc-table {
        min-width: 720px;
    }
}



/* ======================================================
   IH_APPOINTMENT_CYAN_6H
   Highlight actual confirmed appointment dates
   ====================================================== */

.ih-appointment-list .ih-appointment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 5px 10px;

    background: #cffafe;
    border: 1px solid #67e8f9;
    border-radius: 999px;

    color: #0e7490;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Neutral appearance when there is no appointment. */
.ih-appointment-list .ih-appointment:only-child {
    /* Default styling retained; actual state set below. */
}

/* Dates follow the normal pill style; an empty-state pill
   is distinguished using CSS :has text-independent markup
   only when the renderer marks it. */
.ih-appointment-list .ih-appointment.ih-appointment-empty {
    background: #f8fafc;
    border-color: #dbe3eb;
    color: #64748b;
    font-weight: 600;
}