/* =========================================================
   PROJECTS SECTION (above the footer) - laid out exactly like the
   i3MS Metro dashboard: 120x119 tiles, 3px gaps, flat solid colours,
   Segoe UI, 237px dark panel on the right. Fixed 975x485, flush left. Same in light and dark mode.
   Load after style.css / site-futuristic.css.
========================================================= */

#dm-projects {
    --i3-orange: #d7263d;
    --i3-pink: #941952;
    --i3-green: #00a569;
    --i3-red: #9a0000;
    --i3-blue: #126996;
    --i3-lightgreen: #76af00;
    --i3-yellow: #1d3a6e;
    padding: 15px 0;
    background: #fff;
    font-family: "Segoe UI", "Segoe UI Web", "Open Sans", Tahoma, sans-serif;
}
[data-theme="dark"] #dm-projects { background: transparent; }

/* ---------- flat Metro tiles (override the glass/spotlight theme styles) ---------- */
#dm-projects .dm-i3ms-tile {
    border-radius: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    transform: none;
    padding: 0;
    color: #fff;
    font-family: inherit;
    transition: outline-color .15s ease;
    outline: 3px solid transparent;
    outline-offset: -3px;
}
#dm-projects .dm-i3ms-tile:hover,
#dm-projects .dm-i3ms-tile:focus-visible { outline-color: rgba(255, 255, 255, .45); filter: none; }

#dm-projects .dm-i3ms-stakeholder,
#dm-projects .dm-i3ms-truck { background: var(--i3-orange) !important; }
#dm-projects .dm-i3ms-mining-photo,
#dm-projects .dm-i3ms-rfid { background: var(--i3-pink) !important; }
#dm-projects .dm-i3ms-mdcc,
#dm-projects .dm-i3ms-integration,
#dm-projects .dm-i3ms-reports { background: var(--i3-green) !important; }
#dm-projects .dm-i3ms-weigh,
#dm-projects .dm-i3ms-transporter { background: var(--i3-lightgreen) !important; }
#dm-projects .dm-i3ms-permit,
#dm-projects .dm-i3ms-know { background: var(--i3-blue) !important; }
#dm-projects .dm-i3ms-grant { background: var(--i3-yellow) !important; }
#dm-projects .dm-i3ms-transit { background: var(--i3-red) !important; }
#dm-projects .dm-i3ms-mine-photo { background: var(--i3-orange) !important; }

/* label: bottom-left, 14px white */
#dm-projects .dm-i3ms-label {
    position: absolute;
    left: 10px;
    right: 8px;
    bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: #fff;
    text-shadow: none;
}
/* icon: centred in the upper part of the tile */
#dm-projects .dm-i3ms-icon {
    position: absolute;
    left: 50%;
    top: 24px;
    width: 52px;
    height: 52px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0;
    animation: none;
}
#dm-projects .dm-i3ms-icon svg { width: 100%; height: 100%; display: block; }
#dm-projects .dm-i3ms-weigh .dm-i3ms-icon { width: 58px; height: 36px; top: 34px; }
#dm-projects .dm-i3ms-transit .dm-i3ms-icon { width: 48px; height: 40px; top: 50%; margin-top: -32px; }
#dm-projects .dm-i3ms-grant .dm-i3ms-icon { top: 50%; margin-top: -48px; width: 36px; height: 40px; }
#dm-projects .dm-i3ms-truck .dm-i3ms-icon { width: 54px; height: 38px; top: 28px; }

/* Do you know */
#dm-projects .dm-i3ms-know-panel { padding: 0; background: var(--i3-blue); }
#dm-projects .dm-i3ms-know-title {
    position: absolute;
    left: 10px;
    top: 14px;
    right: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}
#dm-projects .dm-i3ms-know-title span {
    position: absolute;
    right: 6px;
    top: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--i3-blue);
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}
#dm-projects .dm-i3ms-know-panel p {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
}

/* Reports and Returns */
#dm-projects .dm-i3ms-reports-panel { background: var(--i3-green); padding: 3px 10px 6px; justify-content: flex-end; }
#dm-projects .dm-i3ms-reports-panel strong { margin: auto 0 2px; font-size: 18px; font-weight: 400; }
#dm-projects .dm-i3ms-reports-panel ul { margin: 0; padding-left: 15px; list-style: circle; font-size: 12px; line-height: 18px; }

