/**
 * Easy Store Management by AyudaWP - Settings page styles
 * Only loaded on the plugin settings screen
 * @since 2.0.0
 */

/* ==========================================================================
   Page layout (main + sidebar)
   ========================================================================== */

.ayudawp-esm-content {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.ayudawp-esm-main {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #c3c4c7;
    padding: 0 20px 10px;
    align-self: flex-start;
}

.ayudawp-esm-sidebar {
    width: 280px;
    flex-shrink: 0;
}

/* ==========================================================================
   Fields
   ========================================================================== */

.ayudawp-esm-main .form-table th {
    width: 220px;
}

/* WordPress ships `.form-table td fieldset label { margin: 0.35em 0 0.5em !important;
   display: inline-block; }`, specificity (0,1,3). A plain `.ayudawp-esm-roles label`
   is (0,1,1) and loses even with !important, which is why the checkboxes and their
   text ended up glued together. These selectors are (0,2,3) so they win, and the
   spacing is done with flex gap, which no margin rule can override anyway. */
.form-table td fieldset.ayudawp-esm-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-bottom: 4px;
}

.form-table td fieldset.ayudawp-esm-roles label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
}

.form-table td fieldset.ayudawp-esm-roles input[type="checkbox"] {
    margin: 0;
}

/* Same idea for the single checkbox rows, so the text is not glued to the box. */
.ayudawp-esm-main .form-table td > label {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
}

.ayudawp-esm-main .form-table td > label input[type="checkbox"] {
    margin: 2px 0 0;
}

.ayudawp-esm-main .notice.inline {
    margin: 10px 0 0;
}

/* ==========================================================================
   Promotional widgets - Sidebar layout (vertical)
   ========================================================================== */

:root {
    --ayudawp-esm-brand: #0073aa;
}

.ayudawp-esm-promo-box {
    background: #fff;
    border: 1px solid #c3c4c7;
    padding: 15px;
    margin-bottom: 20px;
}

.ayudawp-esm-promo-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--ayudawp-esm-brand, #0073aa);
    margin-bottom: 10px;
}

.ayudawp-esm-promo-box-title {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    font-weight: 600;
}

.ayudawp-esm-promo-box-description {
    margin: 0 0 15px;
    color: #50575e;
    font-size: 13px;
    line-height: 1.5;
}

/* Full-width buttons inside promo boxes.
   WordPress styles .button inside .wp-core-ui with (0,3,0) specificity, so the
   extra own class is needed to win without touching core classes. */
.ayudawp-esm-sidebar .ayudawp-esm-promo-box .button {
    display: block;
    text-align: center;
    margin-top: 5px;
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: auto;
    line-height: 1.4;
    padding: 6px 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
    .ayudawp-esm-content {
        flex-direction: column;
    }

    .ayudawp-esm-sidebar {
        width: 100%;
    }
}