/* =========================================================

   PONY ATTENDANCE FORM — COMPACT FINAL UI

   Matches approved compact screenshot proportions

========================================================= */



body .pony-attendance-shell,

body .pony-modern-attendance-form,

body .pony-attendance-shell * {

    box-sizing: border-box;

}



body .pony-attendance-shell {

    width: 100%;

    max-width: 920px;

    margin: 18px auto 28px !important;

    padding: 24px 26px 26px !important;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);

    color: #0f172a;

}



/* Kill theme/page spacing around shortcode */

body .entry-content,

body .site-content,

body article,

body .content-area {

    max-width: 100% !important;

}



/* =========================================================

   HEADER

========================================================= */



body .pony-attendance-header {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin: 0 0 18px !important;

    padding: 0 0 18px !important;

    border-bottom: 1px solid #e5e7eb;

}



body .pony-attendance-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf3ff;

    border-radius: 8px;

    font-size: 22px;

    line-height: 1;

}



body .pony-attendance-title {

    margin: 0 0 6px !important;

    padding: 0 !important;

    font-size: clamp(24px, 4vw, 34px) !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    letter-spacing: -0.03em;

}



body .pony-attendance-subtitle {

    margin: 0 !important;

    color: #475569;

    font-size: 14px;

    line-height: 1.4;

}



/* =========================================================

   SUMMARY

========================================================= */



body .pony-summary-shell {

    margin: 0 0 22px !important;

    padding: 18px !important;

    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);

    border: 1px solid #bfdbfe;

    border-radius: 8px;

}



body .pony-summary-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

}



body .pony-summary-heading {

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    color: #111827;

}



body .pony-summary-total {

    font-size: 28px;

    line-height: 1;

    font-weight: 900;

    color: #2563eb;

    white-space: nowrap;

}



body .pony-summary-grid {

    display: grid;

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

    gap: 12px;

    margin: 0 !important;

    padding: 0 0 14px !important;

    border-bottom: 1px solid #cfe3fb;

}



body .pony-summary-card {

    margin: 0 !important;

    padding: 14px 16px !important;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

}



body .pony-summary-date {

    font-size: 17px !important;

    line-height: 1.2;

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 3px !important;

}



body .pony-summary-hours {

    font-size: 14px !important;

    color: #334155;

    margin: 0 !important;

}



/* If only one shift, keep card compact instead of full awkward */

body .pony-summary-grid:has(.pony-summary-card:only-child) {

    grid-template-columns: minmax(0, 260px);

}



/* =========================================================

   FORM FIELDS

========================================================= */



body .pony-modern-attendance-form {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

}



body .pony-field {

    margin: 0 0 14px !important;

    padding: 0 !important;

}



body .pony-field label,

body .pony-signature-wrap>label {

    display: block;

    margin: 0 0 6px !important;

    padding: 0 !important;

    font-size: 15px !important;

    line-height: 1.25;

    font-weight: 800 !important;

    color: #0f172a !important;

}



body .pony-modern-attendance-form input[type="text"],

body .pony-modern-attendance-form input[type="number"],

body .pony-modern-attendance-form select,

body .pony-modern-attendance-form textarea {

    width: 100% !important;

    min-height: 46px !important;

    height: auto !important;

    margin: 0 !important;

    padding: 11px 14px !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 15px !important;

    line-height: 1.35 !important;

    box-shadow: none !important;

}



body .pony-modern-attendance-form textarea {

    min-height: 84px !important;

    resize: vertical;

}



body .pony-modern-attendance-form select {

    appearance: auto;

}



/* =========================================================

   ACKNOWLEDGEMENT

========================================================= */



body .pony-ack-box {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 2px 0 18px !important;

    padding: 14px 16px !important;

    background: #fff8e5 !important;

    border: 1px solid #facc15 !important;

    border-radius: 8px !important;

}



body .pony-ack-box input[type="checkbox"] {

    width: 18px !important;

    height: 18px !important;

    margin: 0 !important;

    flex: 0 0 18px;

}