/* Integration: arrow + label on the left, list on the right (one wide tile) */
#dm-projects .dm-i3ms-integration {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}
#dm-projects .dm-i3ms-int-left { position: relative; flex: 0 0 104px; }
#dm-projects .dm-i3ms-integration .dm-i3ms-icon { width: 30px; height: 30px; top: 34px; left: 44px; transform: none; }
#dm-projects .dm-i3ms-integration ul {
    margin: 10px 8px 0 0;
    padding-left: 18px;
    list-style: circle;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
}

/* right-hand dark panel */
#dm-projects .dm-i3ms-login {
    background: #333 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
    font-family: inherit;
}
#dm-projects .dm-i3ms-login h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    margin: 0;
    padding: 5px 5px;
    background: var(--i3-orange) !important;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}
#dm-projects .dm-i3ms-login h2 svg { width: 20px; height: 20px; flex: 0 0 20px; }
#dm-projects .dm-i3ms-login nav { display: block; }
#dm-projects .dm-i3ms-login nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 6px 7px;
    border: 0;
    border-bottom: 1px solid #4d4d4d;
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    text-decoration: none;
}
#dm-projects .dm-i3ms-login nav a svg { width: 18px; height: 20px; flex: 0 0 18px; fill: #8c8c8c; }
#dm-projects .dm-i3ms-login nav a:hover,
#dm-projects .dm-i3ms-login nav a:focus-visible { background: #494949; color: #fff; }
#dm-projects .dm-i3ms-login nav a.is-muted { color: #999; }
#dm-projects .dm-i3ms-login nav a b {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 6px;
    background: #ffd400;
    color: #d40000;
    font-size: 8px;
    line-height: 12px;
    font-weight: 700;
}

/* ---------- desktop: the exact fixed i3MS grid, centred ---------- */
@media (min-width: 1000px) {
    #dm-projects .dm-i3ms-layout {
        display: grid;
        grid-template-columns: 735px 237px minmax(260px, 1fr);   /* tiles | panel | query box */
        gap: 3px;
        width: 100%;
        min-width: 975px;
        max-width: none;
        height: 485px !important;
        margin: 0;            /* flush to the left edge of the page */
        background: transparent;
    }
    #dm-projects .dm-i3ms-mosaic {
        display: grid;
        grid-template-columns: repeat(6, 120px);
        grid-template-rows: repeat(4, 119px);
        gap: 3px;
        min-height: 0;
        background: transparent;
    }
    #dm-projects .dm-i3ms-stakeholder  { grid-area: 1 / 1 / 2 / 3; }
    #dm-projects .dm-i3ms-mining-photo { grid-area: 1 / 3 / 2 / 4; }
    #dm-projects .dm-i3ms-mdcc         { grid-area: 1 / 4 / 2 / 6; }
    #dm-projects .dm-i3ms-transit      { grid-area: 1 / 6 / 3 / 7; }
    #dm-projects .dm-i3ms-weigh        { grid-area: 2 / 1 / 3 / 2; }
    #dm-projects .dm-i3ms-permit       { grid-area: 2 / 2 / 3 / 3; }
    #dm-projects .dm-i3ms-grant        { grid-area: 2 / 3 / 4 / 4; }
    #dm-projects .dm-i3ms-know         { grid-area: 2 / 4 / 4 / 6; }
    #dm-projects .dm-i3ms-reports      { grid-area: 3 / 1 / 4 / 3; }
    #dm-projects .dm-i3ms-transporter  { grid-area: 3 / 6 / 4 / 7; }
    #dm-projects .dm-i3ms-rfid         { grid-area: 4 / 1 / 5 / 2; }
    #dm-projects .dm-i3ms-truck        { grid-area: 4 / 2 / 5 / 3; }
    #dm-projects .dm-i3ms-mine-photo   { grid-area: 4 / 3 / 5 / 5; }
    #dm-projects .dm-i3ms-integration  { grid-area: 4 / 5 / 5 / 7; }
    #dm-projects .dm-i3ms-login { display: block; height: 485px; overflow: hidden; }
}

