.mobile-login-logo, .mobile-record-label, .mobile-table-hint { display: none; }
@media screen {
    .btn.proof-action-button {
        display: inline-grid;
        place-items: center;
        flex: 0 0 3rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
    }
    .proof-action-button img { display: block; object-fit: contain; }
    .proof-action-button:is([data-share-jpg], [data-area-share-jpg]) img { border-radius: 50%; }
}

@media screen and (max-width: 767.98px) {
    .workspace-content:not(:has(.mobile-home)) {
        --ink: #123e32;
        --teal: #006553;
        --deep-teal: #004d40;
        padding-inline: clamp(.7rem, 3.35vw, 1.1rem);
        padding-top: .85rem;
        background: radial-gradient(ellipse at 45% 6%, #f4fffa, #e1f5ed 56%, #d4ece3);
        color: var(--ink);
    }
    .mobile-nav-ready .workspace-content:not(:has(.mobile-home)) {
        min-height: calc(100dvh - 4.75rem - env(safe-area-inset-top, 0px));
    }
    .workspace-content:not(:has(.mobile-home)) > .workspace-heading {
        align-items: flex-start;
        gap: .65rem;
        margin-bottom: .9rem;
        padding-block: .25rem .65rem;
        border-bottom: 1px solid #afd7c8;
    }
    .workspace-content:not(:has(.mobile-home)) > .workspace-heading h1 {
        font-size: clamp(1.45rem, 6.2vw, 1.85rem);
        line-height: 1.12;
        overflow-wrap: anywhere;
    }
    .workspace-content:not(:has(.mobile-home)) .workspace-card {
        min-width: 0;
        padding: clamp(.7rem, 3vw, 1.05rem);
        border: 1px solid #f9fffc;
        border-radius: 1.08rem;
        background: #f9fffc;
        box-shadow: 0 4px 10px #00624b17;
        overflow-wrap: break-word;
    }
    .workspace-content:not(:has(.mobile-home)) .workspace-card h2,
    .workspace-content:not(:has(.mobile-home)) .area-activity summary {
        color: #104939;
        font-weight: 800;
    }
    .workspace-content:not(:has(.mobile-home)) :is(.form-control, .form-select) {
        min-height: 44px;
        border-color: #a9cfc0;
        border-radius: .65rem;
        background-color: #fff;
        color: #123e32;
        font-size: 1rem;
    }
    .workspace-content:not(:has(.mobile-home)) :is(.form-control, .form-select):focus {
        border-color: #188773;
        box-shadow: 0 0 0 .2rem #00846e2b;
    }
    .workspace-content:not(:has(.mobile-home)) .form-select:disabled { background-color: #e9f2ee; }
    .workspace-content:not(:has(.mobile-home)) :is(.form-label, .settings-form label) { color: #194a3c; }
    .workspace-content:not(:has(.mobile-home)) .btn {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .workspace-content:not(:has(.mobile-home)) .btn-pedianet {
        color: #fff;
        border-color: #006553;
        background: linear-gradient(135deg, #007864, #005344);
    }
    .workspace-content:not(:has(.mobile-home)) .btn-pedianet-secondary {
        border-color: #a3ccbe;
        color: #134c3d;
        background: #e8f7f0;
    }
    .workspace-content:not(:has(.mobile-home)) .status-chip {
        color: #005744;
        background: #d9f2e6;
    }
    .workspace-content:not(:has(.mobile-home)) .summary-tile {
        padding: .7rem .85rem;
        color: #fff;
        background: linear-gradient(135deg, #00836e, #005445);
    }
    .workspace-content:not(:has(.mobile-home)) .summary-gold {
        color: #3f2e08;
        background: linear-gradient(135deg, #ffe69a, #e8b646);
    }
    .workspace-content:not(:has(.mobile-home)) .area-balance,
    .workspace-content:not(:has(.mobile-home)) :is(.area-stock-table, .receipt-edit-table) tbody tr {
        border-color: #c6e3d7;
        background: #eaf8f0;
    }
    .workspace-content:not(:has(.mobile-home)) .request-preview {
        border-color: #b6ddcd;
        border-radius: .8rem;
    }
    .workspace-content:not(:has(.mobile-home)) .inventory-filters > div { min-width: 0; }
    .workspace-content:not(:has(.mobile-home)) .inventory-filters[method="get"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
        align-items: end;
    }
    .workspace-content:not(:has(.mobile-home)) .inventory-filters .action-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .workspace-content:not(:has(.mobile-home)) .matrix-scroll {
        border: 1px solid #c6e3d7;
        border-radius: .65rem;
    }

    .workspace-content .table-responsive:not(.mobile-records-ready) > .table:not(.receipt-edit-table) {
        width: max-content;
        min-width: 100%;
    }
    .workspace-content .table-responsive:not(.mobile-records-ready) > .table:not(.receipt-edit-table) :is(th, td) {
        min-width: 6ch;
        max-width: 34ch;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .workspace-content .table-responsive:not(.mobile-records-ready) > .table:not(.receipt-edit-table) thead th {
        white-space: nowrap;
    }
    .mobile-records-ready { overflow: visible; }
    .mobile-records-ready > .table { display: block; }
    .mobile-records-ready thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mobile-records-ready tbody { display: block; }
    .mobile-records-ready tbody tr {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: .55rem .7rem;
        margin-bottom: .55rem;
        padding: .66rem .72rem;
        border: 1px solid #c9e5d9;
        border-radius: .8rem;
        background: #effaf4;
    }
    .mobile-records-ready tbody tr:last-child { margin-bottom: 0; }
    .mobile-records-ready .table tbody tr > * {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow-wrap: anywhere;
        text-align: start !important;
        white-space: normal !important;
    }
    .mobile-records-ready tbody tr > :is(:first-child, .inventory-note) { grid-column: 1 / -1; }
    .mobile-records-ready tbody tr > :first-child {
        padding-bottom: .32rem;
        border-bottom: 1px solid #d5ebe1;
        font-weight: 750;
    }
    .mobile-record-label {
        display: block;
        margin-bottom: .08rem;
        color: #416b5e;
        font-size: .73rem;
        font-weight: 650;
    }
    .mobile-records-ready .action-link { display: inline-block; padding-block: .2rem; }
    .mobile-table-hint {
        display: block;
        margin: .3rem 0 .45rem;
        color: #416b5e;
        font-size: .79rem;
    }

    :is(.area-picker, .mobile-select-dialog)[open] { color: #123e32; background: #f0fcf7; }
    :is(.area-picker, .mobile-select-dialog)::backdrop { background: #002b22a1; }
    :is(.area-picker, .mobile-select-dialog) .btn-pedianet-secondary {
        border-color: #a3ccbe;
        color: #134c3d;
        background: #dff3e9;
    }
    :is(.area-picker-option, .mobile-select-option)[aria-pressed="true"] { background: #d7f1e6; }
    .mobile-select-option-label { display: flex; align-items: center; gap: .65rem; min-width: 0; }
    .mobile-select-option-art { flex: none; object-fit: contain; border-radius: .48rem; }

    .mobile-login-page {
        padding: 1rem;
        color: #123e32;
        background: radial-gradient(ellipse at 78% 8%, #009078, #005647 56%, #003d32);
    }
    .mobile-login-page::before, .mobile-login-page::after { display: none; }
    .mobile-login-page .login-card {
        width: min(100%, 25rem);
        padding: 1.15rem .8rem .85rem;
        border: 1px solid #ecfff5;
        border-radius: 1.5rem;
        background: linear-gradient(145deg, #f9fffc, #d8f3e8);
        box-shadow: 0 15px 36px #002b2260;
    }
    .mobile-login-page .login-logo { display: none; }
    .mobile-login-logo {
        display: block;
        width: clamp(105px, 39vw, 160px);
        height: auto;
        margin: 0 auto .55rem;
    }
    .mobile-login-page .login-heading h1 {
        color: #0b4537;
        font-size: clamp(1.6rem, 7vw, 2rem);
        text-shadow: none;
    }
    .mobile-login-page .login-heading p { color: #42695d; font-size: .91rem; }
    .mobile-login-page .login-form {
        margin-top: .85rem;
        padding: .78rem;
        border: 1px solid #d3eadf;
        border-radius: 1rem;
        background: #fafffc;
        box-shadow: none;
    }
    .mobile-login-page .input-capsule {
        border: 1px solid #abd4c5;
        border-radius: .72rem;
        background: #fff;
        box-shadow: none;
    }
    .mobile-login-page .input-capsule:focus-within { box-shadow: 0 0 0 2px #00755e; }
    .mobile-login-page .input-capsule input { color: #123e32; font-size: 1rem; }
    .mobile-login-page .input-capsule input::placeholder { color: #58736a; }
    .mobile-login-page .input-icon {
        background: linear-gradient(150deg, #198d74, #00604d);
        box-shadow: inset 0 1px 3px #68bda5;
    }
    .mobile-login-page .password-toggle { color: #176555; }
    .mobile-login-page .btn-login {
        border: 1px solid #0c6858;
        border-radius: .75rem;
        background: linear-gradient(135deg, #00836e, #005445);
        box-shadow: 0 4px 9px #00624b35;
        color: #fff;
    }
}
@media screen and (min-width: 360px) and (max-width: 767.98px) {
    .workspace-content:not(:has(.mobile-home)) .inventory-filters[method="get"] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .workspace-content:not(:has(.mobile-home)) .inventory-filters[method="get"] > div:has(#jenis, [type="search"]) {
        grid-column: 1 / -1;
    }
    .workspace-content:not(:has(.mobile-home)) .area-money { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workspace-content:not(:has(.mobile-home)) .area-money .area-balance { grid-column: 1 / -1; }
}