body .pony-ack-text {

    margin: 0 !important;

    font-size: 15px !important;

    line-height: 1.35 !important;

    font-weight: 800 !important;

    color: #0f172a !important;

}



/* =========================================================

   SIGNATURE

========================================================= */



body .pony-signature-wrap {

    margin: 0 0 18px !important;

    padding: 0 !important;

}



body #pony-signature-pad {

    display: block;

    width: 100% !important;

    height: 110px !important;

    border: 1px dashed #94a3b8 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    touch-action: none;

}



body .pony-clear-signature {

    margin: 8px 0 0 !important;

    padding: 9px 16px !important;

    background: #38a3ee !important;

    color: #ffffff !important;

    border: 0 !important;

    border-radius: 999px !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    text-transform: uppercase;

    cursor: pointer;

}



/* =========================================================

   BUTTON

========================================================= */



body .pony-submit-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: auto !important;

    min-width: 250px;

    margin: 0 !important;

    padding: 13px 22px !important;

    background: #0d6efd !important;

    color: #ffffff !important;

    border: 0 !important;

    border-radius: 8px !important;

    font-size: 15px !important;

    line-height: 1.2;

    font-weight: 800 !important;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.22);

}



body .pony-submit-btn:hover {

    filter: brightness(0.96);

}



/* =========================================================

   REQUEST OFF TEMP COMPACT FIX

   Until request_off gets same renderer

========================================================= */



body .pony-cal-form-shell form,

body form[action*="admin-post.php"] {

    max-width: 760px;

}



body .pony-cal-form-shell h3 {

    font-size: 34px !important;

    margin: 0 0 18px !important;

}



/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 800px) {

    body .pony-attendance-shell {

        max-width: calc(100% - 24px);

        margin: 12px auto 20px !important;

        padding: 18px !important;

    }



    body .pony-attendance-title {

        font-size: 28px !important;

    }



    body .pony-summary-grid {

        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    }



    body .pony-summary-top {

        align-items: flex-start;

        flex-direction: column;

    }



    body .pony-submit-btn {

        width: 100% !important;

        min-width: 0;

    }

}



/* =========================================================

   COMPACT TWO COLUMN ROW

========================================================= */



body .pony-inline-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-bottom: 18px;

}



/* =========================================================

   SIGNATURE ACTION ROW

========================================================= */



body .pony-signature-actions {

    display: flex;

    justify-content: flex-end;

    margin-top: 8px;

}



/* =========================================================

   SUBMIT ROW

========================================================= */



body .pony-submit-row {

    margin-top: 14px;

}



/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 768px) {



    body .pony-inline-row {

        grid-template-columns: 1fr;

        gap: 14px;

    }



    body .pony-signature-actions {

        justify-content: center;

    }



    body .pony-signature-submit-row {

        position: sticky;

        bottom: 0;

        background: #ffffff;

        padding-top: 10px;

        padding-bottom: env(safe-area-inset-bottom);

        z-index: 50;

    }



}



/* =========================================================

   SIGNATURE FOOTER

========================================================= */



body .pony-signature-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 10px;

    gap: 12px;

}



body .pony-signature-footer .pony-submit-btn {

    margin: 0;

}



body .pony-signature-footer .pony-clear-signature {

    margin: 0;

}



@media (max-width: 768px) {



    body .pony-signature-footer {

        flex-direction: column-reverse;

        align-items: stretch;

    }



}



/* =========================================================

   SIGNATURE + SUBMIT ROW

========================================================= */



.pony-signature-submit-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    gap: 14px;

}



.pony-signature-submit-row .pony-submit-btn {

    margin: 0;

}



.pony-signature-submit-row .pony-clear-btn {

    margin: 0;

}



@media (max-width: 768px) {



    .pony-signature-submit-row {

        flex-direction: column-reverse;

        align-items: stretch;

    }



    .pony-signature-submit-row .pony-submit-btn,

    .pony-signature-submit-row .pony-clear-btn {

        width: 100%;

    }



}