/* ---------- smaller screens: same tiles, colours and pairings as desktop ---------- */
@media (max-width: 999px) {
    #dm-projects .dm-i3ms-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; height: auto !important; padding: 0 10px; }
    #dm-projects .dm-i3ms-mosaic { display: grid; gap: 3px; min-height: 0; }
    #dm-projects .dm-i3ms-tile { position: relative; overflow: hidden; }

    /* "Projects Completed" panel: two even columns, comfortable tap height */
    #dm-projects .dm-i3ms-login nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #dm-projects .dm-i3ms-login nav a {
        min-height: 44px;
        padding: 8px 9px;
        border-right: 1px solid #4d4d4d;
        font-size: 13px;
        line-height: 17px;
    }
    #dm-projects .dm-i3ms-login nav a:nth-child(2n) { border-right: 0; }
    #dm-projects .dm-i3ms-login nav a.is-muted { color: #c4c4c4; }
    #dm-projects .dm-i3ms-login nav a:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
    #dm-projects .dm-i3ms-login nav a b { flex: 0 0 auto; }
}

/* tablets: the desktop i3MS grid, stretched to the width */
@media (min-width: 760px) and (max-width: 999px) {
    #dm-projects .dm-i3ms-mosaic {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(4, 119px);
    }
    #dm-projects .dm-i3ms-stakeholder  { grid-area: 1 / 1 / 2 / 3; }
    #dm-projects .dm-i3ms-mining-photo { grid-area: 1 / 3 / 2 / 4; }
    #dm-projects .dm-i3ms-mdcc         { grid-area: 1 / 4 / 2 / 6; }
    #dm-projects .dm-i3ms-transit      { grid-area: 1 / 6 / 3 / 7; }
    #dm-projects .dm-i3ms-weigh        { grid-area: 2 / 1 / 3 / 2; }
    #dm-projects .dm-i3ms-permit       { grid-area: 2 / 2 / 3 / 3; }
    #dm-projects .dm-i3ms-grant        { grid-area: 2 / 3 / 4 / 4; }
    #dm-projects .dm-i3ms-know         { grid-area: 2 / 4 / 4 / 6; }
    #dm-projects .dm-i3ms-reports      { grid-area: 3 / 1 / 4 / 3; }
    #dm-projects .dm-i3ms-transporter  { grid-area: 3 / 6 / 4 / 7; }
    #dm-projects .dm-i3ms-rfid         { grid-area: 4 / 1 / 5 / 2; }
    #dm-projects .dm-i3ms-truck        { grid-area: 4 / 2 / 5 / 3; }
    #dm-projects .dm-i3ms-mine-photo   { grid-area: 4 / 3 / 5 / 5; }
    #dm-projects .dm-i3ms-integration  { grid-area: 4 / 5 / 5 / 7; }
    #dm-projects .dm-i3ms-login nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #dm-projects .dm-i3ms-login nav a:nth-child(2n) { border-right: 1px solid #4d4d4d; }
    #dm-projects .dm-i3ms-login nav a:nth-child(3n) { border-right: 0; }
    #dm-projects .dm-i3ms-login nav a:last-child:nth-child(odd) { grid-column: auto; }
}

/* phones: a fixed 3 x 8 Metro block of ~120px tiles (the desktop tile size), every
   tile in place - no long stack, no stretched photos */
