/**
 * 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;
}

/* Lists of things this site has: menus to keep, dashboard widgets to keep.
   Same specificity trick as the roles fieldset above, and one per line because
   each row carries a name and its slug. */
/* Two columns and no inner scroll. A 260px box with its own scrollbar inside a
   page that already scrolls hides half the list and gives no clue that there is
   more, which is the least intuitive way to show a list somebody has to read
   through once. The whole thing is on screen now and the page scrolls, as it
   already did. */
.form-table td fieldset.ayudawp-esm-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
    padding: 4px 0 0;
    margin-bottom: 8px;
}

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

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

.ayudawp-esm-checklist-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.ayudawp-esm-checklist-name .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
    color: #50575e;
}

.ayudawp-esm-checklist code {
    background: none;
    padding: 0;
    color: #646970;
    font-size: 11px;
}

.ayudawp-esm-main #ayudawp_esm_extra_allowed_menus {
    margin-bottom: 4px;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   Label and control pairs, two per row
   ========================================================================== */

/* Control first and label after, in every setting of the page. With the box on
   the far right of a wide column it read as if it belonged to the next setting.

   WordPress paints one table per settings section and add_settings_field only
   lets a plugin put a class on the row, never on the table, so the tbody is
   picked by the rows it holds. A browser without :has() gets exactly what was
   there before, one pair per row: wider, not broken. */
.ayudawp-esm-wrap .form-table > tbody:has( > tr.ayudawp-esm-pair ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f1;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair > th,
.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair > td {
    width: auto;
    padding: 0;
}

/* display: contents so the checkbox and the sentence under it are placed by the
   grid of the row and not by the cell. That is what puts the description below
   the label instead of below the control. */
.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair > td {
    display: contents;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair > th {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    line-height: 1.4;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair td > input[type="checkbox"],
.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair td > select {
    grid-column: 1;
    grid-row: 1;
    margin: 1px 0 0;
}

/* Lined up with the label and not with the box, so everything that belongs to
   one setting reads as a single block. */
.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-pair .description {
    grid-column: 2;
    margin: 0;
}

/* Rows that are not a pair, the menu and the widget pickers, keep the full
   width: they carry a list, not a single control. They need their own display
   because a table-row inside a grid is blockified and loses its cells. */
.ayudawp-esm-wrap .form-table tbody:has( > tr.ayudawp-esm-pair ) > tr:not(.ayudawp-esm-pair) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px 0 0;
}

.ayudawp-esm-wrap .form-table tbody:has( > tr.ayudawp-esm-pair ) > tr:not(.ayudawp-esm-pair) th,
.ayudawp-esm-wrap .form-table tbody:has( > tr.ayudawp-esm-pair ) > tr:not(.ayudawp-esm-pair) td {
    width: auto;
    padding: 0;
}

/* ==========================================================================
   Per role profiles
   ========================================================================== */

/* One row per setting and one column per role. The wording of a setting is
   painted once and each extra role costs one narrow column, instead of a copy of
   the whole settings panel. */
/* The matrix brings its own header row, so it does not use the label column the
   Settings API reserves on the left of every field.

   Direct children only, all the way down. Without the > these rules also reached
   the cells of the matrix that lives inside this very cell, hiding its row
   headers and stacking its columns one under another. */
.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-fullrow {
    display: block;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-fullrow > th {
    display: none;
}

.ayudawp-esm-wrap .form-table > tbody > tr.ayudawp-esm-fullrow > td {
    display: block;
    width: auto;
    padding: 0;
}

/* No overflow here on purpose: the list panels open out of their cell and any
   overflow on an ancestor would clip them. With many roles the page scrolls
   sideways, which is what the rest of wp-admin does too. */
.ayudawp-esm-matrix-scroll {
    margin: 0 0 18px;
}

.ayudawp-esm-matrix {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.ayudawp-esm-matrix th,
.ayudawp-esm-matrix td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f1;
}

.ayudawp-esm-matrix thead th {
    border-bottom: 1px solid #c3c4c7;
    font-size: 12px;
    color: #50575e;
    white-space: nowrap;
}

.ayudawp-esm-matrix tbody th {
    width: 38%;
    font-weight: 400;
}

.ayudawp-esm-matrix-default {
    color: #646970;
    white-space: nowrap;
}

/* A cell that is not inherited is the whole reason this screen exists, so it
   does not look like the rest of the table. */
.ayudawp-esm-matrix td.ayudawp-esm-matrix-own {
    background: #f0f6fc;
    font-weight: 600;
}

.ayudawp-esm-matrix td.ayudawp-esm-matrix-own .ayudawp-esm-pop > summary {
    border-color: #2271b1;
}

.ayudawp-esm-matrix select {
    max-width: 100%;
}

/* The list of a role opens over the table, anchored to its own cell, instead of
   sitting loose under it. Plain <details>, so the browser keeps the open state
   and there is no JavaScript involved. */
.ayudawp-esm-matrix td {
    position: relative;
}

/* It looks like a control because it is one. As plain text it read as a label
   and nobody suspected there was a list behind it. */
.ayudawp-esm-pop > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    background: #fff;
    color: #2c3338;
    cursor: pointer;
    list-style: none;
}

.ayudawp-esm-pop > summary::-webkit-details-marker {
    display: none;
}

.ayudawp-esm-pop > summary::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: #50575e;
    margin-top: 4px;
}

.ayudawp-esm-pop[open] > summary::after {
    margin: -4px 0 0;
    border-top-color: transparent;
    border-bottom-color: #50575e;
}

.ayudawp-esm-pop > summary:hover {
    border-color: #50575e;
    background: #f6f7f7;
}

.ayudawp-esm-pop > summary:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

.ayudawp-esm-pop-close {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f0f0f1;
    text-align: right;
}

.ayudawp-esm-pop-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    width: 380px;
    max-width: 70vw;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 3px 16px rgba(0, 0, 0, .15);
    text-align: left;
    white-space: normal;
    font-weight: 400;
}

