.pony-calendar-wrapper { 

    padding: 20px;

}



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

   🔥 HEADER (FIXED ALIGNMENT + SPACING)

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



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

   🔥 HARD FIX HEADER LAYOUT (OVERRIDE THEME)

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



.pony-cal-header {

    display: grid !important;

    grid-template-columns: auto 1fr auto;  /* ← center → */

    align-items: center;

    gap: 10px;

    margin-bottom: 5px !important;

}



/* 🔥 FORCE INLINE HEADER LAYOUT */

.pony-cal-header {

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 5px !important;

}



/* arrows inline */

.pony-cal-prev,

.pony-cal-next {

    display: inline-flex !important;

}



/* keep form inline */

.pony-cal-picker {

    display: flex !important;

    align-items: center;

    gap: 10px;

}



/* LEFT ARROW */

.pony-cal-prev {

    justify-self: end;

}



/* RIGHT ARROW */

.pony-cal-next {

    justify-self: start;

}



/* CENTER CONTROLS */

.pony-cal-controls {

    display: flex !important;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



/* FORCE ARROWS INLINE */

.pony-cal-prev,

.pony-cal-next {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

}



/* BIGGER CLICK TARGET */

.pony-cal-nav {

    font-size: 22px;

    padding: 8px 12px;

    border-radius: 8px;

    background: #f2f4f7;

}



/* REMOVE STACKING CAUSED BY THEME */

.pony-calendar-header * {

    float: none !important;

}



/* NAV ARROWS */

.pony-cal-nav {

    font-size: 22px;

    font-weight: bold;

    padding: 6px 10px;

    border-radius: 8px;

    background: #f2f4f7;

    color: #333;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.pony-cal-nav:hover {

    background: #dbe3ec;

}



/* FILTER / SELECTOR */

#pony-calendar-filter {

    padding: 6px 10px;

    border-radius: 6px;

}



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

   GRID (LIST VIEW)

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



.pony-calendar-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 15px;

}



.pony-calendar-card {

    background: #fff;

    border-radius: 12px;

    padding: 15px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.1);

    transition: 0.2s;

}



.pony-calendar-card:hover {

    transform: translateY(-3px);

}



.pony-calendar-title {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 10px;

}



.pony-calendar-meta {

    font-size: 13px;

    color: #555;

    margin-bottom: 8px;

}



.pony-calendar-type {

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 10px;

}



/* TYPE COLORS */

