* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy: #071d45;
    --navy2: #0a2c62;
    --blue: #2498d0;
    --cyan: #2bb3c7;
    --teal: #39b2b6;
    --purple: #5d3c8e;
    --pink: #d92f78;
    --orange: #ff812e;
    --text: #071a3c;
}

html,
body {
    width: 100%;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: var(--navy);
    overflow: hidden;
}

/* =========================================================
   PAGE / BACKGROUND
========================================================= */

.page {
    min-height: 100vh;

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

    padding: clamp(14px, 2.5vw, 34px);

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            1000px 600px at 50% 50%,
            rgba(20, 77, 145, 0.20),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            #061936 0%,
            #092858 48%,
            #061a3d 100%
        );
}

/* Background diagonal light lines */

.page::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            136deg,
            transparent 0 29%,
            rgba(34, 127, 192, 0.18) 29.15% 29.28%,
            transparent 29.4%
        ),
        linear-gradient(
            132deg,
            transparent 0 72%,
            rgba(135, 65, 174, 0.11) 72.15% 72.3%,
            transparent 72.4%
        ),
        linear-gradient(
            49deg,
            transparent 0 52%,
            rgba(16, 171, 195, 0.08) 52.15% 52.3%,
            transparent 52.4%
        );
}

/* =========================================================
   BACKGROUND CORNERS
========================================================= */

.bg-corner {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.c1 {
    left: -72px;
    top: -42px;

    width: 300px;
    height: 185px;

    transform: skewX(-38deg);

    background:
        linear-gradient(
            135deg,
            var(--orange) 0 53%,
            transparent 53%
        );
}

.c2 {
    left: -84px;
    top: 62px;

    width: 245px;
    height: 190px;

    transform: skewX(-33deg);

    background:
        linear-gradient(
            135deg,
            var(--teal) 0 46%,
            transparent 46%
        );

    opacity: 0.95;
}

.c3 {
    right: -92px;
    bottom: 18px;

    width: 310px;
    height: 310px;

    transform: rotate(45deg);

    background:
        linear-gradient(
            135deg,
            var(--pink) 0 34%,
            var(--purple) 34% 57%,
            var(--blue) 57% 79%,
            var(--cyan) 79% 100%
        );

    opacity: 0.98;
}

.c4 {
    right: -80px;
    bottom: -88px;

    width: 190px;
    height: 190px;

    transform: rotate(45deg);

    background: #1885c1;

    opacity: 0.9;
}

/* =========================================================
   BACKGROUND OUTLINES
========================================================= */

.outline {
    position: absolute;

    width: 86px;
    height: 86px;

    border: 1px solid rgba(31, 182, 211, 0.36);

    transform: rotate(45deg);

    z-index: 0;
}

.o1 {
    right: 62px;
    top: 195px;
}

.o2 {
    left: -20px;
    bottom: 36px;

    width: 74px;
    height: 74px;

    border-color: rgba(31, 159, 210, 0.38);
}

.o3 {
    left: 20px;
    bottom: 180px;

    width: 62px;
    height: 62px;

    border-color: rgba(214, 45, 119, 0.3);
}

.o4 {
    right: 55px;
    top: 410px;

    width: 54px;
    height: 54px;

    border-color: rgba(237, 143, 45, 0.28);
}

/* =========================================================
   DOTS
========================================================= */

.dots {
    position: absolute;

    width: 112px;
    height: 112px;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.38) 1.55px,
            transparent 1.8px
        );

    background-size: 15px 15px;

    opacity: 0.32;

    z-index: 0;
}

.dl {
    left: 10px;
    bottom: 45px;
}

.dr {
    right: 0;
    top: 28px;

    opacity: 0.22;
}

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

.card {
    position: relative;

    z-index: 5;

    width: min(680px, 90vw);

    height: min(
        1075px,
        calc(100vh - 64px)
    );

    min-height: 760px;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.985);

    box-shadow:
        0 30px 85px rgba(0, 0, 0, 0.32),
        0 2px 12px rgba(0, 0, 0, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.95);

    overflow: hidden;
}

/* =========================================================
   CARD CORNER DECORATION
========================================================= */

.card > .inner {
    position: relative;
    z-index: 10;
}

.card > .side-square {
    z-index: 9;
}

.card::before {
    content: "";

    position: absolute;

    right: -154px;
    top: -154px;

    width: 330px;
    height: 330px;

    transform: rotate(42deg);

    background:
        linear-gradient(
            135deg,
            rgba(234, 239, 245, 0.8),
            rgba(234, 239, 245, 0.05)
        );

    border: 1px solid rgba(205, 215, 226, 0.58);

    pointer-events: none;

    z-index: 1;
}

.card::after {
    content: "";

    position: absolute;

    left: -120px;
    bottom: -150px;

    width: 330px;
    height: 330px;

    transform: rotate(42deg);

    background-image:
        radial-gradient(
            circle,
            rgba(57, 177, 199, 0.17) 1.5px,
            transparent 1.9px
        );

    background-size: 16px 16px;

    pointer-events: none;

    z-index: 1;
}

/* =========================================================
   CARD MOVING LIGHT SWEEP
========================================================= */

.card .light-sweep {
    position: absolute;

    top: -140%;
    left: -55%;

    width: 34%;
    height: 320%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(95, 150, 185, 0.02) 25%,
            rgba(95, 150, 185, 0.14) 45%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(95, 150, 185, 0.12) 55%,
            rgba(95, 150, 185, 0.02) 75%,
            transparent 100%
        );

    transform: rotate(18deg);

    pointer-events: none;

    z-index: 7;

    animation:
        cardLightSweep 5s linear infinite;
}

/* တကယ်မြင်ရတဲ့ thin light line */

.card .light-line {
    position: absolute;

    top: -35%;
    left: -35%;

    width: 3px;
    height: 180%;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(92, 145, 180, 0.15) 25%,
            rgba(92, 145, 180, 0.75) 50%,
            rgba(92, 145, 180, 0.15) 75%,
            transparent 100%
        );

    transform: rotate(18deg);

    filter: blur(0.5px);

    pointer-events: none;

    z-index: 7;

    opacity: 0;

    animation:
        cardLightLine 5s linear infinite;
}

/* =========================================================
   CARD LIGHT ANIMATION
========================================================= */

@keyframes cardLightSweep {

    0% {
        left: -55%;
        opacity: 0;
    }

    10% {
        opacity: 0.2;
    }

    30% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.9;
    }

    70% {
        opacity: 0.65;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

@keyframes cardLightLine {

    0% {
        left: -35%;
        opacity: 0;
    }

    15% {
        opacity: 0.5;
    }

    35% {
        opacity: 1;
    }

    55% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.4;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

/* =========================================================
   SIDE SQUARES
========================================================= */

.side-square {
    position: absolute !important;

    width: 58px;
    height: 58px;

    border: 1.6px solid;

    z-index: 9;
}

.sa {
    left: 41px;
    top: 55px;

    border-color: rgba(246, 138, 35, 0.18);
}

.sb {
    left: 87px;
    top: 115px;

    border-color: rgba(32, 174, 201, 0.16);
}

.sc {
    left: 41px;
    top: 177px;

    border-color: rgba(95, 59, 137, 0.14);
}

.sd {
    left: 41px;
    top: 239px;

    border-color: rgba(160, 197, 220, 0.10);
}

.se {
    right: 24px;
    bottom: 165px;

    border-color: rgba(240, 140, 34, 0.18);
}

.sf {
    right: 76px;
    bottom: 106px;

    border-color: rgba(31, 174, 201, 0.16);
}

.sg {
    right: 24px;
    bottom: 106px;

    transform: translateY(-58px);

    border-color: rgba(95, 59, 137, 0.12);
}

.sh {
    right: 76px;
    bottom: 47px;

    border-color: rgba(180, 196, 214, 0.12);
}

.si {
    right: 24px;
    bottom: 47px;

    border-color: rgba(123, 167, 199, 0.10);
}

/* =========================================================
   INNER CONTENT
========================================================= */

.inner {
    position: relative;

    z-index: 10;

    width: 78%;
    max-width: 560px;

    height: 100%;

    margin: 0 auto;

    padding-top: 94px;
}

/* =========================================================
   LOGO
========================================================= */

.logo-wrap {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-bottom: 24px;
}

.logo {
    display: block;

    width: 172px;
    height: 80px;

    object-fit: contain;
}

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

.title {
    text-align: center;

    color: var(--text);

    font-size: 56px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.8px;
}

.subtitle {
    text-align: center;

    color: #767d87;

    font-size: 22px;

    margin-top: 17px;
}

/* =========================================================
   DIVIDER
========================================================= */

.divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 34px 0 30px;
}

.line {
    display: block;
    width: 178px;
    height: 2px;
    flex: 0 0 178px;
    border-radius: 999px;
}

.line.left {
    background: #8db5d0;
}

.line.right {
    background: #8db5d0;
}

.diamond {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    transform: rotate(45deg);
    background: linear-gradient(
        135deg,
        #f18b2d 0 25%,
        #22aac5 25% 50%,
        #5b3b8d 50% 75%,
        #d52f78 75%
    );
    box-shadow: 0 2px 8px rgba(91, 59, 141, 0.15);
}

/* =========================================================
   INPUT FIELDS
========================================================= */

.field {
    margin-top: 22px;
}

.label {
    display: block;

    color: #17243d;

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 10px;
}

.input-wrap {
    position: relative;
}

.icon {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 23px;

    line-height: 1;

    color: #8f959c;

    width: 24px;

    text-align: center;

    z-index: 2;
}

.input {
    width: 100%;

    height: 67px;

    border:
        1.5px solid #ccd3db;

    border-radius: 13px;

    padding:
        0 18px 0 58px;

    font-size: 19px;

    color: #223044;

    outline: none;

    background: #fff;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.input::placeholder {
    color: #8d9298;
}

.input:focus {
    border-color: #6a9dc8;

    box-shadow:
        0 0 0 4px rgba(55, 124, 181, 0.09);
}

/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-btn {
    width: 100%;

    height: 67px;

    border: none;

    border-radius: 12px;

    background: #061a3c;

    color: #fff;

    font-size: 22px;

    font-weight: 800;

    margin-top: 38px;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(5, 22, 55, 0.16);

    transition:
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}

.login-btn:hover {
    background: #0a2758;

    transform: translateY(-1px);

    box-shadow:
        0 11px 22px rgba(5, 22, 55, 0.22);
}

/* =========================================================
   ERROR
========================================================= */

.error {
    min-height: 20px;

    text-align: center;

    margin-top: 12px;

    font-size: 14px;

    color: #d52f3e;
}

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

@media (max-width: 900px) {

    .card {
        width: min(600px, 92vw);

        height: auto;

        min-height: 0;
    }

    .inner {
        width: 82%;

        padding-top: 54px;

        padding-bottom: 55px;
    }

    .title {
        font-size: 43px;
    }

    .subtitle {
        font-size: 18px;
    }

    .line {
        width: 110px;
    }

    .side-square {
        display: none;
    }
}

@media (max-width: 560px) {

    .page {
        padding: 12px;
    }

    .card {
        width: 100%;

        border-radius: 22px;
    }

    .inner {
        width: auto;

        padding:
            35px 22px 38px;
    }

    .logo {
        width: 160px;

        height: auto;
    }

    .title {
        font-size: 33px;

        letter-spacing: -0.8px;
    }

    .subtitle {
        font-size: 16px;

        margin-top: 10px;
    }

    .divider {
        margin: 24px 0;
    }

    .line {
        width: 54px;
    }

    .label {
        font-size: 15px;
    }

    .input,
    .login-btn {
        height: 58px;

        font-size: 16px;
    }

    .login-btn {
        font-size: 18px;

        margin-top: 28px;
    }
}

/* =========================================================
   DASHBOARD
========================================================= */

.app-page {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 15% 10%, rgba(36, 152, 208, .12), transparent 65%),
        linear-gradient(135deg, #061936, #092858 48%, #061a3d);
    color: #fff;
}

.app-topbar {
    min-height: 76px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(6, 25, 54, .86);
    backdrop-filter: blur(12px);
}

.brand-mini {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff812e, #22aac5, #d92f78);
    box-shadow: 0 0 16px rgba(34,170,197,.4);
}

.brand-mini strong {
    display: block;
    font-size: 18px;
}

.brand-mini span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}

.dashboard {
    width: min(1120px, 92vw);
    margin: 0 auto;
    padding: 54px 0 70px;
}

.dashboard-heading h2 {
    font-size: clamp(34px, 5vw, 54px);
    margin-top: 8px;
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #70cde0;
}

.dashboard-subtitle {
    margin-top: 9px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.platform-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    box-shadow: 0 18px 35px rgba(0,0,0,.14);
    text-align: left;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.platform-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 24px 45px rgba(0,0,0,.2);
}

.platform-icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #0c2d63;
    font-size: 15px;
    font-weight: 900;
    flex: 0 0 62px;
}

.platform-card.apple .platform-icon {
    background: linear-gradient(135deg, #5d3c8e, #d92f78);
}

.platform-copy strong {
    display: block;
    font-size: 21px;
}

.platform-copy span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.64);
    font-size: 13px;
}

.platform-arrow {
    margin-left: auto;
    font-size: 24px;
    color: rgba(255,255,255,.72);
}

.dashboard-section-title {
    margin-top: 42px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.dashboard-section-title h3 {
    margin-top: 7px;
    font-size: 26px;
}

.history-btn {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 10px 15px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-weight: 700;
}

.history-btn:hover {
    background: rgba(255,255,255,.1);
}

.history-btn.secondary {
    color: #263248;
    background: #fff;
    border-color: #d6dce5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-card {
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
}

.stat-card span {
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.stat-card strong {
    display: block;
    margin-top: 8px;
    font-size: 34px;
}

/* =========================================================
   MODALS / DOA FORM
========================================================= */

.modal[hidden] {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 11, 28, .68);
    backdrop-filter: blur(4px);
}

.modal-card {
    width: min(820px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 20px;
    background: #fff;
    color: #17243d;
    padding: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.modal-heading h3 {
    margin-top: 7px;
    font-size: 28px;
}

.modal-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 7px;
    background: #eef2f6;
    color: #5a6679;
    font-size: 11px;
    letter-spacing: .7px;
    font-weight: 800;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f2f4f7;
    color: #39465b;
    font-size: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

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

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 13px;
    font-weight: 800;
    color: #263248;
}

.form-field input,
.form-field select,
.form-field textarea,
.history-toolbar input,
.history-toolbar select {
    width: 100%;
    border: 1px solid #ccd3db;
    border-radius: 10px;
    padding: 12px 13px;
    background: #fff;
    color: #1f2937;
    outline: none;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.history-toolbar input:focus,
.history-toolbar select:focus {
    border-color: #6a9dc8;
    box-shadow: 0 0 0 4px rgba(55,124,181,.08);
}

.form-field input[readonly] {
    background: #f4f6f8;
    color: #687385;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.submit-btn {
    width: auto;
    min-width: 160px;
    margin-top: 0;
}

.history-toolbar {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 10px;
    margin-bottom: 16px;
}

.history-table th,
.history-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #e6e9ee;
    white-space: nowrap;
}

.history-table th {
    background: #f7f8fa;
    color: #6c7686;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.empty-history {
    padding: 40px !important;
    text-align: center !important;
    color: #7a8492;
}

/* =========================================================
   TOAST
========================================================= */

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 150;
    padding: 12px 16px;
    border-radius: 10px;
    background: #0b2a60;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: .25s;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 760px) {
    .app-topbar {
        padding: 0 18px;
    }

    .dashboard {
        width: auto;
        padding: 34px 16px 50px;
    }

    .platform-grid,
    .stats-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.full {
        grid-column: auto;
    }

    .dashboard-section-title {
        align-items: center;
        gap: 14px;
    }

    .history-toolbar {
        grid-template-columns: 1fr;
    }

    .modal-card {
        padding: 20px;
    }
}

/* =========================================================
   WMW DASHBOARD — DEEP NAVY + PURPLE
========================================================= */

.app-page {

    background:

        radial-gradient(
            720px 520px at 12% 8%,
            rgba(93, 60, 142, 0.24),
            transparent 65%
        ),

        radial-gradient(
            650px 500px at 88% 18%,
            rgba(135, 65, 174, 0.16),
            transparent 65%
        ),

        radial-gradient(
            700px 520px at 88% 92%,
            rgba(217, 47, 120, 0.12),
            transparent 65%
        ),

        radial-gradient(
            600px 420px at 10% 88%,
            rgba(43, 179, 199, 0.08),
            transparent 65%
        ),

        linear-gradient(
            135deg,
            #050f25 0%,
            #0a1836 42%,
            #10183d 72%,
            #0a1230 100%
        );

}

.app-page::before {

    background:

        linear-gradient(
            135deg,
            transparent 0 25%,
            rgba(93, 60, 142, 0.12) 25.15% 25.30%,
            transparent 25.45%
        ),

        linear-gradient(
            132deg,
            transparent 0 72%,
            rgba(217, 47, 120, 0.08) 72.15% 72.30%,
            transparent 72.45%
        ),

        linear-gradient(
            48deg,
            transparent 0 53%,
            rgba(43, 179, 199, 0.06) 53.15% 53.30%,
            transparent 53.45%
        );

}

.app-topbar {

    background:

        linear-gradient(
            90deg,
            rgba(5, 15, 37, 0.96),
            rgba(16, 24, 61, 0.92),
            rgba(5, 15, 37, 0.96)
        );

    border-bottom:
        1px solid
        rgba(147, 110, 196, 0.18);

}

.brand-dot {

    background:

        linear-gradient(
            135deg,
            #7b56a8,
            #2bb3c7 52%,
            #d92f78
        );

    box-shadow:
        0 0 15px
        rgba(135, 65, 174, 0.55);

}

.platform-card {

    background:

        linear-gradient(
            135deg,
            rgba(93, 60, 142, 0.16),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        rgba(150, 120, 190, 0.20);

}

.platform-card.android:hover {

    border-color:
        rgba(43, 179, 199, 0.42);

}

.platform-card.apple:hover {

    border-color:
        rgba(217, 47, 120, 0.44);

}

.stat-card {

    background:

        linear-gradient(
            135deg,
            rgba(93, 60, 142, 0.12),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        rgba(150, 120, 190, 0.16);

}

.logout-btn {

    background:

        linear-gradient(
            135deg,
            rgba(93, 60, 142, 0.22),
            rgba(217, 47, 120, 0.08)
        );

    border:
        1px solid
        rgba(160, 130, 200, 0.28);

}

.logout-btn:hover {

    background:

        linear-gradient(
            135deg,
            rgba(93, 60, 142, 0.34),
            rgba(217, 47, 120, 0.14)
        );

    border-color:
        rgba(180, 145, 220, 0.46);

}

/* =========================================================
   HISTORY PRINT BUTTON
========================================================= */

.history-print-btn {

    border:
        1px solid
        rgba(43, 179, 199, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(43, 179, 199, 0.14),
            rgba(93, 60, 142, 0.16)
        );

    color: #ffffff;

    border-radius: 8px;

    padding:
        7px 12px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;

}

/* =========================================================
   DOA FORM — PREMIUM COMPLETION STATES
   Form UI only. Existing dashboard/login styles untouched.
========================================================= */

#appPage .form-field {
    position: relative;
}

#appPage .field-status {
    min-height: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease;
}

#appPage .field-status.success {
    color: #16a34a;
    opacity: 1;
    transform: translateY(0);
}

#appPage .field-status.error {
    color: #dc2626;
    opacity: 1;
    transform: translateY(0);
}

#appPage .field-status-text {
    display: inline-flex;
    align-items: center;
}

#appPage .field-status-counter {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#appPage .form-field .field-complete {
    border-color: #22c55e !important;
    background: #f7fff9 !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.08) !important;
}

#appPage .form-field .field-invalid {
    border-color: #ef4444 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.07) !important;
}

#appPage select.field-complete {
    color: #16213a;
}

#appPage select.field-complete option:checked {
    color: #16213a;
}

#doaModal .modal-card {
    width: min(850px, 96vw);
    max-height: 91vh;
    padding: 26px 26px 22px;

    border: 1px solid rgba(160, 181, 202, 0.28);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(248,251,254,.99)
        );

    box-shadow:
        0 34px 90px rgba(3, 18, 48, .27),
        0 10px 28px rgba(8, 37, 70, .10);
}

#doaModal .modal-heading {
    margin-bottom: 20px;
}

#doaModal .modal-heading h3 {
    margin-top: 8px;
    font-size: 29px;
    letter-spacing: -.7px;
    color: #0b2245;
}

#doaModal .modal-badge {
    padding: 6px 10px;
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(36,152,208,.09),
            rgba(43,179,199,.07)
        );

    border:
        1px solid rgba(36,152,208,.15);

    color: #315578;
    font-size: 10px;
    letter-spacing: .7px;
}

#doaModal .modal-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;

    border:
        1px solid rgba(116, 138, 162, .14);

    background:
        linear-gradient(
            145deg,
            #fbfcfe,
            #eff3f7
        );

    color: #42556d;
    font-size: 22px;

    box-shadow:
        0 6px 14px rgba(20, 44, 68, .06);

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

#doaModal .modal-close:hover {
    transform: translateY(-1px);

    background: #ffffff;

    box-shadow:
        0 9px 18px rgba(20, 44, 68, .10);
}

#doaModal .form-grid {
    gap: 15px 14px;
}

#doaModal .form-field {
    gap: 7px;
}

#doaModal .form-field input,
#doaModal .form-field select,
#doaModal .form-field textarea {
    min-height: 45px;

    border:
        1px solid #d6e0e9;

    border-radius: 11px;

    padding:
        0 12px;

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

    color:
        #1c3049;

    font-size:
        12px;

    box-shadow:
        inset 0 1px 1px rgba(12, 38, 69, .02),
        0 2px 8px rgba(15, 46, 76, .025);

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

#doaModal .form-field textarea {
    min-height: 104px;
    padding: 12px;
    resize: vertical;
    line-height: 1.45;
}

#doaModal .form-field input::placeholder,
#doaModal .form-field textarea::placeholder {
    color: #8a99a9;
}

#doaModal .form-field input:focus,
#doaModal .form-field select:focus,
#doaModal .form-field textarea:focus {
    outline: none;

    border-color:
        #5d9fd3;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(71, 143, 199, .08),
        0 8px 18px rgba(12, 49, 82, .055);
}

#doaModal .form-field input.field-complete,
#doaModal .form-field select.field-complete,
#doaModal .form-field textarea.field-complete {
    border-color:
        #35b779;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fffb
        );

    box-shadow:
        0 0 0 3px rgba(53,183,121,.055);
}

#doaModal .form-field input.field-invalid,
#doaModal .form-field select.field-invalid,
#doaModal .form-field textarea.field-invalid {
    border-color:
        #df6b7a;

    box-shadow:
        0 0 0 3px rgba(223,107,122,.055);
}

/* Small green success pill */
#doaModal .premium-field-status {
    display: none;
    align-items: center;
    width: fit-content;

    gap: 6px;

    margin-top: 2px;
    padding: 4px 8px 4px 5px;

    border:
        1px solid rgba(53,183,121,.16);

    border-radius:
        999px;

    background:
        rgba(53,183,121,.065);

    color:
        #158757;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .05px;
}

/* IMEI status: one compact row */

#doaModal .imei-status-text {
    flex:
        0 0 auto;

    min-width:
        142px;

    color:
        #607286;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .05px;

    transition:
        color .18s ease;
}

#doaModal .imei-progress-bar {
    display:
        block;

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #42c987,
            #1ca765
        );

    box-shadow:
        0 0 10px rgba(43,179,120,.15);

    transition:
        width .16s ease;
}

/* Make the IMEI completion text green at 15/15 */
#doaModal #imeiStatusText.complete {
    color:
        #148557;
}

/* Footer/action area */
#doaModal .modal-actions {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        16px;

    padding-top:
        15px;

    border-top:
        1px solid #e9eef3;
}

#doaModal .secondary {
    min-height:
        44px;

    padding:
        0 14px;

    border:
        1px solid #d7e0e8;

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f8fb
        );

    color:
        #32445c;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 4px 10px rgba(18, 41, 65, .035);

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

#doaModal .secondary:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px rgba(18, 41, 65, .08);
}

#doaModal .submit-btn {
    min-height:
        44px;

    padding:
        0 17px;

    border:
        0;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #071d45,
            #0a2c62 55%,
            #123875
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        900;

    box-shadow:
        0 10px 22px rgba(7,29,69,.18);

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

#doaModal .submit-btn:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.04);

    box-shadow:
        0 13px 28px rgba(7,29,69,.23);
}

#doaModal .submit-btn:active {
    transform:
        translateY(0);
}

/* Keep modal premium but comfortable on smaller screens */
@media (max-width: 720px) {

    #doaModal .modal-card {
        width: min(94vw, 620px);
        padding: 20px;
        border-radius: 18px;
    }

    #doaModal .form-grid {
        grid-template-columns: 1fr;
    }

    #doaModal .form-field.full {
        grid-column: auto;
    }

    #doaModal .imei-status-premium {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    #doaModal .imei-status-text {
        min-width: 0;
    }

    #doaModal .imei-progress {
        width: 100%;
    }

    #doaModal .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #doaModal .modal-actions button {
        width: 100%;
    }
}

/* Optional field label for DOA Serial No. */
#doaModal .optional-label {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* =========================================================
   DOA FORM UPGRADE — SOFT PREMIUM VALIDATION
   Scoped ONLY to #doaModal.
========================================================= */

#doaModal .form-field input.field-complete,
#doaModal .form-field select.field-complete,
#doaModal .form-field textarea.field-complete {
    border-color: #69b995 !important;
    background: #fbfffd !important;
    box-shadow:
        0 0 0 2px rgba(74, 166, 125, .045) !important;
}

#doaModal .form-field input.field-needs-input,
#doaModal .form-field select.field-needs-input,
#doaModal .form-field textarea.field-needs-input {
    border-color: #d6a34a !important;
    background: #fffdf8 !important;
    box-shadow:
        0 0 0 2px rgba(214, 163, 74, .07) !important;
}

#doaModal .form-field input.field-invalid,
#doaModal .form-field select.field-invalid,
#doaModal .form-field textarea.field-invalid {
    border-color: #d6a34a !important;
    background: #fffdf8 !important;
    box-shadow:
        0 0 0 2px rgba(214, 163, 74, .07) !important;
}

/* Required-field message: calm amber, not browser-red. */
#doaModal .premium-field-error {
    display: none;
    align-items: center;
    width: fit-content;
    gap: 6px;

    margin-top: 3px;
    padding: 4px 8px 4px 5px;

    border: 1px solid rgba(214,163,74,.18);
    border-radius: 999px;

    background: #fffaf0;

    color: #9a6b18;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

#doaModal .premium-field-error.is-visible {
    display: inline-flex;
}

#doaModal .premium-error-icon {
    width: 16px;
    height: 16px;

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

    flex: 0 0 16px;

    border-radius: 999px;

    background: #e1ad53;
    color: #ffffff;

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

/* Success pill: softer and more elegant than bright green. */
#doaModal .premium-field-status {
    display: none;
    align-items: center;
    width: fit-content;
    gap: 6px;

    margin-top: 2px;
    padding: 4px 8px 4px 5px;

    border: 1px solid rgba(78,162,122,.18);
    border-radius: 999px;

    background: #f3fbf7;

    color: #3b8f6c;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

#doaModal .premium-field-status.is-visible {
    display: inline-flex;
}

#doaModal .premium-status-icon {
    width: 16px;
    height: 16px;

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

    flex: 0 0 16px;

    border-radius: 999px;

    background: #55ac83;
    color: #ffffff;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 2px 6px rgba(48,142,99,.12);
}

/* Optional Serial: completely neutral while empty. */
#doaModal #serialField:not(.field-complete):not(.field-needs-input):not(.field-invalid) {
    border-color: #d6e0e9 !important;
    background: #ffffff !important;
    box-shadow:
        inset 0 1px 1px rgba(12,38,69,.02) !important;
}

#doaModal .optional-label {
    padding: 3px 7px;
    border-radius: 999px;

    background: #f3f6f9;
    border: 1px solid #e1e7ee;

    color: #6c7b8d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .35px;
}

/* IMEI status is quiet until complete. */
#doaModal .imei-status-premium {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 18px;
}

#doaModal .imei-status-text {
    min-width: 142px;

    color: #708096;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .05px;
}

#doaModal .imei-status-text.complete {
    color: #3b8f6c;
}

#doaModal .imei-progress {
    position: relative;

    flex: 1;

    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #edf2f5;
}

#doaModal .imei-progress-bar {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #67b795,
            #3f9c72
        );

    transition: width .16s ease;
}

/* Slightly more breathing room for the detail area. */
#doaModal #detailField {
    min-height: 116px;
}

/* Focus should stay premium-blue, not green/red. */
#doaModal .form-field input:focus,
#doaModal .form-field select:focus,
#doaModal .form-field textarea:focus {
    border-color: #5d9fd3 !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(71,143,199,.075),
        0 7px 18px rgba(12,49,82,.05) !important;
}

/* Custom error on submit should gently draw attention. */
#doaModal .field-needs-input:focus {
    border-color: #d6a34a !important;
    box-shadow:
        0 0 0 4px rgba(214,163,74,.08) !important;
}

/* =========================================================
   HISTORY ACTIONS — ADMIN DELETE
   History UI only.
========================================================= */

.history-print-btn,
.history-delete-btn {
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.history-print-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(43, 179, 199, .58);

    box-shadow:
        0 6px 14px rgba(38, 138, 166, .10);
}

.history-delete-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(201, 91, 105, .46);

    background:
        #fff1f3;

    box-shadow:
        0 6px 14px rgba(174, 89, 101, .10);
}

/* =========================================================
   DELETE CONFIRMATION
========================================================= */

.delete-confirm-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        220;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(4, 16, 34, .62);

    backdrop-filter:
        blur(7px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.delete-confirm-overlay.is-visible {
    opacity:
        1;

    visibility:
        visible;
}

.delete-confirm-card {
    width:
        min(420px, 94vw);

    padding:
        26px;

    border:
        1px solid
        rgba(181, 199, 217, .28);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfe
        );

    color:
        #17243d;

    box-shadow:
        0 28px 70px
        rgba(2, 16, 38, .28);

    transform:
        translateY(8px)
        scale(.985);

    transition:
        transform .18s ease;
}

.delete-confirm-overlay.is-visible
.delete-confirm-card {
    transform:
        translateY(0)
        scale(1);
}

.delete-confirm-icon {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        14px;

    border-radius:
        14px;

    background:
        #fff6e9;

    border:
        1px solid
        #f0d6a3;

    color:
        #a16e20;

    font-size:
        19px;

    font-weight:
        900;
}

.delete-confirm-card h3 {
    margin:
        0;

    color:
        #102a52;

    font-size:
        21px;

    letter-spacing:
        -.35px;
}

.delete-confirm-text {
    margin:
        10px 0 20px;

    color:
        #66758a;

    font-size:
        12px;

    line-height:
        1.6;
}

.delete-confirm-text strong {
    color:
        #2d4057;
}

.delete-confirm-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;
}

.delete-confirm-cancel,
.delete-confirm-danger {
    min-height:
        42px;

    padding:
        0 14px;

    border-radius:
        10px;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;
}

.delete-confirm-cancel {
    border:
        1px solid #d7e0e8;

    background:
        #ffffff;

    color:
        #3a4b61;
}

.delete-confirm-danger {
    border:
        1px solid #c96876;

    background:
        #c96876;

    color:
        #ffffff;

    box-shadow:
        0 8px 18px
        rgba(201, 104, 118, .18);
}

.delete-confirm-danger:hover {
    background:
        #b85a68;
}

/* =========================================================
   PREMIUM CUSTOM DROPDOWNS
   Brand + Error Type only.
========================================================= */

#doaModal .premium-native-select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

#doaModal .premium-select {
    position:
        relative;

    width:
        100%;

    z-index:
        20;
}

#doaModal .premium-select-trigger {
    width:
        100%;

    min-height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0 12px;

    border:
        1px solid #d6e0e9;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #5e7083;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 1px rgba(12,38,69,.02),
        0 2px 8px rgba(15,46,76,.025);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}

#doaModal .premium-select-trigger:hover {
    border-color:
        #b8c9d8;

    background:
        #fbfdff;
}

#doaModal .premium-select-trigger.has-value {
    color:
        #1c3049;
}

#doaModal .premium-select-trigger.field-complete {
    border-color:
        #69b995;

    background:
        #fbfffd;

    box-shadow:
        0 0 0 2px rgba(74,166,125,.045);
}

#doaModal .premium-select-chevron {
    width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 24px;

    border-radius:
        8px;

    background:
        #f1f5f8;

    color:
        #718397;

    font-size:
        13px;

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

#doaModal .premium-select.is-open
.premium-select-chevron {
    transform:
        rotate(180deg);

    background:
        #eaf2f8;

    color:
        #3c617d;
}

#doaModal .premium-select-menu {
    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        calc(100% + 7px);

    max-height:
        250px;

    overflow-y:
        auto;

    padding:
        6px;

    border:
        1px solid rgba(160,181,202,.32);

    border-radius:
        14px;

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

    box-shadow:
        0 20px 42px rgba(9,34,61,.18),
        0 6px 18px rgba(9,34,61,.08);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-5px)
        scale(.985);

    transform-origin:
        top center;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

#doaModal .premium-select.is-open
.premium-select-menu {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0)
        scale(1);
}

#doaModal .premium-select-option {
    width:
        100%;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 10px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #34475d;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

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

#doaModal .premium-select-option:hover {
    background:
        #f2f7fb;

    color:
        #183b5b;
}

#doaModal .premium-select-option[aria-selected="true"] {
    background:
        linear-gradient(
            135deg,
            #eef8f4,
            #f7fbff
        );

    color:
        #287456;
}

#doaModal .premium-option-check {
    width:
        19px;

    height:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 19px;

    border-radius:
        999px;

    color:
        #3fa67b;

    font-size:
        11px;

    font-weight:
        900;
}

#doaModal .premium-select-option:hover
.premium-option-check {
    background:
        #e8f3f9;
}

/* =========================================================
   HISTORY 100% PREMIUM UPGRADE
   History + Admin Edit only. Other UI is untouched.
========================================================= */
.history-modal-card{width:min(1480px,96vw)!important;max-width:1480px!important;max-height:88vh!important;padding:24px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(255,255,255,.995),rgba(248,251,254,.99))!important;box-shadow:0 36px 100px rgba(3,18,48,.30),0 12px 34px rgba(8,37,70,.10)!important}.history-modal-card .modal-heading{margin-bottom:18px}.history-modal-card .modal-heading h3{margin-top:7px;font-size:28px;letter-spacing:-.65px;color:#10284d}.history-modal-card .modal-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;border:1px solid #dce6ef;background:#f4f8fb;color:#5e7083;font-size:9px;font-weight:900;letter-spacing:.75px}.history-toolbar{grid-template-columns:minmax(0,1fr) 170px!important;gap:10px!important;margin-bottom:14px!important}.history-toolbar input,.history-toolbar select{height:44px!important;border-radius:11px!important;border-color:#d6e0e9!important;background:#fff!important;color:#26384e!important;box-shadow:0 3px 10px rgba(15,46,76,.035)!important}.history-table-wrap{max-height:56vh;overflow:auto!important;border:1px solid #e7edf2;border-radius:14px;background:#fff}.history-table{width:max-content!important;min-width:100%!important;border-collapse:separate!important;border-spacing:0!important;font-size:12px!important}.history-table th,.history-table td{padding:11px 12px!important;border-bottom:1px solid #e8edf2!important;white-space:nowrap!important;vertical-align:middle!important}.history-table thead th{position:sticky;top:0;z-index:4;background:#f7f9fb!important;color:#66768a!important;font-size:9px!important;font-weight:900!important;letter-spacing:.7px!important;text-transform:uppercase;border-bottom:1px solid #dde6ee!important}.history-table tbody tr{background:#fff;transition:background .16s ease}.history-table tbody tr:hover{background:linear-gradient(90deg,rgba(36,152,208,.028),rgba(93,60,142,.026))}.history-id-cell{min-width:125px}.history-id-cell strong{color:#112b52;font-size:11px;font-weight:900}.history-date-cell{color:#607187;font-variant-numeric:tabular-nums}.history-branch-chip,.history-platform-chip,.history-error-chip{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:800}.history-branch-chip{background:#f3f7fa;border:1px solid #e1e8ee;color:#51657a}.history-platform-chip{border:1px solid transparent}.history-platform-chip.android{background:#edf8f5;border-color:#cce9df;color:#2c8068}.history-platform-chip.apple{background:#fbf0f7;border-color:#eed5e3;color:#a14d76}.history-main-text,.history-product-text{color:#2e4259;font-weight:800}.history-mono-value{color:#45596f;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px}.history-error-chip{background:#fff7e8;border:1px solid #f1dfb4;color:#9a6b22}.history-detail-text{display:block;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5b6e82;line-height:1.4;cursor:help}.history-muted{color:#a2adba}.history-person-cell{display:inline-flex;align-items:center;gap:8px;color:#41566d;font-weight:800}.history-person-avatar{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(135deg,#edf5fb,#f3effa);border:1px solid #dce6ef;color:#4e6780;font-size:10px;font-weight:900}.history-action-cell{position:sticky;right:0;z-index:2;background:rgba(255,255,255,.97)!important;box-shadow:-10px 0 18px rgba(15,46,76,.035)}.history-action-group{display:inline-flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important}.history-action-group button{appearance:none!important;-webkit-appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-width:68px!important;height:31px!important;padding:0 10px!important;border-radius:9px!important;font-family:inherit!important;font-size:10px!important;font-weight:900!important;line-height:1!important;cursor:pointer!important;box-shadow:0 3px 8px rgba(15,46,76,.06)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important}.history-action-group button:hover{transform:translateY(-1px)!important}.history-action-icon{width:12px!important;height:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 12px!important}.history-print-btn{color:#075985!important;background:linear-gradient(180deg,#f2fbff,#e5f5fd)!important;border:1px solid #bfe2f3!important}.history-edit-btn{color:#244e9a!important;background:linear-gradient(180deg,#f1f5ff,#e6edff)!important;border:1px solid #c8d7fa!important}.history-delete-btn{color:#b4232f!important;background:linear-gradient(180deg,#fff8f8,#feeeee)!important;border:1px solid #f0caca!important}.history-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:42px 18px;color:#64748b}.history-empty-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f3f7fa;border:1px solid #e1e8ee;color:#6b7e91;font-size:18px}.history-empty-state strong{color:#30455b;font-size:13px}.history-empty-state span{color:#8a98a7;font-size:11px}
.history-edit-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,12,31,.64);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease}.history-edit-overlay.is-visible{opacity:1;visibility:visible}.history-edit-backdrop{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.history-edit-card{width:min(470px,94vw);padding:24px;border:1px solid rgba(184,198,214,.42);border-radius:20px;background:linear-gradient(145deg,#fff,#f7fafc);box-shadow:0 34px 90px rgba(2,16,38,.30),0 10px 24px rgba(20,45,72,.10);transform:translateY(7px) scale(.985);transition:transform .16s ease}.history-edit-overlay.is-visible .history-edit-card{transform:translateY(0) scale(1)}.history-edit-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.history-edit-eyebrow{display:inline-flex;color:#6e7f90;font-size:9px;font-weight:900;letter-spacing:1.4px}.history-edit-header h3{margin:5px 0 0;color:#10284d;font-size:23px;letter-spacing:-.4px}.history-edit-header p{margin:7px 0 0;color:#718195;font-size:11px;line-height:1.5}.history-edit-close{width:36px;height:36px;flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e0e7ee;border-radius:11px;background:#f6f8fa;color:#4e6279;font-size:18px;cursor:pointer}.history-edit-record-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px;padding:11px 12px;border:1px solid #e8edf2;border-radius:12px;background:#f9fbfc}.history-edit-record-preview span{color:#7a8898;font-size:10px;font-weight:800}.history-edit-record-preview strong{color:#29415d;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}.history-edit-label{display:block;margin-bottom:7px;color:#334a63;font-size:11px;font-weight:900}.history-edit-input-wrap{display:flex;align-items:center;height:47px;border:1px solid #d5dfe8;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(15,46,76,.025);overflow:hidden}.history-edit-input-wrap:focus-within{border-color:#6597c5;box-shadow:0 0 0 4px rgba(55,124,181,.075),0 7px 18px rgba(12,49,82,.05)}.history-edit-input-wrap span{padding-left:12px;color:#718296;font-size:11px;font-weight:900}.history-edit-input-wrap input{width:100%;height:100%;border:0;outline:0;padding:0 12px 0 4px;background:transparent;color:#18324f;font-size:13px;font-weight:800}.history-edit-helper{margin-top:7px;color:#7a8898;font-size:10px;line-height:1.5}.history-edit-helper strong{color:#4a6177}.history-edit-error{margin-top:9px;padding:8px 10px;border:1px solid #efd1d4;border-radius:10px;background:#fff7f8;color:#b4232f;font-size:10px;font-weight:800}.history-edit-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:15px;border-top:1px solid #e9eef3}.history-edit-cancel,.history-edit-save{min-height:42px;padding:0 14px;border-radius:11px;font-size:11px;font-weight:900;cursor:pointer}.history-edit-cancel{border:1px solid #d6e0e8;background:#fff;color:#465970}.history-edit-save{border:0;background:linear-gradient(135deg,#071d45,#0b2d62);color:#fff;box-shadow:0 10px 20px rgba(7,29,69,.16)}
@media (max-width:900px){.history-modal-card{width:96vw!important;padding:18px!important}.history-table-wrap{max-height:58vh}}@media (max-width:620px){.history-toolbar{grid-template-columns:1fr!important}.history-edit-card{padding:20px;border-radius:18px}.history-edit-actions{flex-direction:column-reverse}.history-edit-cancel,.history-edit-save{width:100%}}

.history-modal-card {
    width:
        min(1580px, 97vw) !important;

    max-width:
        1580px !important;

    max-height:
        90vh !important;

    padding:
        26px !important;
}

.history-toolbar-upgraded {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        170px
        170px !important;

    gap:
        10px !important;
}

.history-toolbar-upgraded input,
.history-toolbar-upgraded select {
    height:
        46px !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    padding:
        0 13px !important;
}

.history-table-wrap {
    position:
        relative !important;

    max-height:
        61vh !important;

    overflow:
        auto !important;

    isolation:
        isolate;

    scrollbar-width:
        thin;
}

.history-table-fixed-action {
    min-width:
        1640px !important;

    border-collapse:
        separate !important;

    border-spacing:
        0;

    --admin-action-width:
        270px;

    --branch-action-width:
        145px;
}

.history-table-fixed-action th,
.history-table-fixed-action td {
    padding:
        13px 14px !important;

    vertical-align:
        middle !important;

    font-size:
        13px !important;

    white-space:
        nowrap;
}

.history-table-fixed-action thead th {
    font-size:
        10px !important;

    letter-spacing:
        .75px !important;
}

.history-detail-cell {
    min-width:
        280px;

    max-width:
        380px;

    white-space:
        normal !important;
}

.history-detail-text {
    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;

    max-width:
        360px;

    line-height:
        1.45;

    word-break:
        break-word;
}

.history-checked-cell {
    min-width:
        150px;
}

.history-mono-value {
    font-variant-numeric:
        tabular-nums;

    font-size:
        11px !important;
}

.history-person-cell {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}

.history-person-avatar {
    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #edf3f8;

    color:
        #51687f;

    font-size:
        11px;

    font-weight:
        800;
}

.history-branch-chip,
.history-platform-chip,
.history-error-chip {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        0 10px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;
}

/* Shared fixed rail */
.history-table-fixed-action
.history-action-head,
.history-table-fixed-action
.history-action-cell {
    position:
        sticky !important;

    right:
        0 !important;

    background:
        #f8fbfe !important;

    border-left:
        0 !important;

    z-index:
        40 !important;

    box-shadow:
        -8px 0 18px rgba(18,45,72,.045) !important;
}

/* Admin: wider rail, 3 stable equal buttons */
.history-table-fixed-action
.history-action-admin {
    width:
        var(--admin-action-width) !important;

    min-width:
        var(--admin-action-width) !important;

    max-width:
        var(--admin-action-width) !important;

    padding:
        0 12px !important;
}

.history-table-fixed-action
.history-action-admin
.history-action-group {
    display:
        grid !important;

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

    gap:
        8px !important;

    width:
        100% !important;
}

.history-table-fixed-action
.history-action-admin
.history-action-group button {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        36px !important;

    padding:
        0 8px !important;

    border-radius:
        10px !important;
}

/* Branch: compact rail, single fixed Print button */
.history-table-fixed-action
.history-action-branch {
    width:
        var(--branch-action-width) !important;

    min-width:
        var(--branch-action-width) !important;

    max-width:
        var(--branch-action-width) !important;

    padding:
        0 12px !important;
}

.history-table-fixed-action
.history-action-branch
.history-action-group {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;
}

.history-table-fixed-action
.history-action-branch
.history-print-btn {
    flex:
        0 0 76px !important;

    width:
        76px !important;

    min-width:
        76px !important;

    height:
        36px !important;

    margin:
        0 auto !important;

    padding:
        0 11px !important;
}

.history-table-fixed-action
.history-action-head::before,
.history-table-fixed-action
.history-action-head::after,
.history-table-fixed-action
.history-action-cell::before,
.history-table-fixed-action
.history-action-cell::after {
    content:
        none !important;

    display:
        none !important;
}

/* Prevent branch rules from affecting Admin buttons */
.history-table-fixed-action
.history-action-admin
.history-action-group button {
    flex:
        initial !important;
}

@media (max-width: 1100px) {

    .history-table-fixed-action {
        min-width:
            1550px !important;

        --admin-action-width:
            250px;

        --branch-action-width:
            145px;
    }
}

@media (max-width: 760px) {

    .history-toolbar-upgraded {
        grid-template-columns:
            1fr !important;
    }

    .history-table-fixed-action {
        min-width:
            1500px !important;

        --admin-action-width:
            225px;

        --branch-action-width:
            128px;
    }

    .history-table-fixed-action
    .history-action-branch
    .history-print-btn {
        width:
            70px !important;

        min-width:
            70px !important;
    }
}

.history-table-wrap {
    position:
        relative !important;

    overflow-x:
        auto !important;

    overflow-y:
        auto !important;

    max-height:
        61vh !important;

    isolation:
        isolate;
}

/* One table only: native row layout guarantees alignment. */
.history-table-fixed-action {
    width:
        max-content !important;

    min-width:
        1640px !important;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    table-layout:
        auto !important;

    --history-admin-action-width:
        270px;

    --history-branch-action-width:
        118px;
}

/* Normal cells */
.history-table-fixed-action th,
.history-table-fixed-action td {
    box-sizing:
        border-box !important;

    vertical-align:
        middle !important;

    background-clip:
        padding-box !important;
}

/* Sticky Action header/cells */
.history-table-fixed-action
.history-action-head,
.history-table-fixed-action
.history-action-cell {
    position:
        sticky !important;

    right:
        0 !important;

    z-index:
        30 !important;

    border-left:
        0 !important;

    background:
        #f8fbfe !important;

    box-shadow:
        -12px 0 24px rgba(18,45,72,.075) !important;
}

/* Header above row cells */
.history-table-fixed-action
.history-action-head {
    z-index:
        50 !important;

    width:
        var(--history-admin-action-width) !important;

    min-width:
        var(--history-admin-action-width) !important;

    max-width:
        var(--history-admin-action-width) !important;

    padding:
        0 12px !important;

    text-align:
        center !important;

    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f2f6fa 100%
        ) !important;

    color:
        #536a80 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .8px !important;

    border-bottom:
        1px solid #dfe7ef !important;
}

/* Admin row Action cells */
.history-table-fixed-action
.history-admin-mode
.history-action-cell,
.history-table-fixed-action
.history-action-admin {
    width:
        var(--history-admin-action-width) !important;

    min-width:
        var(--history-admin-action-width) !important;

    max-width:
        var(--history-admin-action-width) !important;

    padding:
        0 12px !important;

    background:
        linear-gradient(
            180deg,
            #fafdff 0%,
            #f6fafd 100%
        ) !important;

    border-bottom:
        1px solid #e5edf3 !important;
}

/* Branch mode: compact Action width */
.history-table-fixed-action
.history-branch-mode
.history-action-cell,
.history-table-fixed-action
.history-action-branch {
    width:
        var(--history-branch-action-width) !important;

    min-width:
        var(--history-branch-action-width) !important;

    max-width:
        var(--history-branch-action-width) !important;

    padding:
        0 8px !important;

    background:
        linear-gradient(
            180deg,
            #fafdff 0%,
            #f6fafd 100%
        ) !important;

    border-bottom:
        1px solid #e5edf3 !important;
}

/* The Action group fills the fixed column only. */
.history-table-fixed-action
.history-action-group {
    width:
        100% !important;

    height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-items:
        center !important;
}

/* Admin: 3 equal buttons */
.history-table-fixed-action
.history-admin-mode
.history-action-group,
.history-table-fixed-action
.history-action-admin
.history-action-group {
    display:
        grid !important;

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

    gap:
        8px !important;
}

.history-table-fixed-action
.history-admin-mode
.history-action-group
button,
.history-table-fixed-action
.history-action-admin
.history-action-group
button {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 8px !important;

    box-sizing:
        border-box !important;

    border-radius:
        10px !important;
}

/* Branch: one centered Print button */
.history-table-fixed-action
.history-branch-mode
.history-action-group,
.history-table-fixed-action
.history-action-branch
.history-action-group {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        0 !important;
}

.history-table-fixed-action
.history-branch-mode
.history-print-btn,
.history-table-fixed-action
.history-action-branch
.history-print-btn {
    flex:
        0 0 72px !important;

    width:
        72px !important;

    min-width:
        72px !important;

    height:
        34px !important;

    margin:
        0 auto !important;

    padding:
        0 8px !important;

    box-sizing:
        border-box !important;
}

/* Opaque rail: scrolled data passes underneath and disappears cleanly. */
.history-table-fixed-action
.history-action-head::before,
.history-table-fixed-action
.history-action-head::after,
.history-table-fixed-action
.history-action-cell::before,
.history-table-fixed-action
.history-action-cell::after {
    content:
        none !important;

    display:
        none !important;
}

.history-table-fixed-action
.history-action-cell {
    transform:
        none !important;
}

/* Slight premium edge without a visible hard vertical line */
.history-table-fixed-action
.history-action-head,
.history-table-fixed-action
.history-action-cell {
    border-right:
        0 !important;
}

/* Mobile / smaller desktop */
@media (max-width: 1100px) {

    .history-table-fixed-action {
        min-width:
            1550px !important;
    }

    .history-table-fixed-action
    .history-branch-mode
    .history-action-cell,
    .history-table-fixed-action
    .history-action-branch {
        width:
            112px !important;

        min-width:
            112px !important;

        max-width:
            112px !important;
    }

    .history-table-fixed-action
    .history-admin-mode
    .history-action-cell,
    .history-table-fixed-action
    .history-action-admin,
    .history-table-fixed-action
    .history-action-head {
        width:
            250px !important;

        min-width:
            250px !important;

        max-width:
            250px !important;
    }
}

@media (max-width: 760px) {

    .history-table-fixed-action {
        min-width:
            1500px !important;
    }

    .history-table-fixed-action
    .history-branch-mode
    .history-action-cell,
    .history-table-fixed-action
    .history-action-branch {
        width:
            108px !important;

        min-width:
            108px !important;

        max-width:
            108px !important;

        padding:
            0 6px !important;
    }

    .history-table-fixed-action
    .history-branch-mode
    .history-print-btn,
    .history-table-fixed-action
    .history-action-branch
    .history-print-btn {
        width:
            68px !important;

        min-width:
            68px !important;

        height:
            33px !important;

        font-size:
            10px !important;
    }

    .history-table-fixed-action
    .history-admin-mode
    .history-action-cell,
    .history-table-fixed-action
    .history-action-admin,
    .history-table-fixed-action
    .history-action-head {
        width:
            210px !important;

        min-width:
            210px !important;

        max-width:
            210px !important;
    }

    .history-table-fixed-action
    .history-admin-mode
    .history-action-group {
        gap:
            6px !important;
    }

    .history-table-fixed-action
    .history-admin-mode
    .history-action-group
    button {
        height:
            34px !important;

        padding:
            0 6px !important;

        font-size:
            10px !important;
    }
}

/* =========================================================
   DASHBOARD — PREMIUM ADMIN HOME
   Dashboard only. Login / Form / History untouched.
========================================================= */

#appPage .dashboard-subtitle {
    max-width:
        620px;

    line-height:
        1.65;
}

#appPage .platform-icon {
    width:
        56px;

    height:
        56px;

    flex-basis:
        56px;

    border-radius:
        15px;
}

/* Summary row */

#appPage .summary-card::after {
    content:
        "";

    position:
        absolute;

    width:
        92px;

    height:
        92px;

    right:
        -30px;

    top:
        -35px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                43,
                179,
                199,
                .16
            ),
            transparent 68%
        );

    pointer-events:
        none;
}

#appPage .summary-top {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .65px;

    text-transform:
        uppercase;
}

#appPage .summary-card strong {
    display:
        block;

    margin-top:
        8px;

    font-size:
        34px;

    line-height:
        1;
}

#appPage .summary-card small {
    display:
        block;

    margin-top:
        9px;

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

    font-size:
        11px;

    line-height:
        1.45;
}

/* Recent activity */

#appPage .recent-row {
    display:
        grid;

    grid-template-columns:
        10px minmax(
            0,
            1fr
        ) auto;

    align-items:
        center;

    gap:
        13px;

    min-height:
        73px;

    padding:
        13px 18px;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            .075
        );

    transition:
        background .16s ease;
}

#appPage .recent-primary {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;
}

#appPage .recent-secondary span + span::before {
    content:
        "•";

    margin-right:
        9px;

    color:
        rgba(
            255,
            255,
            255,
            .23
        );
}

#appPage .recent-empty-icon {
    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

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

    color:
        #6bc8d6;

    font-size:
        18px;
}

#appPage .recent-empty strong {
    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    font-size:
        13px;
}

#appPage .recent-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        12px 18px;

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

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

    font-size:
        10px;
}

#appPage .recent-history-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #74cddd;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;
}

@media (max-width: 760px) {

    #appPage .dashboard {
        width:
            auto;

        padding:
            32px 16px 50px;
    }

    #appPage .platform-grid {
        grid-template-columns:
            1fr;
    }

    #appPage .dashboard-summary {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    #appPage .summary-card {
        min-height:
            108px;
    }

    #appPage .recent-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    #appPage .recent-heading .history-btn {
        align-self:
            flex-start;
    }

    #appPage .recent-secondary {
        gap:
            6px;
    }

    #appPage .recent-footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }
}

/* =========================================================
   HISTORY — FULL VIEW / PREMIUM FOCUS
   History opens as a near-full desktop workspace.
========================================================= */

.history-modal-overlay {
    padding:
        18px !important;

    background:
        rgba(
            2,
            10,
            27,
            .76
        ) !important;

    backdrop-filter:
        blur(8px) saturate(118%) !important;

    -webkit-backdrop-filter:
        blur(8px) saturate(118%) !important;
}

.history-modal-overlay
.history-modal-card {
    width:
        min(
            1540px,
            97vw
        ) !important;

    max-width:
        1540px !important;

    height:
        min(
            90vh,
            900px
        ) !important;

    max-height:
        92vh !important;

    padding:
        26px 28px 24px !important;

    overflow:
        hidden !important;

    border-radius:
        24px !important;

    border:
        1px solid rgba(
            212,
            224,
            235,
            .80
        ) !important;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .995
            ),
            rgba(
                246,
                250,
                253,
                .992
            )
        ) !important;

    box-shadow:
        0 40px 120px rgba(
            0,
            0,
            0,
            .34
        ),
        0 14px 38px rgba(
            4,
            24,
            53,
            .16
        ) !important;

    transform:
        scale(
            1
        );

    transform-origin:
        center;
}

/* Slight "sheet on top of dashboard" effect. */
.history-modal-overlay
.history-modal-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            .92
        );

    z-index:
        0;
}

.history-modal-overlay
.history-modal-card > * {
    position:
        relative;

    z-index:
        1;
}

.history-modal-overlay
.history-modal-card
.history-table-wrap {
    max-height:
        none !important;

    height:
        calc(
            100% - 165px
        ) !important;

    min-height:
        320px;

    overflow:
        auto !important;
}

/* Search/filter row gets breathing room in full view. */
.history-modal-overlay
.history-toolbar {
    margin-bottom:
        16px !important;
}

/* Better desktop sizing for table in full view. */
.history-modal-overlay
.history-table {
    min-width:
        100% !important;

    font-size:
        12.5px !important;
}

.history-modal-overlay
.history-table th,
.history-modal-overlay
.history-table td {
    padding:
        12px 13px !important;
}

/* Recent rows are clearly interactive. */
#appPage .recent-row {
    cursor:
        pointer;

    user-select:
        none;
}

#appPage .recent-row:focus-visible {
    outline:
        2px solid rgba(
            116,
            205,
            221,
            .75
        );

    outline-offset:
        -2px;
}

#appPage .recent-row::after {
    content:
        "Open";

    margin-left:
        auto;

    padding:
        4px 7px;

    border-radius:
        999px;

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

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

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

    font-size:
        9px;

    font-weight:
        800;

    opacity:
        0;

    transform:
        translateX(
            -4px
        );

    transition:
        opacity .16s ease,
        transform .16s ease;
}

#appPage .recent-row:hover::after {
    opacity:
        1;

    transform:
        translateX(
            0
        );
}

@media (max-width: 900px) {

    .history-modal-overlay {
        padding:
            10px !important;
    }

    .history-modal-overlay
    .history-modal-card {
        width:
            98vw !important;

        height:
            92vh !important;

        max-height:
            94vh !important;

        padding:
            20px !important;

        border-radius:
            20px !important;
    }

    .history-modal-overlay
    .history-modal-card
    .history-table-wrap {
        height:
            calc(
                100% - 154px
            ) !important;
    }
}

@media (max-width: 620px) {

    .history-modal-overlay
    .history-modal-card {
        width:
            98vw !important;

        height:
            94vh !important;

        padding:
            16px !important;

        border-radius:
            18px !important;
    }

    .history-modal-overlay
    .history-modal-card
    .history-table-wrap {
        height:
            calc(
                100% - 198px
            ) !important;
    }

    #appPage .recent-row::after {
        display:
            none;
    }
}

/* =========================================================
   DASHBOARD — VIEW HISTORY PREMIUM MICRO-INTERACTION
   Dashboard button only.
========================================================= */

#appPage .history-btn {
    position:
        relative !important;

    overflow:
        hidden !important;

    transform:
        translateY(0) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;

    cursor:
        pointer !important;

    will-change:
        transform;
}

#appPage .history-btn::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(
                255,
                255,
                255,
                .16
            ) 48%,
            transparent 72%
        );

    transform:
        translateX(
            -120%
        );

    transition:
        transform .45s ease;

    pointer-events:
        none;
}

#appPage .history-btn span {
    display:
        inline-block;

    transition:
        transform .18s ease;
}

#appPage .history-btn:hover::before {
    transform:
        translateX(
            120%
        );
}

#appPage .history-btn:active {
    transform:
        translateY(
            0
        ) scale(
            .985
        );

    box-shadow:
        0 5px 14px rgba(
            0,
            0,
            0,
            .13
        ) !important;
}

#appPage .history-btn:focus-visible {
    outline:
        2px solid rgba(
            116,
            205,
            221,
            .75
        );

    outline-offset:
        3px;
}

/* The Recent card no longer needs a second History CTA. */
#appPage .recent-footer,
#appPage .recent-history-link {
    display:
        none !important;
}

/* Recent rows keep their "click to open" behavior. */

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

    #appPage .history-btn,
    #appPage .history-btn::before,
    #appPage .history-btn span {
        transition:
            none !important;
    }
}

.history-modal-overlay {
    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        14px !important;
}

.history-modal-overlay
.history-modal-card {
    width:
        min(
            1560px,
            98vw
        ) !important;

    max-width:
        1560px !important;

    height:
        min(
            91vh,
            920px
        ) !important;

    max-height:
        94vh !important;

    margin:
        0 auto !important;

    border-radius:
        24px !important;
}

.history-modal-overlay
.history-modal-card
.history-table-wrap {
    height:
        calc(
            100% - 165px
        ) !important;

    max-height:
        none !important;
}

@media (max-width: 760px) {

    .history-modal-overlay {
        padding:
            8px !important;
    }

    .history-modal-overlay
    .history-modal-card {
        width:
            98vw !important;

        height:
            94vh !important;

        max-height:
            95vh !important;

        border-radius:
            18px !important;
    }
}

/* =========================================================
   DASHBOARD — SOFT LIGHT WORKSPACE
   Only #appPage/dashboard is redesigned here.
   Login / DOA Form / History are intentionally untouched.
========================================================= */

#appPage.app-page {
    color:
        #15263a !important;

    background:
        linear-gradient(
            135deg,
            #f2f5f7 0%,
            #f7f8f9 52%,
            #eef2f5 100%
        ) !important;

    overflow:
        auto !important;
}

/* Very subtle active-work ambience: soft gray-blue zones,
   no harsh white glare and no decorative diagonal lines. */
#appPage.app-page::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            520px 360px at 8% 6%,
            rgba(
                103,
                145,
                174,
                .10
            ),
            transparent 72%
        ),
        radial-gradient(
            620px 420px at 92% 88%,
            rgba(
                126,
                139,
                157,
                .09
            ),
            transparent 72%
        );

    opacity:
        1;

    z-index:
        0;
}

/* ---------------------------------------------------------
   TOP BAR
--------------------------------------------------------- */

#appPage .app-topbar {
    position:
        relative !important;

    z-index:
        20 !important;

    min-height:
        72px !important;

    height:
        72px !important;

    padding:
        0 28px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    background:
        rgba(
            255,
            255,
            255,
            .88
        ) !important;

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

    box-shadow:
        0 7px 22px rgba(
            33,
            51,
            68,
            .07
        ) !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;
}

#appPage .brand-dot {
    width:
        9px !important;

    height:
        9px !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            135deg,
            #33a8c1,
            #8a6bb1
        ) !important;

    box-shadow:
        0 0 10px rgba(
            52,
            159,
            181,
            .28
        ) !important;
}

#appPage .header-role-badge {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        20px !important;

    padding:
        0 8px !important;

    border:
        1px solid #c9d9e2 !important;

    border-radius:
        999px !important;

    background:
        #f3f8fa !important;

    color:
        #4c7a8d !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .9px !important;

    text-transform:
        uppercase !important;
}

#appPage .header-role-badge.admin-role {
    border-color:
        #bedbe2 !important;

    background:
        #eef8fa !important;

    color:
        #3b8192 !important;
}

#appPage .header-role-badge.branch-role {
    border-color:
        #d7d1e5 !important;

    background:
        #f6f3fa !important;

    color:
        #75618f !important;
}

#appPage .topbar-status {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        6px !important;

    color:
        #87939e !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .9px !important;
}

#appPage .topbar-status-dot {
    width:
        6px !important;

    height:
        6px !important;

    border-radius:
        50% !important;

    background:
        #4fc49f !important;

    box-shadow:
        0 0 8px rgba(
            79,
            196,
            159,
            .34
        ) !important;
}

#appPage .logout-btn {
    min-width:
        78px !important;

    height:
        36px !important;

    padding:
        0 13px !important;

    border:
        1px solid #d6cde0 !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            #f6f2fa,
            #f8f5fa
        ) !important;

    color:
        #4c3a5e !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 5px 14px rgba(
            52,
            36,
            70,
            .08
        ) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

#appPage .logout-btn:hover {
    transform:
        translateY(
            -1px
        );

    border-color:
        #c5b3d5 !important;

    box-shadow:
        0 8px 18px rgba(
            52,
            36,
            70,
            .11
        ) !important;
}

#appPage .logout-btn::before {
    background:
        linear-gradient(
            135deg,
            #6e88ad,
            #8f6fb1
        ) !important;
}

/* ---------------------------------------------------------
   MAIN DASHBOARD ALIGNMENT
--------------------------------------------------------- */

#appPage .dashboard {
    position:
        relative !important;

    z-index:
        2 !important;

    width:
        min(
            1060px,
            calc(100% - 56px)
        ) !important;

    margin:
        0 auto !important;

    padding:
        42px 0 62px !important;
}

#appPage .dashboard-heading {
    display:
        flex !important;

    align-items:
        flex-end !important;

    justify-content:
        space-between !important;

    gap:
        24px !important;

    margin-bottom:
        24px !important;
}

#appPage #welcomeEyebrow {
    margin:
        0 0 8px !important;

    color:
        #3f99ad !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        1.7px !important;
}

#appPage .dashboard-heading h2 {
    margin:
        0 !important;

    color:
        #1c3043 !important;

    font-size:
        clamp(
            38px,
            4.4vw,
            52px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.4px !important;
}

#appPage #dashboardWelcomeSubtitle {
    margin:
        10px 0 0 !important;

    color:
        #7b8791 !important;

    font-size:
        12px !important;

    line-height:
        1.55 !important;
}

#appPage .platform-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        16px !important;

    margin-top:
        0 !important;
}

#appPage .platform-card {
    min-height:
        96px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        14px !important;

    width:
        100% !important;

    padding:
        18px 20px !important;

    border:
        1px solid #d7e0e7 !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f8fa 100%
        ) !important;

    color:
        #1c3043 !important;

    box-shadow:
        0 11px 25px rgba(
            41,
            57,
            72,
            .075
        ) !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

/* ---------------------------------------------------------
   SUMMARY ALIGNMENT
--------------------------------------------------------- */

#appPage .dashboard-summary {
    display:
        grid !important;

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

    gap:
        14px !important;

    margin-top:
        18px !important;
}

#appPage .summary-card {
    position:
        relative !important;

    min-height:
        116px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    padding:
        16px 18px !important;

    border:
        1px solid #d9e1e7 !important;

    border-radius:
        15px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 9px 22px rgba(
            41,
            57,
            72,
            .06
        ) !important;

    overflow:
        hidden !important;
}

#appPage .summary-card::after {
    width:
        90px !important;

    height:
        90px !important;

    right:
        -34px !important;

    top:
        -35px !important;

    background:
        radial-gradient(
            circle,
            rgba(
                112,
                158,
                177,
                .08
            ),
            transparent 70%
        ) !important;
}

#appPage .summary-top {
    color:
        #74828e !important;

    font-size:
        10px !important;

    letter-spacing:
        .7px !important;
}

#appPage .summary-dot {
    color:
        #7aa3b1 !important;
}

#appPage .summary-card strong {
    margin-top:
        7px !important;

    color:
        #1b3043 !important;

    font-size:
        31px !important;

    line-height:
        1 !important;
}

#appPage .summary-card small {
    margin-top:
        8px !important;

    color:
        #8a959d !important;

    font-size:
        10px !important;
}

/* ---------------------------------------------------------
   RECENT SECTION + VIEW HISTORY
--------------------------------------------------------- */

#appPage .recent-heading {
    display:
        flex !important;

    align-items:
        flex-end !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    margin-bottom:
        12px !important;
}

#appPage .recent-heading h3 {
    margin:
        5px 0 0 !important;

    color:
        #203549 !important;

    font-size:
        24px !important;

    letter-spacing:
        -.35px !important;
}

#appPage .recent-heading p:not(.eyebrow) {
    margin:
        5px 0 0 !important;

    color:
        #8b959d !important;

    font-size:
        11px !important;
}

#appPage .history-btn {
    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    flex:
        0 0 auto !important;

    padding:
        10px 14px !important;

    border:
        1px solid #d3dde4 !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        #425b70 !important;

    box-shadow:
        0 7px 16px rgba(
            41,
            57,
            72,
            .07
        ) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background .16s ease !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;
}

/* ---------------------------------------------------------
   EACH RECENT RECORD = ITS OWN CARD
   Text is vertically centered inside the card.
--------------------------------------------------------- */

#appPage .recent-card {
    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;
}

#appPage .recent-list {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        10px !important;

    min-height:
        0 !important;
}

#appPage .recent-row {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        8px minmax(
            0,
            1fr
        ) auto !important;

    align-items:
        stretch !important;

    min-height:
        84px !important;

    padding:
        0 16px !important;

    border:
        1px solid #dbe3e9 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 8px 18px rgba(
            41,
            57,
            72,
            .055
        ) !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease !important;
}

#appPage .recent-row:hover {
    transform:
        translateY(
            -1px
        );

    border-color:
        #c8d7df !important;

    background:
        #fcfdfe !important;

    box-shadow:
        0 12px 24px rgba(
            41,
            57,
            72,
            .08
        ) !important;
}

#appPage .recent-status-dot {
    width:
        8px !important;

    height:
        8px !important;

    align-self:
        center !important;

    justify-self:
        center !important;

    border-radius:
        50% !important;

    background:
        #4da9bc !important;

    box-shadow:
        0 0 8px rgba(
            77,
            169,
            188,
            .22
        ) !important;
}

#appPage .recent-status-dot.apple {
    background:
        #b47a9a !important;

    box-shadow:
        0 0 8px rgba(
            180,
            122,
            154,
            .20
        ) !important;
}

#appPage .recent-primary strong {
    color:
        #1f3549 !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

#appPage .recent-primary span {
    padding:
        3px 7px !important;

    border:
        1px solid #d5e2e8 !important;

    border-radius:
        999px !important;

    background:
        #f4f8fa !important;

    color:
        #6b7f8d !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

#appPage .recent-secondary {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    margin-top:
        5px !important;

    color:
        #88949d !important;

    font-size:
        10px !important;

    line-height:
        1.45 !important;

    min-width:
        0 !important;
}

#appPage .recent-secondary span {
    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

#appPage .recent-secondary span + span::before {
    color:
        #c5cdd2 !important;

    margin-right:
        7px !important;
}

#appPage .recent-arrow {
    align-self:
        center !important;

    display:
        grid !important;

    place-items:
        center !important;

    width:
        29px !important;

    height:
        29px !important;

    border:
        1px solid #dde5ea !important;

    border-radius:
        9px !important;

    background:
        #f8fafb !important;

    color:
        #718491 !important;

    font-size:
        15px !important;

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

#appPage .recent-row:hover .recent-arrow {
    transform:
        translateX(
            3px
        );

    background:
        #f0f6f8 !important;

    color:
        #4c8191 !important;
}

#appPage .recent-empty {
    min-height:
        126px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-direction:
        column !important;

    gap:
        7px !important;

    border:
        1px solid #dce4e9 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    color:
        #7e8b95 !important;

    text-align:
        center !important;
}

#appPage .recent-empty-icon {
    color:
        #75a4b2 !important;

    background:
        #f1f7f9 !important;
}

/* ---------------------------------------------------------
   MOBILE ALIGNMENT
--------------------------------------------------------- */

@media (max-width: 900px) {

    #appPage .dashboard {
        width:
            min(
                94%,
                720px
            ) !important;

        padding:
            34px 0 48px !important;
    }

    #appPage .dashboard-heading {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;
    }

    #appPage .platform-grid,
    #appPage .dashboard-summary {
        grid-template-columns:
            1fr !important;
    }

    #appPage .recent-heading {
        align-items:
            flex-start !important;
    }
}

@media (max-width: 760px) {

    #appPage .app-topbar {
        min-height:
            68px !important;

        height:
            68px !important;

        padding:
            0 14px !important;
    }

    #appPage .topbar-status {
        display:
            none !important;
    }

    #appPage .brand-mini strong {
        font-size:
            16px !important;
    }

    #appPage .dashboard {
        width:
            calc(
                100% - 28px
            ) !important;

        padding:
            28px 0 44px !important;
    }

    #appPage .dashboard-heading h2 {
        font-size:
            36px !important;
    }

    #appPage .platform-card {
        min-height:
            88px !important;

        padding:
            16px !important;
    }

    #appPage .recent-row {
        min-height:
            82px !important;

        padding:
            0 13px !important;
    }
}

#appPage .recent-row {
    display:
        grid !important;

    align-items:
        stretch !important;

    box-sizing:
        border-box !important;

    min-height:
        84px !important;

    padding-top:
        0 !important;

    padding-bottom:
        0 !important;
}

#appPage .recent-status-dot {
    align-self:
        center !important;

    justify-self:
        center !important;
}

#appPage .recent-main {
    align-self:
        stretch !important;

    height:
        100% !important;

    min-height:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    padding-top:
        0 !important;

    padding-bottom:
        0 !important;
}

#appPage .recent-primary,
#appPage .recent-secondary {
    flex:
        0 0 auto !important;
}

#appPage .recent-secondary {
    align-items:
        center !important;

    min-height:
        15px !important;

    margin-top:
        5px !important;

    line-height:
        1.35 !important;
}

#appPage .recent-arrow {
    align-self:
        center !important;

    justify-self:
        center !important;
}

/* =========================================================
   QUICK ACTIONS — LIGHT WHITE HOVER
   Android / Apple cards.
========================================================= */

#appPage .platform-card {
    background:
        #ffffff !important;

    color:
        #1b2d3f !important;

    border-color:
        #d6e1e8 !important;

    box-shadow:
        0 8px 20px rgba(
            39,
            55,
            71,
            .06
        ) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease !important;
}

#appPage .platform-card:hover {
    background:
        #ffffff !important;

    transform:
        translateY(
            -2px
        ) !important;

    border-color:
        #c4d5df !important;

    box-shadow:
        0 13px 26px rgba(
            39,
            55,
            71,
            .095
        ) !important;
}

#appPage .platform-card:active {
    transform:
        translateY(
            -1px
        ) !important;
}

#appPage .platform-arrow {
    color:
        #667d8c !important;

    transition:
        transform .16s ease,
        color .16s ease !important;
}

#appPage .platform-card:hover
.platform-arrow {
    color:
        #3f7182 !important;

    transform:
        translateX(
            3px
        ) !important;
}

/* Remove any dark pseudo-overlay from the quick-action cards. */
#appPage .platform-card::before,
#appPage .platform-card::after {
    background:
        transparent !important;

    box-shadow:
        none !important;
}

/* =========================================================
   VIEW HISTORY — LIGHT WHITE HOVER
========================================================= */

#appPage .history-btn {
    background:
        #ffffff !important;

    color:
        #40596c !important;

    border-color:
        #cfdce4 !important;

    box-shadow:
        0 7px 16px rgba(
            39,
            55,
            71,
            .055
        ) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        color .16s ease !important;
}

#appPage .history-btn:hover {
    background:
        #ffffff !important;

    color:
        #335466 !important;

    transform:
        translateY(
            -2px
        ) !important;

    border-color:
        #bccfd9 !important;

    box-shadow:
        0 11px 22px rgba(
            39,
            55,
            71,
            .085
        ) !important;
}

#appPage .history-btn:active {
    transform:
        translateY(
            -1px
        ) scale(
            .99
        ) !important;
}

#appPage .history-btn span {
    transition:
        transform .16s ease !important;
}

#appPage .history-btn:hover span {
    transform:
        translateX(
            3px
        ) !important;
}

/* =========================================================
   RECENT CARDS — CLEAN WHITE SURFACE
========================================================= */

#appPage .recent-row {
    background:
        #ffffff !important;

    border:
        1px solid #d8e2e8 !important;

    box-shadow:
        0 7px 17px rgba(
            39,
            55,
            71,
            .05
        ) !important;
}

/* ---------------------------------------------------------
   FLOATING WORKSPACE HEADER
   Replaces the full-width bar with a centered premium rail.
--------------------------------------------------------- */

#appPage .app-topbar {
    position:
        relative !important;

    z-index:
        20 !important;

    width:
        min(
            1060px,
            calc(100% - 32px)
        ) !important;

    min-height:
        64px !important;

    height:
        64px !important;

    margin:
        14px auto 0 !important;

    padding:
        0 16px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border:
        1px solid #d8e2e8 !important;

    border-radius:
        15px !important;

    background:
        rgba(
            255,
            255,
            255,
            .90
        ) !important;

    box-shadow:
        0 8px 22px rgba(
            39,
            55,
            71,
            .075
        ) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}

#appPage .brand-mini {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;

    min-width:
        0 !important;
}

#appPage .brand-copy {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    gap:
        3px !important;

    min-width:
        0 !important;
}

#appPage .brand-mini strong {
    color:
        #1c2f42 !important;

    font-size:
        16px !important;

    line-height:
        1 !important;

    letter-spacing:
        -.1px !important;
}

#appPage .brand-mini span#currentBranch {
    display:
        inline-flex !important;

    align-items:
        center !important;

    margin:
        0 !important;

    color:
        #81909b !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    letter-spacing:
        .8px !important;

    text-transform:
        uppercase !important;
}

#appPage .header-role-badge {
    min-height:
        18px !important;

    padding:
        0 7px !important;

    border-radius:
        999px !important;

    font-size:
        7px !important;

    letter-spacing:
        .8px !important;
}

#appPage .topbar-status {
    font-size:
        7px !important;

    letter-spacing:
        .85px !important;
}

#appPage .logout-btn {
    min-width:
        74px !important;

    height:
        34px !important;

    padding:
        0 11px !important;

    border-radius:
        9px !important;

    font-size:
        9px !important;
}

/* ---------------------------------------------------------
   DASHBOARD / HEADER SHARED ALIGNMENT
   Header and content start from the same x-position.
--------------------------------------------------------- */

#appPage .dashboard {
    width:
        min(
            1060px,
            calc(100% - 32px)
        ) !important;

    padding:
        34px 0 62px !important;
}

/* Keep the welcome block, Quick Actions, Summary and Recent
   heading on the same vertical rhythm. */
#appPage .dashboard-heading {
    width:
        100% !important;

    margin:
        0 0 22px !important;

    padding:
        0 !important;
}

/* ---------------------------------------------------------
   LATEST DOA CARDS — STRONGER VERTICAL CENTER
--------------------------------------------------------- */

#appPage .recent-list {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        10px !important;

    width:
        100% !important;
}

#appPage .recent-row {
    min-height:
        92px !important;

    height:
        92px !important;

    padding:
        0 16px !important;

    display:
        grid !important;

    grid-template-columns:
        8px minmax(
            0,
            1fr
        ) auto !important;

    align-items:
        stretch !important;
}

#appPage .recent-main {
    height:
        100% !important;

    align-self:
        stretch !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 4px !important;
}

#appPage .recent-primary {
    height:
        21px !important;

    min-height:
        21px !important;

    display:
        flex !important;

    align-items:
        center !important;

    margin:
        0 !important;
}

#appPage .recent-secondary {
    height:
        16px !important;

    min-height:
        16px !important;

    display:
        flex !important;

    align-items:
        center !important;

    margin:
        5px 0 0 !important;

    line-height:
        16px !important;
}

#appPage .recent-status-dot,
#appPage .recent-arrow {
    align-self:
        center !important;
}

#appPage .recent-arrow {
    justify-self:
        center !important;
}

/* Make the cards feel balanced rather than top-heavy. */

#appPage .recent-primary span {
    line-height:
        16px !important;
}

/* ---------------------------------------------------------
   Recent section heading alignment.
--------------------------------------------------------- */

#appPage .recent-heading > div {
    min-width:
        0 !important;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 900px) {

    #appPage .app-topbar {
        width:
            calc(
                100% - 24px
            ) !important;

        margin:
            10px auto 0 !important;
    }

    #appPage .dashboard {
        width:
            calc(
                100% - 24px
            ) !important;

        padding-top:
            28px !important;
    }
}

@media (max-width: 760px) {

    #appPage .app-topbar {
        min-height:
            62px !important;

        height:
            62px !important;

        width:
            calc(
                100% - 18px
            ) !important;

        margin:
            9px auto 0 !important;

        padding:
            0 12px !important;

        border-radius:
            13px !important;
    }

    #appPage .topbar-status {
        display:
            none !important;
    }

    #appPage .dashboard {
        width:
            calc(
                100% - 22px
            ) !important;

        padding:
            25px 0 44px !important;
    }

    #appPage .recent-row {
        min-height:
            88px !important;

        height:
            88px !important;

        padding:
            0 13px !important;
    }

    #appPage .recent-secondary {
        white-space:
            normal !important;

        overflow:
            hidden !important;
    }
}

/* ---------------------------------------------------------
   HEADER — lock every item to one vertical center line
--------------------------------------------------------- */

#appPage .app-topbar {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

#appPage .brand-mini {
    height:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;
}

#appPage .brand-copy {
    height:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        4px !important;

    line-height:
        1 !important;
}

#appPage .brand-mini strong {
    display:
        block !important;

    margin:
        0 !important;

    line-height:
        18px !important;
}

#appPage .brand-meta {
    height:
        17px !important;

    min-height:
        17px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    margin:
        0 !important;
}

#appPage .brand-mini span#currentBranch,
#appPage .header-role-badge {
    margin:
        0 !important;

    line-height:
        16px !important;

    vertical-align:
        middle !important;
}

#appPage .topbar-actions {
    height:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        10px !important;
}

#appPage .topbar-status,
#appPage .logout-btn {
    margin:
        0 !important;

    align-self:
        center !important;
}

/* ---------------------------------------------------------
   LATEST DOA CARDS — mathematically centered content
   Absolute centering prevents line-height/padding inheritance
   from pulling the text toward the top edge.
--------------------------------------------------------- */

#appPage .recent-row {
    position:
        relative !important;

    min-height:
        92px !important;

    height:
        92px !important;

    padding:
        0 16px !important;

    display:
        block !important;

    box-sizing:
        border-box !important;
}

#appPage .recent-row .recent-main {
    position:
        absolute !important;

    left:
        28px !important;

    right:
        62px !important;

    top:
        50% !important;

    transform:
        translateY(
            -50%
        ) !important;

    width:
        auto !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;
}

#appPage .recent-row .recent-status-dot {
    position:
        absolute !important;

    left:
        13px !important;

    top:
        50% !important;

    transform:
        translateY(
            -50%
        ) !important;

    margin:
        0 !important;
}

#appPage .recent-row .recent-arrow {
    position:
        absolute !important;

    right:
        12px !important;

    top:
        50% !important;

    transform:
        translateY(
            -50%
        ) !important;

    margin:
        0 !important;
}

/* ---------------------------------------------------------
   RECENT TITLE BLOCK — same left edge as the cards
--------------------------------------------------------- */

#appPage .recent-heading {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    width:
        100% !important;

    margin:
        0 0 12px !important;

    min-height:
        46px !important;
}

#appPage .recent-heading > div {
    align-self:
        center !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;
}

#appPage .recent-heading .eyebrow,
#appPage .recent-heading h3,
#appPage .recent-heading p:not(.eyebrow) {
    margin-left:
        0 !important;

    padding-left:
        0 !important;
}

/* ---------------------------------------------------------
   QUICK ACTION CARDS — keep their contents centered
--------------------------------------------------------- */

#appPage .platform-card {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;
}

#appPage .platform-icon {
    align-self:
        center !important;
}

#appPage .platform-copy {
    align-self:
        center !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    gap:
        3px !important;
}

#appPage .platform-arrow {
    align-self:
        center !important;

    margin-left:
        auto !important;
}

/* ---------------------------------------------------------
   SUMMARY CARDS — hard vertical center
--------------------------------------------------------- */

#appPage .summary-card {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;
}

#appPage .summary-top,
#appPage .summary-card strong,
#appPage .summary-card small {
    margin-left:
        0 !important;

    transform:
        none !important;
}

/* ---------------------------------------------------------
   MOBILE — preserve the same center behavior
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .recent-row {
        height:
            88px !important;

        min-height:
            88px !important;

        padding:
            0 13px !important;
    }

    #appPage .recent-row .recent-main {
        left:
            27px !important;

        right:
            58px !important;
    }

    #appPage .recent-row .recent-status-dot {
        left:
            11px !important;
    }

    #appPage .recent-row .recent-arrow {
        right:
            10px !important;
    }
}

.history-print-btn {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

.history-print-btn:hover {
    transform:
        translateY(
            -1px
        ) !important;

    box-shadow:
        0 7px 14px rgba(
            38,
            56,
            72,
            .10
        ) !important;
}

#productField::placeholder {
    color:
        #7890a3 !important;

    opacity:
        1 !important;
}

.history-screenshot-print-btn {
    height:
        32px !important;

    min-width:
        88px !important;

    padding:
        0 9px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

    border:
        1px solid #d2dee5 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        #4e6c7c !important;

    box-shadow:
        0 4px 9px rgba(
            33,
            51,
            68,
            .055
        ) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}

.history-screenshot-print-btn:hover {
    transform:
        translateY(
            -1px
        ) !important;

    background:
        #ffffff !important;

    border-color:
        #bccfd9 !important;

    box-shadow:
        0 7px 13px rgba(
            33,
            51,
            68,
            .085
        ) !important;
}

.history-screenshot-print-btn .history-action-icon {
    font-size:
        11px !important;

    line-height:
        1 !important;
}

.history-table-fixed-action.history-admin-mode
.history-action-cell,
.history-table-fixed-action.history-admin-mode
.history-action-head,
.history-table-fixed-action.history-admin-mode
.history-action-admin {
    min-width:
        235px !important;
}

.history-table-fixed-action.history-branch-mode
.history-action-cell,
.history-table-fixed-action.history-branch-mode
.history-action-head,
.history-table-fixed-action.history-action-branch {
    min-width:
        120px !important;
}

.screenshot-preview-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        1200;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    background:
        rgba(
            31,
            43,
            54,
            .32
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.screenshot-preview-overlay[hidden] {
    display:
        none !important;
}

.screenshot-preview-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        17px 18px;

    border-bottom:
        1px solid #dde5ea;

    background:
        #ffffff;
}

.screenshot-preview-close {
    width:
        34px;

    height:
        34px;

    border:
        1px solid #d8e1e7;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #627582;

    font-size:
        20px;

    cursor:
        pointer;
}

.shot-brand-row,
.shot-main-id,
.shot-info-cell,
.shot-error-panel,
.shot-check-grid {
    border:
        1px solid #dbe4e9;

    background:
        #ffffff;
}

.shot-brand-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        12px 13px;

    border-radius:
        14px;
}

.shot-brand-mark {
    display:
        grid;

    place-items:
        center;

    width:
        35px;

    height:
        35px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #718fa0,
            #92a5b1
        );

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        900;
}

.shot-brand-block strong {
    display:
        block;

    color:
        #24384a;

    font-size:
        13px;
}

.shot-brand-block span {
    display:
        block;

    margin-top:
        4px;

    color:
        #84919b;

    font-size:
        9px;
}

.shot-platform {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    border:
        1px solid #d5e1e7;

    border-radius:
        999px;

    background:
        #f4f8fa;

    color:
        #547080;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}

.shot-main-id {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        9px;

    padding:
        13px;

    border-radius:
        14px;

    background:
        #eef4f6;
}

.shot-main-id span,
.shot-info-cell span,
.shot-error-line span,
.shot-detail-block span,
.shot-check-grid span {
    display:
        block;

    color:
        #7f8d96;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}

.shot-main-id > div:first-child strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #1c3144;

    font-size:
        28px;

    line-height:
        1;

    font-weight:
        900;
}

.shot-main-date strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #516777;

    font-size:
        11px;
}

.shot-info-cell strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #2a4052;

    font-size:
        11px;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;
}

.shot-check-grid {
    display:
        grid;

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

    gap:
        8px;

    margin-top:
        8px;

    padding:
        10px;

    border-radius:
        10px;
}

.shot-check-grid strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #2a4052;

    font-size:
        10px;

    overflow-wrap:
        anywhere;
}

.screenshot-preview-btn {
    min-width:
        80px;

    height:
        34px;

    padding:
        0 12px;

    border-radius:
        10px;

    border:
        1px solid #d6e1e7;

    background:
        #ffffff;

    color:
        #536b7a;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

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

.screenshot-preview-btn:hover {
    transform:
        translateY(
            -1px
        );

    border-color:
        #bfd0da;

    box-shadow:
        0 7px 13px rgba(
            34,
            52,
            68,
            .08
        );
}

@media (max-width: 760px) {

    .history-table-fixed-action.history-admin-mode
    .history-action-cell,
    .history-table-fixed-action.history-admin-mode
    .history-action-head,
    .history-table-fixed-action.history-admin-mode
    .history-action-admin {
        min-width:
            235px !important;
    }

    .history-table-fixed-action.history-branch-mode
    .history-action-cell,
    .history-table-fixed-action.history-branch-mode
    .history-action-head,
    .history-table-fixed-action.history-action-branch {
        min-width:
            120px !important;
    }

    .screenshot-preview-card {
        width:
            97vw;
    }

    .shot-info-grid {
        grid-template-columns:
            1fr;
    }

    .shot-info-cell.full {
        grid-column:
            auto;
    }
}

/* Real project logo inside the preview header */
.shot-real-logo {
    display:
        block;

    width:
        30px;

    height:
        30px;

    object-fit:
        contain;

    object-position:
        center;

    border-radius:
        8px;

    background:
        #ffffff;
}

/* Remove the yellow warning appearance from Error Type.
   Keep the error information visually important, but neutral. */
.shot-error-panel {
    margin-top:
        8px !important;

    padding:
        10px !important;

    border:
        1px solid #dbe4e9 !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;
}

.shot-error-line {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;
}

.shot-error-line strong {
    color:
        #324a5d !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    text-align:
        right;
}

#appPage .screenshot-preview-overlay[hidden] {
    display:
        none !important;
}

.shot-error-panel {
    background:
        #ffffff !important;

    border:
        1px solid #dbe4e9 !important;
}

.shot-error-line strong,
.shot-detail-block p {
    color:
        #324a5d !important;
}

.shot-error-line {
    padding-bottom:
        7px !important;
}

/* ---------------- Screenshot Preview ---------------- */

.screenshot-preview-head h3 {
    color:
        #20364a !important;

    font-size:
        18px !important;

    margin-top:
        4px !important;
}

.shot-brand-row {
    min-height:
        66px !important;

    padding:
        12px 13px !important;

    border:
        1px solid #d8e2e8 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 4px 11px rgba(
            34,
            52,
            68,
            .045
        );
}

.shot-brand-mark {
    width:
        38px !important;

    height:
        38px !important;

    border:
        1px solid #d7e1e7 !important;

    background:
        #fbfcfd !important;

    border-radius:
        10px !important;

    overflow:
        hidden !important;
}

.shot-main-id {
    margin-top:
        9px !important;

    min-height:
        78px;

    padding:
        14px !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            145deg,
            #edf4f7,
            #f7fafb
        ) !important;

    border:
        1px solid #d5e1e7 !important;
}

.shot-info-grid {
    margin-top:
        9px !important;

    gap:
        8px !important;
}

.shot-info-cell {
    min-height:
        58px !important;

    padding:
        10px 11px !important;

    border:
        1px solid #d9e3e8 !important;

    border-radius:
        11px !important;

    background:
        #ffffff !important;
}

/* IMPORTANT ISSUE AREA — same visual hierarchy as Print. */
.shot-issue-panel {
    margin-top:
        9px !important;

    padding:
        11px !important;

    border:
        1px solid #d6e1e7 !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 4px 11px rgba(
            34,
            52,
            68,
            .04
        ) !important;
}

.shot-issue-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        8px;

    border-bottom:
        1px solid #e5ebef;
}

.shot-section-kicker {
    display:
        block;

    color:
        #5f7d8e !important;

    font-size:
        7px !important;

    font-weight:
        900 !important;

    letter-spacing:
        1px !important;

    text-transform:
        uppercase !important;
}

.shot-error-row {
    display:
        grid;

    grid-template-columns:
        120px minmax(
            0,
            1fr
        );

    align-items:
        center;

    gap:
        10px;

    min-height:
        40px;

    padding:
        8px 0;

    border-bottom:
        1px solid #e7edf1;
}

.shot-error-row > span,
.shot-detail-block > span {
    color:
        #7e8c95 !important;

    font-size:
        7.5px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .8px !important;

    text-transform:
        uppercase !important;
}

.shot-detail-block {
    margin-top:
        9px !important;

    padding-top:
        0 !important;

    border-top:
        0 !important;
}

.shot-check-grid {
    margin-top:
        8px !important;

    padding:
        10px 11px !important;

    border:
        1px solid #dbe4e9 !important;

    border-radius:
        11px !important;

    background:
        #ffffff !important;
}

.shot-check-grid > div + div {
    border-left:
        1px solid #e4eaee !important;
}

.shot-footer {
    margin-top:
        8px !important;

    color:
        #87939b !important;

    font-size:
        7.5px !important;
}

/* ---------------- Print — same hierarchy ---------------- */

.issue-card {
    border:
        1px solid #dbe4e9;

    border-radius:
        10px;

    background:
        #ffffff;

    overflow:
        hidden;
}

.issue-card-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        9px 10px;

    border-bottom:
        1px solid #e4ebef;

    background:
        #fafcfd;
}

.issue-kicker {
    color:
        #617e8e;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}

.issue-title {
    margin-top:
        3px;

    color:
        #294053;

    font-size:
        10px;

    font-weight:
        800;
}

.issue-error-row {
    display:
        grid;

    grid-template-columns:
        110px minmax(
            0,
            1fr
        );

    align-items:
        center;

    min-height:
        42px;

    padding:
        8px 10px;

    border-bottom:
        1px solid #e7edf1;
}

.issue-error-label {
    color:
        #7e8c95;

    font-size:
        7.5px;

    font-weight:
        900;

    letter-spacing:
        .75px;

    text-transform:
        uppercase;
}

.issue-error-value {
    color:
        #2d4557;

    font-size:
        10px;

    font-weight:
        800;

    text-align:
        right;
}

.issue-detail-block {
    padding:
        9px 10px 11px;
}

.issue-detail-value {
    margin-top:
        5px;

    color:
        #4c6474;

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}

.issue-label {
    margin-top:
        15px !important;
}

.inspection-people {
    margin-top:
        9px !important;
}

@media print {

    .issue-card,
    .issue-error-row,
    .issue-detail-block,
    .meta-box,
    .field {
        break-inside:
            avoid;
    }

}

.shot-issue-panel {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    background:
        #ffffff !important;

    border:
        1px solid #d6e1e7 !important;

    border-radius:
        12px !important;

    overflow:
        hidden !important;
}

.shot-section-kicker {
    margin:
        0 !important;

    color:
        #6b8493 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    letter-spacing:
        1px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

.shot-issue-heading strong {
    display:
        block !important;

    margin:
        4px 0 0 !important;

    color:
        #294153 !important;

    font-size:
        10px !important;

    line-height:
        1.2 !important;

    text-align:
        left !important;
}

.shot-error-row > span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #7e8c95 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    letter-spacing:
        .85px !important;

    text-align:
        left !important;

    text-transform:
        uppercase !important;
}

.shot-error-row strong {
    display:
        block !important;

    margin:
        5px 0 0 !important;

    color:
        #2d4557 !important;

    font-size:
        11px !important;

    line-height:
        1.35 !important;

    font-weight:
        800 !important;

    text-align:
        left !important;
}

.shot-detail-block {
    margin:
        0 !important;

    padding:
        9px 11px 11px !important;

    border:
        0 !important;
}

.shot-detail-block > span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #7e8c95 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    letter-spacing:
        .85px !important;

    text-align:
        left !important;
}

.shot-detail-block p {
    margin:
        6px 0 0 !important;

    color:
        #4d6474 !important;

    font-size:
        10px !important;

    line-height:
        1.65 !important;

    text-align:
        left !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}

/* Shared visual language between Screenshot + Print */
.shot-error-row,
.shot-detail-block,
.issue-error-row,
.issue-detail-block {
    text-align:
        left !important;
}

/* Keep the preview itself centered and balanced. */
.screenshot-preview-card {
    width:
        min(
            700px,
            96vw
        ) !important;

    max-height:
        94vh !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    margin:
        0 auto !important;

    border-radius:
        24px !important;

    overflow:
        hidden !important;
}

/* Preview header */
.screenshot-preview-head {
    min-height:
        72px !important;

    height:
        72px !important;

    padding:
        0 20px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

.screenshot-preview-head > div {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    min-width:
        0 !important;
}

.screenshot-preview-kicker {
    margin:
        0 !important;

    font-size:
        8.5px !important;

    line-height:
        1 !important;

    letter-spacing:
        1.25px !important;
}

.screenshot-preview-head h3 {
    margin:
        5px 0 0 !important;

    font-size:
        20px !important;

    line-height:
        1 !important;

    letter-spacing:
        -.15px !important;
}

.screenshot-preview-close {
    flex:
        0 0 auto !important;

    display:
        grid !important;

    place-items:
        center !important;

    margin:
        0 !important;
}

/* Scrollable body: all cards use the same left/right inset. */
.screenshot-preview-body {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    padding:
        16px !important;

    overflow:
        auto !important;
}

/* Shared horizontal alignment for every preview section. */
.screenshot-preview-body > * {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}

/* ---------------------------------------------------------
   Brand row
--------------------------------------------------------- */

.shot-brand-row {
    min-height:
        72px !important;

    height:
        72px !important;

    padding:
        0 14px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

.shot-brand-block {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        11px !important;

    min-width:
        0 !important;
}

.shot-brand-block > div:last-child {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    min-width:
        0 !important;
}

.shot-brand-mark {
    width:
        40px !important;

    height:
        40px !important;

    flex:
        0 0 40px !important;

    display:
        grid !important;

    place-items:
        center !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}

.shot-real-logo {
    width:
        30px !important;

    height:
        30px !important;

    max-width:
        30px !important;

    max-height:
        30px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    display:
        block !important;
}

.shot-brand-block strong {
    font-size:
        14px !important;

    line-height:
        1.15 !important;

    margin:
        0 !important;
}

.shot-brand-block span {
    margin:
        4px 0 0 !important;

    font-size:
        9px !important;

    line-height:
        1.2 !important;
}

.shot-platform {
    flex:
        0 0 auto !important;

    align-self:
        center !important;

    min-height:
        27px !important;

    padding:
        0 10px !important;

    font-size:
        8.5px !important;
}

/* ---------------------------------------------------------
   DOA ID / Date hero
--------------------------------------------------------- */

.shot-main-id {
    min-height:
        90px !important;

    height:
        90px !important;

    padding:
        0 15px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

.shot-main-id > div:first-child,
.shot-main-date {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    min-width:
        0 !important;
}

.shot-main-id span {
    margin:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;
}

.shot-main-id > div:first-child strong {
    margin:
        5px 0 0 !important;

    font-size:
        31px !important;

    line-height:
        1 !important;
}

.shot-main-date strong {
    margin:
        5px 0 0 !important;

    font-size:
        11px !important;

    line-height:
        1.1 !important;
}

/* ---------------------------------------------------------
   Product / Brand / Branch / IMEI / Serial
--------------------------------------------------------- */

.shot-info-grid {
    width:
        100% !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        9px !important;

    margin:
        9px 0 0 !important;
}

.shot-info-cell {
    min-height:
        68px !important;

    padding:
        11px 12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    box-sizing:
        border-box !important;
}

.shot-info-cell.full {
    grid-column:
        1 / -1 !important;
}

.shot-info-cell span {
    margin:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .8px !important;
}

.shot-info-cell strong {
    margin:
        6px 0 0 !important;

    font-size:
        12px !important;

    line-height:
        1.35 !important;

    font-weight:
        750 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;
}

/* ---------------------------------------------------------
   Issue panel — larger and consistently left aligned.
--------------------------------------------------------- */

.shot-issue-panel {
    margin:
        9px 0 0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}

.shot-issue-heading {
    min-height:
        52px !important;

    padding:
        0 12px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    box-sizing:
        border-box !important;
}

.shot-issue-heading > div {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;
}

.shot-section-kicker {
    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        1px !important;
}

.shot-issue-heading strong {
    margin:
        4px 0 0 !important;

    font-size:
        11px !important;

    line-height:
        1.1 !important;

    text-align:
        left !important;
}

.shot-error-row {
    min-height:
        60px !important;

    padding:
        11px 12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;
}

.shot-error-row > span {
    margin:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .85px !important;

    text-align:
        left !important;
}

.shot-error-row strong {
    margin:
        6px 0 0 !important;

    font-size:
        12px !important;

    line-height:
        1.25 !important;

    text-align:
        left !important;
}

.shot-detail-block {
    min-height:
        110px !important;

    padding:
        11px 12px 13px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    box-sizing:
        border-box !important;
}

.shot-detail-block > span {
    margin:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    text-align:
        left !important;
}

.shot-detail-block p {
    width:
        100% !important;

    margin:
        7px 0 0 !important;

    font-size:
        12px !important;

    line-height:
        1.7 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        break-word !important;
}

/* ---------------------------------------------------------
   Responsible / Checked By
--------------------------------------------------------- */

.shot-check-grid {
    min-height:
        66px !important;

    padding:
        0 12px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    align-items:
        center !important;

    box-sizing:
        border-box !important;
}

.shot-check-grid > div {
    min-width:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;
}

.shot-check-grid > div + div {
    padding-left:
        12px !important;
}

.shot-check-grid span {
    margin:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;
}

.shot-check-grid strong {
    margin:
        5px 0 0 !important;

    font-size:
        11px !important;

    line-height:
        1.25 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;
}

/* Footer */
.shot-footer {
    margin:
        7px 2px 0 !important;

    padding:
        0 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    text-align:
        right !important;
}

/* Bottom action row alignment */
.screenshot-preview-actions {
    min-height:
        62px !important;

    padding:
        0 16px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        8px !important;

    box-sizing:
        border-box !important;
}

.screenshot-preview-btn {
    min-width:
        82px !important;

    height:
        36px !important;

    margin:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}

/* ---------------------------------------------------------
   Prevent the preview from becoming visually tiny on small
   screens while preserving a screenshot-friendly proportion.
--------------------------------------------------------- */

@media (max-width: 760px) {

    .screenshot-preview-card {
        width:
            96vw !important;

        max-height:
            95vh !important;
    }

    .screenshot-preview-body {
        padding:
            12px !important;
    }

    .shot-brand-row {
        min-height:
            66px !important;

        height:
            66px !important;
    }

    .shot-main-id {
        min-height:
            84px !important;

        height:
            84px !important;
    }

    .shot-main-id > div:first-child strong {
        font-size:
            28px !important;
    }

    .shot-info-cell {
        min-height:
            64px !important;
    }

    .shot-detail-block {
        min-height:
            104px !important;
    }

    .shot-detail-block p {
        font-size:
            11.5px !important;

        line-height:
            1.65 !important;
    }
}

/* Calm, neutral preview stage — no white glare. */

/* Main preview surface */

/* Header stays pure and sharp. */
.screenshot-preview-head {
    background:
        #ffffff !important;

    border-bottom:
        1px solid #d4dee5 !important;
}

.screenshot-preview-kicker {
    color:
        #4f6a7a !important;

    font-weight:
        900 !important;
}

.screenshot-preview-head h3 {
    color:
        #172d40 !important;

    font-weight:
        850 !important;

    text-rendering:
        optimizeLegibility;
}

/* Body background is a soft gray, not glowing white. */
.screenshot-preview-body {
    background:
        #eef2f4 !important;
}

/* Make every card edge crisp. */
.screenshot-preview-body
.shot-brand-row,
.screenshot-preview-body
.shot-main-id,
.screenshot-preview-body
.shot-info-cell,
.screenshot-preview-body
.shot-issue-panel,
.screenshot-preview-body
.shot-check-grid {
    border-color:
        #ccd8df !important;

    box-shadow:
        none !important;
}

/* Brand row */
.shot-brand-row {
    background:
        #ffffff !important;
}

.shot-brand-block strong {
    color:
        #172f42 !important;

    font-weight:
        850 !important;

    text-rendering:
        optimizeLegibility !important;
}

.shot-brand-block span {
    color:
        #6e7d88 !important;

    font-weight:
        600 !important;
}

/* Platform badge */
.shot-platform {
    background:
        #f7fafb !important;

    border-color:
        #cad8df !important;

    color:
        #496575 !important;

    font-weight:
        900 !important;
}

.shot-platform.apple {
    background:
        #faf7f9 !important;

    border-color:
        #decfd8 !important;

    color:
        #7b5969 !important;
}

/* DOA ID hero */
.shot-main-id {
    background:
        #e8f0f3 !important;

    border-color:
        #c7d6de !important;
}

.shot-main-id span {
    color:
        #667a87 !important;

    font-weight:
        900 !important;
}

.shot-main-id > div:first-child strong {
    color:
        #152b3e !important;

    font-weight:
        900 !important;

    text-shadow:
        none !important;
}

/* Information cards */
.shot-info-cell {
    background:
        #ffffff !important;
}

.shot-info-cell span {
    color:
        #6e7f8b !important;

    font-weight:
        900 !important;
}

.shot-info-cell strong {
    color:
        #20394c !important;

    font-weight:
        800 !important;

    text-shadow:
        none !important;
}

/* Issue section */
.shot-issue-panel {
    background:
        #ffffff !important;

    overflow:
        hidden !important;
}

.shot-issue-heading {
    background:
        #f8fafb !important;

    border-bottom:
        1px solid #dbe4e9 !important;
}

.shot-section-kicker {
    color:
        #5b7788 !important;

    font-weight:
        900 !important;
}

.shot-error-row {
    background:
        #ffffff !important;

    border-bottom:
        1px solid #e1e8ed !important;
}

.shot-error-row > span,
.shot-detail-block > span {
    color:
        #70828e !important;

    font-weight:
        900 !important;
}

/* Responsible / checked section */
.shot-check-grid {
    background:
        #ffffff !important;
}

.shot-check-grid span {
    color:
        #6f818d !important;

    font-weight:
        900 !important;
}

.shot-check-grid strong {
    color:
        #294356 !important;

    font-weight:
        800 !important;
}

/* Footer */
.shot-footer {
    color:
        #7b8993 !important;

    font-weight:
        600 !important;
}

/* Bottom controls */
.screenshot-preview-actions {
    background:
        #ffffff !important;

    border-top:
        1px solid #d6e0e6 !important;
}

.screenshot-preview-btn {
    background:
        #ffffff !important;

    border-color:
        #cbd8df !important;

    color:
        #486173 !important;

    font-weight:
        850 !important;

    box-shadow:
        none !important;
}

.screenshot-preview-btn:hover {
    background:
        #f8fafb !important;

    border-color:
        #b7c9d3 !important;

    box-shadow:
        0 4px 10px rgba(
            32,
            50,
            64,
            .07
        ) !important;
}

.screenshot-preview-btn.primary {
    background:
        #edf5f8 !important;

    border-color:
        #b8cfd9 !important;

    color:
        #3e6677 !important;
}

/* Sharper rendering where supported. */
.screenshot-preview-card,
.screenshot-preview-card * {
    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}

/* DOA ID becomes secondary information. */
.shot-main-id {
    min-height:
        62px !important;

    height:
        62px !important;

    padding:
        0 14px !important;

    background:
        #edf2f4 !important;
}

.shot-main-id > div:first-child strong {
    font-size:
        19px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.2px !important;
}

.shot-main-id span {
    font-size:
        7px !important;

    letter-spacing:
        .85px !important;
}

/* Give Issue / Error / Detail more room and visual priority. */
.shot-issue-panel {
    margin:
        10px 0 0 !important;

    border-color:
        #c8d7df !important;

    box-shadow:
        0 4px 12px rgba(
            35,
            53,
            68,
            .045
        ) !important;
}

.shot-issue-heading {
    min-height:
        56px !important;

    padding:
        0 13px !important;

    background:
        #f5f8fa !important;
}

.shot-section-kicker {
    font-size:
        8px !important;

    color:
        #527183 !important;
}

.shot-issue-heading strong {
    margin-top:
        4px !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    color:
        #1d3447 !important;
}

/* Error Type is easy to scan at a glance. */
.shot-error-row {
    min-height:
        68px !important;

    padding:
        11px 13px !important;

    background:
        #ffffff !important;
}

.shot-error-row > span {
    font-size:
        8px !important;

    color:
        #6b808d !important;
}

.shot-error-row strong {
    margin-top:
        7px !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;

    font-weight:
        850 !important;

    color:
        #1e394d !important;
}

/* Detail gets the largest readable text treatment. */
.shot-detail-block {
    min-height:
        132px !important;

    padding:
        12px 13px 15px !important;

    background:
        #ffffff !important;
}

.shot-detail-block > span {
    font-size:
        8px !important;

    color:
        #6b808d !important;
}

.shot-detail-block p {
    margin-top:
        8px !important;

    font-size:
        13px !important;

    line-height:
        1.75 !important;

    font-weight:
        700 !important;

    color:
        #2d495c !important;

    letter-spacing:
        .02px !important;

    text-align:
        left !important;
}

/* Product / identity fields become slightly calmer so the issue
   area is the first thing Finance reviewers notice. */
.shot-info-cell {
    min-height:
        64px !important;

    padding:
        10px 11px !important;
}

.shot-info-cell span {
    font-size:
        7.5px !important;
}

.shot-info-cell strong {
    font-size:
        11.5px !important;

    font-weight:
        750 !important;

    color:
        #2a4355 !important;
}

/* Responsible / Checked By remain readable but secondary. */
.shot-check-grid {
    min-height:
        62px !important;

    padding:
        0 12px !important;
}

.shot-check-grid span {
    font-size:
        7.5px !important;
}

.shot-check-grid strong {
    font-size:
        10.5px !important;

    font-weight:
        750 !important;
}

@media (max-width: 760px) {

    .shot-main-id {
        min-height:
            58px !important;

        height:
            58px !important;
    }

    .shot-main-id > div:first-child strong {
        font-size:
            18px !important;
    }

    .shot-error-row {
        min-height:
            64px !important;
    }

    .shot-error-row strong {
        font-size:
            12.5px !important;
    }

    .shot-detail-block {
        min-height:
            118px !important;
    }

    .shot-detail-block p {
        font-size:
            12px !important;

        line-height:
            1.7 !important;
    }
}

.shot-main-id {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    padding:
        0 14px !important;
}

.shot-main-id > div:first-child {
    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    align-items:
        flex-start !important;
}

.shot-main-date {
    flex:
        0 0 auto !important;

    min-width:
        118px !important;

    align-items:
        flex-end !important;

    text-align:
        right !important;
}

.shot-main-id > div:first-child strong {
    font-size:
        19px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;
}

.shot-main-date strong {
    margin-top:
        6px !important;

    font-size:
        12px !important;

    line-height:
        1.1 !important;

    font-weight:
        850 !important;

    color:
        #3b5668 !important;
}

/* Keep the two ends visually separated even when values are long. */
@media (min-width: 761px) {

    .shot-main-id {
        padding-left:
            15px !important;

        padding-right:
            15px !important;
    }
}

.history-copy-field {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        6px !important;

    max-width:
        100% !important;
}

.history-copy-btn {
    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    width:
        25px !important;

    height:
        25px !important;

    flex:
        0 0 25px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    border:
        1px solid #d7e0e7 !important;

    border-radius:
        7px !important;

    background:
        #ffffff !important;

    color:
        #597080 !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    box-shadow:
        0 2px 6px rgba(
            23,
            48,
            72,
            .05
        ) !important;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        color .14s ease,
        box-shadow .14s ease !important;
}

.history-copy-btn:hover {
    transform:
        translateY(
            -1px
        ) !important;

    border-color:
        #b9cbd7 !important;

    background:
        #f7fafb !important;

    color:
        #365d70 !important;

    box-shadow:
        0 4px 9px rgba(
            23,
            48,
            72,
            .08
        ) !important;
}

.history-copy-btn.is-copied {
    border-color:
        #b9d9d0 !important;

    background:
        #f1faf6 !important;

    color:
        #3c806b !important;
}

.history-copy-value {
    max-width:
        178px !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

.history-mono-value.history-copy-value {
    font-size:
        10px !important;

    color:
        #3d566b !important;
}

/* Keep copy controls visually subtle, not like another Action button. */
.history-imei-cell .history-copy-field,
.history-serial-cell .history-copy-field {
    vertical-align:
        middle !important;
}

@media (max-width: 760px) {

    .shot-main-date {
        min-width:
            104px !important;
    }

    .shot-main-date strong {
        font-size:
            11.5px !important;
    }

    .history-copy-value {
        max-width:
            150px !important;
    }
}

.history-copy-btn:focus-visible {
    outline:
        2px solid #9fc3d3 !important;

    outline-offset:
        2px !important;
}

:root {
    --doa-font:
        "Noto Sans Myanmar UI",
        "Noto Sans Myanmar",
        "Noto Sans",
        "Myanmar Text",
        "Segoe UI",
        Arial,
        sans-serif;
}

html,
body,
button,
input,
select,
textarea,
table,
th,
td,
#appPage,
#appPage *,
.screenshot-preview-overlay,
.screenshot-preview-overlay *,
.history-modal,
.history-modal *,
.history-edit-overlay,
.history-edit-overlay * {
    font-family:
        var(--doa-font) !important;
}

/*
 * Numeric identifiers still benefit from a monospaced face,
 * but use a stable system mono stack so IMEI / Serial remain
 * clean and easy to copy/read.
 */
.history-mono-value,
.history-edit-record-preview strong {
    font-family:
        ui-monospace,
        "SFMono-Regular",
        Menlo,
        Monaco,
        Consolas,
        monospace !important;
}

/*
 * Slightly increase weight on Burmese-readable body text
 * so thin glyphs don't wash out on the light UI.
 */
.screenshot-preview-card,
.screenshot-preview-card p,
.screenshot-preview-card span,
.screenshot-preview-card strong,
.screenshot-preview-card div,
.history-modal-card,
.history-modal-card td,
.history-modal-card th {
    text-rendering:
        optimizeLegibility !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;
}

/*
 * Preview content specifically: keep the new font crisp without
 * artificially increasing every title's size.
 */

/*
 * The normal preview text now follows the same visual scale as
 * the "DOA Management" label instead of using tiny 9–10px text.
 * Labels remain smaller so hierarchy is preserved.
 */

/* Brand */

/* DOA ID / Date */

/* Product / Brand / Branch / IMEI / Serial */

/* Error Type */

.screenshot-preview-card .shot-error-row > span,
.screenshot-preview-card .shot-detail-block > span {
    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;
}

/* Detail Error — most important normal text */

/* Responsible / Checked By */

/* Preview title */
.screenshot-preview-card .screenshot-preview-head h3 {
    font-size:
        20px !important;

    line-height:
        1.05 !important;

    font-weight:
        850 !important;
}

/* Keep platform badge readable but compact */

/* Footer remains intentionally small */
.screenshot-preview-card .shot-footer {
    font-size:
        8px !important;

    line-height:
        1 !important;
}

/* Small-screen balance */
@media (max-width: 760px) {

    .screenshot-preview-card .shot-info-cell strong {
        font-size:
            12px !important;
    }

    .screenshot-preview-card .shot-error-row strong {
        font-size:
            12.5px !important;
    }

    .screenshot-preview-card .shot-detail-block p {
        font-size:
            12.5px !important;

        line-height:
            1.7 !important;
    }

    .screenshot-preview-card .shot-check-grid strong {
        font-size:
            11px !important;
    }
}

/*
 * Scale only the logged-in application/dashboard page.
 * Login screen and modal preview typography are not globally
 * resized by this rule.
 */

/* ---- Top workspace header ---- */

#appPage .app-topbar .brand-mini span#currentBranch {
    font-size:
        10px !important;
}

/* ---- Dashboard welcome ---- */

#appPage .dashboard-heading .eyebrow {
    font-size:
        12px !important;
}

#appPage .dashboard-heading h2 {
    font-size:
        clamp(
            42px,
            4.9vw,
            58px
        ) !important;
}

#appPage .dashboard-heading
.dashboard-subtitle {
    font-size:
        14px !important;

    line-height:
        1.65 !important;
}

#appPage .dashboard-live-state {
    font-size:
        10px !important;
}

/* ---- Android / Apple quick-action cards ---- */

#appPage .platform-copy strong {
    font-size:
        21px !important;
}

#appPage .platform-copy span {
    font-size:
        12px !important;

    line-height:
        1.4 !important;
}

#appPage .platform-arrow {
    font-size:
        19px !important;
}

/* ---- Summary cards ---- */

#appPage .summary-top {
    font-size:
        12px !important;
}

#appPage .summary-card strong {
    font-size:
        37px !important;
}

#appPage .summary-card small {
    font-size:
        11.5px !important;

    line-height:
        1.45 !important;
}

/* ---- Recent heading ---- */

#appPage .recent-heading .eyebrow {
    font-size:
        11px !important;
}

#appPage .recent-heading h3 {
    font-size:
        27px !important;
}

#appPage .recent-heading p:not(.eyebrow) {
    font-size:
        12.5px !important;

    line-height:
        1.5 !important;
}

#appPage .history-btn {
    font-size:
        11px !important;
}

/* ---- Latest DOA record cards ---- */

#appPage .recent-primary strong {
    font-size:
        15px !important;

    line-height:
        1.25 !important;
}

#appPage .recent-primary span,
#appPage .recent-platform-pill {
    font-size:
        9.5px !important;

    line-height:
        1 !important;
}

#appPage .recent-secondary {
    font-size:
        12px !important;

    line-height:
        1.5 !important;
}

#appPage .recent-arrow {
    font-size:
        17px !important;
}

/* ---- Recent empty state ---- */

#appPage .recent-empty strong {
    font-size:
        15px !important;
}

#appPage .recent-empty small {
    font-size:
        11px !important;
}

/* ---- Last submission ---- */

#appPage .last-submission-main .eyebrow {
    font-size:
        9.5px !important;
}

#appPage .last-submission-main strong {
    font-size:
        14px !important;
}

#appPage .last-submission-main span {
    font-size:
        11px !important;
}

#appPage .last-submission-time span {
    font-size:
        12px !important;
}

#appPage .last-submission-time small {
    font-size:
        9px !important;
}

/* =========================================================
   History / Admin workspace fonts
   The user asked for all fonts after login, so the History
   workspace also gets the same two-step bump. Dimensions are
   left intact unless the larger text needs wrapping.
========================================================= */

#appPage .history-modal-card {
    font-size:
        1em !important;
}

#appPage .history-modal-card .history-title,
#appPage .history-modal-card h2,
#appPage .history-modal-card h3 {
    font-size:
        22px !important;
}

#appPage .history-modal-card input,
#appPage .history-modal-card select,
#appPage .history-modal-card button {
    font-size:
        11px !important;
}

#appPage .history-modal-card
.history-copy-value {
    font-size:
        11px !important;
}

#appPage .history-action-group button {
    font-size:
        10px !important;
}

/* ---- Edit / form content after login ---- */

#appPage .form-card,
#appPage .doa-form-card,
#appPage .modal-card {
    font-size:
        1em !important;
}

#appPage .form-card label,
#appPage .doa-form-card label,
#appPage .modal-card label {
    font-size:
        12px !important;
}

#appPage .form-card input,
#appPage .form-card select,
#appPage .form-card textarea,
#appPage .doa-form-card input,
#appPage .doa-form-card select,
#appPage .doa-form-card textarea,
#appPage .modal-card input,
#appPage .modal-card select,
#appPage .modal-card textarea {
    font-size:
        14px !important;

    line-height:
        1.45 !important;
}

#appPage .form-card button,
#appPage .doa-form-card button,
#appPage .modal-card button {
    font-size:
        12px !important;
}

/* ---- Toast / utility text ---- */

#appPage .toast,
#appPage .notice,
#appPage .helper-text,
#appPage .muted-text {
    font-size:
        11.5px !important;

    line-height:
        1.45 !important;
}

/* ---- Mobile: keep the larger scale usable ---- */

@media (max-width: 760px) {

    #appPage .dashboard-heading h2 {
        font-size:
            40px !important;
    }

    #appPage .platform-copy strong {
        font-size:
            19px !important;
    }

    #appPage .platform-copy span {
        font-size:
            11px !important;
    }

    #appPage .summary-card strong {
        font-size:
            34px !important;
    }

    #appPage .recent-heading h3 {
        font-size:
            24px !important;
    }

    #appPage .recent-primary strong {
        font-size:
            14px !important;
    }

    #appPage .recent-secondary {
        font-size:
            11px !important;
    }

    #appPage .history-modal-card td {
        font-size:
            11px !important;
    }

    #appPage .form-card input,
    #appPage .form-card select,
    #appPage .form-card textarea,
    #appPage .doa-form-card input,
    #appPage .doa-form-card select,
    #appPage .doa-form-card textarea,
    #appPage .modal-card input,
    #appPage .modal-card select,
    #appPage .modal-card textarea {
        font-size:
            13px !important;
    }
}

/* ---------------------------------------------------------
   DOA PREVIEW — two-step larger normal text
--------------------------------------------------------- */

.screenshot-preview-card .shot-brand-block strong {
    font-size:
        16px !important;

    line-height:
        1.2 !important;
}

.screenshot-preview-card .shot-brand-block span {
    font-size:
        10px !important;

    line-height:
        1.3 !important;
}

.screenshot-preview-card .shot-main-id > div:first-child strong {
    font-size:
        21px !important;

    line-height:
        1.08 !important;
}

.screenshot-preview-card .shot-main-date strong {
    font-size:
        14px !important;

    line-height:
        1.2 !important;
}

.screenshot-preview-card .shot-info-cell strong {
    font-size:
        14px !important;

    line-height:
        1.42 !important;

    font-weight:
        780 !important;
}

.screenshot-preview-card .shot-info-cell span {
    font-size:
        9px !important;

    line-height:
        1.08 !important;
}

.screenshot-preview-card .shot-error-row > span,
.screenshot-preview-card .shot-detail-block > span {
    font-size:
        9px !important;

    line-height:
        1 !important;
}

.screenshot-preview-card .shot-check-grid strong {
    font-size:
        13px !important;

    line-height:
        1.35 !important;

    font-weight:
        780 !important;
}

.screenshot-preview-card .shot-check-grid span {
    font-size:
        9px !important;

    line-height:
        1 !important;
}

.screenshot-preview-card .screenshot-preview-head h3 {
    font-size:
        22px !important;

    line-height:
        1.05 !important;
}

/* Keep the preview readable on smaller screens. */
@media (max-width: 760px) {

    .screenshot-preview-card .shot-main-id > div:first-child strong {
        font-size:
            20px !important;
    }

    .screenshot-preview-card .shot-main-date strong {
        font-size:
            13px !important;
    }

    .screenshot-preview-card .shot-info-cell strong {
        font-size:
            13px !important;
    }

    .screenshot-preview-card .shot-error-row strong {
        font-size:
            14px !important;
    }

    .screenshot-preview-card .shot-detail-block p {
        font-size:
            13.5px !important;

        line-height:
            1.72 !important;
    }
}

/* ---------------------------------------------------------
   HISTORY — IMEI / SERIAL / DETAILS + normal table text
--------------------------------------------------------- */

/* Main History table content */
#appPage .history-modal-card td {
    font-size:
        14px !important;

    line-height:
        1.5 !important;
}

#appPage .history-modal-card th {
    font-size:
        12px !important;

    line-height:
        1.3 !important;
}

/* IMEI / Serial values */
#appPage .history-modal-card
.history-mono-value,
#appPage .history-modal-card
.history-copy-value {
    font-size:
        13px !important;

    line-height:
        1.45 !important;

    font-weight:
        700 !important;
}

/* Error / Detail cells */
#appPage .history-modal-card
.history-error-detail,
#appPage .history-modal-card
.history-detail,
#appPage .history-modal-card
.history-error,
#appPage .history-modal-card
.history-detail-cell {
    font-size:
        14px !important;

    line-height:
        1.5 !important;

    font-weight:
        700 !important;
}

/* Responsible / Checked By and other normal row text */
#appPage .history-modal-card td span,
#appPage .history-modal-card td strong {
    font-size:
        inherit !important;

    line-height:
        inherit !important;
}

/* Search / filters / action controls stay slightly smaller than
   data values so the table remains visually organized. */
#appPage .history-modal-card input,
#appPage .history-modal-card select {
    font-size:
        13px !important;
}

#appPage .history-modal-card button {
    font-size:
        12px !important;
}

/* Copy button icon stays compact. */
#appPage .history-modal-card
.history-copy-btn {
    font-size:
        12px !important;

    line-height:
        1 !important;
}

/* Mobile fallback */
@media (max-width: 760px) {

    #appPage .history-modal-card td {
        font-size:
            13px !important;
    }

    #appPage .history-modal-card th {
        font-size:
            11px !important;
    }

    #appPage .history-modal-card
    .history-mono-value,
    #appPage .history-modal-card
    .history-copy-value {
        font-size:
            12px !important;
    }

    #appPage .history-modal-card
    .history-error-detail,
    #appPage .history-modal-card
    .history-detail,
    #appPage .history-modal-card
    .history-error,
    #appPage .history-modal-card
    .history-detail-cell {
        font-size:
            13px !important;
    }
}

/* ---------------------------------------------------------
   Android / Apple DOA Form
   Two-step larger typography without changing the layout.
--------------------------------------------------------- */

#doaModal .modal-heading h3 {
    font-size:
        24px !important;

    line-height:
        1.15 !important;

    font-weight:
        850 !important;
}

#doaModal .modal-badge {
    font-size:
        10px !important;
}

#doaModal .form-field label {
    font-size:
        13px !important;

    line-height:
        1.25 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .2px !important;
}

#doaModal .form-field input,
#doaModal .form-field select,
#doaModal .form-field textarea {
    font-size:
        14px !important;

    line-height:
        1.5 !important;

    min-height:
        49px !important;
}

#doaModal .form-field textarea {
    min-height:
        112px !important;

    line-height:
        1.6 !important;
}

#doaModal .form-field input::placeholder,
#doaModal .form-field textarea::placeholder {
    font-size:
        12px !important;

    color:
        #7e8d9b !important;
}

#doaModal .modal-actions button {
    font-size:
        13px !important;

    min-height:
        42px !important;
}

/* Android / Apple form helper / secondary text */
#doaModal .form-field small,
#doaModal .form-field .helper-text,
#doaModal .form-field .field-hint,
#doaModal .form-field .hint,
#doaModal .form-field .muted {
    font-size:
        11px !important;

    line-height:
        1.45 !important;
}

/* ---------------------------------------------------------
   History
   IMEI + Serial are important identifiers, so make them
   larger and bold. Details/errors also get one bigger step.
--------------------------------------------------------- */

#appPage .history-modal-card
.history-mono-value,
#appPage .history-modal-card
.history-copy-value {
    font-size:
        14px !important;

    line-height:
        1.5 !important;

    font-weight:
        800 !important;

    color:
        #233b4f !important;
}

#appPage .history-modal-card
.history-detail-text {
    max-width:
        360px !important;

    font-size:
        14px !important;

    line-height:
        1.55 !important;

    font-weight:
        700 !important;

    color:
        #40586a !important;
}

#appPage .history-modal-card
.history-error-chip {
    font-size:
        11px !important;

    font-weight:
        850 !important;
}

#appPage .history-modal-card
.history-main-text,
#appPage .history-modal-card
.history-product-text {
    font-size:
        13px !important;

    line-height:
        1.45 !important;

    font-weight:
        800 !important;
}

/* History headings / date are a little larger too. */
#appPage .history-modal-card
.history-id-cell strong {
    font-size:
        12px !important;
}

#appPage .history-modal-card
.history-date-cell {
    font-size:
        12px !important;

    font-weight:
        650 !important;
}

/* Keep copy controls compact while the copied value is prominent. */
#appPage .history-modal-card
.history-copy-btn {
    width:
        27px !important;

    height:
        27px !important;

    flex:
        0 0 27px !important;

    font-size:
        12px !important;
}

/* ---------------------------------------------------------
   Mobile — maintain the larger reading scale.
--------------------------------------------------------- */

@media (max-width: 760px) {

    #doaModal .modal-heading h3 {
        font-size:
            22px !important;
    }

    #doaModal .form-field label {
        font-size:
            12.5px !important;
    }

    #doaModal .form-field input,
    #doaModal .form-field select,
    #doaModal .form-field textarea {
        font-size:
            13.5px !important;
    }

    #appPage .history-modal-card
    .history-mono-value,
    #appPage .history-modal-card
    .history-copy-value {
        font-size:
            13px !important;
    }

    #appPage .history-modal-card
    .history-detail-text {
        font-size:
            13px !important;
    }
}

/*
 * History record rows only.
 * The modal/table itself keeps the existing layout; this pass
 * makes the actual data values visually consistent and bold.
 */

/* Every visible data cell in History */

/* IDs */
#appPage .history-modal-card
.history-id-cell,
#appPage .history-modal-card
.history-id-cell strong {
    font-weight:
        850 !important;

    color:
        #1c3448 !important;
}

/* Date */

/* Branch / type / brand / product */
#appPage .history-modal-card
.history-branch-cell,
#appPage .history-modal-card
.history-type-cell,
#appPage .history-modal-card
.history-brand-cell,
#appPage .history-modal-card
.history-product-cell {
    font-weight:
        800 !important;

    color:
        #294154 !important;
}

/* Platform pill and error chip also get a stronger text weight. */
#appPage .history-modal-card
.history-platform-pill,
#appPage .history-modal-card
.history-error-chip {
    font-weight:
        850 !important;
}

#appPage .history-modal-card
.history-mono-value,
#appPage .history-modal-card
.history-copy-value {
    font-weight:
        850 !important;

    font-size:
        14px !important;

    line-height:
        1.5 !important;

    color:
        #1e394d !important;
}

/* Error Detail */
#appPage .history-modal-card
.history-detail-text,
#appPage .history-modal-card
.history-error-detail,
#appPage .history-detail-cell {
    font-weight:
        800 !important;

    font-size:
        14px !important;

    line-height:
        1.5 !important;

    color:
        #3a5365 !important;
}

/* Checked By / Responsible or any ordinary row text */
#appPage .history-modal-card
.history-main-text,
#appPage .history-product-text,
#appPage .history-check-by,
#appPage .history-responsible {
    font-weight:
        800 !important;

    color:
        #294154 !important;
}

#appPage .history-modal-card tbody td span:not(.history-action-icon),
#appPage .history-modal-card tbody td strong,
#appPage .history-modal-card tbody td p {
    font-weight:
        800 !important;
}

/* Keep table headings clear but not as heavy as row data. */
#appPage .history-modal-card thead th {
    font-weight:
        750 !important;

    color:
        #607585 !important;
}

/* Search / filters / Action controls remain normal so the
   data table itself carries the emphasis. */
#appPage .history-modal-card input,
#appPage .history-modal-card select,
#appPage .history-modal-card button {
    font-weight:
        700 !important;
}

/* Copy button remains compact and icon-led. */
#appPage .history-modal-card
.history-copy-btn {
    font-weight:
        900 !important;
}

@media (max-width: 760px) {

    #appPage .history-modal-card tbody tr td {
        font-weight:
            800 !important;
    }

    #appPage .history-modal-card
    .history-mono-value,
    #appPage .history-modal-card
    .history-copy-value {
        font-size:
            13px !important;

        font-weight:
            850 !important;
    }

    #appPage .history-modal-card
    .history-detail-text,
    #appPage .history-modal-card
    .history-error-detail,
    #appPage .history-detail-cell {
        font-size:
            13px !important;

        font-weight:
            800 !important;
    }
}

/* ---------------------------------------------------------
   1) Neutral background hierarchy
   Page = soft gray
   Card = slightly brighter
   Important section = subtle cool tint
--------------------------------------------------------- */

#appPage.app-page {
    background:
        linear-gradient(
            135deg,
            #eef1f3 0%,
            #f3f5f6 48%,
            #e9edf0 100%
        ) !important;

    color:
        #22384a !important;
}

#appPage.app-page::before {
    background:
        radial-gradient(
            520px 360px at 8% 7%,
            rgba(
                105,
                132,
                148,
                .055
            ),
            transparent 72%
        ),
        radial-gradient(
            620px 430px at 92% 88%,
            rgba(
                115,
                132,
                145,
                .05
            ),
            transparent 72%
        ) !important;

    opacity:
        1 !important;
}

/* Header surface */
#appPage .app-topbar {
    background:
        rgba(
            248,
            250,
            251,
            .94
        ) !important;

    border-color:
        #d5dfe5 !important;

    box-shadow:
        0 8px 20px rgba(
            36,
            53,
            67,
            .065
        ) !important;
}

/* Main dashboard text */
#appPage .dashboard-heading h2,
#appPage .recent-heading h3 {
    color:
        #1c3347 !important;
}

#appPage .dashboard-heading .eyebrow,
#appPage .recent-heading .eyebrow {
    color:
        #4e7688 !important;
}

#appPage .dashboard-heading
.dashboard-subtitle,
#appPage .recent-heading p:not(.eyebrow) {
    color:
        #6c7f8b !important;
}

/* ---------------------------------------------------------
   2) Quick actions
--------------------------------------------------------- */

#appPage .platform-card {
    background:
        #f9fafb !important;

    border-color:
        #cedae1 !important;

    box-shadow:
        0 8px 19px rgba(
            39,
            55,
            70,
            .055
        ) !important;

    color:
        #22384a !important;
}

#appPage .platform-card:hover {
    background:
        #fcfdfe !important;

    border-color:
        #bdcdd6 !important;

    box-shadow:
        0 13px 26px rgba(
            39,
            55,
            70,
            .085
        ) !important;
}

/* ---------------------------------------------------------
   3) Summary cards
--------------------------------------------------------- */

#appPage .summary-card {
    background:
        #f8fafb !important;

    border-color:
        #d2dde3 !important;

    box-shadow:
        0 8px 18px rgba(
            39,
            55,
            70,
            .05
        ) !important;
}

#appPage .summary-card small {
    color:
        #71818c !important;
}

/* ---------------------------------------------------------
   4) Latest DOA cards
--------------------------------------------------------- */

#appPage .recent-row {
    background:
        #f9fafb !important;

    border-color:
        #cedae1 !important;

    box-shadow:
        0 7px 17px rgba(
            39,
            55,
            70,
            .05
        ) !important;
}

#appPage .recent-row:hover {
    background:
        #fcfdfe !important;

    border-color:
        #bdcdd6 !important;

    box-shadow:
        0 11px 22px rgba(
            39,
            55,
            70,
            .075
        ) !important;
}

#appPage .recent-arrow {
    background:
        #f4f7f8 !important;

    border-color:
        #d2dfe5 !important;

    color:
        #536d7e !important;
}

/* ---------------------------------------------------------
   5) View History — stronger data contrast without black
--------------------------------------------------------- */

#appPage .history-modal-card {
    background:
        #f2f5f6 !important;
}

#appPage .history-modal-card thead,
#appPage .history-modal-card thead th {
    background:
        #e9eef1 !important;
}

#appPage .history-modal-card tbody tr td {
    background:
        #f8fafb !important;

    color:
        #23394c !important;

    border-bottom-color:
        #d8e1e6 !important;

    font-weight:
        820 !important;
}

#appPage .history-modal-card tbody tr:hover td {
    background:
        #fcfdfe !important;
}

#appPage .history-modal-card
.history-id-cell,
#appPage .history-modal-card
.history-id-cell strong {
    color:
        #173249 !important;

    font-weight:
        900 !important;
}

#appPage .history-modal-card
.history-date-cell {
    color:
        #344f62 !important;

    font-weight:
        850 !important;
}

#appPage .history-modal-card
.history-branch-cell,
#appPage .history-modal-card
.history-type-cell,
#appPage .history-modal-card
.history-brand-cell,
#appPage .history-modal-card
.history-product-cell {
    color:
        #294356 !important;

    font-weight:
        850 !important;
}

/* IMEI / Serial: dark enough to read, but not black. */
#appPage .history-modal-card
.history-mono-value,
#appPage .history-modal-card
.history-copy-value {
    color:
        #17364c !important;

    font-weight:
        900 !important;

    letter-spacing:
        .05px !important;
}

/* Error Detail */
#appPage .history-modal-card
.history-detail-text,
#appPage .history-modal-card
.history-error-detail,
#appPage .history-modal-card
.history-detail-cell {
    color:
        #345063 !important;

    font-weight:
        850 !important;
}

/* ---------------------------------------------------------
   6) Issue / Error / Detail — subtle cool panel
--------------------------------------------------------- */

.screenshot-preview-card .shot-error-row {
    background:
        #f9fafb !important;

    border-bottom-color:
        #dbe4e9 !important;
}

/* ---------------------------------------------------------
   7) Generic logged-in form surfaces
--------------------------------------------------------- */

#appPage .form-card,
#appPage .doa-form-card,
#appPage .modal-card {
    background:
        #f7f9fa !important;

    border-color:
        #cedae1 !important;

    box-shadow:
        0 9px 21px rgba(
            39,
            55,
            70,
            .055
        ) !important;
}

#appPage .form-card label,
#appPage .doa-form-card label,
#appPage .modal-card label {
    color:
        #40596a !important;

    font-weight:
        850 !important;
}

#appPage .form-card input,
#appPage .form-card select,
#appPage .form-card textarea,
#appPage .doa-form-card input,
#appPage .doa-form-card select,
#appPage .doa-form-card textarea,
#appPage .modal-card input,
#appPage .modal-card select,
#appPage .modal-card textarea {
    background:
        #fbfcfd !important;

    border-color:
        #ccd8df !important;

    color:
        #1f374a !important;
}

#appPage .form-card input:focus,
#appPage .form-card select:focus,
#appPage .form-card textarea:focus,
#appPage .doa-form-card input:focus,
#appPage .doa-form-card select:focus,
#appPage .doa-form-card textarea:focus,
#appPage .modal-card input:focus,
#appPage .modal-card select:focus,
#appPage .modal-card textarea:focus {
    border-color:
        #aabfc9 !important;

    box-shadow:
        0 0 0 3px rgba(
            91,
            128,
            145,
            .08
        ) !important;
}

/* ---------------------------------------------------------
   8) Keep preview stage soft, not glaring
--------------------------------------------------------- */

.screenshot-preview-overlay {
    background:
        rgba(
            49,
            59,
            67,
            .55
        ) !important;

    backdrop-filter:
        blur(3px) !important;

    -webkit-backdrop-filter:
        blur(3px) !important;
}

#appPage .history-table-fixed-action {
    min-width:
        1680px !important;

    background:
        #f7f9fa !important;
}

#appPage .history-table-fixed-action th,
#appPage .history-table-fixed-action td {
    vertical-align:
        middle !important;

    box-sizing:
        border-box !important;
}

#appPage .history-table-fixed-action tbody tr {
    min-height:
        62px !important;
}

#appPage .history-table-fixed-action tbody td {
    padding:
        14px 14px !important;

    color:
        #263d50 !important;

    font-size:
        14px !important;

    line-height:
        1.5 !important;

    font-weight:
        800 !important;

    background:
        #f9fafb !important;

    border-bottom:
        1px solid #dbe4e9 !important;
}

#appPage .history-table-fixed-action tbody tr:hover td {
    background:
        #fcfdfe !important;
}

#appPage .history-table-fixed-action thead th {
    padding:
        11px 14px !important;

    background:
        #eaf0f3 !important;

    color:
        #607585 !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .75px !important;
}

/* ---------------------------------------------------------
   IMEI / Serial — deliberately stronger and sans-serif.
--------------------------------------------------------- */

#appPage .history-table-fixed-action
.history-imei-cell,
#appPage .history-table-fixed-action
.history-serial-cell {
    min-width:
        170px !important;

    width:
        170px !important;
}

#appPage .history-table-fixed-action
.history-mono-value,
#appPage .history-table-fixed-action
.history-copy-value {
    display:
        inline-block !important;

    max-width:
        none !important;

    overflow:
        visible !important;

    white-space:
        nowrap !important;

    text-overflow:
        clip !important;

    font-family:
        var(--doa-font) !important;

    font-variant-numeric:
        tabular-nums !important;

    font-size:
        15px !important;

    line-height:
        1.4 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .18px !important;

    color:
        #17364d !important;
}

/* The copy control stays compact beside the large value. */
#appPage .history-table-fixed-action
.history-copy-field {
    gap:
        8px !important;
}

#appPage .history-table-fixed-action
.history-copy-btn {
    width:
        29px !important;

    height:
        29px !important;

    flex:
        0 0 29px !important;

    border-radius:
        8px !important;

    font-size:
        12px !important;
}

/* ---------------------------------------------------------
   Main history data columns
--------------------------------------------------------- */

#appPage .history-table-fixed-action
.history-id-cell strong {
    font-size:
        14px !important;

    font-weight:
        900 !important;

    color:
        #18364b !important;
}

#appPage .history-table-fixed-action
.history-date-cell {
    min-width:
        125px !important;

    font-size:
        14px !important;

    font-weight:
        850 !important;

    color:
        #365165 !important;
}

#appPage .history-table-fixed-action
.history-main-text,
#appPage .history-table-fixed-action
.history-product-text {
    font-size:
        14px !important;

    line-height:
        1.45 !important;

    font-weight:
        850 !important;

    color:
        #294356 !important;
}

#appPage .history-table-fixed-action
.history-branch-chip,
#appPage .history-table-fixed-action
.history-platform-chip,
#appPage .history-table-fixed-action
.history-error-chip {
    min-height:
        29px !important;

    padding:
        0 10px !important;

    font-size:
        11px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   Error + Detail
--------------------------------------------------------- */

#appPage .history-table-fixed-action
.history-detail-cell {
    min-width:
        315px !important;

    max-width:
        420px !important;
}

#appPage .history-table-fixed-action
.history-detail-text {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    max-width:
        410px !important;

    overflow:
        hidden !important;

    white-space:
        normal !important;

    text-overflow:
        clip !important;

    font-size:
        14px !important;

    line-height:
        1.55 !important;

    font-weight:
        800 !important;

    color:
        #345165 !important;
}

#appPage .history-table-fixed-action
.history-error-cell {
    min-width:
        135px !important;

    font-size:
        13px !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   Checked By
--------------------------------------------------------- */

#appPage .history-table-fixed-action
.history-checked-cell {
    min-width:
        175px !important;
}

#appPage .history-table-fixed-action
.history-person-cell {
    gap:
        9px !important;

    color:
        #294356 !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;
}

#appPage .history-table-fixed-action
.history-person-avatar {
    width:
        31px !important;

    height:
        31px !important;

    flex:
        0 0 31px !important;

    font-size:
        11px !important;
}

/* ---------------------------------------------------------
   Sticky Action rail — same neutral background as the table.
--------------------------------------------------------- */

#appPage .history-table-fixed-action
.history-action-head,
#appPage .history-table-fixed-action
.history-action-cell {
    z-index:
        6 !important;

    background:
        #f2f5f7 !important;

    box-shadow:
        -9px 0 18px rgba(
            27,
            46,
            62,
            .055
        ) !important;
}

#appPage .history-table-fixed-action
.history-action-head {
    border-left:
        1px solid #d6e0e5 !important;
}

#appPage .history-table-fixed-action
.history-action-cell {
    border-left:
        1px solid #d6e0e5 !important;
}

#appPage .history-table-fixed-action
.history-action-group {
    min-height:
        34px !important;

    justify-content:
        center !important;
}

/* ---------------------------------------------------------
   Toolbar
--------------------------------------------------------- */

#appPage .history-toolbar input,
#appPage .history-toolbar select {
    min-height:
        44px !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;

    background:
        #f9fafb !important;

    color:
        #294356 !important;

    border-color:
        #cdd9df !important;
}

#appPage .history-toolbar input::placeholder {
    color:
        #738490 !important;

    opacity:
        1 !important;
}

/* ---------------------------------------------------------
   Empty state
--------------------------------------------------------- */

#appPage .history-empty-state strong {
    font-size:
        15px !important;

    font-weight:
        850 !important;

    color:
        #294356 !important;
}

#appPage .history-empty-state span {
    font-size:
        11px !important;

    color:
        #71828e !important;
}

/* ---------------------------------------------------------
   Edit / form readability
--------------------------------------------------------- */

#appPage .form-field label {
    color:
        #334d5f !important;

    font-weight:
        850 !important;
}

#appPage .form-field input,
#appPage .form-field select,
#appPage .form-field textarea {
    color:
        #20394c !important;

    font-weight:
        650 !important;

    background:
        #fbfcfd !important;
}

#appPage .form-field input::placeholder,
#appPage .form-field textarea::placeholder {
    color:
        #788994 !important;

    opacity:
        1 !important;
}

/* Stronger focus ring for keyboard/mouse input. */
#appPage .form-field input:focus,
#appPage .form-field select:focus,
#appPage .form-field textarea:focus,
#appPage .history-toolbar input:focus,
#appPage .history-toolbar select:focus {
    border-color:
        #a5bdc9 !important;

    box-shadow:
        0 0 0 3px rgba(
            74,
            116,
            133,
            .10
        ) !important;
}

#appPage button:focus-visible,
#appPage input:focus-visible,
#appPage select:focus-visible,
#appPage textarea:focus-visible {
    outline:
        2px solid #9dbbc8 !important;

    outline-offset:
        2px !important;
}

/* ---------------------------------------------------------
   Mobile History — preserve readability via scroll rather
   than shrinking identifiers into tiny text.
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .history-table-wrap {
        overflow-x:
            auto !important;

        -webkit-overflow-scrolling:
            touch !important;
    }

    #appPage .history-table-fixed-action {
        min-width:
            1540px !important;
    }

    #appPage .history-table-fixed-action
    tbody td {
        padding:
            13px 12px !important;

        font-size:
            13px !important;
    }

    #appPage .history-table-fixed-action
    .history-mono-value,
    #appPage .history-table-fixed-action
    .history-copy-value {
        font-size:
            14px !important;
    }

    #appPage .history-table-fixed-action
    .history-detail-text {
        font-size:
            13px !important;

        max-width:
            360px !important;
    }
}

/*
 * Root cause of the "still tiny" feeling:
 * the original History table is a wide fixed-layout surface and
 * the identifier spans started with a tiny monospace font rule.
 * This pass uses a higher-specificity rule directly on #historyModal,
 * a larger sans font, more column room, and stronger contrast.
 */

/* Give the History table enough horizontal room for readable
   identifier values instead of compressing them. */
#historyModal .history-modal-card .history-table {
    min-width:
        1760px !important;

    font-size:
        14px !important;
}

/* Dedicated IMEI + Serial columns */
#historyModal .history-modal-card
.history-table-fixed-action
.history-imei-cell,
#historyModal .history-modal-card
.history-table-fixed-action
.history-serial-cell {
    min-width:
        205px !important;

    width:
        205px !important;

    padding-left:
        16px !important;

    padding-right:
        16px !important;
}

/* Identifier text — force crisp sans-serif, not monospace. */
#historyModal .history-modal-card
.history-table-fixed-action
.history-imei-cell
.history-mono-value,

#historyModal .history-modal-card
.history-table-fixed-action
.history-serial-cell
.history-mono-value,

#historyModal .history-modal-card
.history-table-fixed-action
.history-copy-value {
    display:
        inline-block !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    width:
        auto !important;

    overflow:
        visible !important;

    white-space:
        nowrap !important;

    text-overflow:
        clip !important;

    font-family:
        var(--doa-font) !important;

    font-size:
        17px !important;

    line-height:
        1.35 !important;

    font-weight:
        900 !important;

    font-variant-numeric:
        tabular-nums !important;

    letter-spacing:
        .15px !important;

    color:
        #102f47 !important;

    text-rendering:
        optimizeLegibility !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;
}

/* Copy + value sit on one clean baseline. */
#historyModal .history-modal-card
.history-copy-field {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        9px !important;

    min-height:
        31px !important;
}

/* Copy icon doesn't compete with the number. */
#historyModal .history-modal-card
.history-copy-btn {
    width:
        29px !important;

    height:
        29px !important;

    flex:
        0 0 29px !important;

    border-radius:
        8px !important;

    background:
        #f8fbfc !important;

    border-color:
        #cbd9e1 !important;

    color:
        #45697b !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;
}

/* Date is also pulled out of the "tiny text" range. */
#historyModal .history-modal-card
.history-date-cell {
    min-width:
        135px !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;

    color:
        #29475b !important;
}

/* Detail text keeps a readable line height. */
#historyModal .history-modal-card
.history-detail-cell {
    min-width:
        320px !important;

    max-width:
        430px !important;

    padding-left:
        16px !important;

    padding-right:
        16px !important;
}

#historyModal .history-modal-card
.history-detail-text {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    overflow:
        hidden !important;

    max-width:
        400px !important;

    white-space:
        normal !important;

    font-size:
        14px !important;

    line-height:
        1.55 !important;

    font-weight:
        800 !important;

    color:
        #315267 !important;
}

/* Keep all row data balanced against the stronger identifiers. */
#historyModal .history-modal-card
.history-table-fixed-action
tbody td {
    font-size:
        14px !important;

    line-height:
        1.45 !important;
}

/* IDs remain prominent but not louder than IMEI. */
#historyModal .history-modal-card
.history-id-cell strong {
    font-size:
        15px !important;

    font-weight:
        900 !important;
}

/* Mobile: preserve readable IMEI/Serial, scroll instead of shrinking. */
@media (max-width: 760px) {

    #historyModal .history-modal-card
    .history-table {
        min-width:
            1680px !important;
    }

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-imei-cell,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-serial-cell {
        min-width:
            190px !important;

        width:
            190px !important;
    }

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-imei-cell
    .history-mono-value,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-serial-cell
    .history-mono-value,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-copy-value {
        font-size:
            15px !important;
    }
}

/*
 * IMEI / Serial are readable now, but 17px is visually larger
 * than the rest of the row. Normalize them to the same data scale
 * used by Product / Brand / Branch / Date.
 */

/* Admin + Branch: same font treatment */
#historyModal .history-modal-card
.history-table-fixed-action
.history-imei-cell
.history-mono-value,

#historyModal .history-modal-card
.history-table-fixed-action
.history-serial-cell
.history-mono-value,

#historyModal .history-modal-card
.history-table-fixed-action
.history-copy-value {
    font-family:
        var(--doa-font) !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;

    font-variant-numeric:
        tabular-nums !important;

    letter-spacing:
        .08px !important;

    color:
        #234257 !important;

    text-rendering:
        optimizeLegibility !important;
}

/* Keep the copy button aligned with the normalized value. */
#historyModal .history-modal-card
.history-copy-field {
    min-height:
        30px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        8px !important;
}

/* Do not let the identifier column become visually dominant. */
#historyModal .history-modal-card
.history-table-fixed-action
.history-imei-cell,

#historyModal .history-modal-card
.history-table-fixed-action
.history-serial-cell {
    min-width:
        185px !important;

    width:
        185px !important;
}

/* Date + normal row values share the same visual scale. */
#historyModal .history-modal-card
.history-table-fixed-action
.history-date-cell,

#historyModal .history-modal-card
.history-table-fixed-action
.history-main-text,

#historyModal .history-modal-card
.history-table-fixed-action
.history-product-text {
    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;
}

/* IDs remain one notch stronger, but not oversized. */
#historyModal .history-modal-card
.history-table-fixed-action
.history-id-cell strong {
    font-size:
        14px !important;

    line-height:
        1.35 !important;

    font-weight:
        900 !important;
}

/* Copy control stays compact. */
#historyModal .history-modal-card
.history-copy-btn {
    width:
        28px !important;

    height:
        28px !important;

    flex:
        0 0 28px !important;

    font-size:
        12px !important;
}

/* Mobile uses the same ratio, just one small step down. */
@media (max-width: 760px) {

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-imei-cell
    .history-mono-value,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-serial-cell
    .history-mono-value,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-copy-value {
        font-size:
            13px !important;
    }

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-imei-cell,

    #historyModal .history-modal-card
    .history-table-fixed-action
    .history-serial-cell {
        min-width:
            175px !important;

        width:
            175px !important;
    }
}

/* Branch */
#historyModal .history-modal-card
.history-branch-chip {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        30px !important;

    height:
        30px !important;

    padding:
        0 10px !important;

    border-radius:
        8px !important;

    background:
        linear-gradient(
            180deg,
            #fafcfd 0%,
            #f1f5f7 100%
        ) !important;

    border:
        1px solid #d1dde4 !important;

    color:
        #425c6e !important;

    font-size:
        10px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    box-shadow:
        0 3px 8px rgba(
            15,
            46,
            76,
            .045
        ) !important;

    transition:
        transform .14s ease,
        box-shadow .14s ease,
        border-color .14s ease !important;
}

#historyModal .history-modal-card
.history-branch-chip:hover {
    transform:
        translateY(
            -1px
        ) !important;

    border-color:
        #bccdd7 !important;

    box-shadow:
        0 5px 10px rgba(
            15,
            46,
            76,
            .07
        ) !important;
}

/* Type / Platform */
#historyModal .history-modal-card
.history-platform-chip {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        30px !important;

    height:
        30px !important;

    padding:
        0 10px !important;

    border-radius:
        8px !important;

    font-size:
        10px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    box-shadow:
        0 3px 8px rgba(
            15,
            46,
            76,
            .035
        ) !important;

    transition:
        transform .14s ease,
        box-shadow .14s ease !important;
}

#historyModal .history-modal-card
.history-platform-chip:hover {
    transform:
        translateY(
            -1px
        ) !important;

    box-shadow:
        0 5px 10px rgba(
            15,
            46,
            76,
            .06
        ) !important;
}

/* Preserve the existing Android / Apple color identity. */
#historyModal .history-modal-card
.history-platform-chip.android {
    background:
        linear-gradient(
            180deg,
            #f2faf7 0%,
            #eaf7f2 100%
        ) !important;

    border:
        1px solid #c8e6db !important;

    color:
        #2d7c68 !important;
}

#historyModal .history-modal-card
.history-platform-chip.apple {
    background:
        linear-gradient(
            180deg,
            #fbf4f8 0%,
            #f8edf3 100%
        ) !important;

    border:
        1px solid #ead3df !important;

    color:
        #96516f !important;
}

/* =========================================================
   Screenshot Preview — Apple / Android use the same compact
   rectangular card language.
========================================================= */

.screenshot-preview-card
.shot-platform {
    min-height:
        30px !important;

    height:
        30px !important;

    padding:
        0 10px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        8px !important;

    background:
        linear-gradient(
            180deg,
            #fafcfd 0%,
            #f1f5f7 100%
        ) !important;

    border:
        1px solid #d1dde4 !important;

    color:
        #425c6e !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .55px !important;

    box-shadow:
        0 3px 8px rgba(
            15,
            46,
            76,
            .045
        ) !important;
}

.screenshot-preview-card
.shot-platform.android {
    background:
        linear-gradient(
            180deg,
            #f2faf7 0%,
            #eaf7f2 100%
        ) !important;

    border-color:
        #c8e6db !important;

    color:
        #2d7c68 !important;
}

.screenshot-preview-card
.shot-platform.apple {
    background:
        linear-gradient(
            180deg,
            #fbf4f8 0%,
            #f8edf3 100%
        ) !important;

    border-color:
        #ead3df !important;

    color:
        #96516f !important;
}

/* =========================================================
   Print — use the exact same compact platform card language.
========================================================= */

.platform-badge {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        30px !important;

    height:
        30px !important;

    padding:
        0 10px !important;

    border-radius:
        8px !important;

    background:
        linear-gradient(
            180deg,
            #fafcfd 0%,
            #f1f5f7 100%
        ) !important;

    border:
        1px solid #d1dde4 !important;

    color:
        #425c6e !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .55px !important;

    text-transform:
        uppercase !important;

    box-shadow:
        0 3px 8px rgba(
            15,
            46,
            76,
            .04
        ) !important;
}

.platform-badge.android {
    background:
        linear-gradient(
            180deg,
            #f2faf7 0%,
            #eaf7f2 100%
        ) !important;

    border-color:
        #c8e6db !important;

    color:
        #2d7c68 !important;
}

.platform-badge.apple {
    background:
        linear-gradient(
            180deg,
            #fbf4f8 0%,
            #f8edf3 100%
        ) !important;

    border-color:
        #ead3df !important;

    color:
        #96516f !important;
}

/* Mobile keeps the cards compact rather than returning to pills. */
@media (max-width: 760px) {

    #historyModal .history-modal-card
    .history-branch-chip,

    #historyModal .history-modal-card
    .history-platform-chip,

    .screenshot-preview-card
    .shot-platform {
        min-height:
            28px !important;

        height:
            28px !important;

        padding:
            0 9px !important;

        font-size:
            9px !important;
    }
}

/* ---------------------------------------------------------
   1) Unified compact-card language
--------------------------------------------------------- */

#historyModal .history-branch-chip,
#historyModal .history-platform-chip,
#historyModal .history-error-chip,
#historyModal .history-action-group button,
.screenshot-preview-card .shot-platform {
    border-radius:
        8px !important;

    box-shadow:
        0 3px 8px rgba(
            18,
            43,
            61,
            .045
        ) !important;
}

#historyModal .history-branch-chip,
#historyModal .history-platform-chip,
#historyModal .history-error-chip,
.screenshot-preview-card .shot-platform {
    min-height:
        30px !important;

    height:
        30px !important;

    padding:
        0 10px !important;
}

#historyModal .history-error-chip {
    background:
        linear-gradient(
            180deg,
            #fffaf2 0%,
            #fff5e8 100%
        ) !important;

    border:
        1px solid #efd9ad !important;

    color:
        #8f621f !important;

    font-weight:
        900 !important;
}

#historyModal .history-table-wrap {
    border-color:
        #d6e0e6 !important;

    background:
        #f5f8fa !important;

    box-shadow:
        0 8px 20px rgba(
            18,
            43,
            61,
            .05
        ) !important;
}

#historyModal .history-table-fixed-action
.history-action-head,
#historyModal .history-table-fixed-action
.history-action-cell {
    background:
        #eef3f5 !important;

    border-left:
        1px solid #d4dfe5 !important;

    box-shadow:
        -10px 0 20px rgba(
            18,
            43,
            61,
            .05
        ) !important;
}

/* ---------------------------------------------------------
   3) Search / filters
--------------------------------------------------------- */

#historyModal .history-toolbar input,
#historyModal .history-toolbar select {
    background:
        #f9fbfc !important;

    color:
        #294356 !important;

    border-color:
        #cdd9df !important;

    font-weight:
        700 !important;
}

#historyModal .history-toolbar input::placeholder {
    color:
        #778893 !important;

    opacity:
        1 !important;
}

/* ---------------------------------------------------------
   4) Preview consistency
--------------------------------------------------------- */

.screenshot-preview-card .shot-info-cell,
.screenshot-preview-card .shot-check-grid {
    background:
        #f9fbfc !important;

    border-color:
        #cdd9df !important;
}

.screenshot-preview-card .shot-error-row,
.screenshot-preview-card .shot-detail-block {
    background:
        #fbfcfd !important;
}

/* ---------------------------------------------------------
   5) Form polish — clear states
--------------------------------------------------------- */

#doaModal .form-field input,
#doaModal .form-field select,
#doaModal .form-field textarea {
    background:
        #fbfcfd !important;

    border-color:
        #cbd8df !important;

    color:
        #213a4d !important;

    font-weight:
        650 !important;
}

#doaModal .form-field input.field-complete,
#doaModal .form-field select.field-complete,
#doaModal .form-field textarea.field-complete {
    background:
        #f4faf8 !important;

    border-color:
        #b9d9cf !important;
}

#doaModal .form-field input.field-invalid,
#doaModal .form-field select.field-invalid,
#doaModal .form-field textarea.field-invalid {
    background:
        #fff9f9 !important;

    border-color:
        #e2b9bd !important;

    box-shadow:
        0 0 0 3px rgba(
            177,
            64,
            77,
            .07
        ) !important;
}

#doaModal .form-field input.field-needs-input,
#doaModal .form-field select.field-needs-input,
#doaModal .form-field textarea.field-needs-input {
    background:
        #fbfaf5 !important;

    border-color:
        #dfd2a6 !important;
}

/* ---------------------------------------------------------
   6) Dashboard consistency
--------------------------------------------------------- */

#appPage .platform-card,
#appPage .summary-card,
#appPage .recent-row {
    border-color:
        #ccd8df !important;

    background:
        #f8fafb !important;
}

/* ---------------------------------------------------------
   7) Focus accessibility
--------------------------------------------------------- */

#historyModal button:focus-visible,
#historyModal input:focus-visible,
#historyModal select:focus-visible,
.screenshot-preview-card button:focus-visible,
#doaModal button:focus-visible,
#doaModal input:focus-visible,
#doaModal select:focus-visible,
#doaModal textarea:focus-visible {
    outline:
        2px solid #8fb6c5 !important;

    outline-offset:
        2px !important;
}

/* ---------------------------------------------------------
   8) Mobile: never shrink identifiers just to fit
--------------------------------------------------------- */

@media (max-width: 760px) {

    #historyModal .history-table-fixed-action
    .history-action-group button {
        min-width:
            62px !important;
    }

    #historyModal .history-table-fixed-action
    .history-branch-chip,
    #historyModal .history-table-fixed-action
    .history-platform-chip,
    #historyModal .history-table-fixed-action
    .history-error-chip {
        min-height:
            28px !important;

        height:
            28px !important;

        padding:
            0 9px !important;

        font-size:
            9px !important;
    }

    .screenshot-preview-card {
        width:
            96vw !important;
    }
}

/*
 * The cards were already vertically centered, but the two
 * content lines were too close together and the content block
 * did not feel anchored to the card's own vertical center.
 *
 * This pass gives the card a deliberate two-line rhythm:
 * primary row -> breathing space -> secondary row,
 * while keeping the whole block centered.
 */

/* Slightly more breathing room inside each record card. */

/* The full two-line record block is centered as one unit. */
#appPage .recent-row .recent-main {
    top:
        50% !important;

    left:
        29px !important;

    right:
        64px !important;

    transform:
        translateY(
            -50%
        ) !important;

    height:
        auto !important;

    min-height:
        48px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        8px !important;
}

/* First line: ID + platform badge */
#appPage .recent-row .recent-primary {
    width:
        100% !important;

    height:
        22px !important;

    min-height:
        22px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    line-height:
        1 !important;
}

#appPage .recent-row .recent-primary strong {
    margin:
        0 !important;

    font-size:
        15px !important;

    line-height:
        22px !important;

    font-weight:
        900 !important;

    color:
        #1c3549 !important;

    white-space:
        nowrap !important;
}

/* Platform badge sits exactly on the ID baseline. */
#appPage .recent-row .recent-primary span {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    height:
        20px !important;

    min-height:
        20px !important;

    padding:
        0 7px !important;

    margin:
        0 !important;

    border-radius:
        7px !important;

    line-height:
        1 !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .45px !important;

    white-space:
        nowrap !important;
}

/* Second line: Product / Branch / Error */
#appPage .recent-row .recent-secondary {
    width:
        100% !important;

    height:
        18px !important;

    min-height:
        18px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        0 !important;

    color:
        #526d7d !important;

    font-size:
        11.5px !important;

    line-height:
        18px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

#appPage .recent-row .recent-secondary span {
    display:
        inline-block !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;

    line-height:
        18px !important;
}

/* Keep the separators subtle and perfectly centered. */
#appPage .recent-row .recent-secondary span + span::before {
    content:
        "•" !important;

    display:
        inline-block !important;

    margin:
        0 9px !important;

    color:
        #9aaab4 !important;

    font-weight:
        800 !important;
}

/* Dot aligns to the middle of the complete card content. */
#appPage .recent-row .recent-status-dot {
    top:
        50% !important;

    left:
        13px !important;

    transform:
        translateY(
            -50%
        ) !important;
}

/* Arrow aligns to the exact same vertical center. */
#appPage .recent-row .recent-arrow {
    top:
        50% !important;

    right:
        12px !important;

    transform:
        translateY(
            -50%
        ) !important;

    margin:
        0 !important;
}

/* Hover keeps the arrow centered while moving only horizontally. */
#appPage .recent-row:hover .recent-arrow {
    transform:
        translate(
            3px,
            -50%
        ) !important;
}

/* ---------------------------------------------------------
   Mobile: same rhythm, slightly tighter footprint.
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .recent-row {
        min-height:
            90px !important;

        height:
            90px !important;

        padding:
            0 13px !important;
    }

    #appPage .recent-row .recent-main {
        left:
            27px !important;

        right:
            59px !important;

        min-height:
            46px !important;

        gap:
            7px !important;
    }

    #appPage .recent-row .recent-primary strong {
        font-size:
            14px !important;

        line-height:
            21px !important;
    }

    #appPage .recent-row .recent-secondary {
        font-size:
            11px !important;

        line-height:
            17px !important;

        height:
            17px !important;

        min-height:
            17px !important;
    }

    #appPage .recent-row .recent-secondary span + span::before {
        margin:
            0 7px !important;
    }
}

.screenshot-preview-card .shot-issue-heading > div {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;
}

.screenshot-preview-card .shot-issue-heading strong {
    margin:
        0 !important;

    font-size:
        13px !important;

    line-height:
        1.15 !important;

    font-weight:
        850 !important;

    color:
        #20394c !important;

    text-align:
        left !important;
}

/* Print no longer needs a separate Issue label. */
@media print {

    .issue-card {
        margin-top:
            0;
    }

}

/* ---------------------------------------------------------
   DESIGN TOKENS
--------------------------------------------------------- */

:root {
    --doa-bg:
        #eef2f4;

    --doa-surface:
        #f8fafb;

    --doa-surface-strong:
        #ffffff;

    --doa-surface-soft:
        #edf3f5;

    --doa-border:
        #cfdbe2;

    --doa-border-soft:
        #dbe4e9;

    --doa-text:
        #20384b;

    --doa-text-strong:
        #183247;

    --doa-text-muted:
        #6d7f8b;

    --doa-primary:
        #4f7384;

    --doa-primary-soft:
        #eff6f8;

    --doa-success:
        #327d69;

    --doa-success-soft:
        #eef8f4;

    --doa-warning:
        #906621;

    --doa-warning-soft:
        #fff8ec;

    --doa-danger:
        #a15560;

    --doa-danger-soft:
        #fff4f5;

    --doa-radius-sm:
        8px;

    --doa-radius-md:
        10px;

    --doa-radius-lg:
        14px;

    --doa-shadow-sm:
        0 4px 10px rgba(
            20,
            42,
            58,
            .055
        );

    --doa-shadow-md:
        0 10px 24px rgba(
            20,
            42,
            58,
            .075
        );
}

/* ---------------------------------------------------------
   GLOBAL LOGICAL CONSISTENCY
--------------------------------------------------------- */

#appPage *,
#historyModal *,
#doaModal *,
.screenshot-preview-card * {
    box-sizing:
        border-box !important;
}

/* Keep the entire logged-in workspace visually quiet and crisp. */
#appPage,
#historyModal,
#doaModal,
.screenshot-preview-overlay {
    color:
        var(--doa-text) !important;
}

/* ---------------------------------------------------------
   DASHBOARD / WORKSPACE
--------------------------------------------------------- */

#appPage .platform-card,
#appPage .summary-card,
#appPage .recent-row {
    border-radius:
        var(--doa-radius-lg) !important;

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

    box-shadow:
        var(--doa-shadow-sm) !important;
}

#appPage .platform-card:hover,
#appPage .recent-row:hover {
    border-color:
        #b9ccd6 !important;

    box-shadow:
        var(--doa-shadow-md) !important;

    transform:
        translateY(
            -1px
        ) !important;
}

#appPage .summary-card {
    background:
        var(--doa-surface) !important;
}

/* Platform copy hierarchy */
#appPage .platform-copy strong {
    color:
        var(--doa-text-strong) !important;

    font-weight:
        850 !important;
}

#appPage .platform-copy span {
    color:
        var(--doa-text-muted) !important;
}

/* Summary hierarchy */
#appPage .summary-top {
    color:
        var(--doa-text-muted) !important;

    font-weight:
        850 !important;
}

#appPage .summary-card strong {
    color:
        var(--doa-text-strong) !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   LATEST RECORDS — centered two-line rhythm
--------------------------------------------------------- */

#appPage .recent-row {
    background:
        var(--doa-surface) !important;
}

#appPage .recent-main {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        8px !important;
}

#appPage .recent-primary {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;
}

#appPage .recent-primary strong {
    color:
        var(--doa-text-strong) !important;

    font-weight:
        900 !important;
}

#appPage .recent-secondary {
    color:
        #546e7e !important;

    font-weight:
        700 !important;
}

/* ---------------------------------------------------------
   COMPACT CARD LANGUAGE — History + Preview
--------------------------------------------------------- */

#historyModal .history-branch-chip,
#historyModal .history-platform-chip,
#historyModal .history-error-chip,
#historyModal .history-action-group button,
.screenshot-preview-card .shot-platform {
    border-radius:
        var(--doa-radius-sm) !important;

    border-width:
        1px !important;

    box-shadow:
        0 3px 8px rgba(
            18,
            43,
            61,
            .045
        ) !important;
}

/* Branch */
#historyModal .history-branch-chip {
    background:
        linear-gradient(
            180deg,
            #fafcfd 0%,
            #f1f5f7 100%
        ) !important;

    border-color:
        #cfdce3 !important;

    color:
        #425d6f !important;

    font-weight:
        900 !important;
}

/* Platform */
#historyModal .history-platform-chip.android,
.screenshot-preview-card .shot-platform.android {
    background:
        linear-gradient(
            180deg,
            #f1faf6 0%,
            #eaf7f2 100%
        ) !important;

    border-color:
        #c6e4d9 !important;

    color:
        var(--doa-success) !important;
}

#historyModal .history-platform-chip.apple,
.screenshot-preview-card .shot-platform.apple {
    background:
        linear-gradient(
            180deg,
            #fbf4f8 0%,
            #f8edf3 100%
        ) !important;

    border-color:
        #e8d0dc !important;

    color:
        #92536e !important;
}

/* Error — soft, not fluorescent */
#historyModal .history-error-chip {
    background:
        var(--doa-warning-soft) !important;

    border-color:
        #e8d4ad !important;

    color:
        var(--doa-warning) !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   HISTORY — clean work-tool feel
--------------------------------------------------------- */

#historyModal .history-modal-card {
    background:
        #f1f4f6 !important;

    border-color:
        #cbd7de !important;

    box-shadow:
        0 18px 42px rgba(
            24,
            43,
            58,
            .12
        ) !important;
}

#historyModal .history-toolbar input,
#historyModal .history-toolbar select {
    border-radius:
        10px !important;

    background:
        #fbfcfd !important;

    border-color:
        #cbd8df !important;

    color:
        var(--doa-text) !important;

    box-shadow:
        0 3px 8px rgba(
            18,
            43,
            61,
            .035
        ) !important;
}

#historyModal .history-toolbar input:focus,
#historyModal .history-toolbar select:focus {
    border-color:
        #a9c0cb !important;

    box-shadow:
        0 0 0 3px rgba(
            79,
            115,
            132,
            .09
        ) !important;
}

#historyModal .history-table-wrap {
    border:
        1px solid #d0dce3 !important;

    border-radius:
        12px !important;

    overflow:
        hidden !important;

    background:
        #f7f9fa !important;

    box-shadow:
        var(--doa-shadow-sm) !important;
}

#historyModal .history-table-fixed-action thead th {
    background:
        #e9eef1 !important;

    color:
        #657984 !important;

    font-weight:
        850 !important;
}

#historyModal .history-table-fixed-action tbody tr td {
    background:
        #f9fbfc !important;

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

    color:
        #284255 !important;
}

#historyModal .history-table-fixed-action tbody tr:hover td {
    background:
        #fdfefe !important;
}

/* Strong identifiers, but no longer oversized. */
#historyModal .history-table-fixed-action
.history-id-cell strong,
#historyModal .history-table-fixed-action
.history-mono-value,
#historyModal .history-table-fixed-action
.history-copy-value {
    color:
        #17374d !important;

    font-weight:
        850 !important;
}

/* Detail text */
#historyModal .history-table-fixed-action
.history-detail-text {
    color:
        #3b5668 !important;

    font-weight:
        750 !important;

    line-height:
        1.55 !important;
}

/* Copy button */
#historyModal .history-table-fixed-action
.history-copy-btn {
    border-radius:
        8px !important;

    background:
        #f7fafb !important;

    border-color:
        #cbd9e1 !important;

    color:
        #4c7182 !important;
}

#historyModal .history-table-fixed-action
.history-copy-btn.is-copied {
    background:
        var(--doa-success-soft) !important;

    border-color:
        #b7d9cd !important;

    color:
        var(--doa-success) !important;
}

/* Sticky Action rail */
#historyModal .history-table-fixed-action
.history-action-head,
#historyModal .history-table-fixed-action
.history-action-cell {
    background:
        #eef3f5 !important;

    border-left:
        1px solid #d4dfe5 !important;

    box-shadow:
        -10px 0 20px rgba(
            18,
            43,
            61,
            .05
        ) !important;
}

#historyModal .history-action-group {
    gap:
        6px !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}

#historyModal .history-action-group button {
    min-height:
        32px !important;

    border:
        1px solid #cbd8df !important;

    background:
        #ffffff !important;

    font-weight:
        850 !important;

    transition:
        transform .14s ease,
        box-shadow .14s ease,
        border-color .14s ease !important;
}

#historyModal .history-action-group button:hover {
    transform:
        translateY(
            -1px
        ) !important;

    box-shadow:
        var(--doa-shadow-sm) !important;
}

/* Action states */
#historyModal .history-screenshot-print-btn {
    color:
        #4a6c7e !important;
}

#historyModal .history-edit-btn {
    color:
        #625887 !important;
}

#historyModal .history-delete-btn {
    background:
        #fff8f9 !important;

    border-color:
        #e5bec3 !important;

    color:
        var(--doa-danger) !important;
}

/* ---------------------------------------------------------
   FORM — professional input states
--------------------------------------------------------- */

#doaModal .modal-card {
    background:
        #f5f8f9 !important;

    border:
        1px solid #cbd8df !important;

    box-shadow:
        0 22px 56px rgba(
            23,
            41,
            55,
            .18
        ) !important;
}

#doaModal .form-field label {
    color:
        #3a5567 !important;

    font-weight:
        850 !important;
}

#doaModal .form-field input,
#doaModal .form-field select,
#doaModal .form-field textarea {
    background:
        #fbfcfd !important;

    border-color:
        #cbd8df !important;

    color:
        #203a4d !important;

    border-radius:
        10px !important;
}

#doaModal .form-field input:focus,
#doaModal .form-field select:focus,
#doaModal .form-field textarea:focus {
    border-color:
        #a3bcc8 !important;

    box-shadow:
        0 0 0 3px rgba(
            74,
            112,
            129,
            .10
        ) !important;
}

#doaModal .form-field
input.field-complete,
#doaModal .form-field
select.field-complete,
#doaModal .form-field
textarea.field-complete {
    background:
        #f3faf7 !important;

    border-color:
        #b7d8cd !important;
}

#doaModal .form-field
input.field-invalid,
#doaModal .form-field
select.field-invalid,
#doaModal .form-field
textarea.field-invalid {
    background:
        var(--doa-danger-soft) !important;

    border-color:
        #dfb5bb !important;
}

#doaModal .form-field
input.field-needs-input,
#doaModal .form-field
select.field-needs-input,
#doaModal .form-field
textarea.field-needs-input {
    background:
        #fbfaf5 !important;

    border-color:
        #ddcfaa !important;
}

/* Submit / Cancel hierarchy */
#doaModal .modal-actions .submit-btn {
    box-shadow:
        0 9px 19px rgba(
            31,
            62,
            89,
            .14
        ) !important;
}

#doaModal .modal-actions .submit-btn:hover {
    transform:
        translateY(
            -1px
        ) !important;
}

/* ---------------------------------------------------------
   PREVIEW — keep Finance-first hierarchy
--------------------------------------------------------- */

.screenshot-preview-card {
    border:
        1px solid #c8d5dc !important;

    background:
        #eef2f4 !important;

    box-shadow:
        0 28px 68px rgba(
            22,
            38,
            52,
            .22
        ) !important;
}

.screenshot-preview-card .shot-main-id {
    background:
        #e8f0f3 !important;

    border-color:
        #c5d4dc !important;
}

.screenshot-preview-card .shot-info-cell,
.screenshot-preview-card .shot-check-grid {
    background:
        #f9fbfc !important;

    border-color:
        #cdd9df !important;
}

.screenshot-preview-card .shot-issue-panel {
    background:
        #f7f9fa !important;

    border-color:
        #c7d5dd !important;
}

.screenshot-preview-card .shot-issue-heading {
    background:
        #edf3f5 !important;

    border-bottom-color:
        #d5e0e6 !important;
}

.screenshot-preview-card .shot-error-row,
.screenshot-preview-card .shot-detail-block {
    background:
        #fbfcfd !important;
}

/* ---------------------------------------------------------
   STATUS LANGUAGE
--------------------------------------------------------- */

.status-success,
.field-complete {
    accent-color:
        var(--doa-success);
}

.status-warning,
.field-needs-input {
    accent-color:
        var(--doa-warning);
}

.status-error,
.field-invalid {
    accent-color:
        var(--doa-danger);
}

/* ---------------------------------------------------------
   TOUCH + ACCESSIBILITY
--------------------------------------------------------- */

#appPage button,
#historyModal button,
#doaModal button,
.screenshot-preview-card button {
    -webkit-tap-highlight-color:
        transparent !important;
}

#appPage button:focus-visible,
#historyModal button:focus-visible,
#doaModal button:focus-visible,
.screenshot-preview-card button:focus-visible,
#historyModal input:focus-visible,
#historyModal select:focus-visible,
#doaModal input:focus-visible,
#doaModal select:focus-visible,
#doaModal textarea:focus-visible {
    outline:
        2px solid #8fb6c5 !important;

    outline-offset:
        2px !important;
}

@media (max-width: 760px) {

    #historyModal .history-table-wrap {
        overflow-x:
            auto !important;

        -webkit-overflow-scrolling:
            touch !important;
    }

    #historyModal .history-table-fixed-action {
        min-width:
            1540px !important;
    }

    #historyModal .history-action-group button {
        min-height:
            32px !important;
    }

    #appPage .recent-row {
        min-height:
            92px !important;

        height:
            92px !important;
    }

    #doaModal .modal-actions {
        gap:
            8px !important;
    }

    .screenshot-preview-card {
        width:
            96vw !important;

        max-height:
            95vh !important;
    }
}

#historyModal .history-table-wrap {
    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    max-width:
        100% !important;

    -webkit-overflow-scrolling:
        touch !important;

    overscroll-behavior-x:
        contain !important;
}

#historyModal .history-table-fixed-action {
    width:
        max-content !important;

    min-width:
        1760px !important;

    table-layout:
        fixed !important;
}

/* Sticky Action rail stays visible while the table content moves. */
#historyModal .history-table-fixed-action
.history-action-head,
#historyModal .history-table-fixed-action
.history-action-cell {
    position:
        sticky !important;

    right:
        0 !important;

    z-index:
        20 !important;
}

/* Make the scrollable area explicitly touch-scrollable. */
@media (max-width: 760px) {

    #historyModal .history-table-wrap {
        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        touch-action:
            pan-x pan-y !important;
    }

    #historyModal .history-table-fixed-action {
        min-width:
            1680px !important;
    }
}

/* Screenshot Preview: remove bottom brand text. */
.screenshot-preview-card .shot-footer {
    min-height:
        4px !important;

    height:
        4px !important;

    margin:
        4px 0 0 !important;

    padding:
        0 !important;

    color:
        transparent !important;

    font-size:
        0 !important;
}

/* Print: keep footer clean after removing the brand label. */
@media print {

    .footer {
        min-height:
            12px !important;
    }

    .footer > span[aria-hidden="true"] {
        display:
            none !important;
    }
}

/* Make the recent card a clean 3-line information stack. */

#appPage .recent-row .recent-secondary span {
    min-width:
        0 !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

#appPage .recent-row .recent-secondary span + span::before {
    content:
        "•" !important;

    display:
        inline-block !important;

    margin:
        0 9px !important;

    color:
        #9aaab4 !important;
}

/* Dedicated detail line: visible but secondary to the error type. */
#appPage .recent-row .recent-detail {
    display:
        flex !important;

    align-items:
        flex-start !important;

    gap:
        7px !important;

    width:
        100% !important;

    min-height:
        21px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

#appPage .recent-row .recent-detail-label {
    flex:
        0 0 auto !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        19px !important;

    padding:
        0 6px !important;

    border:
        1px solid #d1dde4 !important;

    border-radius:
        6px !important;

    background:
        #f2f6f8 !important;

    color:
        #667c89 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .6px !important;

    text-transform:
        uppercase !important;
}

#appPage .recent-row .recent-detail-text {
    min-width:
        0 !important;

    flex:
        1 1 auto !important;

    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    overflow:
        hidden !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;

    text-overflow:
        ellipsis !important;

    color:
        #3f5b6d !important;

    font-size:
        11px !important;

    line-height:
        1.45 !important;

    font-weight:
        720 !important;

    text-align:
        left !important;
}

#appPage .recent-row .recent-status-dot,
#appPage .recent-row .recent-arrow {
    top:
        50% !important;
}

@media (max-width: 760px) {

    #appPage .recent-row {
        min-height:
            116px !important;

        height:
            116px !important;
    }

    #appPage .recent-row .recent-main {
        left:
            27px !important;

        right:
            59px !important;

        min-height:
            75px !important;

        gap:
            6px !important;
    }

    #appPage .recent-row .recent-secondary {
        font-size:
            10.5px !important;
    }

    #appPage .recent-row .recent-detail-text {
        font-size:
            10.5px !important;

        line-height:
            1.4 !important;
    }
}

/*
 * Keep Detail visible, but in the same secondary line.
 * The card returns to a compact two-line rhythm:
 *   line 1 = ID + platform
 *   line 2 = Product • Branch • Error • Detail
 */

#appPage .recent-row {
    min-height:
        92px !important;

    height:
        92px !important;

    padding:
        0 16px !important;
}

#appPage .recent-row .recent-main {
    top:
        50% !important;

    left:
        29px !important;

    right:
        64px !important;

    transform:
        translateY(
            -50%
        ) !important;

    min-height:
        46px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        7px !important;
}

#appPage .recent-row .recent-primary {
    width:
        100% !important;

    min-height:
        21px !important;

    height:
        21px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

#appPage .recent-row .recent-primary strong {
    margin:
        0 !important;

    font-size:
        15px !important;

    line-height:
        21px !important;

    font-weight:
        900 !important;
}

#appPage .recent-row .recent-secondary {
    width:
        100% !important;

    min-height:
        18px !important;

    height:
        18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #4f6879 !important;

    font-size:
        11.5px !important;

    line-height:
        18px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;
}

#appPage .recent-row .recent-secondary > span {
    min-width:
        0 !important;

    flex:
        0 1 auto !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;

    line-height:
        18px !important;
}

#appPage .recent-row .recent-secondary > span + span::before {
    content:
        "•" !important;

    display:
        inline-block !important;

    margin:
        0 8px !important;

    color:
        #98a8b2 !important;

    font-weight:
        850 !important;
}

/* Detail is just another segment of the same line. */
#appPage .recent-row .recent-secondary
.recent-detail-inline {
    flex:
        1 1 auto !important;

    min-width:
        90px !important;

    max-width:
        42% !important;

    color:
        #536b7b !important;

    font-size:
        11.5px !important;

    line-height:
        18px !important;

    font-weight:
        700 !important;
}

/* The arrow and status dot remain centered to the compact card. */
#appPage .recent-row .recent-status-dot,
#appPage .recent-row .recent-arrow {
    top:
        50% !important;
}

@media (max-width: 760px) {

    #appPage .recent-row {
        min-height:
            88px !important;

        height:
            88px !important;
    }

    #appPage .recent-row .recent-main {
        left:
            27px !important;

        right:
            59px !important;

        min-height:
            44px !important;

        gap:
            6px !important;
    }

    #appPage .recent-row .recent-secondary {
        font-size:
            10.5px !important;
    }

    #appPage .recent-row .recent-secondary
    .recent-detail-inline {
        font-size:
            10.5px !important;

        max-width:
            34% !important;
    }

    #appPage .recent-row .recent-secondary > span + span::before {
        margin:
            0 6px !important;
    }
}

#appPage .recent-detail {
    display:
        none !important;
}

/*
 * Five cards are the visual limit. The section becomes an
 * internal scroll area when more than five recent records exist.
 * This prevents the dashboard from growing vertically.
 */

/* The renderer's parent container is the .latest-records list. */
#appPage .latest-records {
    max-height:
        calc(
            (92px * 5)
            + (12px * 4)
        ) !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    padding-right:
        3px !important;

    scroll-behavior:
        smooth !important;

    overscroll-behavior-y:
        contain !important;

    scrollbar-width:
        thin !important;
}

/* Keep exactly the same compact card height for every row. */
#appPage .latest-records .recent-row {
    flex:
        0 0 92px !important;

    min-height:
        92px !important;

    height:
        92px !important;

    margin-bottom:
        10px !important;
}

/* Remove the extra bottom gap from the fifth/last visible card. */
#appPage .latest-records .recent-row:last-child {
    margin-bottom:
        0 !important;
}

/* Detail is the one place we give a little more visual weight. */
#appPage .latest-records
.recent-secondary
.recent-detail-inline {
    flex:
        1 1 auto !important;

    min-width:
        120px !important;

    max-width:
        48% !important;

    color:
        #2f4d60 !important;

    font-size:
        12.5px !important;

    line-height:
        18px !important;

    font-weight:
        780 !important;

    letter-spacing:
        .03px !important;
}

#appPage .latest-records
.recent-secondary > span:not(.recent-detail-inline) {
    color:
        #5a7281 !important;

    font-size:
        11px !important;

    line-height:
        18px !important;

    font-weight:
        700 !important;
}

/* Separator rhythm. */
#appPage .latest-records
.recent-secondary > span + span::before {
    margin:
        0 8px !important;

    color:
        #9aabb5 !important;
}

/* The compact detail remains a single readable line so the
   five-card window stays stable. */
#appPage .latest-records
.recent-secondary
.recent-detail-inline {
    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

/* Slightly stronger card contrast for the fixed list. */
#appPage .latest-records .recent-row {
    background:
        #f8fafb !important;

    border-color:
        #cbd8df !important;

    box-shadow:
        0 5px 12px rgba(
            25,
            47,
            62,
            .055
        ) !important;
}

/* Visible but subtle inner scrollbar. */
#appPage .latest-records::-webkit-scrollbar {
    width:
        8px;
}

#appPage .latest-records::-webkit-scrollbar-track {
    background:
        transparent;
}

#appPage .latest-records::-webkit-scrollbar-thumb {
    background:
        #c7d4db;

    border-radius:
        999px;

    border:
        2px solid transparent;

    background-clip:
        padding-box;
}

#appPage .latest-records::-webkit-scrollbar-thumb:hover {
    background:
        #b2c3cd;

    border:
        2px solid transparent;

    background-clip:
        padding-box;
}

/* Mobile */
@media (max-width: 760px) {

    #appPage .latest-records {
        max-height:
            calc(
                (88px * 5)
                + (10px * 4)
            ) !important;
    }

    #appPage .latest-records .recent-row {
        flex-basis:
            88px !important;

        min-height:
            88px !important;

        height:
            88px !important;

        margin-bottom:
            9px !important;
    }

    #appPage .latest-records
    .recent-secondary
    .recent-detail-inline {
        min-width:
            90px !important;

        max-width:
            38% !important;

        font-size:
            11.5px !important;

        line-height:
            17px !important;
    }

    #appPage .latest-records
    .recent-secondary > span:not(.recent-detail-inline) {
        font-size:
            10.5px !important;

        line-height:
            17px !important;
    }
}

/*
 * Keep the current brand background, but make the login panel
 * feel lighter, tighter and more like a professional internal
 * management system.
 */

/* ---------- Login stage ---------- */

#loginPage,
.login-page {
    background:
        radial-gradient(
            900px 540px at 50% 45%,
            rgba(255,255,255,.055),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #071936 0%,
            #0a2146 52%,
            #0b1b3c 100%
        ) !important;
}

#loginPage::before,
.login-page::before {
    opacity:
        .72 !important;
}

#loginPage::after,
.login-page::after {
    opacity:
        .48 !important;
}

/* ---------- Login card ---------- */

#loginPage .login-card,
.login-page .login-card,
#loginPage .login-panel,
.login-page .login-panel {
    width:
        min(
            610px,
            calc(
                100vw - 32px
            )
        ) !important;

    min-height:
        auto !important;

    height:
        auto !important;

    padding:
        34px 44px 38px !important;

    border-radius:
        24px !important;

    background:
        rgba(
            251,
            252,
            253,
            .97
        ) !important;

    border:
        1px solid rgba(
            205,
            218,
            227,
            .94
        ) !important;

    box-shadow:
        0 28px 70px rgba(
            2,
            18,
            37,
            .28
        ),
        0 8px 24px rgba(
            2,
            18,
            37,
            .10
        ) !important;

    backdrop-filter:
        blur(7px) !important;

    -webkit-backdrop-filter:
        blur(7px) !important;
}

/* If the original layout uses .login-box instead. */
#loginPage .login-box,
.login-page .login-box {
    width:
        min(
            610px,
            calc(
                100vw - 32px
            )
        ) !important;

    min-height:
        auto !important;

    height:
        auto !important;

    padding:
        34px 44px 38px !important;

    border-radius:
        24px !important;

    background:
        rgba(
            251,
            252,
            253,
            .97
        ) !important;

    border:
        1px solid rgba(
            205,
            218,
            227,
            .94
        ) !important;

    box-shadow:
        0 28px 70px rgba(
            2,
            18,
            37,
            .28
        ),
        0 8px 24px rgba(
            2,
            18,
            37,
            .10
        ) !important;
}

/* ---------- Brand / title ---------- */

#loginPage .login-logo,
.login-page .login-logo {
    max-width:
        190px !important;

    max-height:
        62px !important;

    width:
        auto !important;

    height:
        auto !important;

    object-fit:
        contain !important;

    margin:
        0 auto 13px !important;

    display:
        block !important;
}

#loginPage .login-title,
.login-page .login-title {
    margin:
        0 !important;

    color:
        #0e2748 !important;

    font-size:
        39px !important;

    line-height:
        1.05 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.7px !important;

    text-align:
        center !important;
}

#loginPage .login-subtitle,
.login-page .login-subtitle {
    margin:
        8px 0 0 !important;

    color:
        #73808c !important;

    font-size:
        15px !important;

    line-height:
        1.35 !important;

    font-weight:
        650 !important;

    text-align:
        center !important;
}

/* ---------- Animated brand divider ---------- */

#loginPage .login-divider,
.login-page .login-divider {
    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    margin:
        25px 0 24px !important;

    min-height:
        18px !important;

    overflow:
        hidden !important;
}

#loginPage .login-divider::before,
#loginPage .login-divider::after,
.login-page .login-divider::before,
.login-page .login-divider::after {
    content:
        "" !important;

    position:
        relative !important;

    display:
        block !important;

    width:
        0 !important;

    height:
        2px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #75b7d0 24%,
            #8abfd1 76%,
            transparent
        ) !important;

    opacity:
        .85 !important;

    animation:
        doaDividerExpand
        1.15s
        cubic-bezier(.22,.7,.25,1)
        forwards !important;
}

#loginPage .login-divider::before,
.login-page .login-divider::before {
    margin-right:
        12px !important;

    transform-origin:
        right center !important;
}

#loginPage .login-divider::after,
.login-page .login-divider::after {
    margin-left:
        12px !important;

    transform-origin:
        left center !important;
}

@keyframes doaDividerExpand {

    0% {
        width:
            0;
        opacity:
            0;
    }

    55% {
        opacity:
            .8;
    }

    100% {
        width:
            145px;
        opacity:
            .92;
    }
}

/*
 * Use the existing divider/brand mark if the markup has one.
 * Scale it down and give it a subtle pulse.
 */
#loginPage .login-divider .divider-mark,
#loginPage .login-divider .diamond,
.login-page .login-divider .divider-mark,
.login-page .login-divider .diamond {
    position:
        relative !important;

    z-index:
        2 !important;

    width:
        13px !important;

    height:
        13px !important;

    flex:
        0 0 13px !important;

    transform:
        rotate(
            45deg
        ) !important;

    border:
        0 !important;

    background:
        linear-gradient(
            135deg,
            #ef2b86 0 33%,
            #6f4ea0 33% 66%,
            #1aa3cf 66% 100%
        ) !important;

    box-shadow:
        0 3px 10px rgba(
            65,
            110,
            150,
            .16
        ) !important;

    animation:
        doaDividerDiamond
        2.6s
        ease-in-out
        infinite !important;
}

@keyframes doaDividerDiamond {

    0%,
    100% {
        transform:
            rotate(45deg)
            scale(1);
    }

    50% {
        transform:
            rotate(45deg)
            scale(1.08);
    }
}

/* ---------- Form block ---------- */

#loginPage .login-form,
.login-page .login-form {
    margin-top:
        0 !important;
}

#loginPage .login-field,
.login-page .login-field {
    margin:
        0 0 16px !important;
}

#loginPage .login-field label,
.login-page .login-field label {
    display:
        block !important;

    margin:
        0 0 8px !important;

    color:
        #263b53 !important;

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;
}

/* Compact professional field height */
#loginPage .login-field input,
.login-page .login-field input,
#loginPage input[type="text"],
#loginPage input[type="password"],
.login-page input[type="text"],
.login-page input[type="password"] {
    width:
        100% !important;

    height:
        54px !important;

    min-height:
        54px !important;

    padding:
        0 15px 0 46px !important;

    border:
        1px solid #c9d5de !important;

    border-radius:
        11px !important;

    background:
        #fbfcfd !important;

    color:
        #1f374b !important;

    font-family:
        var(--doa-font) !important;

    font-size:
        15px !important;

    font-weight:
        650 !important;

    line-height:
        54px !important;

    outline:
        none !important;

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            .86
        ) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

#loginPage .login-field input::placeholder,
.login-page .login-field input::placeholder {
    color:
        #7e8b96 !important;

    opacity:
        1 !important;

    font-weight:
        550 !important;
}

#loginPage .login-field input:focus,
.login-page .login-field input:focus,
#loginPage input[type="text"]:focus,
#loginPage input[type="password"]:focus,
.login-page input[type="text"]:focus,
.login-page input[type="password"]:focus {
    background:
        #ffffff !important;

    border-color:
        #86aebb !important;

    box-shadow:
        0 0 0 3px rgba(
            91,
            130,
            146,
            .10
        ) !important;

    transform:
        translateY(
            -1px
        ) !important;
}

/* ---------- Input icons: replace casual emoji feel ----------
   CSS-drawn icon containers keep the existing login markup usable.
 */
#loginPage .input-icon,
.login-page .input-icon,
#loginPage .login-field .icon,
.login-page .login-field .icon {
    width:
        28px !important;

    height:
        28px !important;

    top:
        50% !important;

    left:
        10px !important;

    transform:
        translateY(
            -50%
        ) !important;

    display:
        grid !important;

    place-items:
        center !important;

    color:
        #5f7f92 !important;
    background:
        transparent !important;
}

/* Generic user icon */
#loginPage .login-field:first-of-type .input-icon::before,
#loginPage .login-field:first-of-type .icon::before,
.login-page .login-field:first-of-type .input-icon::before,
.login-page .login-field:first-of-type .icon::before {
    content:
        "" !important;

    width:
        14px !important;

    height:
        14px !important;

    border-radius:
        50% !important;

    background:
        #5e8194 !important;

    box-shadow:
        0 10px 0 -3px #5e8194 !important;
}

/* Lock icon */
#loginPage .login-field:nth-of-type(2) .input-icon::before,
#loginPage .login-field:nth-of-type(2) .icon::before,
.login-page .login-field:nth-of-type(2) .input-icon::before,
.login-page .login-field:nth-of-type(2) .icon::before {
    content:
        "" !important;

    width:
        13px !important;

    height:
        11px !important;

    border:
        2px solid #9b9a52 !important;

    border-radius:
        3px !important;

    background:
        #fffdf2 !important;
}

#loginPage .login-field:nth-of-type(2) .input-icon::after,
#loginPage .login-field:nth-of-type(2) .icon::after,
.login-page .login-field:nth-of-type(2) .input-icon::after,
.login-page .login-field:nth-of-type(2) .icon::after {
    content:
        "" !important;

    position:
        absolute !important;

    width:
        8px !important;

    height:
        7px !important;

    border:
        2px solid #9b9a52 !important;

    border-bottom:
        0 !important;

    border-radius:
        8px 8px 0 0 !important;

    top:
        1px !important;
}

/* ---------- Login button ---------- */

#loginPage .login-btn,
.login-page .login-btn,
#loginPage button[type="submit"],
.login-page button[type="submit"] {
    width:
        100% !important;

    min-height:
        52px !important;

    height:
        52px !important;

    margin-top:
        4px !important;

    border:
        1px solid #0a2448 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            #0b2851 0%,
            #071f44 100%
        ) !important;

    color:
        #ffffff !important;

    font-family:
        var(--doa-font) !important;

    font-size:
        16px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 10px 18px rgba(
            8,
            33,
            72,
            .18
        ) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease !important;
}

#loginPage .login-btn:hover,
.login-page .login-btn:hover,
#loginPage button[type="submit"]:hover,
.login-page button[type="submit"]:hover {
    transform:
        translateY(
            -1px
        ) !important;

    filter:
        brightness(
            1.035
        ) !important;

    box-shadow:
        0 14px 24px rgba(
            8,
            33,
            72,
            .20
        ) !important;
}

#loginPage .login-btn:active,
.login-page .login-btn:active,
#loginPage button[type="submit"]:active,
.login-page button[type="submit"]:active {
    transform:
        translateY(
            0
        ) !important;

    box-shadow:
        0 7px 12px rgba(
            8,
            33,
            72,
            .15
        ) !important;
}

/* ---------- Login error / helper ---------- */

#loginPage .login-error,
.login-page .login-error {
    margin:
        10px 0 0 !important;

    border-radius:
        9px !important;

    background:
        #fff4f5 !important;

    border:
        1px solid #e2bcc1 !important;

    color:
        #9a4f59 !important;

    font-size:
        12px !important;

    line-height:
        1.45 !important;

    font-weight:
        700 !important;
}

/* ---------- Compact overall spacing ---------- */

#loginPage .login-content,
.login-page .login-content {
    gap:
        0 !important;
}

#loginPage .login-card > *:last-child,
.login-page .login-card > *:last-child,
#loginPage .login-panel > *:last-child,
.login-page .login-panel > *:last-child,
#loginPage .login-box > *:last-child,
.login-page .login-box > *:last-child {
    margin-bottom:
        0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {

    #loginPage .login-card,
    .login-page .login-card,
    #loginPage .login-panel,
    .login-page .login-panel,
    #loginPage .login-box,
    .login-page .login-box {
        width:
            min(
                92vw,
                520px
            ) !important;

        padding:
            28px 24px 30px !important;

        border-radius:
            20px !important;
    }

    #loginPage .login-logo,
    .login-page .login-logo {
        max-width:
            165px !important;

        max-height:
            54px !important;

        margin-bottom:
            11px !important;
    }

    #loginPage .login-title,
    .login-page .login-title {
        font-size:
            32px !important;
    }

    #loginPage .login-subtitle,
    .login-page .login-subtitle {
        font-size:
            14px !important;
    }

    #loginPage .login-divider,
    .login-page .login-divider {
        margin:
            21px 0 20px !important;
    }

    @keyframes doaDividerExpand {

        0% {
            width:
                0;
            opacity:
                0;
        }

        55% {
            opacity:
                .8;
        }

        100% {
            width:
                105px;
            opacity:
                .92;
        }
    }

    #loginPage .login-field input,
    .login-page .login-field input,
    #loginPage input[type="text"],
    #loginPage input[type="password"],
    .login-page input[type="text"],
    .login-page input[type="password"] {
        height:
            52px !important;

        min-height:
            52px !important;

        font-size:
            14px !important;

        line-height:
            52px !important;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {

    #loginPage .login-divider::before,
    #loginPage .login-divider::after,
    .login-page .login-divider::before,
    .login-page .login-divider::after,
    #loginPage .login-divider .divider-mark,
    #loginPage .login-divider .diamond,
    .login-page .login-divider .divider-mark,
    .login-page .login-divider .diamond {
        animation:
            none !important;
    }

    #loginPage .login-field input,
    .login-page .login-field input,
    #loginPage .login-btn,
    .login-page .login-btn {
        transition:
            none !important;
    }
}

/*
 * The card is intentionally content-led rather than filling a tall
 * white panel. This keeps the login screen focused and premium.
 */

/* -------- Card: tighter vertical composition -------- */

#loginPage .login-card,
.login-page .login-card,
#loginPage .login-panel,
.login-page .login-panel,
#loginPage .login-box,
.login-page .login-box {
    width:
        min(
            560px,
            calc(
                100vw - 32px
            )
        ) !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        30px 40px 31px !important;

    border-radius:
        22px !important;
}

/* -------- Brand area -------- */

#loginPage .login-logo,
.login-page .login-logo {
    max-width:
        165px !important;

    max-height:
        54px !important;

    margin:
        0 auto 10px !important;
}

#loginPage .login-title,
.login-page .login-title {
    font-size:
        35px !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.6px !important;
}

#loginPage .login-subtitle,
.login-page .login-subtitle {
    margin:
        6px 0 0 !important;

    font-size:
        14px !important;

    line-height:
        1.25 !important;
}

/* -------- Divider: closer to the title/form -------- */

#loginPage .login-divider,
.login-page .login-divider {
    margin:
        20px 0 18px !important;

    min-height:
        16px !important;
}

@keyframes doaDividerExpand {

    0% {
        width:
            0;
        opacity:
            0;
    }

    55% {
        opacity:
            .8;
    }

    100% {
        width:
            132px;
        opacity:
            .92;
    }
}

/* -------- Form spacing -------- */

#loginPage .login-field,
.login-page .login-field {
    margin:
        0 0 13px !important;
}

#loginPage .login-field label,
.login-page .login-field label {
    margin:
        0 0 6px !important;

    font-size:
        13px !important;

    line-height:
        1.15 !important;
}

#loginPage .login-field input,
.login-page .login-field input,
#loginPage input[type="text"],
#loginPage input[type="password"],
.login-page input[type="text"],
.login-page input[type="password"] {
    height:
        52px !important;

    min-height:
        52px !important;

    border-radius:
        10px !important;

    padding:
        0 14px 0 45px !important;

    font-size:
        14px !important;

    line-height:
        52px !important;
}

/* -------- Login button: a little smaller, still strong -------- */

#loginPage .login-btn,
.login-page .login-btn,
#loginPage button[type="submit"],
.login-page button[type="submit"] {
    min-height:
        50px !important;

    height:
        50px !important;

    margin-top:
        2px !important;

    border-radius:
        10px !important;

    font-size:
        15px !important;
}

/* -------- Kill accidental min-height / spacer behavior in
   common wrappers that may be making the panel tall. -------- */

#loginPage .login-content,
.login-page .login-content,
#loginPage .login-form,
.login-page .login-form {
    min-height:
        0 !important;

    height:
        auto !important;
}

/* Decorative corner elements: calmer, smaller, less visual noise. */
#loginPage .decor-square,
.login-page .decor-square,
#loginPage .login-decoration,
.login-page .login-decoration {
    opacity:
        .62 !important;
}

/* -------- Desktop centering: keep visual center balanced -------- */

#loginPage,
.login-page {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}

/* -------- Mobile -------- */

@media (max-width: 760px) {

    #loginPage .login-card,
    .login-page .login-card,
    #loginPage .login-panel,
    .login-page .login-panel,
    #loginPage .login-box,
    .login-page .login-box {
        width:
            min(
                92vw,
                500px
            ) !important;

        padding:
            25px 22px 27px !important;

        border-radius:
            20px !important;
    }

    #loginPage .login-logo,
    .login-page .login-logo {
        max-width:
            150px !important;

        max-height:
            50px !important;
    }

    #loginPage .login-title,
    .login-page .login-title {
        font-size:
            30px !important;
    }

    #loginPage .login-divider,
    .login-page .login-divider {
        margin:
            18px 0 16px !important;
    }

    #loginPage .login-field input,
    .login-page .login-field input,
    #loginPage input[type="text"],
    #loginPage input[type="password"],
    .login-page input[type="text"],
    .login-page input[type="password"] {
        height:
            50px !important;

        min-height:
            50px !important;

        font-size:
            14px !important;

        line-height:
            50px !important;
    }

    #loginPage .login-btn,
    .login-page .login-btn,
    #loginPage button[type="submit"],
    .login-page button[type="submit"] {
        height:
            49px !important;

        min-height:
            49px !important;
    }
}

/* Reduced-motion: keep the layout static. */
@media (prefers-reduced-motion: reduce) {

    #loginPage .login-divider::before,
    #loginPage .login-divider::after,
    .login-page .login-divider::before,
    .login-page .login-divider::after {
        animation:
            none !important;
    }
}

#loginPage .login-card,
.login-page .login-card,
#loginPage .login-panel,
.login-page .login-panel,
#loginPage .login-box,
.login-page .login-box {
    width:
        min(
            540px,
            calc(
                100vw - 32px
            )
        ) !important;

    padding:
        24px 38px 25px !important;

    border-radius:
        20px !important;

    overflow:
        hidden !important;
}

/* Brand block */
#loginPage .login-logo,
.login-page .login-logo {
    max-width:
        152px !important;

    max-height:
        50px !important;

    margin:
        0 auto 8px !important;
}

#loginPage .login-title,
.login-page .login-title {
    font-size:
        33px !important;

    line-height:
        1 !important;

    letter-spacing:
        -.55px !important;
}

#loginPage .login-subtitle,
.login-page .login-subtitle {
    margin:
        5px 0 0 !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;
}

/* Divider */
#loginPage .login-divider,
.login-page .login-divider {
    margin:
        16px 0 15px !important;

    min-height:
        14px !important;
}

@keyframes doaDividerExpand {

    0% {
        width:
            0;
        opacity:
            0;
    }

    55% {
        opacity:
            .78;
    }

    100% {
        width:
            118px;
        opacity:
            .9;
    }
}

#loginPage .login-divider .divider-mark,
#loginPage .login-divider .diamond,
.login-page .login-divider .divider-mark,
.login-page .login-divider .diamond {
    width:
        11px !important;

    height:
        11px !important;
}

/* Form fields */
#loginPage .login-field,
.login-page .login-field {
    margin:
        0 0 11px !important;
}

#loginPage .login-field label,
.login-page .login-field label {
    margin:
        0 0 5px !important;

    font-size:
        12.5px !important;
}

#loginPage .login-field input,
.login-page .login-field input,
#loginPage input[type="text"],
#loginPage input[type="password"],
.login-page input[type="text"],
.login-page input[type="password"] {
    height:
        49px !important;

    min-height:
        49px !important;

    padding:
        0 13px 0 43px !important;

    border-radius:
        9px !important;

    font-size:
        13.5px !important;

    line-height:
        49px !important;
}

/* Input icons smaller + cleaner */
#loginPage .input-icon,
.login-page .input-icon,
#loginPage .login-field .icon,
.login-page .login-field .icon {
    width:
        25px !important;

    height:
        25px !important;

    left:
        9px !important;
}

/* Submit */
#loginPage .login-btn,
.login-page .login-btn,
#loginPage button[type="submit"],
.login-page button[type="submit"] {
    min-height:
        48px !important;

    height:
        48px !important;

    margin-top:
        0 !important;

    border-radius:
        9px !important;

    font-size:
        15px !important;
}

/* Hide excessive internal whitespace if a common spacer exists. */
#loginPage .login-spacer,
.login-page .login-spacer,
#loginPage .login-footer,
.login-page .login-footer {
    min-height:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

/* Quiet decorative elements. */
#loginPage .decor-square,
.login-page .decor-square,
#loginPage .login-decoration,
.login-page .login-decoration {
    opacity:
        .48 !important;

    transform:
        scale(.92) !important;
}

/* Prevent the panel itself from looking oversized on tall screens. */
#loginPage .login-content,
.login-page .login-content {
    max-height:
        100% !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}

/* Mobile */
@media (max-width: 760px) {

    #loginPage .login-card,
    .login-page .login-card,
    #loginPage .login-panel,
    .login-page .login-panel,
    #loginPage .login-box,
    .login-page .login-box {
        width:
            min(
                92vw,
                480px
            ) !important;

        padding:
            23px 20px 24px !important;

        border-radius:
            18px !important;
    }

    #loginPage .login-logo,
    .login-page .login-logo {
        max-width:
            142px !important;

        max-height:
            46px !important;
    }

    #loginPage .login-title,
    .login-page .login-title {
        font-size:
            29px !important;
    }

    #loginPage .login-field input,
    .login-page .login-field input,
    #loginPage input[type="text"],
    #loginPage input[type="password"],
    .login-page input[type="text"],
    .login-page input[type="password"] {
        height:
            48px !important;

        min-height:
            48px !important;

        font-size:
            13.5px !important;

        line-height:
            48px !important;
    }

    #loginPage .login-btn,
    .login-page .login-btn,
    #loginPage button[type="submit"],
    .login-page button[type="submit"] {
        height:
            47px !important;

        min-height:
            47px !important;
    }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {

    #loginPage .login-divider::before,
    #loginPage .login-divider::after,
    .login-page .login-divider::before,
    .login-page .login-divider::after,
    #loginPage .login-divider .divider-mark,
    #loginPage .login-divider .diamond,
    .login-page .login-divider .divider-mark,
    .login-page .login-divider .diamond {
        animation:
            none !important;
    }
}

.page {
    padding:
        20px !important;

    background:
        radial-gradient(
            850px 500px at 50% 46%,
            rgba(
                28,
                94,
                157,
                .18
            ),
            transparent 68%
        ),
        linear-gradient(
            135deg,
            #06172f 0%,
            #08244f 50%,
            #071b3d 100%
        ) !important;
}

/* Premium but compact card. */
.page > .card {
    width:
        min(
            620px,
            calc(
                100vw - 40px
            )
        ) !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        calc(
            100vh - 36px
        ) !important;

    border-radius:
        22px !important;

    background:
        rgba(
            252,
            253,
            254,
            .975
        ) !important;

    border:
        1px solid rgba(
            215,
            224,
            232,
            .96
        ) !important;

    box-shadow:
        0 28px 70px rgba(
            0,
            14,
            32,
            .30
        ),
        0 6px 22px rgba(
            0,
            14,
            32,
            .08
        ) !important;
}

.page > .card > .inner {
    width:
        min(
            82%,
            510px
        ) !important;

    max-width:
        510px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        34px 0 33px !important;
}

/* Logo */
.page > .card .logo-wrap {
    margin:
        0 0 9px !important;
}

.page > .card .logo {
    width:
        150px !important;

    height:
        58px !important;

    object-fit:
        contain !important;
}

/* Brand title */
.page > .card .title {
    font-size:
        37px !important;

    line-height:
        1.02 !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.8px !important;

    color:
        #0f294a !important;
}

.page > .card .subtitle {
    margin-top:
        6px !important;

    font-size:
        14px !important;

    line-height:
        1.25 !important;

    color:
        #77838e !important;

    font-weight:
        650 !important;
}

/* Divider: keep the original markup but animate the actual lines. */

.page > .card .line {
    width:
        112px !important;

    flex:
        0 0 112px !important;

    height:
        2px !important;

    background:
        linear-gradient(
            90deg,
            #8eb9d0,
            #77aac5
        ) !important;

    transform:
        scaleX(
            .65
        ) !important;

    opacity:
        .78 !important;

    animation:
        loginLineSettle
        900ms
        cubic-bezier(
            .22,
            .7,
            .25,
            1
        )
        forwards !important;
}

.page > .card .line.left {
    transform-origin:
        right center !important;
}

.page > .card .line.right {
    transform-origin:
        left center !important;
}

@keyframes loginLineSettle {

    0% {
        transform:
            scaleX(.12);

        opacity:
            0;
    }

    65% {
        opacity:
            .8;
    }

    100% {
        transform:
            scaleX(1);

        opacity:
            .84;
    }
}

.page > .card .diamond {
    width:
        11px !important;

    height:
        11px !important;

    flex:
        0 0 11px !important;

    animation:
        loginDiamondPulse
        2.8s
        ease-in-out
        infinite !important;
}

@keyframes loginDiamondPulse {

    0%,
    100% {
        transform:
            rotate(45deg)
            scale(1);
    }

    50% {
        transform:
            rotate(45deg)
            scale(1.09);
    }
}

/* Form */
.page > .card .field {
    margin-top:
        0 !important;

    margin-bottom:
        12px !important;
}

.page > .card .label {
    margin-bottom:
        6px !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;

    color:
        #233852 !important;
}

/* Inputs */
.page > .card .input {
    height:
        50px !important;

    border:
        1px solid #c9d6df !important;

    border-radius:
        10px !important;

    padding:
        0 14px 0 46px !important;

    background:
        #fbfcfd !important;

    color:
        #1e364a !important;

    font-family:
        "Noto Sans Myanmar UI",
        "Noto Sans Myanmar",
        "Noto Sans",
        "Myanmar Text",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        650 !important;

    line-height:
        50px !important;

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            .9
        ) !important;
}

.page > .card .input::placeholder {
    color:
        #7d8993 !important;

    opacity:
        1 !important;
}

.page > .card .input:focus {
    border-color:
        #86adbe !important;

    box-shadow:
        0 0 0 3px rgba(
            83,
            126,
            145,
            .09
        ) !important;

    background:
        #ffffff !important;
}

/* Clean up the existing emoji-based icons just enough to look
   intentional; preserve the markup so auth behavior is untouched. */
.page > .card .icon {
    left:
        12px !important;

    width:
        24px !important;

    font-size:
        18px !important;

    opacity:
        .82 !important;

    filter:
        saturate(.78) !important;
}

/* Login button */
.page > .card .login-btn {
    height:
        49px !important;

    margin-top:
        7px !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            180deg,
            #0b2851 0%,
            #071f43 100%
        ) !important;

    font-size:
        15px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .05px !important;

    box-shadow:
        0 10px 18px rgba(
            7,
            31,
            67,
            .16
        ) !important;
}

.page > .card .login-btn:hover {
    background:
        linear-gradient(
            180deg,
            #10315f 0%,
            #082349 100%
        ) !important;

    transform:
        translateY(
            -1px
        ) !important;
}

.page > .card .login-btn:active {
    transform:
        translateY(0) !important;

    box-shadow:
        0 6px 12px rgba(
            7,
            31,
            67,
            .13
        ) !important;
}

.page > .card .login-btn[disabled] {
    cursor:
        wait !important;

    opacity:
        .78 !important;

    transform:
        none !important;
}

/* Error message */
.page > .card .error {
    min-height:
        18px !important;

    margin-top:
        8px !important;

    font-size:
        12px !important;

    line-height:
        1.4 !important;

    font-weight:
        700 !important;
}

/* Quieter side decorations */
.page > .card > .side-square {
    opacity:
        .48 !important;
}

/* Keep the top-right and bottom-left decorative card geometry,
   but make it less visually dominant. */
.page > .card::before {
    opacity:
        .65 !important;
}

.page > .card::after {
    opacity:
        .68 !important;
}

/* Mobile */
@media (max-width: 760px) {

    .page {
        padding:
            14px !important;
    }

    .page > .card {
        width:
            min(
                94vw,
                500px
            ) !important;

        max-height:
            calc(
                100vh - 28px
            ) !important;

        border-radius:
            19px !important;
    }

    .page > .card > .inner {
        width:
            min(
                84%,
                460px
            ) !important;

        padding:
            27px 0 28px !important;
    }

    .page > .card .logo {
        width:
            140px !important;

        height:
            52px !important;
    }

    .page > .card .title {
        font-size:
            31px !important;
    }

    .page > .card .subtitle {
        font-size:
            13px !important;
    }

    .page > .card .divider {
        margin:
            16px 0 16px !important;
    }

    .page > .card .line {
        width:
            92px !important;

        flex-basis:
            92px !important;
    }

    .page > .card .input {
        height:
            49px !important;

        line-height:
            49px !important;

        font-size:
            13.5px !important;
    }

    .page > .card .login-btn {
        height:
            48px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .page > .card .line,
    .page > .card .diamond {
        animation:
            none !important;

        transform:
            none !important;
    }
}

/*
 * ACTUAL STRUCTURE:
 *
 * .recent-section
 *   └─ .recent-card
 *        └─ .recent-list#recentActivityList
 *             └─ .recent-row × N
 *
 * The fixed window therefore belongs on .recent-card,
 * not on the nonexistent .latest-records selector.
 */

/* Give the dashboard breathing room below Latest Records. */

/* Five complete desktop cards in the viewport. */
#appPage .recent-card {
    height:
        460px !important;

    max-height:
        460px !important;

    min-height:
        0 !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior-y:
        contain !important;

    -webkit-overflow-scrolling:
        touch !important;

    scroll-behavior:
        smooth !important;

    scrollbar-width:
        thin !important;

    scrollbar-color:
        #b9c9d2 transparent !important;
}

/* The list itself must not impose another clipping height. */

/* Keep every record exactly the same height. */

/* Clean separation without adding large blank gaps. */
#appPage #recentActivityList .recent-row + .recent-row {
    border-top:
        1px solid rgba(
            166,
            185,
            196,
            .38
        ) !important;
}

/* Keep content centered inside each fixed card. */

/* Keep the arrow centered to the complete card. */

/* Hover should not break the vertical centering. */

/* Visible scrollbar on Chromium/WebKit. */

/* A subtle scroll affordance without adding visual clutter. */

/* Desktop: fifth card ends cleanly and page has room below. */
@media (min-width: 761px) {

    #appPage .recent-card {
        height:
            460px !important;

        max-height:
            460px !important;
    }
}

/* Mobile: five cards still fit inside the internal scroll window,
   but keep enough breathing room for the viewport. */
@media (max-width: 760px) {

    #appPage .recent-section {
        padding-bottom:
            26px !important;
    }

    #appPage .recent-card {
        height:
            440px !important;

        max-height:
            440px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        touch-action:
            pan-y !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            88px !important;

        min-height:
            88px !important;

        max-height:
            88px !important;

        flex-basis:
            88px !important;
    }
}

.page > .card {
    width:
        min(
            520px,
            calc(
                100vw - 48px
            )
        ) !important;

    max-height:
        calc(
            100vh - 42px
        ) !important;

    border-radius:
        24px !important;
}

.page > .card > .inner {
    width:
        min(
            82%,
            440px
        ) !important;

    max-width:
        440px !important;

    padding:
        42px 0 43px !important;
}

/* Logo */
.page > .card .logo {
    width:
        168px !important;

    height:
        62px !important;
}

/* Title */
.page > .card .title {
    font-size:
        40px !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.8px !important;
}

.page > .card .subtitle {
    margin-top:
        7px !important;

    font-size:
        14px !important;
}

/* Divider */
.page > .card .divider {
    gap:
        12px !important;

    margin:
        22px 0 22px !important;
}

.page > .card .line {
    width:
        128px !important;

    flex-basis:
        128px !important;
}

.page > .card .diamond {
    width:
        12px !important;

    height:
        12px !important;

    flex-basis:
        12px !important;
}

/* Form */
.page > .card .field {
    margin-bottom:
        14px !important;
}

.page > .card .field + .field {
    margin-top:
        15px !important;
}

.page > .card .label {
    margin-bottom:
        7px !important;

    font-size:
        13.5px !important;
}

.page > .card .input {
    height:
        54px !important;

    padding:
        0 15px 0 48px !important;

    border-radius:
        11px !important;

    font-size:
        14.5px !important;

    line-height:
        54px !important;
}

.page > .card .icon {
    left:
        13px !important;

    width:
        26px !important;

    font-size:
        19px !important;
}

/* Button */
.page > .card .login-btn {
    height:
        52px !important;

    margin-top:
        6px !important;

    border-radius:
        11px !important;

    font-size:
        15.5px !important;
}

/* Keep the card centered and visually balanced. */
.page {
    padding:
        18px !important;
}

/* Mobile */
@media (max-width: 760px) {

    .page > .card {
        width:
            min(
                94vw,
                560px
            ) !important;

        max-height:
            calc(
                100vh - 30px
            ) !important;

        border-radius:
            21px !important;
    }

    .page > .card > .inner {
        width:
            min(
                84%,
                480px
            ) !important;

        padding:
            32px 0 34px !important;
    }

    .page > .card .logo {
        width:
            150px !important;

        height:
            55px !important;
    }

    .page > .card .title {
        font-size:
            33px !important;
    }

    .page > .card .divider {
        margin:
            19px 0 19px !important;
    }

    .page > .card .line {
        width:
            100px !important;

        flex-basis:
            100px !important;
    }

    .page > .card .input {
        height:
            51px !important;

        font-size:
            14px !important;

        line-height:
            51px !important;
    }

    .page > .card .login-btn {
        height:
            50px !important;
    }
}

/*
 * Goal:
 * Make the logged-in identity bar feel like a deliberate
 * premium workspace header instead of a thin utility strip.
 *
 * Same visual system for Admin + Branch:
 *   brand -> role / branch -> presence -> logout
 */

/* Topbar container */
#appPage .app-topbar {
    min-height:
        72px !important;

    height:
        72px !important;

    padding:
        0 28px !important;

    background:
        rgba(
            248,
            250,
            252,
            .96
        ) !important;

    border:
        1px solid rgba(
            207,
            219,
            227,
            .94
        ) !important;

    border-radius:
        0 0 18px 18px !important;

    box-shadow:
        0 10px 28px rgba(
            23,
            45,
            61,
            .08
        ) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    position:
        relative !important;

    z-index:
        30 !important;
}

/* Tiny brand mark / status dot */
#appPage .app-topbar .brand-mini {
    min-height:
        42px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        11px !important;
}

/* Brand side dot */
#appPage .app-topbar .brand-mini::before {
    content:
        "" !important;

    width:
        9px !important;

    height:
        9px !important;

    flex:
        0 0 9px !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            135deg,
            #55b4ce,
            #6d4b91
        ) !important;

    box-shadow:
        0 0 0 4px rgba(
            96,
            138,
            158,
            .08
        ) !important;
}

/* Workspace title */
#appPage .app-topbar .brand-mini strong {
    font-size:
        18px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.2px !important;

    color:
        #17334a !important;
}

/* Secondary identity line */
#appPage .app-topbar #currentBranch {
    margin-top:
        5px !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .75px !important;

    text-transform:
        uppercase !important;

    color:
        #71838f !important;
}

/* Admin / Branch role badge */
#appPage .app-topbar .header-role-badge {
    min-height:
        22px !important;

    height:
        22px !important;

    padding:
        0 8px !important;

    border-radius:
        7px !important;

    background:
        #eef4f7 !important;

    border:
        1px solid #cddce3 !important;

    color:
        #456273 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .7px !important;

    box-shadow:
        0 3px 8px rgba(
            32,
            56,
            71,
            .035
        ) !important;
}

/* Make Admin and branch badges visually distinct but subtle. */
#appPage .app-topbar .header-role-badge.admin {
    background:
        #eef5fa !important;

    border-color:
        #c8dbe7 !important;

    color:
        #345e75 !important;
}

#appPage .app-topbar .header-role-badge.branch {
    background:
        #f3f7f8 !important;

    border-color:
        #d0dde3 !important;

    color:
        #4f6977 !important;
}

/* Online presence */
#appPage .app-topbar .topbar-status {
    min-height:
        24px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        6px !important;

    padding:
        0 9px !important;

    border-radius:
        8px !important;

    background:
        #f3faf7 !important;

    border:
        1px solid #cfe6dc !important;

    color:
        #3c7867 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .75px !important;

    text-transform:
        uppercase !important;
}

#appPage .app-topbar .topbar-status::before {
    width:
        6px !important;

    height:
        6px !important;

    border-radius:
        50% !important;

    background:
        #4fbf9b !important;

    box-shadow:
        0 0 0 3px rgba(
            79,
            191,
            155,
            .10
        ) !important;
}

/* Logout — premium compact action */
#appPage .app-topbar .logout-btn {
    min-width:
        82px !important;

    min-height:
        38px !important;

    height:
        38px !important;

    padding:
        0 13px !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            180deg,
            #fbf8ff 0%,
            #f2eef9 100%
        ) !important;

    border:
        1px solid #d6cae6 !important;

    color:
        #5a5074 !important;

    font-size:
        10px !important;

    line-height:
        1 !important;

    font-weight:
        850 !important;

    box-shadow:
        0 5px 12px rgba(
            70,
            47,
            97,
            .075
        ) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease !important;
}

#appPage .app-topbar .logout-btn:hover {
    transform:
        translateY(
            -1px
        ) !important;

    border-color:
        #c5b6db !important;

    box-shadow:
        0 8px 16px rgba(
            70,
            47,
            97,
            .11
        ) !important;
}

#appPage .app-topbar .logout-btn:active {
    transform:
        translateY(
            0
        ) !important;
}

/* Give the whole right-side control cluster a deliberate rhythm. */
#appPage .app-topbar .topbar-actions {
    min-height:
        42px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        9px !important;
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .app-topbar {
        min-height:
            66px !important;

        height:
            66px !important;

        padding:
            0 15px !important;

        border-radius:
            0 0 14px 14px !important;
    }

    #appPage .app-topbar .brand-mini strong {
        font-size:
            16px !important;
    }

    #appPage .app-topbar #currentBranch {
        font-size:
            8px !important;

        margin-top:
            4px !important;
    }

    #appPage .app-topbar .header-role-badge {
        min-height:
            20px !important;

        height:
            20px !important;

        padding:
            0 7px !important;

        font-size:
            7px !important;
    }

    #appPage .app-topbar .topbar-status {
        padding:
            0 7px !important;

        font-size:
            7px !important;
    }

    #appPage .app-topbar .logout-btn {
        min-width:
            70px !important;

        min-height:
            34px !important;

        height:
            34px !important;

        padding:
            0 10px !important;

        font-size:
            9px !important;
    }
}

/* Real DOA logo replaces the two dots. */
#appPage .app-topbar .brand-logo {
    width:
        34px !important;

    height:
        34px !important;

    flex:
        0 0 34px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    padding:
        3px !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    border:
        1px solid #d2dee5 !important;

    box-shadow:
        0 5px 12px rgba(
            20,
            43,
            58,
            .07
        ) !important;
}

#appPage .app-topbar .brand-dot {
    display:
        none !important;
}

/* Keep the shared Admin / Branch topbar identity aligned. */
#appPage .app-topbar .brand-mini {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;
}

#appPage .app-topbar .logout-btn::before {
    display:
        none !important;

    content:
        none !important;
}

#appPage .app-topbar .logout-btn::after {
    display:
        none !important;

    content:
        none !important;
}

#appPage .app-topbar .logout-btn {
    gap:
        0 !important;

    padding:
        0 14px !important;

    min-width:
        78px !important;

    justify-content:
        center !important;
}

/* Mobile */
@media (max-width: 760px) {

    #appPage .app-topbar .brand-logo {
        width:
            30px !important;

        height:
            30px !important;

        flex-basis:
            30px !important;
    }

    #appPage .app-topbar .logout-btn {
        min-width:
            70px !important;

        padding:
            0 11px !important;
    }
}

/* Remove every remaining decorative brand dot/marker. */
#appPage .app-topbar .brand-mini::before,
#appPage .app-topbar .brand-mini::after,
#appPage .app-topbar .brand-dot,
#appPage .app-topbar .brand-mark,
#appPage .app-topbar .brand-status-dot {
    display:
        none !important;

    content:
        none !important;
}

/* Let the real logo carry the whole visual identity. */
#appPage .app-topbar .brand-logo,
#appPage .app-topbar .brand-mini .brand-logo,
#appPage .app-topbar .brand-mini img {
    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    min-height:
        44px !important;

    flex:
        0 0 44px !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    padding:
        4px !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    border:
        1px solid #cfdce4 !important;

    box-shadow:
        0 5px 12px rgba(
            20,
            43,
            58,
            .065
        ) !important;
}

/* Rebalance the text after the larger logo. */
#appPage .app-topbar .brand-mini {
    gap:
        11px !important;
}

#appPage .app-topbar .brand-mini strong {
    font-size:
        18px !important;

    line-height:
        1.05 !important;
}

/* Mobile */
@media (max-width: 760px) {

    #appPage .app-topbar .brand-logo,
    #appPage .app-topbar .brand-mini .brand-logo,
    #appPage .app-topbar .brand-mini img {
        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px !important;

        min-height:
            38px !important;

        flex-basis:
            38px !important;

        padding:
            3px !important;

        border-radius:
            9px !important;
    }

    #appPage .app-topbar .brand-mini {
        gap:
            9px !important;
    }

    #appPage .app-topbar .brand-mini strong {
        font-size:
            16px !important;
    }
}

#doaModal #warrantyProcessField,
#doaModal #endResultField {
    min-height:
        90px !important;

    resize:
        vertical !important;
}

#doaModal #endResultField {
    min-height:
        72px !important;
}

#doaModal .optional-label {
    margin-left:
        5px !important;

    color:
        #7d8c96 !important;

    font-size:
        .72em !important;

    font-weight:
        700 !important;
}

.screenshot-preview-card .shot-warranty-panel {
    margin-top:
        9px !important;
}

@media print {
    .issue-card,
    .grid,
    .meta-strip {
        break-inside:
            avoid;
    }
}

@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            476px !important;

        min-height:
            476px !important;

        max-height:
            476px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            9px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            88px !important;

        min-height:
            88px !important;

        max-height:
            88px !important;
    }
}

#historyModal[hidden] {
    display:
        none !important;

    pointer-events:
        none !important;
}

/* ---------------------------------------------------------
   1) Latest DOA Records — compact 5-card viewport
   5 × 76px + 4 × 8px = 412px.
   This keeps all five cards visible within a normal desktop
   dashboard while retaining internal scrolling for #6+.
--------------------------------------------------------- */

#appPage #recentActivityList .recent-arrow,
#appPage #recentActivityList .recent-status-dot {
    top:
        50% !important;
}

/* Mobile: 5 × 70px + 4 × 7px = 378px. */
@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            378px !important;

        min-height:
            378px !important;

        max-height:
            378px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            7px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            70px !important;

        min-height:
            70px !important;

        max-height:
            70px !important;

        flex-basis:
            70px !important;
    }
}

/* ---------------------------------------------------------
   2) DOA Preview — Error & Detail must read from the top
--------------------------------------------------------- */

.screenshot-preview-card
.shot-issue-panel {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        flex-start !important;

    align-items:
        stretch !important;

    overflow:
        hidden !important;

    min-height:
        0 !important;

    height:
        auto !important;
}

.screenshot-preview-card
.shot-issue-heading {
    flex:
        0 0 auto !important;

    min-height:
        46px !important;

    height:
        46px !important;

    padding:
        0 13px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    background:
        #edf3f5 !important;

    border-bottom:
        1px solid #d5e0e6 !important;
}

.screenshot-preview-card
.shot-error-row {
    flex:
        0 0 auto !important;

    min-height:
        58px !important;

    height:
        auto !important;

    padding:
        10px 12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        flex-start !important;

    align-items:
        flex-start !important;

    gap:
        5px !important;

    background:
        #fbfcfd !important;

    border-bottom:
        1px solid #dce5ea !important;
}

.screenshot-preview-card
.shot-error-row
span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #758690 !important;

    font-size:
        8px !important;

    line-height:
        1.1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .75px !important;

    text-transform:
        uppercase !important;
}

.screenshot-preview-card
.shot-error-row
strong {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #244255 !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;

    font-weight:
        850 !important;

    white-space:
        normal !important;

    text-align:
        left !important;
}

/* Detail starts immediately after Error Type and is top-aligned. */
.screenshot-preview-card
.shot-detail-block {
    flex:
        0 0 auto !important;

    min-height:
        78px !important;

    height:
        auto !important;

    padding:
        11px 12px 12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        flex-start !important;

    align-items:
        flex-start !important;

    gap:
        6px !important;

    background:
        #ffffff !important;
}

.screenshot-preview-card
.shot-detail-block
span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #758690 !important;

    font-size:
        8px !important;

    line-height:
        1.1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .75px !important;

    text-transform:
        uppercase !important;
}

.screenshot-preview-card
.shot-detail-block
p {
    width:
        100% !important;

    margin:
        0 !important;

    color:
        #2e4b5e !important;

    font-size:
        13px !important;

    line-height:
        1.55 !important;

    font-weight:
        750 !important;

    text-align:
        left !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}

/* Make the issue heading / values occupy exactly their content,
   instead of leaving a large centered-looking void. */
.screenshot-preview-card
.shot-issue-panel
.shot-issue-heading + .shot-detail-block {
    margin-top:
        0 !important;
}

/* Mobile preview */
@media (max-width: 760px) {

    .screenshot-preview-card
    .shot-error-row {
        min-height:
            54px !important;

        padding:
            9px 11px !important;
    }

    .screenshot-preview-card
    .shot-detail-block {
        min-height:
            74px !important;

        padding:
            10px 11px 11px !important;
    }

    .screenshot-preview-card
    .shot-error-row
    strong,
    .screenshot-preview-card
    .shot-detail-block
    p {
        font-size:
            12px !important;
    }
}

#doaModal #doaId:not([readonly]) {
    background:
        #fbfdfe !important;

    border-color:
        #a9c3cf !important;

    color:
        #17364d !important;

    font-weight:
        850 !important;

    letter-spacing:
        .15px !important;
}

#doaModal #doaId[readonly] {
    background:
        #f1f5f7 !important;

    color:
        #536b7a !important;

    cursor:
        not-allowed !important;
}

#appPage #recentActivityList .recent-arrow,
#appPage #recentActivityList .recent-status-dot {
    top:
        50% !important;
}

@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            330px !important;

        min-height:
            330px !important;

        max-height:
            330px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            6px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            60px !important;

        min-height:
            60px !important;

        max-height:
            60px !important;

        flex-basis:
            60px !important;
    }

    #appPage #recentActivityList .recent-secondary,
    #appPage #recentActivityList .recent-secondary
    .recent-detail-inline {
        font-size:
            9.5px !important;

        line-height:
            15px !important;
    }
}

.screenshot-preview-card
.shot-warranty-section {
    margin-top:
        7px !important;
}

.screenshot-preview-card
.shot-warranty-heading {
    min-height:
        34px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 10px !important;

    border:
        1px solid #d4dfe5 !important;

    border-bottom:
        0 !important;

    border-radius:
        9px 9px 0 0 !important;

    background:
        #edf3f5 !important;

    color:
        #294053 !important;

    font-size:
        10px !important;

    font-weight:
        850 !important;
}

.screenshot-preview-card
.shot-warranty-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        6px !important;
}

.screenshot-preview-card
.shot-warranty-card {
    min-height:
        44px !important;

    padding:
        7px 9px !important;

    border:
        1px solid #d4dfe5 !important;

    border-radius:
        8px !important;

    background:
        #ffffff !important;
}

.screenshot-preview-card
.shot-warranty-card.full {
    grid-column:
        1 / -1 !important;
}

.screenshot-preview-card
.shot-warranty-card span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #7a8993 !important;

    font-size:
        7px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .7px !important;

    text-transform:
        uppercase !important;
}

.screenshot-preview-card
.shot-warranty-card strong {
    display:
        block !important;

    margin-top:
        4px !important;

    color:
        #284356 !important;

    font-size:
        10.5px !important;

    line-height:
        1.25 !important;

    font-weight:
        820 !important;
}

.screenshot-preview-card
.shot-warranty-card p {
    margin:
        4px 0 0 !important;

    color:
        #345166 !important;

    font-size:
        10px !important;

    line-height:
        1.3 !important;

    font-weight:
        720 !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}

/* One-screen capture mode: compact the whole body instead of
   forcing the user to scroll. */

@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-body {
        zoom:
            .78 !important;
    }

    .screenshot-preview-card
    .shot-warranty-grid {
        grid-template-columns:
            1fr !important;
    }

    .screenshot-preview-card
    .shot-warranty-card.full {
        grid-column:
            auto !important;
    }
}

/* Comfortable desktop card size */
#appPage .recent-card {
    height:
        432px !important;

    min-height:
        432px !important;

    max-height:
        432px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    -webkit-overflow-scrolling:
        touch !important;

    overscroll-behavior-y:
        contain !important;

    scrollbar-width:
        thin !important;

    scrollbar-color:
        #b7c8d1 transparent !important;
}

/* Give every record enough breathing room. */

/* Larger, easier-to-scan cards */

/* Better vertical centering inside the larger card */

/* ID / platform row */

/* Product / branch / error / detail row */

/* Keep dot + action arrow centered against the larger row */
#appPage #recentActivityList .recent-status-dot,
#appPage #recentActivityList .recent-arrow {
    top:
        50% !important;
}

/* Subtle scrollbar */
#appPage .recent-card::-webkit-scrollbar {
    width:
        8px;
}

#appPage .recent-card::-webkit-scrollbar-track {
    background:
        transparent;
}

#appPage .recent-card::-webkit-scrollbar-thumb {
    background:
        #b7c8d1;

    border-radius:
        999px;

    border:
        2px solid transparent;

    background-clip:
        padding-box;
}

#appPage .recent-card::-webkit-scrollbar-thumb:hover {
    background:
        #a7bcc7;

    border:
        2px solid transparent;

    background-clip:
        padding-box;
}

/* Mobile */
@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            410px !important;

        min-height:
            410px !important;

        max-height:
            410px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            8px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            74px !important;

        min-height:
            74px !important;

        max-height:
            74px !important;

        flex-basis:
            74px !important;

        padding:
            0 13px !important;
    }

    #appPage #recentActivityList .recent-primary strong {
        font-size:
            14px !important;
    }

    #appPage #recentActivityList .recent-secondary,
    #appPage #recentActivityList .recent-secondary
    .recent-detail-inline {
        font-size:
            10.5px !important;

        line-height:
            17px !important;
    }
}

/*
 * Keep the five cards at the same comfortable size, but leave a
 * deliberate empty area underneath them so the section does not
 * look visually cut off at the bottom.
 *
 * Desktop:
 *   5 × 80px cards + 4 × 8px gaps = 432px
 *   + 18px breathing space = 450px viewport
 *
 * 6th+ records continue to scroll inside the same panel.
 */

/* Make sure the fifth card itself is not pushed or stretched. */

/* Mobile: preserve the same visual idea with a smaller buffer. */
@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            426px !important;

        min-height:
            426px !important;

        max-height:
            426px !important;

        padding-bottom:
            16px !important;
    }

    #appPage #recentActivityList .recent-row {
        flex:
            0 0 74px !important;

        height:
            74px !important;

        min-height:
            74px !important;

        max-height:
            74px !important;
    }
}

/*
 * The 0.51 viewport was intentionally larger, but its internal
 * padding caused the fifth card to sit too close to the bottom
 * boundary. This pass uses explicit top/bottom insets and a
 * stable row rhythm.
 */

/* Recent Activity viewport */

/*
 * Keep the list aligned to the top and give the first card
 * a very small breathing offset.
 */

/* Comfortable, consistent card height */
#appPage #recentActivityList .recent-row {
    width:
        100% !important;

    height:
        80px !important;

    min-height:
        80px !important;

    max-height:
        80px !important;

    margin:
        0 !important;

    padding:
        0 16px !important;

    box-sizing:
        border-box !important;

    border-radius:
        12px !important;

    align-self:
        stretch !important;
}

/* Bring content toward the visual center of each card. */

/* First line */

/* Second line */

/* Uniform separators */

/* Dot + action arrow stay on the exact card centerline. */
#appPage #recentActivityList .recent-status-dot,
#appPage #recentActivityList .recent-arrow {
    top:
        50% !important;

    transform:
        translateY(
            -50%
        ) !important;
}

/* A little visual separation beneath the visible fifth card. */
#appPage .recent-card::after {
    content:
        "" !important;

    display:
        block !important;

    height:
        1px !important;

    margin:
        16px 0 0 !important;

    pointer-events:
        none !important;
}

/* Keep the panel itself visually aligned with the surrounding section. */

/* Mobile */
@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            424px !important;

        min-height:
            424px !important;

        max-height:
            424px !important;

        padding:
            4px 0 16px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            7px !important;

        padding-bottom:
            2px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            74px !important;

        min-height:
            74px !important;

        max-height:
            74px !important;

        padding:
            0 13px !important;
    }

    #appPage #recentActivityList .recent-main {
        left:
            27px !important;

        right:
            59px !important;

        min-height:
            42px !important;

        height:
            42px !important;

        gap:
            5px !important;
    }

    #appPage #recentActivityList .recent-primary {
        height:
            19px !important;

        min-height:
            19px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height:
            17px !important;

        min-height:
            17px !important;

        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-secondary
    .recent-detail-inline {
        font-size:
            10.2px !important;

        line-height:
            17px !important;

        max-width:
            42% !important;
    }
}

/* One shared horizontal content rail for the whole Dashboard. */
#appPage .app-topbar {
    width:
        min(
            1120px,
            calc(
                100vw - 56px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    box-sizing:
        border-box !important;
}

/* Main dashboard shares exactly the same left/right edges. */
#appPage .dashboard {
    width:
        min(
            1120px,
            calc(
                100vw - 56px
            )
        ) !important;

    max-width:
        1120px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    padding-top:
        34px !important;

    padding-bottom:
        56px !important;

    box-sizing:
        border-box !important;
}

/* Make every direct Dashboard section use the same rail. */
#appPage .dashboard-heading,
#appPage .platform-grid,
#appPage .dashboard-summary,
#appPage .recent-section {
    width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;
}

/* Consistent vertical rhythm between major sections. */

#appPage .dashboard-summary {
    margin-top:
        14px !important;

    gap:
        14px !important;
}

/* Keep the Recent Activity heading aligned with its card. */
#appPage .recent-heading {
    width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;
}

/*
 * Restore the actual row layout from the stable 0.52 behavior.
 * These are intentionally minimal: only the container geometry
 * is normalized, while the existing text positioning is preserved.
 */
#appPage #recentActivityList.recent-list {
    width:
        100% !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        ) !important;

    align-content:
        start !important;

    justify-items:
        stretch !important;

    overflow:
        visible !important;

    box-sizing:
        border-box !important;
}

/* Preserve existing readable card size. */

/* Desktop */
@media (min-width: 761px) {

    #appPage .app-topbar {
        min-height:
            64px !important;
    }

    #appPage .dashboard {
        padding-top:
            32px !important;

        padding-bottom:
            56px !important;
    }

    #appPage .platform-grid {
        margin-top:
            24px !important;
    }
}

/* Tablet */
@media (max-width: 900px) {

    #appPage .app-topbar,
    #appPage .dashboard {
        width:
            calc(
                100vw - 40px
            ) !important;
    }
}

/* Mobile */
@media (max-width: 760px) {

    #appPage .app-topbar,
    #appPage .dashboard {
        width:
            calc(
                100vw - 28px
            ) !important;
    }

    #appPage .dashboard {
        padding-top:
            24px !important;

        padding-bottom:
            38px !important;
    }

    #appPage .platform-grid {
        margin-top:
            20px !important;
    }

    #appPage .dashboard-summary {
        margin-top:
            12px !important;

        gap:
            10px !important;
    }

    #appPage .recent-section {
        margin-top:
            20px !important;

        padding-bottom:
            22px !important;
    }
}

/*
 * Keep the existing readable card size from 0.50–0.54.
 * The panel itself becomes slightly taller so the fifth card
 * is followed by a clean bottom breathing area.
 *
 * Five 80px cards + four 8px gaps = 432px.
 * Add 28px bottom breathing space = 460px viewport.
 */

#appPage .recent-card {
    height:
        460px !important;

    min-height:
        460px !important;

    max-height:
        460px !important;

    padding:
        4px 0 28px !important;

    box-sizing:
        border-box !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    scroll-padding-top:
        4px !important;

    scroll-padding-bottom:
        28px !important;

    overscroll-behavior-y:
        contain !important;

    -webkit-overflow-scrolling:
        touch !important;
}

/*
 * Do not stretch the list to fill the panel. The unused space
 * remains visible underneath the fifth record.
 */

/* Preserve the readable card rhythm. */

/* A little clearer separation before the breathing area. */
#appPage #recentActivityList .recent-row:last-child {
    margin-bottom:
        0 !important;
}

/* Mobile: slightly tighter, but still visibly breathable. */
@media (max-width: 760px) {

    #appPage .recent-card {
        height:
            430px !important;

        min-height:
            430px !important;

        max-height:
            430px !important;

        padding:
            4px 0 24px !important;

        scroll-padding-bottom:
            24px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            74px !important;

        min-height:
            74px !important;

        max-height:
            74px !important;

        flex:
            0 0 74px !important;
    }
}

/*
 * No internal scroll is needed here because renderRecentActivity()
 * already shows records.slice(0, 5). The container should therefore
 * be content-height + a controlled bottom breathing area.
 */

#appPage .recent-card {
    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 0 26px !important;

    box-sizing:
        border-box !important;

    overflow:
        visible !important;

    scrollbar-width:
        auto !important;

    box-shadow:
        none !important;
}

/* Five actual rows, no artificial viewport. */
#appPage #recentActivityList.recent-list {
    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        ) !important;

    gap:
        8px !important;

    align-content:
        start !important;

    justify-items:
        stretch !important;

    overflow:
        visible !important;
}

/* First card sits immediately under the section heading. */
#appPage #recentActivityList .recent-row:first-child {
    margin-top:
        0 !important;
}

/* Keep the record content centered without large top/bottom voids. */

/* Primary line */

/* Secondary line */

/* Keep all details on the same visual baseline. */
#appPage #recentActivityList
.recent-secondary > span {
    line-height:
        17px !important;

    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}

#appPage #recentActivityList
.recent-secondary
.recent-detail-inline {
    min-width:
        95px !important;

    max-width:
        44% !important;

    font-size:
        10.5px !important;

    line-height:
        17px !important;

    font-weight:
        750 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

/* Center status dot + action arrow in the row. */

/*
 * The bottom breathing room is intentional:
 * 5 rows = 370px
 * 4 gaps = 32px
 * bottom breathing = 26px
 * total content block = 428px
 */
#appPage .recent-section {
    margin-bottom:
        0 !important;

    padding-bottom:
        0 !important;
}

@media (max-width: 760px) {

    #appPage .recent-card {
        padding:
            0 0 22px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            7px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            72px !important;

        min-height:
            72px !important;

        max-height:
            72px !important;

        flex-basis:
            72px !important;

        padding:
            0 13px !important;
    }

    #appPage #recentActivityList .recent-main {
        min-height:
            40px !important;

        height:
            40px !important;
    }

    #appPage #recentActivityList .recent-primary {
        height:
            18px !important;

        min-height:
            18px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height:
            16px !important;

        min-height:
            16px !important;

        font-size:
            10px !important;

        line-height:
            16px !important;
    }

    #appPage #recentActivityList
    .recent-secondary
    .recent-detail-inline {
        font-size:
            10px !important;

        line-height:
            16px !important;
    }
}

/* ---------------------------------------------------------
   1) Topbar — sit closer to the viewport top.
--------------------------------------------------------- */

/* Preserve the same content rail without creating excess
   whitespace above the dashboard. */

/* ---------------------------------------------------------
   2) Recent Records — arrows belong at the far right.
   Keep all record text untouched.
--------------------------------------------------------- */

#appPage #recentActivityList .recent-row {
    position:
        relative !important;

    padding-right:
        60px !important;

    box-sizing:
        border-box !important;
}

/* True right-edge action button */
#appPage #recentActivityList .recent-arrow {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        16px !important;

    left:
        auto !important;

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;

    min-height:
        34px !important;

    margin:
        0 !important;

    transform:
        translateY(
            -50%
        ) !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #d2dfe6 !important;

    border-radius:
        9px !important;

    background:
        #f7fafb !important;

    color:
        #527080 !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    z-index:
        2 !important;

    box-shadow:
        0 4px 10px rgba(
            30,
            57,
            72,
            .045
        ) !important;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}

/* Keep the text column away from the action button. */

/* Do not let long detail text collide with the arrow. */

/* Mobile */
@media (max-width: 760px) {

    #appPage .app-topbar {
        margin-top:
            8px !important;
    }

    #appPage .dashboard {
        padding-top:
            22px !important;
    }

    #appPage #recentActivityList .recent-row {
        padding-right:
            54px !important;
    }

    #appPage #recentActivityList .recent-arrow {
        right:
            12px !important;

        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;
    }

    #appPage #recentActivityList
    .recent-secondary
    .recent-detail-inline {
        max-width:
            38% !important;
    }
}

/*
 * Keep the approved horizontal rail from 0.57.
 * This pass only tightens the vertical rhythm.
 */

/* ---------------------------------------------------------
   1) Topbar closer to the viewport top
--------------------------------------------------------- */

#appPage .app-topbar {
    margin-top:
        5px !important;

    margin-bottom:
        0 !important;
}

#appPage .dashboard {
    padding-top:
        20px !important;
}

/* ---------------------------------------------------------
   2) Welcome / Dashboard heading block
--------------------------------------------------------- */

#appPage .dashboard-heading {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}

#appPage .dashboard-heading .eyebrow {
    margin-top:
        0 !important;

    line-height:
        1 !important;
}

#appPage .dashboard-heading h2 {
    margin-top:
        5px !important;

    line-height:
        1.01 !important;
}

#appPage .dashboard-heading .dashboard-subtitle {
    margin-top:
        7px !important;

    line-height:
        1.32 !important;
}

/* ---------------------------------------------------------
   3) Android / Apple cards — move slightly upward and
      keep both cards identical in height and alignment
--------------------------------------------------------- */

#appPage .platform-grid {
    margin-top:
        20px !important;

    gap:
        14px !important;

    align-items:
        stretch !important;
}

#appPage .platform-card {
    height:
        78px !important;

    min-height:
        78px !important;

    max-height:
        78px !important;

    padding:
        0 18px !important;

    box-sizing:
        border-box !important;

    align-items:
        center !important;
}

#appPage .platform-card .platform-icon {
    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    min-height:
        46px !important;

    flex:
        0 0 46px !important;
}

#appPage .platform-card .platform-copy {
    justify-content:
        center !important;

    align-self:
        center !important;
}

#appPage .platform-card .platform-copy strong {
    line-height:
        1.08 !important;

    margin:
        0 !important;
}

#appPage .platform-card .platform-copy span {
    margin-top:
        4px !important;

    line-height:
        1.18 !important;
}

/* ---------------------------------------------------------
   4) Summary cards — pull them upward and align all 3
--------------------------------------------------------- */

#appPage .stats-grid {
    margin-top:
        11px !important;

    gap:
        14px !important;

    align-items:
        stretch !important;
}

#appPage .summary-card,
#appPage .stat-card {
    height:
        88px !important;

    min-height:
        88px !important;

    max-height:
        88px !important;

    padding:
        13px 16px !important;

    box-sizing:
        border-box !important;

    justify-content:
        center !important;
}

#appPage .summary-card strong,
#appPage .stat-card strong {
    margin-top:
        5px !important;

    line-height:
        .98 !important;
}

#appPage .summary-card small,
#appPage .stat-card small {
    margin-top:
        5px !important;

    line-height:
        1.25 !important;
}

/* ---------------------------------------------------------
   5) Recent Activity header — move upward with the content
--------------------------------------------------------- */

#appPage .recent-heading {
    margin-bottom:
        9px !important;

    align-items:
        flex-end !important;
}

#appPage .recent-heading h3 {
    margin-top:
        5px !important;

    line-height:
        1.04 !important;
}

#appPage .recent-heading p:not(.eyebrow) {
    margin-top:
        5px !important;

    line-height:
        1.28 !important;
}

/* ---------------------------------------------------------
   6) Latest DOA Records — slightly larger cards
      with the SAME bottom breathing space as approved.
--------------------------------------------------------- */

/* Keep the row content centered while enlarging the card. */

/* Keep arrows aligned to the exact card center line. */

/*
 * Bottom breathing space remains visually deliberate:
 * 5 × 82px + 4 × 9px = 446px of card block
 * + 26px = breathing below the fifth card
 */

/* ---------------------------------------------------------
   7) Mobile
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .app-topbar {
        margin-top:
            5px !important;
    }

    #appPage .dashboard {
        padding-top:
            18px !important;
    }

    #appPage .platform-grid {
        margin-top:
            18px !important;
    }

    #appPage .platform-card {
        height:
            74px !important;

        min-height:
            74px !important;

        max-height:
            74px !important;
    }

    #appPage .stats-grid {
        margin-top:
            10px !important;
    }

    #appPage .summary-card,
    #appPage .stat-card {
        height:
            82px !important;

        min-height:
            82px !important;

        max-height:
            82px !important;
    }

    #appPage .recent-section {
        margin-top:
            18px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            8px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            76px !important;

        min-height:
            76px !important;

        max-height:
            76px !important;

        flex-basis:
            76px !important;

        padding:
            0 13px !important;
    }

    #appPage #recentActivityList .recent-main {
        min-height:
            42px !important;

        height:
            42px !important;
    }

    #appPage #recentActivityList .recent-primary {
        height:
            19px !important;

        min-height:
            19px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height:
            17px !important;

        min-height:
            17px !important;

        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-secondary
    .recent-detail-inline {
        font-size:
            10.2px !important;

        line-height:
            17px !important;

        max-width:
            42% !important;
    }

    #appPage .recent-card {
        padding-bottom:
            22px !important;
    }
}

#historyModal .history-table.history-branch-mode .history-admin-only-col {
    display: none !important;
}

#historyModal .history-table.history-admin-mode .history-warranty-cell,
#historyModal .history-table.history-admin-mode .history-result-cell {
    min-width: 180px !important;
    max-width: 260px !important;
    vertical-align: middle !important;
    text-align: left !important;
}

#historyModal .history-table.history-admin-mode .history-admin-only-col {
    font-size: 11px !important;
    font-weight: 800 !important;
}

#historyModal .history-table.history-admin-mode .history-admin-detail {
    display: block !important;
    color: #314f61 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-height: 48px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#historyModal .history-table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Admin DOA ID field: fixed DOA- prefix + suffix input */
#doaModal .doa-id-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 49px !important;
    border: 1px solid #c9d6df !important;
    border-radius: 10px !important;
    background: #fbfcfd !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#doaModal .doa-id-fixed-prefix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    padding: 0 11px !important;
    border-right: 1px solid #d8e2e8 !important;
    background: #f1f5f7 !important;
    color: #536b7a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .25px !important;
}

#doaModal #doaId {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 49px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 13px !important;
    color: #18374c !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 49px !important;
    outline: none !important;
}

#doaModal #doaId[readonly] {
    color: #617886 !important;
    cursor: not-allowed !important;
}

#doaModal .doa-id-helper {
    display: block !important;
    margin-top: 5px !important;
    color: #7a8a95 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
}

/*
 * Warranty Handling Process / End Result looked different because
 * their Admin-only class introduced its own typography instead of
 * following the same table body font system.
 *
 * Force these cells to inherit the exact History table typography,
 * while keeping their own readable weight/color.
 */

/* Same font family and rendering as all other History table cells. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell,
#historyModal
.history-table.history-admin-mode
.history-result-cell,
#historyModal
.history-table.history-admin-mode
.history-warranty-cell *,
#historyModal
.history-table.history-admin-mode
.history-result-cell * {
    font-family:
        inherit !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;
}

/* Match the normal History body text scale. */

/* Blank state should use the same muted table typography. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell
.history-muted,
#historyModal
.history-table.history-admin-mode
.history-result-cell
.history-muted {
    font-family:
        inherit !important;

    font-size:
        11px !important;

    line-height:
        1.4 !important;

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;

    color:
        #a2adba !important;
}

/* Keep the column headings in exactly the same visual system
   as the rest of the History header row. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell,
#historyModal
.history-table.history-admin-mode
.history-result-cell {
    font-family:
        inherit !important;
}

/* Remove any accidental browser-specific styling. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell
span,
#historyModal
.history-table.history-admin-mode
.history-result-cell
span {
    text-decoration:
        none !important;

    font-style:
        normal !important;
}

/*
 * Root cause found:
 * .history-admin-detail was explicitly locked to 11px.
 * The rest of the History body uses the table's 13px base size.
 *
 * Match the Warranty Handling Process / End Result values to the
 * same visual typography as Checked By / Detail text.
 */

/* Match normal History body text size and weight. */

/* Make the empty em-dash state use the same size too. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell
.history-muted,
#historyModal
.history-table.history-admin-mode
.history-result-cell
.history-muted {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    line-height:
        1.4 !important;

    font-weight:
        700 !important;

    color:
        #a2adba !important;
}

/* Keep the column cells themselves on the same baseline as other
   History cells. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell,
#historyModal
.history-table.history-admin-mode
.history-result-cell {
    font-size:
        13px !important;

    line-height:
        1.4 !important;
}

#historyModal
.history-table.history-admin-mode
.history-admin-detail {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;

    letter-spacing:
        0 !important;

    color:
        #294356 !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;
}

#historyModal
.history-table.history-admin-mode
.history-warranty-cell
.history-muted,
#historyModal
.history-table.history-admin-mode
.history-result-cell
.history-muted {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        750 !important;

    color:
        #a2adba !important;
}

/* Keep the cell itself on the exact same baseline/scale. */
#historyModal
.history-table.history-admin-mode
.history-warranty-cell,
#historyModal
.history-table.history-admin-mode
.history-result-cell {
    font-size:
        14px !important;

    line-height:
        1.4 !important;
}

/* ---------------------------------------------------------
   Admin Latest DOA Records — Warranty / Result inline data
--------------------------------------------------------- */

/* Admin-only warranty/result summary in the recent row. */

/* Keep the admin-only content away from the action arrow. */

/* Branch users never see these summaries. */

@media (max-width: 760px) {

}

#appPage #recentActivityList .recent-secondary {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.8px !important;
    line-height: 18px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#appPage #recentActivityList
.recent-secondary
.recent-detail-inline {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 10.8px !important;
    line-height: 18px !important;
    font-weight: 750 !important;
}

@media (max-width: 760px) {
    #appPage #recentActivityList .recent-secondary {
        height: 17px !important;
        min-height: 17px !important;
        font-size: 10.2px !important;
        line-height: 17px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span {
        height: 17px !important;
        line-height: 17px !important;
    }
}

/*
 * This is the layout:
 *
 * Product • Branch • Error Type • Error Detail • Warranty • Result
 *
 * Each value keeps its natural width. There are NO giant equal
 * columns. If the combined line is longer than the card width,
 * the entire data strip scrolls left/right.
 */

/* The strip itself is the only horizontal scroll container. */
#appPage
#recentActivityList
.recent-secondary {
    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        22px !important;

    min-height:
        22px !important;

    margin:
        0 !important;

    padding:
        0 0 4px !important;

    gap:
        0 !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    white-space:
        nowrap !important;

    box-sizing:
        border-box !important;

    scrollbar-width:
        thin !important;

    scrollbar-color:
        #b7c8d1 transparent !important;

    -webkit-overflow-scrolling:
        touch !important;

    overscroll-behavior-x:
        contain !important;
}

/* Every segment keeps its natural/content width. */
#appPage
#recentActivityList
.recent-secondary > span {
    position:
        relative !important;

    flex:
        0 0 auto !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    height:
        18px !important;

    min-height:
        18px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    color:
        #41596a !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10.8px !important;

    line-height:
        18px !important;

    font-weight:
        720 !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* One consistent bullet between each value. */
#appPage
#recentActivityList
.recent-secondary > span + span {
    margin-left:
        7px !important;

    padding-left:
        0 !important;
}

#appPage
#recentActivityList
.recent-secondary > span + span::before {
    content:
        "•" !important;

    display:
        inline-block !important;

    margin-right:
        7px !important;

    color:
        #98a8b2 !important;

    font-size:
        10px !important;

    line-height:
        18px !important;

    font-weight:
        800 !important;
}

/* Plain data values: no special box, no special width, no ellipsis. */
#appPage
#recentActivityList
.recent-detail-inline,
#appPage
#recentActivityList
.recent-warranty-value,
#appPage
#recentActivityList
.recent-result-value {
    flex:
        0 0 auto !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        none !important;

    overflow:
        visible !important;

    white-space:
        nowrap !important;

    text-overflow:
        clip !important;

    color:
        #41596a !important;

    font-family:
        inherit !important;

    font-size:
        10.8px !important;

    line-height:
        18px !important;

    font-weight:
        720 !important;
}

/* Slim desktop scrollbar */

/* Slightly more touch-friendly on mobile. */
@media (max-width: 760px) {

    #appPage
    #recentActivityList
    .recent-secondary {
        height:
            21px !important;

        min-height:
            21px !important;

        padding-bottom:
            4px !important;
    }

    #appPage
    #recentActivityList
    .recent-secondary > span,
    #appPage
    #recentActivityList
    .recent-detail-inline,
    #appPage
    #recentActivityList
    .recent-warranty-value,
    #appPage
    #recentActivityList
    .recent-result-value {
        height:
            17px !important;

        min-height:
            17px !important;

        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage
    #recentActivityList
    .recent-secondary > span + span::before {
        margin-right:
            6px !important;

        font-size:
            9.5px !important;

        line-height:
            17px !important;
    }
}

/* All values flow naturally; none expands to fill free space. */

/* Compact uniform separator. */

/* Override all special width/flex rules from earlier versions. */
#appPage
#recentActivityList
.recent-detail-inline,
#appPage
#recentActivityList
.recent-warranty-value,
#appPage
#recentActivityList
.recent-result-value {
    display:
        inline !important;

    flex:
        none !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        inherit !important;

    font-size:
        10.8px !important;

    line-height:
        18px !important;

    font-weight:
        720 !important;

    color:
        #41596a !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* Slightly stronger Detail, but without changing its width behavior. */

@media (max-width: 760px) {

    #appPage
    #recentActivityList
    .recent-secondary {
        height:
            17px !important;

        min-height:
            17px !important;

        padding-bottom:
            4px !important;
    }

    #appPage
    #recentActivityList
    .recent-secondary > span {
        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage
    #recentActivityList
    .recent-secondary > span + span::before {
        margin:
            0 6px !important;

        font-size:
            9.5px !important;

        line-height:
            17px !important;
    }
}

/* Section rhythm */
#appPage .recent-section {
    margin-top:
        18px !important;

    padding-bottom:
        0 !important;
}

#appPage .recent-heading {
    margin:
        0 0 10px !important;

    min-height:
        48px !important;

    align-items:
        flex-end !important;
}

#appPage .recent-heading h3 {
    margin:
        5px 0 0 !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -.25px !important;
}

#appPage .recent-heading p:not(.eyebrow) {
    margin:
        5px 0 0 !important;

    line-height:
        1.3 !important;
}

/* The five-card stack: readable, evenly spaced, no artificial
   viewport or internal panel frame. */
#appPage .recent-card {
    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 0 26px !important;

    overflow:
        visible !important;

    box-sizing:
        border-box !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    border:
        0 !important;
}

/* Five real cards, with a deliberate 9px rhythm. */
#appPage #recentActivityList.recent-list {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        ) !important;

    gap:
        9px !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-content:
        start !important;

    overflow:
        visible !important;
}

/* ---------------------------------------------------------
   Card
--------------------------------------------------------- */

#appPage #recentActivityList .recent-row {
    position:
        relative !important;

    width:
        100% !important;

    height:
        82px !important;

    min-height:
        82px !important;

    max-height:
        82px !important;

    flex:
        0 0 82px !important;

    display:
        grid !important;

    grid-template-columns:
        10px minmax(
            0,
            1fr
        ) 34px !important;

    align-items:
        center !important;

    gap:
        11px !important;

    margin:
        0 !important;

    padding:
        12px 14px 11px 13px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #cfdee6 !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        ) !important;

    box-shadow:
        0 4px 12px rgba(
            35,
            63,
            79,
            .055
        ) !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;

    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease !important;
}

/* Very subtle elevation when the user points at a record. */
#appPage #recentActivityList .recent-row:hover {
    transform:
        translateY(
            -1px
        ) !important;

    border-color:
        #b9cdd7 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 7px 18px rgba(
            35,
            63,
            79,
            .075
        ) !important;
}

#appPage #recentActivityList .recent-row:focus-visible {
    outline:
        3px solid rgba(
            72,
            130,
            150,
            .16
        ) !important;

    outline-offset:
        2px !important;
}

/* ---------------------------------------------------------
   Accent dot
--------------------------------------------------------- */

#appPage #recentActivityList .recent-status-dot {
    position:
        relative !important;

    top:
        auto !important;

    left:
        auto !important;

    align-self:
        center !important;

    width:
        7px !important;

    height:
        7px !important;

    min-width:
        7px !important;

    min-height:
        7px !important;

    margin:
        0 !important;

    border-radius:
        50% !important;

    box-shadow:
        0 0 0 4px rgba(
            77,
            142,
            161,
            .06
        ) !important;
}

/* ---------------------------------------------------------
   Main content column
--------------------------------------------------------- */

/* ---------------------------------------------------------
   Primary line: ID + Platform
--------------------------------------------------------- */

#appPage #recentActivityList .recent-primary strong {
    flex:
        0 1 auto !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #21394d !important;

    font-size:
        14px !important;

    line-height:
        20px !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.05px !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

/* ---------------------------------------------------------
   Secondary data strip
--------------------------------------------------------- */

/* All data values flow naturally — no equal empty columns. */
#appPage #recentActivityList .recent-secondary > span {
    display:
        inline !important;

    flex:
        none !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    vertical-align:
        baseline !important;

    color:
        #496173 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10.8px !important;

    line-height:
        19px !important;

    font-weight:
        720 !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* One uniform separator rhythm. */

/* Plain value typography for Detail / Warranty / Result. */
#appPage #recentActivityList
.recent-detail-inline,
#appPage #recentActivityList
.recent-warranty-value,
#appPage #recentActivityList
.recent-result-value {
    display:
        inline !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #41596a !important;

    font-family:
        inherit !important;

    font-size:
        10.8px !important;

    line-height:
        19px !important;

    font-weight:
        720 !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* Detail has a very small emphasis bump, not a different style. */

/* Keep the action button cleanly separated from the data column. */
#appPage #recentActivityList .recent-arrow {
    position:
        relative !important;

    inset:
        auto !important;

    align-self:
        center !important;

    justify-self:
        end !important;

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;

    min-height:
        34px !important;

    margin:
        0 !important;

    border:
        1px solid #d4e1e7 !important;

    border-radius:
        9px !important;

    background:
        #f9fbfc !important;

    color:
        #617986 !important;

    font-size:
        15px !important;

    line-height:
        34px !important;

    box-shadow:
        0 3px 8px rgba(
            35,
            63,
            79,
            .035
        ) !important;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        color .14s ease !important;
}

#appPage #recentActivityList
.recent-row:hover
.recent-arrow {
    transform:
        translateX(
            2px
        ) !important;

    border-color:
        #b9ced8 !important;

    background:
        #ffffff !important;

    color:
        #3f6c7f !important;
}

/* Compact, quiet scrollbar */
#appPage #recentActivityList
.recent-secondary::-webkit-scrollbar {
    height:
        5px;
}

#appPage #recentActivityList
.recent-secondary::-webkit-scrollbar-track {
    background:
        transparent;
}

#appPage #recentActivityList
.recent-secondary::-webkit-scrollbar-thumb {
    background:
        #b8c9d2;

    border-radius:
        999px;
}

#appPage #recentActivityList
.recent-secondary::-webkit-scrollbar-thumb:hover {
    background:
        #9fb5c0;
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 760px) {

    #appPage .recent-section {
        margin-top:
            17px !important;
    }

    #appPage .recent-heading {
        margin-bottom:
            8px !important;
    }

    #appPage #recentActivityList.recent-list {
        gap:
            8px !important;
    }

    #appPage #recentActivityList .recent-row {
        height:
            78px !important;

        min-height:
            78px !important;

        max-height:
            78px !important;

        flex-basis:
            78px !important;

        grid-template-columns:
            8px minmax(
                0,
                1fr
            ) 32px !important;

        gap:
            9px !important;

        padding:
            10px 11px 9px 11px !important;

        border-radius:
            12px !important;
    }

    #appPage #recentActivityList .recent-main {
        height:
            54px !important;

        min-height:
            54px !important;

        gap:
            4px !important;
    }

    #appPage #recentActivityList .recent-primary {
        height:
            19px !important;

        min-height:
            19px !important;
    }

    #appPage #recentActivityList .recent-primary strong {
        font-size:
            13.5px !important;

        line-height:
            19px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height:
            23px !important;

        min-height:
            23px !important;

        padding-bottom:
            4px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span,
    #appPage #recentActivityList
    .recent-detail-inline,
    #appPage #recentActivityList
    .recent-warranty-value,
    #appPage #recentActivityList
    .recent-result-value {
        font-size:
            10.2px !important;

        line-height:
            18px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span + span::before {
        margin:
            0 6px !important;

        font-size:
            9.5px !important;

        line-height:
            18px !important;
    }

    #appPage #recentActivityList
    .recent-arrow {
        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;
    }

    #appPage .recent-card {
        padding-bottom:
            22px !important;
    }
}

/* Card geometry */
#appPage #recentActivityList .recent-row {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        9px minmax(
            0,
            1fr
        ) 34px !important;

    align-items:
        center !important;

    gap:
        10px !important;

    height:
        82px !important;

    min-height:
        82px !important;

    max-height:
        82px !important;

    margin:
        0 !important;

    padding:
        10px 13px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    border-radius:
        13px !important;
}

/* Keep the accent dot centered to the full card. */
#appPage #recentActivityList .recent-status-dot {
    align-self:
        center !important;

    justify-self:
        center !important;

    width:
        7px !important;

    height:
        7px !important;

    min-width:
        7px !important;

    min-height:
        7px !important;

    margin:
        0 !important;

    position:
        relative !important;

    inset:
        auto !important;

    transform:
        none !important;
}

/*
 * The text block is centered as a unit.
 * Do NOT stretch it to the full card height.
 */

/* Primary line — never clip its top/bottom. */
#appPage #recentActivityList .recent-primary {
    width:
        100% !important;

    height:
        20px !important;

    min-height:
        20px !important;

    max-height:
        20px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    overflow:
        visible !important;

    box-sizing:
        border-box !important;
}

#appPage #recentActivityList .recent-primary strong {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    height:
        20px !important;

    line-height:
        20px !important;

    color:
        #21394d !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.05px !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* Secondary data line keeps its own scroll and remains inside the card. */

/* Keep data values natural-width. */

/* Small, consistent bullets only. */

/* Detail / Warranty / Result stay plain values. */
#appPage #recentActivityList
.recent-detail-inline,
#appPage #recentActivityList
.recent-warranty-value,
#appPage #recentActivityList
.recent-result-value {
    display:
        inline !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #41596a !important;

    font-family:
        inherit !important;

    font-size:
        10.8px !important;

    line-height:
        18px !important;

    font-weight:
        720 !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

/* Right action button is vertically centered, independent of text. */
#appPage #recentActivityList .recent-arrow {
    position:
        relative !important;

    inset:
        auto !important;

    align-self:
        center !important;

    justify-self:
        end !important;

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;

    min-height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    border:
        1px solid #d4e1e7 !important;

    border-radius:
        9px !important;

    background:
        #f9fbfc !important;

    color:
        #617986 !important;

    line-height:
        1 !important;

    font-size:
        15px !important;

    box-sizing:
        border-box !important;
}

/* Keep the 5-card rhythm and approved breathing space. */

#appPage .recent-card {
    padding-bottom:
        26px !important;
}

/* Mobile */
@media (max-width: 760px) {

    #appPage #recentActivityList.recent-row,
    #appPage #recentActivityList .recent-row {
        height:
            78px !important;

        min-height:
            78px !important;

        max-height:
            78px !important;

        padding:
            9px 11px !important;

        grid-template-columns:
            8px minmax(
                0,
                1fr
            ) 32px !important;

        gap:
            9px !important;
    }

    #appPage #recentActivityList .recent-main {
        height:
            50px !important;

        min-height:
            50px !important;
    }

    #appPage #recentActivityList
    .recent-primary {
        height:
            19px !important;

        min-height:
            19px !important;

        max-height:
            19px !important;
    }

    #appPage #recentActivityList
    .recent-primary strong {
        height:
            19px !important;

        line-height:
            19px !important;

        font-size:
            13.5px !important;
    }

    #appPage #recentActivityList
    .recent-secondary {
        height:
            21px !important;

        min-height:
            21px !important;

        padding-bottom:
            3px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span,
    #appPage #recentActivityList
    .recent-detail-inline,
    #appPage #recentActivityList
    .recent-warranty-value,
    #appPage #recentActivityList
    .recent-result-value {
        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span + span::before {
        margin:
            0 6px !important;

        font-size:
            9.5px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-arrow {
        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;
    }
}

#appPage #recentActivityList .recent-status-dot {
    position: static !important;
    align-self: center !important;
    justify-self: center !important;
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    margin: 0 !important;
    transform: none !important;
}

#appPage #recentActivityList .recent-main {
    position: static !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 5px !important;
    overflow: hidden !important;
}

/* DOA ID + platform are always fully visible and vertically centered. */

#appPage #recentActivityList .recent-primary strong {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 21px !important;
    line-height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #21394d !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* One natural-width data strip. No fake equal columns and no ellipsis. */
#appPage #recentActivityList .recent-secondary {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
    scrollbar-color: #b8c9d2 transparent !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
}

#appPage #recentActivityList .recent-secondary > span,
#appPage #recentActivityList .recent-detail-inline,
#appPage #recentActivityList .recent-warranty-value,
#appPage #recentActivityList .recent-result-value {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #496173 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.8px !important;
    line-height: 18px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: baseline !important;
}

#appPage #recentActivityList .recent-arrow {
    position: static !important;
    align-self: center !important;
    justify-self: end !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border: 1px solid #d4e1e7 !important;
    border-radius: 9px !important;
    background: #f9fbfc !important;
    color: #617986 !important;
    line-height: 1 !important;
    font-size: 15px !important;
    transform: none !important;
}

#appPage .recent-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 26px !important;
    overflow: visible !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    #appPage #recentActivityList .recent-row {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        grid-template-columns: 7px minmax(0, 1fr) 32px !important;
        column-gap: 9px !important;
        padding: 10px 11px !important;
    }

    #appPage #recentActivityList .recent-primary strong {
        font-size: 13.5px !important;
    }

    #appPage #recentActivityList .recent-secondary > span,
    #appPage #recentActivityList .recent-detail-inline,
    #appPage #recentActivityList .recent-warranty-value,
    #appPage #recentActivityList .recent-result-value {
        font-size: 10.2px !important;
        line-height: 17px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height: 23px !important;
        min-height: 23px !important;
    }

    #appPage #recentActivityList .recent-arrow {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

#appPage #recentActivityList .recent-main {
    position: static !important;
    inset: auto !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* The ID line is a real layout row, never absolute/translated. */
#appPage #recentActivityList .recent-primary {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex: 0 0 21px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#appPage #recentActivityList .recent-doa-id,
#appPage #recentActivityList .recent-primary strong {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #21394d !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#appPage #recentActivityList .recent-primary span {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 7px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #d4e1e8 !important;
    border-radius: 999px !important;
    background: #f5f8fa !important;
    color: #647988 !important;
    font-size: 8px !important;
    line-height: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .45px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#appPage #recentActivityList .recent-secondary {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 760px) {
    #appPage #recentActivityList .recent-row {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        grid-template-columns: 7px minmax(0, 1fr) 32px !important;
        column-gap: 9px !important;
        padding: 10px 11px !important;
    }

    #appPage #recentActivityList .recent-doa-id,
    #appPage #recentActivityList .recent-primary strong {
        font-size: 13.5px !important;
    }

    #appPage #recentActivityList .recent-secondary > span {
        font-size: 10.2px !important;
        line-height: 17px !important;
    }

    #appPage #recentActivityList .recent-secondary {
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
    }

    #appPage #recentActivityList .recent-arrow {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

/* ---------------------------------------------------------
   Card
--------------------------------------------------------- */

#appPage #recentActivityList .recent-row {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        8px minmax(
            0,
            1fr
        ) 34px !important;

    align-items:
        center !important;

    column-gap:
        10px !important;

    width:
        100% !important;

    height:
        86px !important;

    min-height:
        86px !important;

    max-height:
        86px !important;

    margin:
        0 !important;

    padding:
        10px 13px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}

/* ---------------------------------------------------------
   Main content block
--------------------------------------------------------- */

#appPage #recentActivityList .recent-main {
    position:
        static !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    align-self:
        center !important;

    justify-self:
        stretch !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        stretch !important;

    width:
        100% !important;

    height:
        48px !important;

    min-height:
        48px !important;

    max-height:
        48px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        4px !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;
}

/* ---------------------------------------------------------
   ID / Platform row
--------------------------------------------------------- */

#appPage #recentActivityList .recent-primary {
    position:
        static !important;

    top:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    display:
        flex !important;

    flex:
        0 0 21px !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        21px !important;

    min-height:
        21px !important;

    max-height:
        21px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        7px !important;

    overflow:
        visible !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}

#appPage #recentActivityList
.recent-primary strong,
#appPage #recentActivityList
.recent-doa-id {
    display:
        block !important;

    position:
        static !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    height:
        21px !important;

    min-height:
        21px !important;

    max-height:
        21px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #21394d !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    line-height:
        21px !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.05px !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}

#appPage #recentActivityList
.recent-primary span {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    height:
        18px !important;

    min-height:
        18px !important;

    max-height:
        18px !important;

    margin:
        0 !important;

    padding:
        0 7px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #d4e1e8 !important;

    border-radius:
        999px !important;

    background:
        #f5f8fa !important;

    color:
        #647988 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        8px !important;

    line-height:
        16px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .45px !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}

/* ---------------------------------------------------------
   Data strip — starts exactly under the ID, never centered.
--------------------------------------------------------- */

#appPage #recentActivityList
.recent-secondary {
    position:
        static !important;

    top:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    display:
        block !important;

    align-self:
        stretch !important;

    justify-self:
        stretch !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        none !important;

    height:
        22px !important;

    min-height:
        22px !important;

    max-height:
        22px !important;

    margin:
        0 !important;

    padding:
        0 0 3px !important;

    box-sizing:
        border-box !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    white-space:
        nowrap !important;

    text-align:
        left !important;

    scrollbar-width:
        thin !important;

    -webkit-overflow-scrolling:
        touch !important;

    overscroll-behavior-x:
        contain !important;
}

#appPage #recentActivityList
.recent-secondary > span {
    display:
        inline !important;

    position:
        static !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    vertical-align:
        baseline !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10.8px !important;

    line-height:
        18px !important;

    font-weight:
        720 !important;

    color:
        #41596a !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

#appPage #recentActivityList
.recent-secondary > span + span::before {
    content:
        "•" !important;

    display:
        inline-block !important;

    position:
        static !important;

    margin:
        0 7px !important;

    color:
        #9aabb5 !important;

    font-size:
        10px !important;

    line-height:
        18px !important;

    font-weight:
        800 !important;
}

/* Make Detail / Warranty / Result behave like normal text. */
#appPage #recentActivityList
.recent-detail-inline,
#appPage #recentActivityList
.recent-warranty-value,
#appPage #recentActivityList
.recent-result-value {
    display:
        inline !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font:
        inherit !important;

    color:
        #41596a !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;
}

#appPage #recentActivityList
.recent-detail-inline {
    font-weight:
        750 !important;
}

/* ---------------------------------------------------------
   Arrow
--------------------------------------------------------- */

#appPage #recentActivityList .recent-arrow {
    position:
        static !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

    align-self:
        center !important;

    justify-self:
        end !important;

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px !important;

    min-height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    box-sizing:
        border-box !important;
}

/* ---------------------------------------------------------
   Five-card rhythm
--------------------------------------------------------- */

#appPage #recentActivityList.recent-list {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        ) !important;

    gap:
        9px !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;
}

#appPage .recent-card {
    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 0 26px !important;

    overflow:
        visible !important;
}

@media (max-width: 760px) {

    #appPage #recentActivityList .recent-row {
        grid-template-columns:
            7px minmax(
                0,
                1fr
            ) 32px !important;

        column-gap:
            9px !important;

        height:
            82px !important;

        min-height:
            82px !important;

        max-height:
            82px !important;

        padding:
            10px 11px !important;
    }

    #appPage #recentActivityList .recent-main {
        height:
            46px !important;

        min-height:
            46px !important;

        max-height:
            46px !important;
    }

    #appPage #recentActivityList
    .recent-primary {
        height:
            20px !important;

        min-height:
            20px !important;

        max-height:
            20px !important;
    }

    #appPage #recentActivityList
    .recent-primary strong,
    #appPage #recentActivityList
    .recent-doa-id {
        height:
            20px !important;

        min-height:
            20px !important;

        max-height:
            20px !important;

        font-size:
            13.5px !important;

        line-height:
            20px !important;
    }

    #appPage #recentActivityList
    .recent-secondary {
        height:
            21px !important;

        min-height:
            21px !important;

        max-height:
            21px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span,
    #appPage #recentActivityList
    .recent-detail-inline,
    #appPage #recentActivityList
    .recent-warranty-value,
    #appPage #recentActivityList
    .recent-result-value {
        font-size:
            10.2px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-arrow {
        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;
    }
}

/*
 * Move the complete ID + data block slightly downward.
 * Card size, row spacing, arrow placement and horizontal
 * scrolling remain unchanged.
 */

/* Keep both internal rows aligned after the shift. */
#appPage #recentActivityList .recent-primary,
#appPage #recentActivityList .recent-secondary {
    position:
        relative !important;

    top:
        0 !important;
}

/* Arrow remains vertically centered and is not shifted. */

@media (max-width: 760px) {

    #appPage #recentActivityList .recent-main {
        transform:
            translateY(
                5px
            ) !important;
    }
}

/*
 * Move the two-line content block a little lower, while keeping
 * the block itself vertically balanced inside the card.
 *
 * Arrow is explicitly centered in the full card height and kept
 * independent from the content block.
 */

/* Content block: lower by another 4px from v0.77. */
#appPage #recentActivityList .recent-main {
    transform:
        translateY(
            10px
        ) !important;

    align-self:
        center !important;

    justify-self:
        stretch !important;
}

/* Keep the inner rows locked together. */
#appPage #recentActivityList .recent-primary,
#appPage #recentActivityList .recent-secondary {
    position:
        static !important;

    top:
        auto !important;

    transform:
        none !important;
}

/* Arrow: exact vertical center of the full card. */
#appPage #recentActivityList .recent-arrow {
    position:
        static !important;

    align-self:
        center !important;

    justify-self:
        end !important;

    transform:
        none !important;

    margin:
        0 !important;
}

/* Prevent hover rules from shifting the arrow away from center. */

/* Mobile: slightly smaller downward tune. */
@media (max-width: 760px) {

    #appPage #recentActivityList .recent-main {
        transform:
            translateY(
                8px
            ) !important;
    }

    #appPage #recentActivityList .recent-row:hover .recent-arrow {
        transform:
            none !important;
    }
}

/*
 * User-requested micro polish:
 * 1) Slightly increase the text inside the 5 Latest DOA cards.
 * 2) Move the right arrow down a little so it sits more naturally
 *    on the visual centerline of the card.
 *
 * Card size, data flow, horizontal scrolling and spacing remain
 * unchanged.
 */

/* Main ID + platform line */
#appPage #recentActivityList
.recent-primary strong {
    font-size:
        15px !important;

    line-height:
        21px !important;
}

/* Platform badge stays compact but is easier to read. */
#appPage #recentActivityList
.recent-primary span {
    font-size:
        8.5px !important;

    line-height:
        16px !important;

    padding:
        0 7px !important;
}

/* Data line — one small readable step larger. */
#appPage #recentActivityList
.recent-secondary > span,
#appPage #recentActivityList
.recent-detail-inline,
#appPage #recentActivityList
.recent-warranty-value,
#appPage #recentActivityList
.recent-result-value {
    font-size:
        11.4px !important;

    line-height:
        18px !important;
}

/* Keep bullets optically proportional after the text increase. */
#appPage #recentActivityList
.recent-secondary > span + span::before {
    font-size:
        10.4px !important;

    line-height:
        18px !important;

    margin:
        0 7px !important;
}

/* Arrow: down 3px while staying centered horizontally. */
#appPage #recentActivityList
.recent-arrow {
    position:
        relative !important;

    top:
        3px !important;

    align-self:
        center !important;

    justify-self:
        end !important;
}

/* Keep hover from creating a second vertical displacement. */
#appPage #recentActivityList
.recent-row:hover
.recent-arrow {
    transform:
        none !important;

    top:
        3px !important;
}

@media (max-width: 760px) {

    #appPage #recentActivityList
    .recent-primary strong {
        font-size:
            14.2px !important;

        line-height:
            20px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span,
    #appPage #recentActivityList
    .recent-detail-inline,
    #appPage #recentActivityList
    .recent-warranty-value,
    #appPage #recentActivityList
    .recent-result-value {
        font-size:
            10.8px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-secondary > span + span::before {
        font-size:
            9.8px !important;

        line-height:
            17px !important;
    }

    #appPage #recentActivityList
    .recent-arrow,
    #appPage #recentActivityList
    .recent-row:hover
    .recent-arrow {
        top:
            2px !important;
    }
}

/*
 * Platform badge:
 *   Android / Apple = soft rectangular tag, not a pill.
 *
 * Platform card:
 *   Android = subtle cool green/teal tint
 *   Apple     = subtle soft pink/lilac tint
 *
 * Keep text, spacing and geometry from 0.79.
 */

/* ---------------------------------------------------------
   Platform badge — rectangle with small radius
--------------------------------------------------------- */

#appPage #recentActivityList .recent-primary span {
    border-radius:
        6px !important;

    padding:
        0 7px !important;

    height:
        18px !important;

    min-height:
        18px !important;

    background:
        #f5f8fa !important;

    border:
        1px solid #cfdde4 !important;

    box-shadow:
        none !important;
}

/* Android badge */
#appPage #recentActivityList
.recent-row:has(.recent-status-dot.android)
.recent-primary span {
    background:
        #edf8f4 !important;

    border-color:
        #b9dfd2 !important;

    color:
        #26755f !important;
}

/* Apple badge */
#appPage #recentActivityList
.recent-row:has(.recent-status-dot.apple)
.recent-primary span {
    background:
        #fbf0f7 !important;

    border-color:
        #e5c5d8 !important;

    color:
        #995277 !important;
}

/* ---------------------------------------------------------
   Whole card — platform-specific surface
--------------------------------------------------------- */

#appPage #recentActivityList
.recent-row:has(.recent-status-dot.android) {
    background:
        linear-gradient(
            180deg,
            #f8fcfb 0%,
            #eef8f4 100%
        ) !important;

    border-color:
        #c5ddd5 !important;

    box-shadow:
        0 4px 12px rgba(
            39,
            117,
            95,
            .055
        ) !important;
}

#appPage #recentActivityList
.recent-row:has(.recent-status-dot.apple) {
    background:
        linear-gradient(
            180deg,
            #fffafd 0%,
            #fbf0f7 100%
        ) !important;

    border-color:
        #e2ccd9 !important;

    box-shadow:
        0 4px 12px rgba(
            153,
            82,
            119,
            .055
        ) !important;
}

/* Hover keeps the platform tint rather than losing it. */
#appPage #recentActivityList
.recent-row:has(.recent-status-dot.android):hover {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #edf8f4 100%
        ) !important;

    border-color:
        #add6c9 !important;
}

#appPage #recentActivityList
.recent-row:has(.recent-status-dot.apple):hover {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faedf5 100%
        ) !important;

    border-color:
        #ddbdcf !important;
}

/* Keep the platform dot visually coordinated. */
#appPage #recentActivityList
.recent-row:has(.recent-status-dot.android)
.recent-status-dot {
    background:
        #42b8a3 !important;

    box-shadow:
        0 0 0 4px rgba(
            66,
            184,
            163,
            .08
        ) !important;
}

#appPage #recentActivityList
.recent-row:has(.recent-status-dot.apple)
.recent-status-dot {
    background:
        #c17aa0 !important;

    box-shadow:
        0 0 0 4px rgba(
            193,
            122,
            160,
            .08
        ) !important;
}

@media (max-width: 760px) {

    #appPage #recentActivityList .recent-primary span {
        border-radius:
            5px !important;

        height:
            17px !important;

        min-height:
            17px !important;

        padding:
            0 6px !important;
    }
}

/*
 * Scope: ONLY the small Android / Apple badge inside the New DOA
 * modal heading.
 *
 * The form container, inputs, cards and layout are untouched.
 *
 * Badge:
 *   - rounded rectangle, not a pill
 *   - Android = soft green/teal
 *   - Apple = soft pink/lilac
 */

/* Base shape */
#doaModal #modalPlatform.platform-modal-android,
#doaModal #modalPlatform.platform-modal-apple {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        24px !important;

    height:
        24px !important;

    padding:
        0 9px !important;

    border-radius:
        6px !important;

    font-size:
        9px !important;

    line-height:
        22px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .35px !important;

    text-transform:
        none !important;

    box-sizing:
        border-box !important;

    box-shadow:
        none !important;
}

/* Android */
#doaModal #modalPlatform.platform-modal-android {
    background:
        #edf8f4 !important;

    border:
        1px solid #b9dfd2 !important;

    color:
        #26755f !important;
}

/* Apple */
#doaModal #modalPlatform.platform-modal-apple {
    background:
        #fbf0f7 !important;

    border:
        1px solid #e5c5d8 !important;

    color:
        #995277 !important;
}

/* Small, clean platform-specific visual accent. */
#doaModal #modalPlatform.platform-modal-android::before,
#doaModal #modalPlatform.platform-modal-apple::before {
    content:
        "" !important;

    width:
        5px !important;

    height:
        5px !important;

    min-width:
        5px !important;

    min-height:
        5px !important;

    margin-right:
        5px !important;

    border-radius:
        50% !important;
}

#doaModal #modalPlatform.platform-modal-android::before {
    background:
        #42b8a3 !important;
}

#doaModal #modalPlatform.platform-modal-apple::before {
    background:
        #c17aa0 !important;
}

@media (max-width: 760px) {

    #doaModal #modalPlatform.platform-modal-android,
    #doaModal #modalPlatform.platform-modal-apple {
        min-height:
            23px !important;

        height:
            23px !important;

        padding:
            0 8px !important;

        border-radius:
            6px !important;

        font-size:
            8.5px !important;
    }
}

/* Main preview surface — wider, still centered. */
#screenshotPreviewModal
.screenshot-preview-card {
    width:
        min(
            920px,
            92vw
        ) !important;

    max-width:
        920px !important;

    max-height:
        92vh !important;

    height:
        auto !important;

    border-radius:
        22px !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;

    margin:
        0 auto !important;
}

/* Preview header */
#screenshotPreviewModal
.screenshot-preview-head {
    min-height:
        68px !important;

    height:
        68px !important;

    padding:
        0 18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

/* Larger screenshot title */
#screenshotPreviewModal
.screenshot-preview-head h3 {
    font-size:
        20px !important;

    line-height:
        1.08 !important;

    margin:
        5px 0 0 !important;

    letter-spacing:
        -.15px !important;
}

/* Body — no forced zoom; viewport handles the scaling. */
#screenshotPreviewModal
.screenshot-preview-body {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    padding:
        13px !important;

    overflow:
        hidden !important;

    zoom:
        1 !important;

    background:
        #eef2f4 !important;
}

/* Shared clean horizontal alignment. */
#screenshotPreviewModal
.screenshot-preview-body > * {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}

/* Brand */
#screenshotPreviewModal
.shot-brand-row {
    min-height:
        60px !important;

    height:
        60px !important;

    padding:
        9px 11px !important;

    border-radius:
        11px !important;

    box-sizing:
        border-box !important;
}

/* Platform badge */

/* DOA ID — smaller than error information, but still readable. */
#screenshotPreviewModal
.shot-main-id {
    margin-top:
        5px !important;

    min-height:
        58px !important;

    height:
        58px !important;

    padding:
        0 11px !important;

    border-radius:
        10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    box-sizing:
        border-box !important;
}

/* Device information */

/* Error section */
#screenshotPreviewModal
.shot-issue-panel {
    margin-top:
        5px !important;

    border-radius:
        10px !important;

    box-shadow:
        none !important;
}

#screenshotPreviewModal
.shot-issue-heading strong {
    margin-top:
        0 !important;

    font-size:
        11px !important;

    line-height:
        1.1 !important;
}

#screenshotPreviewModal
.shot-error-row > span,
#screenshotPreviewModal
.shot-detail-block > span {
    font-size:
        7px !important;

    line-height:
        1.05 !important;

    letter-spacing:
        .75px !important;
}

/* Responsible / Checked By */

/* ---------------------------------------------------------
   Optional outcome fields
--------------------------------------------------------- */

/* No wrapper height reserved when there is no optional data because
   the HTML is conditional. These rules only affect what exists. */

#screenshotPreviewModal
.shot-outcome-section {
    width:
        100% !important;

    margin-top:
        5px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        5px !important;

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-subheading {
    min-height:
        30px !important;

    height:
        30px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 10px !important;

    border:
        1px solid #d4dfe5 !important;

    border-bottom:
        0 !important;

    border-radius:
        9px 9px 0 0 !important;

    background:
        #edf3f5 !important;

    color:
        #627987 !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .8px !important;
}

#screenshotPreviewModal
.shot-value-card span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        #738791 !important;

    font-size:
        7px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .7px !important;

    text-transform:
        uppercase !important;
}

#screenshotPreviewModal
.shot-value-card strong {
    display:
        block !important;

    margin:
        4px 0 0 !important;

    color:
        #284356 !important;

    font-size:
        10.5px !important;

    line-height:
        1.25 !important;

    font-weight:
        820 !important;
}

/* Footer */

/* Desktop: keep everything on one screen. */
@media (min-width: 761px) {

    #screenshotPreviewModal
    .screenshot-preview-body {
        max-height:
            calc(
                92vh - 126px
            ) !important;

        overflow:
            hidden !important;
    }
}

/* Mobile: use the real viewport width, but allow the body to scroll
   when the phone is too short for a fully populated record. */
@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            96vw !important;

        max-width:
            96vw !important;

        max-height:
            94vh !important;

        border-radius:
            18px !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-body {
        padding:
            10px !important;

        zoom:
            1 !important;

        overflow:
            auto !important;
    }

    #screenshotPreviewModal
    .shot-customer-grid {
        grid-template-columns:
            1fr !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-footer {
        min-height:
            54px !important;

        height:
            54px !important;
    }
}

/*
 * Designed for sharing in branch/group chats:
 * - wider preview
 * - bigger values
 * - stronger hierarchy
 * - no forced zoom-out
 * - optional fields stay conditional
 * - empty optional sections consume zero space
 */

/* ---------------------------------------------------------
   1) Larger screenshot canvas
--------------------------------------------------------- */

/* Keep the preview body readable at 100% scale. */

/* ---------------------------------------------------------
   2) Header hierarchy
--------------------------------------------------------- */

#screenshotPreviewModal
.screenshot-preview-head {
    min-height:
        74px !important;

    height:
        74px !important;

    padding:
        0 20px !important;
}

#screenshotPreviewModal
.screenshot-preview-kicker {
    font-size:
        9px !important;

    line-height:
        1 !important;

    letter-spacing:
        1.35px !important;
}

#screenshotPreviewModal
.screenshot-preview-head h3 {
    margin-top:
        6px !important;

    font-size:
        22px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   3) Brand row
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-brand-row {
    min-height:
        66px !important;

    height:
        66px !important;

    padding:
        11px 13px !important;

    border-radius:
        12px !important;
}

/* ---------------------------------------------------------
   4) Platform badge
--------------------------------------------------------- */

/* ---------------------------------------------------------
   5) DOA ID / Date
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-main-id {
    min-height:
        66px !important;

    height:
        66px !important;

    margin-top:
        6px !important;

    padding:
        0 13px !important;

    border-radius:
        11px !important;
}

#screenshotPreviewModal
.shot-main-id span {
    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;
}

#screenshotPreviewModal
.shot-main-id > div:first-child strong {
    margin-top:
        5px !important;

    font-size:
        21px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-main-date span {
    font-size:
        8px !important;

    line-height:
        1 !important;
}

#screenshotPreviewModal
.shot-main-date strong {
    margin-top:
        5px !important;

    font-size:
        12px !important;

    line-height:
        1.15 !important;

    font-weight:
        900 !important;
}

/* ---------------------------------------------------------
   6) Device information — large readable values
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-info-grid {
    gap:
        6px !important;

    margin-top:
        6px !important;
}

/* ---------------------------------------------------------
   7) Error & Detail — main reading area
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-error-row > span,
#screenshotPreviewModal
.shot-detail-block > span {
    font-size:
        8px !important;

    line-height:
        1.05 !important;

    letter-spacing:
        .8px !important;
}

/* ---------------------------------------------------------
   8) Responsible / Checked By
--------------------------------------------------------- */

/* ---------------------------------------------------------
   9) Optional customer/warranty/result area
      Existing HTML is conditional, so no data = no box.
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-subheading {
    min-height:
        32px !important;

    height:
        32px !important;

    padding:
        0 11px !important;

    border-radius:
        9px 9px 0 0 !important;

    font-size:
        8px !important;

    letter-spacing:
        .85px !important;
}

/* ---------------------------------------------------------
   10) Footer
--------------------------------------------------------- */

/* ---------------------------------------------------------
   11) Desktop single-screen target
--------------------------------------------------------- */

@media (min-width: 761px) {

    #screenshotPreviewModal
    .screenshot-preview-body {
        max-height:
            calc(
                93vh - 138px
            ) !important;

        overflow:
            hidden !important;
    }
}

/* Mobile — retain readability and allow scrolling when the
   record is fully populated. */
@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            96vw !important;

        max-width:
            96vw !important;

        max-height:
            94vh !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-body {
        padding:
            11px !important;

        overflow:
            auto !important;

        zoom:
            1 !important;
    }

    #screenshotPreviewModal
    .shot-detail-block p {
        font-size:
            12.5px !important;

        line-height:
            1.55 !important;
    }

    #screenshotPreviewModal
    .shot-customer-grid {
        grid-template-columns:
            1fr !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-footer {
        min-height:
            58px !important;

        height:
            58px !important;
    }
}

/* Main preview size */
#screenshotPreviewModal
.screenshot-preview-card {
    width:
        min(
            980px,
            91vw
        ) !important;

    max-width:
        980px !important;

    max-height:
        92vh !important;

    height:
        auto !important;

    border-radius:
        20px !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}

/* Preview body: no zoom-out */
#screenshotPreviewModal
.screenshot-preview-body {
    zoom:
        1 !important;

    padding:
        14px !important;

    overflow:
        hidden !important;

    background:
        #eef2f4 !important;
}

/* ---------------------------------------------------------
   Header / brand
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-doc-header {
    width:
        100% !important;

    min-height:
        62px !important;

    height:
        62px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    padding:
        10px 12px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #cedbe2 !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;
}

#screenshotPreviewModal
.shot-doc-brand {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;

    min-width:
        0 !important;
}

#screenshotPreviewModal
.shot-brand-mark {
    width:
        38px !important;

    height:
        38px !important;

    min-width:
        38px !important;

    min-height:
        38px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border:
        1px solid #d6e1e7 !important;

    border-radius:
        9px !important;

    background:
        #fbfcfd !important;

    overflow:
        hidden !important;
}

#screenshotPreviewModal
.shot-real-logo {
    width:
        30px !important;

    height:
        30px !important;

    max-width:
        30px !important;

    max-height:
        30px !important;

    object-fit:
        contain !important;
}

#screenshotPreviewModal
.shot-brand-block {
    display:
        flex !important;

    flex-direction:
        column !important;

    min-width:
        0 !important;
}

#screenshotPreviewModal
.shot-brand-block strong {
    color:
        #1d3447 !important;

    font-size:
        15px !important;

    line-height:
        1.1 !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-brand-block span {
    margin-top:
        3px !important;

    color:
        #6b7c87 !important;

    font-size:
        9px !important;

    line-height:
        1.1 !important;

    font-weight:
        650 !important;
}

/* Platform badge mirrors the dashboard's new rectangular treatment. */
#screenshotPreviewModal
.shot-platform {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        26px !important;

    height:
        26px !important;

    padding:
        0 10px !important;

    border-radius:
        6px !important;

    font-size:
        9px !important;

    line-height:
        24px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .3px !important;
}

/* ---------------------------------------------------------
   Identity row
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-identity-row {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            180px,
            .55fr
        ) !important;

    gap:
        6px !important;

    margin-top:
        6px !important;

    width:
        100% !important;
}

#screenshotPreviewModal
.shot-identity-cell {
    min-height:
        64px !important;

    padding:
        9px 11px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #cbd9e0 !important;

    border-radius:
        10px !important;

    background:
        #e7f0f3 !important;
}

#screenshotPreviewModal
.shot-identity-cell span {
    color:
        #647987 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

#screenshotPreviewModal
.shot-identity-cell strong {
    margin-top:
        5px !important;

    color:
        #1b3448 !important;

    font-size:
        21px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-date-cell {
    align-items:
        flex-end !important;

    text-align:
        right !important;
}

#screenshotPreviewModal
.shot-date-cell strong {
    font-size:
        15px !important;

    color:
        #385466 !important;
}

/* ---------------------------------------------------------
   Device section
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-device-section {
    margin-top:
        6px !important;

    width:
        100% !important;
}

#screenshotPreviewModal
.shot-section-heading {
    min-height:
        30px !important;

    height:
        30px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 10px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #cfdce2 !important;

    border-bottom:
        0 !important;

    border-radius:
        9px 9px 0 0 !important;

    background:
        #eaf1f3 !important;

    color:
        #567180 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        1px !important;
}

#screenshotPreviewModal
.shot-info-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        6px !important;

    margin:
        0 !important;

    width:
        100% !important;
}

#screenshotPreviewModal
.shot-info-cell {
    min-width:
        0 !important;

    min-height:
        64px !important;

    padding:
        10px 11px !important;

    border:
        1px solid #cfdce2 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-info-cell.full {
    grid-column:
        1 / -1 !important;
}

#screenshotPreviewModal
.shot-info-cell span {
    display:
        block !important;

    color:
        #6c818d !important;

    font-size:
        8px !important;

    line-height:
        1.05 !important;

    letter-spacing:
        .8px !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-info-cell strong {
    display:
        block !important;

    margin-top:
        5px !important;

    color:
        #203b4f !important;

    font-size:
        14px !important;

    line-height:
        1.25 !important;

    font-weight:
        850 !important;

    overflow-wrap:
        anywhere !important;
}

/* ---------------------------------------------------------
   Error / Detail — strongest hierarchy
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-issue-panel {
    margin-top:
        7px !important;

    overflow:
        hidden !important;

    border:
        1px solid #c6d6dd !important;

    border-radius:
        11px !important;

    background:
        #ffffff !important;
}

#screenshotPreviewModal
.shot-issue-heading {
    min-height:
        40px !important;

    height:
        40px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 11px !important;

    box-sizing:
        border-box !important;

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

    background:
        #e9f0f3 !important;
}

#screenshotPreviewModal
.shot-issue-heading strong {
    font-size:
        13px !important;

    line-height:
        1.1 !important;

    font-weight:
        900 !important;

    color:
        #1d374a !important;
}

#screenshotPreviewModal
.shot-error-row {
    min-height:
        68px !important;

    padding:
        10px 11px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    gap:
        5px !important;

    background:
        #ffffff !important;

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

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-error-row > span,
#screenshotPreviewModal
.shot-detail-block > span {
    color:
        #718590 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

#screenshotPreviewModal
.shot-error-row strong {
    margin:
        0 !important;

    color:
        #17384e !important;

    font-size:
        16px !important;

    line-height:
        1.2 !important;

    font-weight:
        900 !important;

    text-align:
        left !important;
}

#screenshotPreviewModal
.shot-detail-block {
    min-height:
        108px !important;

    padding:
        11px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        flex-start !important;

    align-items:
        flex-start !important;

    gap:
        6px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-detail-block p {
    margin:
        0 !important;

    color:
        #2c495c !important;

    font-size:
        15px !important;

    line-height:
        1.5 !important;

    font-weight:
        780 !important;

    text-align:
        left !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}

/* ---------------------------------------------------------
   Responsible / Checked By
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-check-grid {
    margin-top:
        7px !important;

    padding:
        10px 11px !important;

    min-height:
        60px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        0 !important;

    border:
        1px solid #cfdce2 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-check-grid > div {
    min-width:
        0 !important;

    padding:
        0 11px !important;
}

#screenshotPreviewModal
.shot-check-grid > div + div {
    border-left:
        1px solid #d9e4e8 !important;
}

#screenshotPreviewModal
.shot-check-grid span {
    display:
        block !important;

    color:
        #718590 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .85px !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-check-grid strong {
    display:
        block !important;

    margin-top:
        5px !important;

    color:
        #203d51 !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;
}

/* ---------------------------------------------------------
   Optional fields — no empty containers
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-outcome-section {
    margin-top:
        7px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        6px !important;

    width:
        100% !important;
}

#screenshotPreviewModal
.shot-customer-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        6px !important;

    margin:
        0 !important;
}

#screenshotPreviewModal
.shot-value-card {
    min-width:
        0 !important;

    min-height:
        60px !important;

    padding:
        10px 11px !important;

    border:
        1px solid #cfdce2 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;
}

#screenshotPreviewModal
.shot-value-card.full {
    width:
        100% !important;
}

#screenshotPreviewModal
.shot-value-card span {
    display:
        block !important;

    color:
        #718590 !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    letter-spacing:
        .8px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

#screenshotPreviewModal
.shot-value-card strong {
    display:
        block !important;

    margin-top:
        5px !important;

    color:
        #203d51 !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        850 !important;
}

#screenshotPreviewModal
.shot-value-card p {
    margin:
        5px 0 0 !important;

    color:
        #2e4d60 !important;

    font-size:
        14px !important;

    line-height:
        1.45 !important;

    font-weight:
        760 !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

#screenshotPreviewModal
.screenshot-preview-footer {
    min-height:
        60px !important;

    height:
        60px !important;

    padding:
        0 14px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    box-sizing:
        border-box !important;
}

/* ---------------------------------------------------------
   Screenshot-friendly responsive behavior
--------------------------------------------------------- */

@media (min-width: 761px) {

    #screenshotPreviewModal
    .screenshot-preview-body {
        max-height:
            calc(
                92vh - 122px
            ) !important;

        overflow:
            hidden !important;
    }
}

@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            96vw !important;

        max-width:
            96vw !important;

        max-height:
            94vh !important;

        border-radius:
            18px !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-body {
        padding:
            10px !important;

        overflow:
            auto !important;

        zoom:
            1 !important;
    }

    #screenshotPreviewModal
    .shot-identity-row {
        grid-template-columns:
            1fr 1fr !important;
    }

    #screenshotPreviewModal
    .shot-info-grid {
        grid-template-columns:
            1fr !important;
    }

    #screenshotPreviewModal
    .shot-info-cell.full {
        grid-column:
            auto !important;
    }

    #screenshotPreviewModal
    .shot-customer-grid {
        grid-template-columns:
            1fr !important;
    }

    #screenshotPreviewModal
    .shot-detail-block p {
        font-size:
            13px !important;

        line-height:
            1.55 !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-footer {
        min-height:
            56px !important;

        height:
            56px !important;
    }
}

/*
 * Goal:
 *   Keep the approved width + readability,
 *   add a little more premium character without making
 *   the Preview busy.
 */

/* ---------------------------------------------------------
   Preview shell
--------------------------------------------------------- */

#screenshotPreviewModal
.screenshot-preview-card {
    border:
        1px solid #c8d6de !important;

    box-shadow:
        0 24px 64px rgba(
            22,
            38,
            52,
            .22
        ) !important;

    background:
        linear-gradient(
            180deg,
            #f9fbfc 0%,
            #eef3f5 100%
        ) !important;
}

/* ---------------------------------------------------------
   Header — premium but quiet
--------------------------------------------------------- */

#screenshotPreviewModal
.screenshot-preview-head {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafb 100%
        ) !important;

    box-shadow:
        0 1px 0 rgba(
            26,
            48,
            64,
            .02
        ) !important;
}

#screenshotPreviewModal
.screenshot-preview-kicker {
    color:
        #5a7788 !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.screenshot-preview-head h3 {
    color:
        #173149 !important;

    letter-spacing:
        -.25px !important;
}

/* ---------------------------------------------------------
   Brand row
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-doc-header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        ) !important;

    border-color:
        #cad9e1 !important;

    box-shadow:
        0 3px 10px rgba(
            31,
            54,
            70,
            .035
        ) !important;
}

#screenshotPreviewModal
.shot-brand-mark {
    background:
        #ffffff !important;

    border-color:
        #d0dde4 !important;

    box-shadow:
        0 2px 7px rgba(
            35,
            55,
            70,
            .045
        ) !important;
}

#screenshotPreviewModal
.shot-brand-block strong {
    color:
        #18344b !important;
}

#screenshotPreviewModal
.shot-brand-block span {
    color:
        #728590 !important;
}

/* Platform badge */
#screenshotPreviewModal
.shot-platform.apple {
    background:
        #fbf0f7 !important;

    border:
        1px solid #e2bfd2 !important;

    color:
        #955275 !important;

    box-shadow:
        inset 0 0 0 1px rgba(
            255,
            255,
            255,
            .4
        ) !important;
}

#screenshotPreviewModal
.shot-platform.android {
    background:
        #edf8f4 !important;

    border:
        1px solid #b8ddcf !important;

    color:
        #27725d !important;

    box-shadow:
        inset 0 0 0 1px rgba(
            255,
            255,
            255,
            .45
        ) !important;
}

/* ---------------------------------------------------------
   Identity row
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-identity-cell {
    background:
        linear-gradient(
            180deg,
            #edf4f6 0%,
            #e5eef2 100%
        ) !important;

    border-color:
        #c7d7df !important;
}

#screenshotPreviewModal
.shot-identity-cell strong {
    color:
        #17374d !important;
}

#screenshotPreviewModal
.shot-date-cell {
    position:
        relative !important;
}

#screenshotPreviewModal
.shot-date-cell::after {
    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    top:
        12px !important;

    bottom:
        12px !important;

    width:
        1px !important;

    background:
        #c9d8df !important;
}

/* ---------------------------------------------------------
   Section headings
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-section-heading {
    background:
        linear-gradient(
            90deg,
            #e7f0f3 0%,
            #eef4f6 100%
        ) !important;

    border-color:
        #cbd9e0 !important;

    color:
        #4f6d7c !important;

    letter-spacing:
        1.05px !important;
}

/* Add a quiet accent line to the heading. */
#screenshotPreviewModal
.shot-section-heading::before {
    content:
        "" !important;

    width:
        4px !important;

    height:
        12px !important;

    margin-right:
        7px !important;

    border-radius:
        999px !important;

    background:
        #74a8b7 !important;

    flex:
        0 0 auto !important;
}

/* Error & Detail heading gets a slightly stronger accent. */
#screenshotPreviewModal
.shot-issue-heading {
    background:
        linear-gradient(
            90deg,
            #e5eef2 0%,
            #edf3f5 100%
        ) !important;

    border-bottom-color:
        #cedbe2 !important;
}

#screenshotPreviewModal
.shot-issue-heading::before {
    content:
        "" !important;

    width:
        4px !important;

    height:
        14px !important;

    margin-right:
        7px !important;

    border-radius:
        999px !important;

    background:
        #6d9eae !important;
}

/* ---------------------------------------------------------
   Device fields — subtle depth
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-info-cell,
#screenshotPreviewModal
.shot-value-card {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        ) !important;

    border-color:
        #cddbe2 !important;

    box-shadow:
        0 2px 6px rgba(
            29,
            51,
            66,
            .028
        ) !important;
}

#screenshotPreviewModal
.shot-info-cell strong,
#screenshotPreviewModal
.shot-value-card strong {
    color:
        #1f3d53 !important;
}

/* IMEI / Serial deserve slightly stronger scan weight. */
#screenshotPreviewModal
.shot-info-cell:nth-child(4) strong,
#screenshotPreviewModal
.shot-info-cell:nth-child(5) strong {
    font-weight:
        900 !important;

    letter-spacing:
        .15px !important;
}

/* ---------------------------------------------------------
   Error section — strongest focal point
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-error-row {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdfe 100%
        ) !important;
}

#screenshotPreviewModal
.shot-error-row strong {
    color:
        #19374d !important;

    font-weight:
        900 !important;
}

#screenshotPreviewModal
.shot-detail-block {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        ) !important;
}

#screenshotPreviewModal
.shot-detail-block p {
    color:
        #2a4b61 !important;
}

/* ---------------------------------------------------------
   Responsible / Checked By
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-check-grid {
    background:
        #ffffff !important;

    border-color:
        #cddbe2 !important;

    box-shadow:
        0 2px 7px rgba(
            29,
            51,
            66,
            .025
        ) !important;
}

#screenshotPreviewModal
.shot-check-grid strong {
    color:
        #29465a !important;
}

/* ---------------------------------------------------------
   Optional outcome cards
--------------------------------------------------------- */

#screenshotPreviewModal
.shot-value-card p {
    color:
        #2c4d60 !important;
}

#screenshotPreviewModal
.shot-outcome-section
.shot-section-heading {
    margin-top:
        0 !important;
}

/* ---------------------------------------------------------
   Footer — slightly more premium
--------------------------------------------------------- */

#screenshotPreviewModal
.screenshot-preview-footer {
    background:
        linear-gradient(
            180deg,
            #fbfcfd 0%,
            #f7f9fa 100%
        ) !important;

    border-top:
        1px solid #d7e1e6 !important;
}

#screenshotPreviewModal
.screenshot-preview-btn {
    border-radius:
        9px !important;

    min-width:
        86px !important;

    font-weight:
        800 !important;
}

#screenshotPreviewModal
.screenshot-preview-btn.primary {
    background:
        #edf5f8 !important;

    border-color:
        #b8cfd9 !important;

    color:
        #3d6677 !important;

    box-shadow:
        0 3px 8px rgba(
            48,
            86,
            103,
            .05
        ) !important;
}

#screenshotPreviewModal
.screenshot-preview-btn.primary:hover {
    background:
        #e7f2f6 !important;

    border-color:
        #a9c5d0 !important;
}

/* Narrower approved proportion */

/* Keep two-column identity when both values exist. */
#screenshotPreviewModal
.shot-identity-row {
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            0,
            1fr
        ) !important;

    align-items:
        stretch !important;
}

/* Date-only record: full-width, left-aligned, no "right-side bug". */
#screenshotPreviewModal
.shot-identity-row.date-only {
    grid-template-columns:
        minmax(
            0,
            1fr
        ) !important;
}

#screenshotPreviewModal
.shot-date-only-cell {
    align-items:
        flex-start !important;

    text-align:
        left !important;

    width:
        100% !important;
}

#screenshotPreviewModal
.shot-date-only-cell strong {
    font-size:
        15px !important;

    color:
        #385466 !important;
}

/* No divider when there is only Date. */
#screenshotPreviewModal
.shot-date-only-cell::after {
    display:
        none !important;
}

/* Keep the normal date cell divider only when ID + Date both exist. */
#screenshotPreviewModal
.shot-date-cell::after {
    display:
        block !important;
}

@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            94vw !important;

        max-width:
            94vw !important;
    }

    #screenshotPreviewModal
    .shot-identity-row {
        grid-template-columns:
            1fr 1fr !important;
    }

    #screenshotPreviewModal
    .shot-identity-row.date-only {
        grid-template-columns:
            1fr !important;
    }
}

@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            92vw !important;

        max-width:
            92vw !important;
    }
}

/*
 * 1) Narrow the Preview by another ~70px.
 * 2) Never clip the lower sections when Warranty / Result /
 *    Customer Dates are all filled.
 *
 * Only Screenshot / DOA Preview is affected.
 */

/* Narrower desktop width */
#screenshotPreviewModal
.screenshot-preview-card {
    width:
        min(
            630px,
            82vw
        ) !important;

    max-width:
        630px !important;

    max-height:
        92vh !important;

    height:
        auto !important;
}

/*
 * IMPORTANT:
 * When all optional data is filled, the content becomes taller.
 * Let the body scroll vertically instead of clipping the bottom.
 * At normal/short records it remains visually static.
 */
#screenshotPreviewModal
.screenshot-preview-body {
    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    max-height:
        calc(
            92vh - 122px
        ) !important;

    scrollbar-width:
        thin !important;

    scrollbar-color:
        #b7c8d1 transparent !important;

    -webkit-overflow-scrolling:
        touch !important;
}

/* Keep the footer visible even when body needs scrolling. */
#screenshotPreviewModal
.screenshot-preview-footer {
    flex:
        0 0 auto !important;
}

/* Slightly tighter internal spacing to protect readability at the
   narrower width without shrinking the actual text again. */
#screenshotPreviewModal
.shot-info-cell {
    min-height:
        60px !important;

    padding:
        9px 10px !important;
}

#screenshotPreviewModal
.shot-detail-block {
    min-height:
        96px !important;

    padding:
        10px 11px 12px !important;
}

/* Full-data sections stay compact but readable. */
#screenshotPreviewModal
.shot-value-card {
    min-height:
        56px !important;

    padding:
        9px 10px !important;
}

#screenshotPreviewModal
.shot-value-card p {
    margin-top:
        4px !important;

    font-size:
        13.5px !important;

    line-height:
        1.4 !important;
}

/* Mobile keeps the narrower visual proportion but uses the actual
   viewport and scrolls when the full record is tall. */
@media (max-width: 760px) {

    #screenshotPreviewModal
    .screenshot-preview-card {
        width:
            92vw !important;

        max-width:
            92vw !important;

        max-height:
            94vh !important;
    }

    #screenshotPreviewModal
    .screenshot-preview-body {
        max-height:
            calc(
                94vh - 110px
            ) !important;

        overflow-y:
            auto !important;
    }
}

.screenshot-preview-card .shot-warranty-card {
    min-height: 64px !important;
    padding: 10px 12px !important;
}

.screenshot-preview-card .shot-warranty-card span {
    font-size: 9px !important;
    line-height: 1.1 !important;
}

.screenshot-preview-card .shot-warranty-card strong {
    font-size: 14px !important;
    line-height: 1.42 !important;
    font-weight: 780 !important;
    margin-top: 5px !important;
}

.screenshot-preview-card .shot-warranty-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 720 !important;
    margin-top: 6px !important;
}

/* နေ့စွဲ ၂ ခုကို ဘေးတိုက် Grid ချရန် (လိုအပ်ပါက) */
.screenshot-preview-card .shot-customer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

/* Print View တွင် အတိုင်းအတာ မှန်စေရန် */
@media print {
    .screenshot-preview-card .shot-warranty-card span {
        font-size: 8px !important;
    }
    .screenshot-preview-card .shot-warranty-card strong {
        font-size: 12.5px !important;
    }
    .screenshot-preview-card .shot-warranty-card p {
        font-size: 13px !important;
    }
}

/* အချက်အလက်အကုန်ဖြည့်လိုက်လို့ Preview က အောက်ကိုရှည်ထွက်သွားရင် Scroll ဆွဲကြည့်လို့ရအောင် */
#screenshotPreviewModal .screenshot-preview-body {
    overflow-y: auto !important;
}

/* Detail Error card — Header stays at the top */
#screenshotPreviewModal .screenshot-preview-card .shot-detail-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* DETAIL ERROR label stays at the top */
#screenshotPreviewModal .screenshot-preview-card .shot-detail-block > span {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Actual Detail Error data — vertically centered,
   while the text itself remains left-aligned */
#screenshotPreviewModal .screenshot-preview-card .shot-detail-block > p {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* =========================================================
   LOGIN DECORATIVE SQUARES — EXTRA SOFT
========================================================= */
.page > .card > .side-square {
    opacity: 0.82 !important;
}