/* --- Global Styles for Admin Page --- */
.hcm-admin-page {
    max-width: 100%;
    overflow-x: auto; /* Ensure tables don't break layout */
}

/* --- Save Button Styling --- */
.hcm-primary-button {
    /* Base WordPress button-primary styles are good, but here are the custom overrides: */
    background-color: #2271b1 !important; /* Blue */
    border: 1px solid #1a5a8a !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 6px 18px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important; /* Override WP defaults */
    line-height: 1.5 !important;
}

.hcm-primary-button:hover {
    background-color: #135e96 !important;
    border-color: #0c4a75 !important;
}

.hcm-primary-button:active {
    background-color: #0c4a75 !important;
}

/* --- Table Headers Styling --- */
.hcm-date-table th {
    text-align: center;
}

.hcm-table-header-group {
    text-align:center !important; 
    border-right: 1px solid #ccd0d4;
    border-bottom: 1px solid #ccd0d4;
}

.hcm-table-header-no-border-right {
    border-right: none; /* remove right border for last header */
}

.hcm-table-subheader {
    background-color:#f9fafb;
    border:1px solid #ccd0d4;
    padding:8px 12px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#1d2327;
}

.hcm-table-actions-header {
    text-align:center;
}

/* --- Table Cell Styling --- */
.hcm-table-cell-center {
    text-align: center;
}

.hcm-inline-form {
    display:inline;
}

/* --- Delete Button Styling --- */
.hcm-delete-button {
    /* Overrides for WordPress .button-link.is-destructive */
    padding:2px 18px !important;
    border:1px solid #dc2626 !important; /* Red border */
    background-color:#fef2f2 !important; /* Light red background */
    color:#b91c1c !important; /* Dark red text */
    border-radius:6px !important;
    font-weight:600 !important;
    font-size:14px !important;
    cursor:pointer !important;
    transition:all 0.2s ease-in-out !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.hcm-delete-button:hover {
    background-color: #dc2626 !important; /* Solid red background on hover */
    color: #fff !important; /* White text on hover */
}

.hcm-delete-button:active {
    background-color: #b91c1c !important; /* Darker red on click/active */
}

/* --- Pagination Styling --- */
.hcm-pagination-nav {
    display:flex;
    justify-content:flex-end;
    padding:10px 0;
}

.hcm-pagination-pages {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:500;
}

.hcm-pagination-link,
.hcm-pagination-current,
.hcm-pagination-dots {
    display:inline-block;
    padding:5px 10px;
    border-radius:4px;
    text-decoration:none;
    margin:0; /* Reset default WP margin */
    box-shadow: none; /* Reset default WP box-shadow */
}

.hcm-pagination-link {
    border:1px solid #ccd0d4;
    background:#fff;
    color:#2271b1;
}

.hcm-pagination-link:hover {
    background-color:#f0f6fc;
}

.hcm-pagination-current {
    border:1px solid #2271b1;
    background:#2271b1;
    color:#fff;
    cursor:default;
}

.hcm-pagination-dots {
    padding:5px 8px;
    color:#888;
    border:none;
    background:transparent;
    cursor:default;
}

/* --- Responsive CSS (Mobile/Small Screens) --- */
@media (max-width: 782px) {
    .hcm-date-table {
        /* Makes the table horizontally scrollable on small screens */
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    /* Ensure form inputs are full width on mobile */
    .form-table input[type="date"],
    .form-table input[type="number"] {
        width: 100%;
        box-sizing: border-box;
    }

    /* Center pagination on smaller screens */
    .hcm-pagination-nav {
        justify-content: center;
    }

    /* Wrap pagination links if they overflow */
    .hcm-pagination-pages {
        flex-wrap: wrap;
        justify-content: center;
    }
}