.type-request_off { color: #0073aa; }

.type-missed_shift { color: #d63638; }

.type-late_arrival { color: #ff9900; }

.type-early_leave { color: #ff9900; }

.type-event { color: #2ea44f; }

.type-email_event { color: #6f42c1; }



.pony-calendar-desc {

    font-size: 14px;

    color: #333;

}



.pony-calendar-empty {

    padding: 20px;

    text-align: center;

    opacity: 0.6;

}



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

   🔥 MODAL (MERGED CLEAN — NO DUPES)

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



.pony-modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.6);

    z-index: 9999;

    justify-content: center;

    align-items: center;

}



/* 🔥 MODAL UI FIX */

.pony-modal-content {

    background: #fff;

    padding: 28px 26px 22px;

    border-radius: 14px;

    width: 95%;

    max-width: 520px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.25);

}



/* REMOVE TOP DEAD SPACE */

.pony-modal-header {

    margin: 0;

    padding: 0;

}



/* BIGGER TITLE */

#pony-modal-title {

    font-size: 42px;

    font-weight: 700;

    margin: 0;

    line-height: 1.1;

}



/* META INFO CLEAN */

.pony-modal-meta {

    font-size: 15px;

    margin: 2px 0;

}



/* DESCRIPTION */

.pony-modal-desc {

    font-size: 15px;

    margin-top: 6px;

}



/* BUTTONS TIGHT */

.pony-modal-actions {

    margin-top: 10px;

}



/* CLOSE BUTTON POSITION */

.pony-modal-close {

    position: absolute;

    top: 10px;

    right: 15px;

    font-size: 22px;

}



/* GRID FOR FORM */

.pony-create-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



/* FULL WIDTH FIELDS */

.pony-full {

    grid-column: span 2;

}



/* CLEAN INPUT SPACING */

.pony-create-grid input,

.pony-create-grid select,

.pony-create-grid textarea {

    width: 100%;

}



/* ATTACHMENTS */

.pony-create-attachments {

    margin-top: 5px;

}



/* BUTTON ALIGN */

#pony-create-form button {

    margin-top: 10px;

}



.pony-modal-close {

    float: right;

    font-size: 22px;

    cursor: pointer;

}



.pony-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.pony-badge {

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 12px;

    background: #eee;

}



.pony-modal-meta {

    margin: 10px 0;

    font-size: 14px;

}



.pony-modal-desc {

    margin-top: 10px;

}



.pony-modal-attachments {

    margin-top: 15px;

}



.pony-attachment {

    display: block;

    margin-bottom: 6px;

    color: #0073aa;

    text-decoration: none;

}



/* CLEAN ATTACHMENT BLOCK */

.pony-attachment a {

    display: block;

    padding: 6px 10px;

    background: #f3f3f3;

    border-radius: 6px;

    margin-bottom: 5px;

    text-decoration: none;

}



.pony-attachment a:hover {

    background: #e2e2e2;

}



.pony-modal-actions {

    margin-top: 15px;

}



.pony-btn {

    margin-right: 8px;

    padding: 6px 10px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}



.pony-btn.approve { background: #2ea44f; color:#fff; }

.pony-btn.deny { background: #d63638; color:#fff; }

.pony-btn.edit { background: #0073aa; color:#fff; }



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

   🔥 FORM COMPAT (UNCHANGED)

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



.pony-cal-form-shell {

    max-width: 600px;

    margin: 40px auto;

    background: #fff;

    padding: 25px;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}



.pony-cal-form-shell label {

    display: block;

    margin-top: 15px;

    font-weight: 600;

}



.pony-cal-form-shell input,

.pony-cal-form-shell textarea,

.pony-cal-form-shell select {

    width: 100%;

    padding: 10px;

    margin-top: 5px;

    border: 1px solid #ccc;

    border-radius: 6px;

}



.pony-cal-btn {

    margin-top: 20px;

    background: #0f6a8b;

    color: #fff;

    padding: 12px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

}



.pony-cal-btn:hover {

    background: #0c5670;

}



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

   🔥 MONTH GRID (YOUR CALENDAR VIEW)

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



.pony-cal-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 10px;

    margin-top: 5px; /* 🔥 tightened */

}



.pony-cal-day {

    min-height: 120px;

    background: #fff;

    border-radius: 8px;

    padding: 8px;

}



.pony-cal-header {

    margin-bottom: 0px !important;

}



.pony-cal-grid {

    margin-top: 0px !important;

}



.pony-cal-wrapper {

    padding-top: 10px !important;

}



.pony-cal-title {

    margin: 8px 0 8px 0 !important;

}



.pony-cal-grid {

    margin-top: 5px !important;

}



.pony-cal-wrap {

    margin-top: 5px !important;

}



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

   QUICK CREATE MODAL LAYOUT

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



#pony-modal-create {

    width: 100%;

}



.pony-create-form {

    margin: 0;

}



.pony-create-header h2 {

    margin: 0 0 12px 0;

    padding: 0;

    font-size: 34px;

    line-height: 1.1;

}



.pony-create-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px 14px;

    align-items: start;

}



.pony-create-field label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 5px;

}



.pony-create-field input,

.pony-create-field select,

.pony-create-field textarea {

    width: 100%;

    box-sizing: border-box;

}



.pony-create-full {

    grid-column: 1 / -1;

}



.pony-create-actions {

    margin-top: 14px;

    text-align: right;

}



@media (max-width: 600px) {

    .pony-create-grid {

        grid-template-columns: 1fr;

    }



    .pony-create-full {

        grid-column: auto;

    }

}



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

   🔥 MODAL TYPOGRAPHY UPGRADE

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



#pony-modal-title {

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 12px;

    color: #2d3748;

}



.pony-modal-meta {

    font-size: 16px;

    margin-bottom: 6px;

    color: #555;

}



.pony-modal-meta strong {

    color: #333;

}



/* Description tighter + readable */

.pony-modal-desc {

    margin-top: 12px;

    font-size: 15px;

    line-height: 1.5;

    color: #444;

}



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

   🔥 ACTION BUTTONS (FIX PLACEMENT)

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