@media (max-width: 759px) {
    #dm-projects .dm-i3ms-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(8, clamp(96px, 29vw, 116px));
        grid-template-areas:
            "stake  stake  mphoto"
            "mdcc   mdcc   transit"
            "weigh  permit transit"
            "grant  know   know"
            "grant  know   know"
            "report report trans"
            "rfid   mine   mine"
            "truck  integ  integ";
    }
    #dm-projects .dm-i3ms-stakeholder  { grid-area: stake !important; }
    #dm-projects .dm-i3ms-mining-photo { grid-area: mphoto !important; }
    #dm-projects .dm-i3ms-mdcc         { grid-area: mdcc !important; }
    #dm-projects .dm-i3ms-transit      { grid-area: transit !important; }
    #dm-projects .dm-i3ms-weigh        { grid-area: weigh !important; }
    #dm-projects .dm-i3ms-permit       { grid-area: permit !important; }
    #dm-projects .dm-i3ms-grant        { grid-area: grant !important; }
    #dm-projects .dm-i3ms-know         { grid-area: know !important; }
    #dm-projects .dm-i3ms-reports      { grid-area: report !important; }
    #dm-projects .dm-i3ms-transporter  { grid-area: trans !important; }
    #dm-projects .dm-i3ms-rfid         { grid-area: rfid !important; }
    #dm-projects .dm-i3ms-truck        { grid-area: truck !important; }
    #dm-projects .dm-i3ms-mine-photo   { grid-area: mine !important; }
    #dm-projects .dm-i3ms-integration  { grid-area: integ !important; }

    /* labels + icons sized for the smaller tiles */
    #dm-projects .dm-i3ms-label { left: 8px; right: 6px; bottom: 7px; font-size: 13px; line-height: 17px; }
    #dm-projects .dm-i3ms-icon { top: 14px; width: 40px; height: 40px; }
    #dm-projects .dm-i3ms-weigh .dm-i3ms-icon { top: 20px; width: 48px; height: 30px; }
    #dm-projects .dm-i3ms-truck .dm-i3ms-icon { top: 18px; width: 46px; height: 32px; }
    #dm-projects .dm-i3ms-transit .dm-i3ms-icon { width: 44px; height: 36px; margin-top: -30px; }
    #dm-projects .dm-i3ms-grant .dm-i3ms-icon { width: 32px; height: 36px; margin-top: -40px; }
    #dm-projects .dm-i3ms-know-title { font-size: 17px; }
    #dm-projects .dm-i3ms-know-title span { width: 40px; height: 40px; font-size: 32px; line-height: 40px; }
    #dm-projects .dm-i3ms-reports-panel strong { font-size: 16px; }
    #dm-projects .dm-i3ms-int-left { flex-basis: 80px; }
    #dm-projects .dm-i3ms-integration .dm-i3ms-icon { top: 18px; left: 26px; width: 26px; height: 26px; }
    #dm-projects .dm-i3ms-integration ul { margin: 6px 6px 0 0; padding-left: 14px; font-size: 11px; line-height: 15.5px; }
}
@media (max-width: 359px) {
    #dm-projects .dm-i3ms-label { font-size: 12px; line-height: 15px; }
    #dm-projects .dm-i3ms-icon { width: 34px; height: 34px; }
    #dm-projects .dm-i3ms-login nav a { font-size: 12px; padding: 8px 6px; }
}

/* ---------- query box (right of the panel) ---------- */
#dm-projects .dm-query-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 485px;
    margin-left: 12px;
    padding: 0 18px 16px;
    background: #f4f4f4;
    border-top: 0;
    color: #222;
    overflow: hidden;
}
#dm-projects .dm-query-box h2 {
    margin: 0 -18px 10px;
    padding: 5px 18px;
    background: var(--i3-blue);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}
#dm-projects .dm-query-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #555; }
#dm-projects .dm-query-form { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
#dm-projects .dm-query-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #333; }
#dm-projects .dm-query-form input,
#dm-projects .dm-query-form select,
#dm-projects .dm-query-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}
#dm-projects .dm-query-form textarea { resize: none; min-height: 90px; }
#dm-projects .dm-query-form input:focus,
#dm-projects .dm-query-form select:focus,
#dm-projects .dm-query-form textarea:focus { outline: 2px solid var(--i3-blue); outline-offset: -1px; border-color: var(--i3-blue); }
#dm-projects .dm-query-form .is-invalid { border-color: #c00; }
/* dropdowns: same box as the inputs, with a small chevron */
#dm-projects .dm-query-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23666%27 stroke-width=%271.6%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
}
#dm-projects .dm-query-form select:disabled { color: #999; background-color: #ececec; cursor: not-allowed; }
#dm-projects .dm-query-form button {
    margin-top: auto;
    padding: 10px;
    border: 0;
    background: var(--i3-orange);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
#dm-projects .dm-query-form button:hover { filter: brightness(1.1); }
#dm-projects .dm-query-status { margin: 0; min-height: 16px; font-size: 12px; color: #2b6e2b; }
#dm-projects .dm-query-status.is-error { color: #c00; }

@media (max-width: 999px) {
    #dm-projects .dm-query-box { height: auto; margin: 12px 0 0; }
}

/* icon cut-outs take the tile colour (the SVGs carry the old orange as a fixed fill) */
#dm-projects .dm-i3ms-icon [fill="#c95a00"] { fill: var(--i3-orange); }