/*
|--------------------------------------------------------------------------
| PAYBILL GLOBAL CSS
|--------------------------------------------------------------------------
*/

/* ================================================================
   RESET
================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {

    background:
        var(--pb-bg);

    color:
        var(--pb-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

    overscroll-behavior:
        none;
}


/* ================================================================
   LINKS
================================================================ */

a {

    color:
        inherit;

    text-decoration:
        none;
}


/* ================================================================
   FORM ELEMENTS
================================================================ */

button,
input,
select,
textarea {

    font:
        inherit;
}

button {

    cursor:
        pointer;
}


/* ================================================================
   IMAGES
================================================================ */

img {

    max-width:
        100%;

    height:
        auto;
}


/* ================================================================
   APP CONTAINER
================================================================ */

.app-container {

    width:
        100%;

    max-width:
        var(--pb-app-width);

    min-height:
        calc(100vh - 20px);

    margin:
        10px auto;

    background:
        var(--pb-surface);

    color:
        var(--pb-text);

    border-radius:
        var(--pb-radius-app);

    overflow:
        hidden;

    box-shadow:
        var(--pb-shadow-lg);
}


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

.page {

    width:
        100%;

    padding:
        17px
        15px
        105px;
}


/* ================================================================
   BUTTON BASE
================================================================ */

.pb-button {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        var(--pb-radius-md);

    background:
        var(--pb-primary);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        transform .15s ease,
        opacity .15s ease,
        background-color .2s ease;
}

.pb-button:active {

    transform:
        scale(.97);
}

.pb-button:hover {

    opacity:
        .94;
}

.pb-button.secondary {

    background:
        var(--pb-surface-3);

    color:
        var(--pb-text);
}

.pb-button.outline {

    background:
        transparent;

    color:
        var(--pb-primary);

    border:
        1px solid
        var(--pb-primary);
}


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

.pb-card {

    background:
        var(--pb-surface);

    border:
        1px solid
        var(--pb-border);

    border-radius:
        var(--pb-radius-lg);

    box-shadow:
        var(--pb-shadow);
}


/* ================================================================
   TEXT UTILITIES
================================================================ */

.pb-muted {

    color:
        var(--pb-muted);
}

.pb-primary {

    color:
        var(--pb-primary);
}

.pb-success {

    color:
        var(--pb-success);
}

.pb-warning {

    color:
        var(--pb-warning);
}

.pb-danger {

    color:
        var(--pb-danger);
}


/* ================================================================
   STATUS BADGES
================================================================ */

.pb-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        23px;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        850;
}

.pb-status.success {

    color:
        var(--pb-success);

    background:
        var(--pb-success-bg);
}

.pb-status.pending {

    color:
        var(--pb-warning);

    background:
        var(--pb-warning-bg);
}

.pb-status.failed {

    color:
        var(--pb-danger);

    background:
        var(--pb-danger-bg);
}

.pb-status.info {

    color:
        var(--pb-info);

    background:
        var(--pb-info-bg);
}


/* ================================================================
   EMPTY STATE
================================================================ */

.pb-empty {

    padding:
        35px 15px;

    text-align:
        center;

    color:
        var(--pb-muted);

    font-size:
        12px;
}


/* ================================================================
   HIDDEN
================================================================ */

.pb-hidden {
    display: none !important;
}

/* =========================================================
   PAYBILL CONNECTION TOAST
   ========================================================= */

.pb-connection-toast {
    position: fixed;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    width: calc(100% - 32px);
    max-width: 430px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 15px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    z-index: 99999;

    animation:
        pbConnectionIn
        0.25s
        ease-out;
}

.pb-connection-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 12px;

    background: #fff1f2;

    color: #dc2626;

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

.pb-connection-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pb-connection-content strong {
    color: #111827;

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

.pb-connection-content span {
    color: #6b7280;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   ONLINE / RESTORED
   ========================================================= */

.pb-connection-toast.is-online
.pb-connection-icon {
    background: #ecfdf5;
    color: #16a34a;
}

/* =========================================================
   PAYBILL PWA UPDATE NOTICE
   ========================================================= */

.pb-update-notice {
    position: fixed;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    width: calc(100% - 32px);
    max-width: 430px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 14px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    z-index: 100000;
}

.pb-update-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 12px;

    background: #eef4ff;

    color: #0d6efd;

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

.pb-update-content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pb-update-content strong {
    color: #111827;

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

.pb-update-content span {
    color: #6b7280;

    font-size: 11px;
}

.pb-update-button {
    border: 0;

    padding: 9px 13px;

    border-radius: 10px;

    background: #0d6efd;
    color: #ffffff;

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

    cursor: pointer;
}

.pb-update-button:disabled {
    opacity: 0.65;
    cursor: wait;
}
/* =========================================================
   PAYBILL PWA
   ========================================================= */

html {
    min-height: 100%;
    background: #f3f6fa;
}

body {
    min-height: 100%;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.app-container {
    width: 100%;
    max-width: 480px;
    min-height: calc(100vh - 20px);
    margin: 10px auto;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08);
}

/* PWA standalone mode */

@media (display-mode: standalone) {

    body {
        background: #f3f6fa;
    }

    .app-container {
        min-height: 100vh;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Better mobile touch */

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

/* Prevent accidental horizontal overflow */

html,
body {
    overflow-x: hidden;
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes pbConnectionIn {

    from {
        opacity: 0;
        transform:
            translate(-50%, 15px);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0);
    }

}

/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 480px) {

    .app-container {

        margin:
            0 auto;

        min-height:
            100vh;

        border-radius:
            0;

        box-shadow:
            none;
    }
}


/* ================================================================
   SMALL DEVICES
================================================================ */

@media (max-width: 380px) {

    .page {

        padding-left:
            11px;

        padding-right:
            11px;
    }
}