.pony-modal-actions {

    display: flex;

    gap: 10px;

    margin-top: 18px;

    flex-wrap: wrap;

}



/* Bigger, consistent buttons */

.pony-btn {

    padding: 10px 14px;

    font-size: 14px;

    border-radius: 8px;

    font-weight: 600;

}



/* Improve visual hierarchy */

.pony-btn.edit {

    background: #2563eb;

}



.pony-btn.approve {

    background: #16a34a;

}



.pony-btn.deny {

    background: #dc2626;

}



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

   🔥 ATTACHMENTS VISUAL FIX

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



.pony-attachments {

    margin-top: 15px;

    font-size: 14px;

}



.pony-attachments strong {

    display: block;

    margin-bottom: 6px;

}



.pony-attachments a {

    display: block;

    padding: 6px 10px;

    background: #f3f4f6;

    border-radius: 6px;

    margin-bottom: 6px;

    text-decoration: none;

}



.pony-attachments a:hover {

    background: #e5e7eb;

}



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

   🔥 CALENDAR HEADER CLEANUP

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



.pony-cal-header {

    display: flex !important;

    justify-content: center;

    align-items: center;

    gap: 12px;

    flex-wrap: nowrap;

    margin-bottom: 12px !important;

}



.pony-cal-controls {

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: nowrap;

}



/* month/year selector inline */

.pony-cal-picker {

    display: flex !important;

    align-items: center;

    gap: 8px;

    flex-wrap: nowrap;

}



/* dropdown cleanup */

.pony-cal-picker select {

    min-width: 120px;

    height: 42px;

    padding: 0 12px;

    border-radius: 10px;

    border: 1px solid #d6dce5;

    background: #fff;

    font-size: 15px;

    font-weight: 600;

}



/* arrows */

.pony-cal-nav {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: #f3f6fb;

    border: 1px solid #d6dce5;

    display: flex !important;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    transition: .15s ease;

}



.pony-cal-nav:hover {

    background: #dbeafe;

    border-color: #93c5fd;

}



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

   🔥 CALENDAR GRID CLEANUP

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



.pony-cal-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 0;

    border: 1px solid #dbe2ea;

    border-radius: 14px;

    overflow: hidden;

    background: #dbe2ea;

    margin-top: 10px !important;

}



/* actual day cells */

.pony-cal-day {

    min-height: 140px;

    background: #fff;

    padding: 10px;

    border-right: 1px solid #dbe2ea;

    border-bottom: 1px solid #dbe2ea;

    transition: background .15s ease;

    position: relative;

}



/* remove edge overflow */

.pony-cal-day:nth-child(7n) {

    border-right: none;

}



/* subtle hover */

.pony-cal-day:hover {

    background: #f8fbff;

}



/* day number */

.pony-cal-day-number {

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 8px;

    color: #374151;

}



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

   🔥 TODAY HIGHLIGHT

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



.pony-cal-day.today,

.pony-cal-day.is-today {

    background: #eff6ff !important;

    box-shadow: inset 0 0 0 2px #2563eb;

}



.pony-cal-day.today .pony-cal-day-number,

.pony-cal-day.is-today .pony-cal-day-number {

    color: #2563eb;

    font-weight: 800;

}



/* blue dot */

.pony-cal-day.today::after,

.pony-cal-day.is-today::after {

    content: '';

    position: absolute;

    top: 10px;

    right: 10px;

    width: 10px;

    height: 10px;

    background: #2563eb;

    border-radius: 50%;

}



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

   🔥 EVENT STYLING

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



.pony-cal-event {

    margin-top: 6px;

    padding: 6px 8px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.3;

    background: #f3f4f6;

    border-left: 4px solid #94a3b8;

    overflow: hidden;

}



/* event types */

.pony-cal-event.request_off {

    border-left-color: #2563eb;

}



.pony-cal-event.missed_shift {

    border-left-color: #dc2626;

}



.pony-cal-event.late_arrival,

.pony-cal-event.early_leave {

    border-left-color: #f59e0b;

}



.pony-cal-event.event {

    border-left-color: #16a34a;

}



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

   🔥 MOBILE

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



@media (max-width: 900px) {



    .pony-cal-grid {

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

    }



}



