/* The Setting menu's E-Mail page and its editor.
 *
 * The list borrows .top-btns-container / .master-table-container / .master-content-table1 from
 * SaleAccount.css, which index.html loads globally and every master screen is drawn with. Only the
 * column widths are set here, because that file's defaults are sized for the account masters.
 *
 * Written alongside WhatsAppTemplate.css rather than sharing it: the two screens sit next to each
 * other in the Setting menu but describe different things, and one stylesheet answering to both is
 * how a change to one silently moves the other. */

/*======================================== Setup list ===========================================*/

/* Index is left alone on purpose. SaleAccount.css pins the first three columns at left: 0 / 50px /
   150px, so narrowing it moves column 3's real edge while it stays pinned at 150 -- and whatever
   sits underneath never comes out from behind. Same trap as the WhatsApp template table. */
.email-setup-table .master-content-table1 th:nth-child(3),
.email-setup-table .master-content-table1 td:nth-child(3) {
    width: 260px;
}

.email-setup-table .master-content-table1 th:nth-child(4),
.email-setup-table .master-content-table1 td:nth-child(4) {
    width: 180px;
}

.email-setup-table .master-content-table1 th:nth-child(5),
.email-setup-table .master-content-table1 td:nth-child(5) {
    width: 220px;
}

.email-setup-table .master-content-table1 th:nth-child(6),
.email-setup-table .master-content-table1 td:nth-child(6) {
    width: 80px;
    text-align: center;
}

.email-setup-table .master-content-table1 th:nth-child(7),
.email-setup-table .master-content-table1 td:nth-child(7) {
    width: 220px;
}

.email-setup-table .master-content-table1 th:nth-child(8),
.email-setup-table .master-content-table1 td:nth-child(8) {
    width: 90px;
    text-align: center;
}

/*======================================== Editor dialog ========================================*/

/* Sized the way Blazored's own .size-large is: .blazored-modal carries margin: 1.75rem, so a width
   of 100% resolves to the full viewport and then puts 3.5rem of margin outside it, pushing the
   right-hand edge off screen. width: auto fills what is left between the margins instead.
   No height, so the dialog is only as tall as its six fields. */
.email-setup-custom-size-modal {
    width: auto !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.email-setup-popup {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Two columns: the address pair, the server pair, then the credentials pair. Each row is a thing
   a provider documents together, so they are read together. */
.email-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 18px;
}

.email-setup-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* .form-item-check is declared only under .invoice-editor-popup in BarcodeEditorPopup.css, so the
   checkbox row is repeated here rather than reached for. */
.email-setup-popup .form-item-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-setup-popup .form-item-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3399ff;
    cursor: pointer;
    flex-shrink: 0;
}

.email-setup-popup .form-item-check label {
    position: static;
    font-size: 12px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
}

.email-setup-note {
    font-size: 11px;
    line-height: 1.6;
    color: #777;
}

/* The number box keeps its spinners off, matching every other number field in the app. */
.email-setup-popup input[type="number"]::-webkit-inner-spin-button,
.email-setup-popup input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.email-setup-popup input[type="number"] {
    -moz-appearance: textfield;
}

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

@media (max-width: 700px) {
    .email-setup-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}