/* ======================================================================
   Layout
   ====================================================================== */
.sh-pdf-page                  { max-width: 1200px; margin: 100px auto 32px; padding: 0 16px; }
.sh-pdf-page h1               { margin-bottom: 8px; }
.sh-pdf-page .sh-pdf-meta     { color: #555; margin-bottom: 16px; }
.sh-pdf-page .sh-pdf-filter   { margin: 12px 0; }
.sh-pdf-page .sh-pdf-filter input {
    width: 320px;
    padding: 8px 10px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    border-radius: 6px;
}

/* ======================================================================
   Desktop table
   ====================================================================== */
.sh-pdf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 12px;
}
.sh-pdf-table th, .sh-pdf-table td {
    border: 1px solid #d6d6d6;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}
.sh-pdf-table thead th         { background: #f4f4f4; font-weight: 600; }
.sh-pdf-table .col-id          { width: 100px; font-variant-numeric: tabular-nums; }
.sh-pdf-table .col-channel     { width: 80px; }
.sh-pdf-table .col-actions     { width: 320px; }
.sh-pdf-table .col-status      { width: 220px; }
.sh-pdf-table .col-name small  { color: #777; }

/* The action row — flex container with reliable gap. Used identically on
   desktop and mobile because it's a regular <div>, not a table element. */
.sh-pdf-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sh-pdf-actions .sh-pdf-btn--primary,
.sh-pdf-actions .sh-pdf-btn--secondary {
    flex: 1 1 auto;
    min-width: 0;
}
.sh-pdf-actions .sh-pdf-btn--icon {
    flex: 0 0 auto;
}

/* ======================================================================
   Buttons
   ====================================================================== */
.sh-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    min-height: 36px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.sh-pdf-btn:focus-visible      { outline: 2px solid #2271b1; outline-offset: 2px; }

.sh-pdf-btn--primary           { background: #2271b1; border-color: #2271b1; color: #fff; }
.sh-pdf-btn--primary:hover:not(:disabled):not(.is-disabled),
.sh-pdf-btn--primary:focus:not(:disabled):not(.is-disabled)   { background: #1a5a8c; border-color: #1a5a8c; color: #fff; }

.sh-pdf-btn--secondary         { background: #fff; border-color: #2271b1; color: #2271b1; }
.sh-pdf-btn--secondary:hover:not(:disabled):not(.is-disabled),
.sh-pdf-btn--secondary:focus:not(:disabled):not(.is-disabled) { background: #f0f7fc; }

.sh-pdf-btn--icon {
    width: 36px;
    padding: 0;
    border-color: #c5c5c5;
    color: #555;
    font-size: 18px;
}
.sh-pdf-btn--icon:hover:not(:disabled):not(.is-disabled),
.sh-pdf-btn--icon:focus:not(:disabled):not(.is-disabled)      { background: #f4f4f4; color: #2271b1; border-color: #2271b1; }

.sh-pdf-btn:disabled,
.sh-pdf-btn.is-disabled        { opacity: 0.45; cursor: not-allowed; }
.sh-pdf-btn.is-loading         { cursor: wait; opacity: 0.7; }

/* ======================================================================
   Status cell
   ====================================================================== */
.sh-pdf-status                 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sh-pdf-status.is-loading      { color: #555; }
.sh-pdf-status.is-ok           { color: #267d2c; font-weight: 600; }
.sh-pdf-status.is-error        { color: #b32d2e; }

.sh-pdf-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #c5c5c5;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: sh-pdf-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
@keyframes sh-pdf-spin { to { transform: rotate(360deg); } }

/* ======================================================================
   Mobile — card layout below 760px
   HTML cell order in each <tr> is now: id, name, channel, actions, status (5 cells)
   ====================================================================== */
@media (max-width: 760px) {
    .sh-pdf-page                       { margin-top: 90px; padding: 0 12px; }
    .sh-pdf-page h1                    { font-size: 28px; margin-bottom: 4px; }
    .sh-pdf-page .sh-pdf-meta          { font-size: 13px; }
    .sh-pdf-page .sh-pdf-filter input  { width: 100%; }

    .sh-pdf-table                      { border: 0; margin-top: 8px; }
    .sh-pdf-table thead                { display: none; }
    .sh-pdf-table, .sh-pdf-table tbody { display: block; }

    .sh-pdf-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "id      channel"
            "name    name   "
            "actions actions"
            "status  status ";
        gap: 8px;
        margin-bottom: 12px;
        border: 1px solid #d6d6d6;
        border-radius: 10px;
        padding: 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }
    .sh-pdf-table td {
        border: 0;
        padding: 0;
        margin: 0;
        text-align: left;
        width: auto;
        min-width: 0;
    }

    /* Position each <td> by source order */
    .sh-pdf-table tr > td:nth-child(1) { grid-area: id; }
    .sh-pdf-table tr > td:nth-child(2) { grid-area: name; }
    .sh-pdf-table tr > td:nth-child(3) { grid-area: channel; justify-self: end; align-self: start; }
    .sh-pdf-table tr > td:nth-child(4) { grid-area: actions; }
    .sh-pdf-table tr > td:nth-child(5) { grid-area: status; }

    .sh-pdf-table .col-id {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
        align-self: center;
    }
    .sh-pdf-table .col-channel {
        display: inline-block;
        background: #eef2f5;
        color: #2271b1;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
    }
    .sh-pdf-table .col-name {
        font-size: 15px;
        line-height: 1.35;
    }
    .sh-pdf-table .col-name strong { display: block; }
    .sh-pdf-table .col-name small  { display: block; margin-top: 2px; font-size: 12px; color: #777; }

    /* Actions row — display:flex on the inner <div> works reliably (it's a normal
       block element, not a table cell). PDF + White label flex equally; icon stays
       content-sized. */
    .sh-pdf-actions {
        gap: 8px;
    }
    .sh-pdf-actions .sh-pdf-btn--primary,
    .sh-pdf-actions .sh-pdf-btn--secondary {
        flex: 1 1 0;
        min-width: 0;
    }
    .sh-pdf-actions .sh-pdf-btn--icon {
        min-width: 44px;
    }

    .sh-pdf-table .col-status {
        min-height: 20px;
        font-size: 13px;
    }

    /* Larger tap targets on touch */
    .sh-pdf-btn {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 14px;
        white-space: nowrap;
    }
    .sh-pdf-btn--icon {
        font-size: 20px;
    }
}