@media (max-width: 600px) {



    .pony-cal-grid {

        grid-template-columns: 1fr;

    }



    .pony-cal-header {

        flex-wrap: wrap;

    }



    .pony-cal-controls {

        flex-wrap: wrap;

    }



}



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

   🔥 MONTH HEADER ALIGNMENT FIX

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



/* top wrapper */

.pony-cal-topbar {

    display: flex !important;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 18px;

    flex-wrap: nowrap;

}



/* month/year title */

.pony-cal-title {

    margin: 0 !important;

    font-size: 64px;

    line-height: 1;

    font-weight: 800;

    color: #4b4e5d;

    flex: 1;

}



/* right-side controls */

.pony-cal-header {

    margin: 0 !important;

    display: flex !important;

    align-items: center;

    justify-content: flex-end !important;

    flex-wrap: nowrap;

    gap: 12px;

}



/* controls row */

.pony-cal-controls {

    display: flex !important;

    align-items: center;

    justify-content: flex-end !important;

    gap: 10px;

    flex-wrap: nowrap;

}



/* month/year selectors */

.pony-cal-picker {

    display: flex !important;

    align-items: center;

    gap: 10px;

    flex-wrap: nowrap;

}



/* selector sizing */

.pony-cal-picker select,

.pony-cal-picker input {

    height: 44px;

    min-width: 110px;

    padding: 0 14px;

    border-radius: 10px;

    border: 1px solid #d6dce5;

    background: #fff;

    font-size: 15px;

    font-weight: 600;

}



/* nav arrows */

.pony-cal-nav {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

}



/* GO button */

.pony-cal-picker button,

.pony-cal-go {

    height: 44px;

    padding: 0 24px;

    border-radius: 10px;

    border: none;

    background: #3b82f6;

    color: #fff;

    font-weight: 700;

    cursor: pointer;

}



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

   🔥 MOBILE

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



@media (max-width: 900px) {



    .pony-cal-topbar {

        flex-direction: column;

        align-items: stretch;

    }



    .pony-cal-title {

        font-size: 42px;

        text-align: center;

    }



    .pony-cal-header,

    .pony-cal-controls {

        justify-content: center !important;

        flex-wrap: wrap;

    }



}



.pony-cal-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:18px;

}



.pony-cal-title{

    margin:0 !important;

    line-height:1 !important;

}



.pony-cal-header{

    margin:0 !important;

    display:flex;

    align-items:center;

    gap:12px;

}


/* =========================================================
 * Calendar application navigation
 * Standalone-owned; App Shell may override custom properties.
 * ========================================================= */

.pony-calendar-app {
    --pony-calendar-primary: var(--dtx-company-primary, #0f4c81);
    --pony-calendar-primary-hover: var(--dtx-company-primary-hover, #1f6fa8);
    --pony-calendar-surface: var(--dtx-company-surface, #ffffff);
    --pony-calendar-border: var(--dtx-company-border, #d9e1e8);
    --pony-calendar-text: var(--dtx-company-text, #1d2935);
    --pony-calendar-muted: var(--dtx-company-muted, #5f6b76);

    width: 100%;
    color: var(--pony-calendar-text);
}

.pony-calendar-app-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 24px;
    padding: 8px;
    background: var(--pony-calendar-surface);
    border: 1px solid var(--pony-calendar-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.08);
    box-sizing: border-box;
    overflow-x: auto;
}

.pony-calendar-app-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    color: var(--pony-calendar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

.pony-calendar-app-nav-item:hover,
.pony-calendar-app-nav-item:focus {
    color: var(--pony-calendar-primary);
    background: #f2f7fb;
    border-color: var(--pony-calendar-border);
    outline: none;
}

.pony-calendar-app-nav-item.is-active {
    color: #ffffff;
    background: var(--pony-calendar-primary);
    border-color: var(--pony-calendar-primary);
    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.22);
}

.pony-calendar-app-nav-item.is-active:hover,
.pony-calendar-app-nav-item.is-active:focus {
    color: #ffffff;
    background: var(--pony-calendar-primary-hover);
    border-color: var(--pony-calendar-primary-hover);
}

.pony-calendar-app-nav-item .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
}

.pony-calendar-app-content {
    width: 100%;
}

@media (max-width: 700px) {
    .pony-calendar-app-nav {
        align-items: stretch;
    }

    .pony-calendar-app-nav-item {
        flex: 1 0 auto;
    }
}