/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {
    min-height: var(--touch-size);

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

    gap: 8px;

    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    cursor: pointer;

    font-weight: 700;

    text-decoration: none;

    user-select: none;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

.btn-block {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Icon buttons
|--------------------------------------------------------------------------
*/

.icon-button {
    width: var(--touch-size);
    height: var(--touch-size);

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

    flex-shrink: 0;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;
    color: var(--text);

    cursor: pointer;

    font-size: 22px;
}


/*
|--------------------------------------------------------------------------
| Back button
|--------------------------------------------------------------------------
*/

.back-button {
    min-height: 56px;

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

    gap: 10px;

    padding: 0 18px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
    color: var(--text);

    cursor: pointer;

    font-size: 15px;
    font-weight: 750;

    user-select: none;
}

.back-button:hover {
    border-color: #c8cec9;

    background: var(--surface-soft);
}

.back-button-icon {
    font-size: 23px;
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

.card {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

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


/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.input,
select,
textarea {
    width: 100%;

    min-height: var(--touch-size);

    padding: 12px 14px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;

    font-size: 16px;
}

.input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(31, 77, 58, .15);

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


/*
|--------------------------------------------------------------------------
| Input with keypad button
|--------------------------------------------------------------------------
*/

.input-with-keypad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;

    gap: 8px;
}

.keypad-open-button {
    min-width: 58px;
    min-height: 58px;

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

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;
    color: var(--primary);

    cursor: pointer;

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


/*
|--------------------------------------------------------------------------
| WhatsApp button
|--------------------------------------------------------------------------
*/

.whatsapp-button {
    min-height: 56px;

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

    gap: 9px;

    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    background: #167d4b;
    color: #ffffff;

    cursor: pointer;

    font-size: 15px;
    font-weight: 750;
}

.whatsapp-button:hover {
    background: #11663d;
}


/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

.table-wrapper {
    overflow-x: auto;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 14px;
}

table {
    width: 100%;

    border-collapse: collapse;
}

th,
td {
    padding: 16px 14px;

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

    text-align: left;
}

th {
    background: var(--surface-soft);

    color: var(--text-soft);

    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| Alerts
|--------------------------------------------------------------------------
*/

.alert {
    margin-bottom: 20px;

    padding: 15px 18px;

    border-radius: 11px;

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

.alert-success {
    border: 1px solid #a6d8bd;

    background: #edf9f2;
    color: #17643c;
}

.alert-danger {
    border: 1px solid #efb5b1;

    background: #fff1f0;
    color: #912018;
}


/*
|--------------------------------------------------------------------------
| Digital keypad overlay
|--------------------------------------------------------------------------
*/

body.keypad-open {
    overflow: hidden;
}

.digital-keypad-overlay {
    position: fixed;

    inset: 0;

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

    padding: 24px;

    background: rgba(15, 23, 20, .58);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .15s ease,
        visibility .15s ease;

    z-index: 500;
}

.digital-keypad-overlay.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Digital keypad
|--------------------------------------------------------------------------
*/

.digital-keypad {
    width: min(460px, 100%);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .28);
}

.digital-keypad-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.digital-keypad-eyebrow {
    margin-bottom: 5px;

    color: var(--primary);

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

    text-transform: uppercase;
    letter-spacing: .08em;
}

.digital-keypad-header h2 {
    margin: 0;

    font-size: 23px;
}

.digital-keypad-close {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface-soft);
    color: var(--text);

    cursor: pointer;

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


/*
|--------------------------------------------------------------------------
| Keypad display
|--------------------------------------------------------------------------
*/

.digital-keypad-display-wrap {
    margin-bottom: 15px;
}

.digital-keypad-display {
    width: 100%;
    height: 72px;

    padding: 0 18px;

    border: 2px solid var(--border);
    border-radius: 13px;

    background: var(--surface-soft);
    color: var(--text);

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

    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Keypad buttons
|--------------------------------------------------------------------------
*/

.digital-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.digital-keypad-grid button,
.digital-keypad-decimal button {
    min-height: 72px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: #ffffff;
    color: var(--text);

    cursor: pointer;

    font-size: 28px;
    font-weight: 750;

    user-select: none;
}

.digital-keypad-grid button:active,
.digital-keypad-decimal button:active {
    transform: scale(.97);

    background: var(--primary-soft);
}

.digital-keypad-grid .keypad-action {
    background: var(--surface-soft);

    color: var(--primary);
}

.digital-keypad-decimal {
    margin-top: 10px;
}

.digital-keypad-decimal[hidden] {
    display: none;
}

.keypad-decimal-button {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Keypad footer
|--------------------------------------------------------------------------
*/

.digital-keypad-footer {
    display: grid;
    grid-template-columns: 1fr 1.4fr;

    gap: 10px;

    margin-top: 15px;
}

.keypad-cancel-button {
    border: 1px solid var(--border);

    background: var(--surface-soft);
    color: var(--text);
}

.keypad-confirm-button {
    min-height: 62px;
}


/*
|--------------------------------------------------------------------------
| Touch
|--------------------------------------------------------------------------
*/

@media (pointer: coarse) {

    .back-button {
        min-height: 62px;

        padding-left: 20px;
        padding-right: 20px;

        font-size: 17px;
    }

    .whatsapp-button {
        min-height: 62px;

        font-size: 17px;
    }

    .keypad-open-button {
        min-width: 64px;
        min-height: 64px;
    }

    .digital-keypad {
        width: min(500px, 100%);

        padding: 24px;
    }

    .digital-keypad-grid button,
    .digital-keypad-decimal button {
        min-height: 78px;

        font-size: 31px;
    }

    .digital-keypad-display {
        height: 78px;

        font-size: 34px;
    }

    .keypad-confirm-button {
        min-height: 68px;
    }

}


/*
|--------------------------------------------------------------------------
| Small screens
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .digital-keypad-overlay {
        align-items: flex-end;

        padding: 10px;
    }

    .digital-keypad {
        width: 100%;

        border-radius: 20px 20px 14px 14px;
    }

}


/* =========================================================
   Navigation buttons
   ========================================================= */

.navigation-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.navigation-buttons .back-button {
    min-height: 52px;
    text-decoration: none;
}

.navigation-buttons .home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Offline / synchronization status */
.offline-status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:10px;max-width:min(92vw,720px);padding:10px 14px;border-radius:12px;background:#202923;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.22);font-size:14px;font-weight:700}
.offline-status[hidden]{display:none!important}.offline-status.is-syncing{opacity:.92}.offline-status.is-error{background:#6f2c2c}.offline-status button{border:0;border-radius:8px;padding:7px 10px;font-weight:800;cursor:pointer}