.ayudawp-esm-pop-title {
    margin: 0 0 8px;
}

/* One column inside the panel, which is narrow: the two column rule of the main
   form wins on specificity alone otherwise, and every name ends up broken into
   one word per line. The panel floats over the page, so a list longer than the
   screen has nowhere to go but its own scroll. */
.form-table td .ayudawp-esm-pop-panel fieldset.ayudawp-esm-checklist {
    grid-template-columns: minmax(0, 1fr);
    max-height: 42vh;
    overflow-y: auto;
    padding: 4px 2px 0 0;
}

.form-table td .ayudawp-esm-pop-panel textarea {
    margin-top: 4px;
}

@media (max-width: 782px) {
    .ayudawp-esm-matrix th,
    .ayudawp-esm-matrix td {
        padding: 8px;
    }
}


/* One collapsible block per role, closed while the role inherits everything and
   open as soon as it overrides something, so what is not default is visible
   without hunting for it. Plain <details>, no JavaScript: this plugin does not
   ship any and a disclosure widget is not a reason to start. */
.ayudawp-esm-profile {
    margin: 0 0 12px;
    border: 1px solid #dcdcde;
    background: #fff;
}

.ayudawp-esm-profile > summary {
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
}

.ayudawp-esm-profile > summary:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}

.ayudawp-esm-profile[open] > summary {
    border-bottom: 1px solid #dcdcde;
    background: #f6f7f7;
}

.ayudawp-esm-profile .form-table {
    margin: 0;
}

.ayudawp-esm-profile .form-table th {
    padding-left: 12px;
    font-weight: 400;
}

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

/* One column on a narrow screen: two of anything under 782px is unreadable, and
   that is the same breakpoint at which WordPress switches its own admin. */
@media (max-width: 782px) {
    .ayudawp-esm-wrap .form-table tbody:has( > tr.ayudawp-esm-pair ),
    .form-table td fieldset.ayudawp-esm-checklist {
        grid-template-columns: minmax(0, 1fr);
    }

    .ayudawp-esm-wrap .form-table tbody:has( > tr.ayudawp-esm-pair ) > tr:not(.ayudawp-esm-pair) {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

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

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