/* Styles for the "Add API Crawl Article" modal (templates/article_api_crawl_modal.html) */

.api-crawl-modal {
    overflow-x: hidden !important;
}

/* ---------- Header ---------- */

.api-crawl-modal .row.api-crawl-header {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.25em;
}

.api-crawl-modal .api-crawl-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    height: 2.75em;
    min-width: 2.75em;
    border-radius: 50%;
    background: rgba(103, 58, 183, 0.1);
}

.api-crawl-modal .api-crawl-header-icon .material-icons {
    color: #673ab7;
    font-size: 1.5em;
}

.api-crawl-modal .api-crawl-header-text .card-title {
    margin: 0;
    text-transform: capitalize !important;
}

/* ---------- Section grouping ---------- */

.api-crawl-modal .api-crawl-section-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding-top: 1.25em;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    border-bottom: 0.0625em solid #eeeeee;
    color: #673ab7;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.05em;
}

.api-crawl-modal .api-crawl-section-title .material-icons {
    font-size: 1.1em;
}

/* ---------- Row alignment ----------
   Force every row's columns to top-align on the same baseline, regardless
   of how tall one column gets (wrapped tags, a visible error line, etc).
   Materialize's default float-based columns don't guarantee this. */

.api-crawl-modal .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ---------- Field: label (always static, above) + control + reserved message slot ---------- */

.api-crawl-modal .api-crawl-field {
    margin-bottom: 1.1em;
}

.api-crawl-modal .api-crawl-field > label {
    display: block;
    margin-bottom: 0.4em;
}

/* Invisible label used purely to reserve the same vertical space as a real
   label, so a toggle sitting beside a labeled input still top-aligns. */
.api-crawl-modal .api-crawl-field-spacer {
    visibility: hidden;
}

.api-crawl-modal label {
    font-size: 0.85em;
    font-weight: 600;
    color: #616161;
}

/* Reserved space for error/hint text: always occupies its line, whether or
   not a message is currently shown, so nothing below it ever jumps. */
.api-crawl-modal .api-crawl-field-msg {
    min-height: 1.35em;
    margin-top: 0.3em;
    font-size: 0.75em;
    line-height: 1.35em;
}

.api-crawl-modal .api-crawl-field-msg .api-crawl-hint {
    color: #9e9e9e;
}

/* ---------- Inputs: soft, rounded, flexible ---------- */

.api-crawl-modal input[type="text"],
.api-crawl-modal input[type="number"],
.api-crawl-modal input[type="time"],
.api-crawl-modal textarea,
.api-crawl-modal select.browser-default {
    box-sizing: border-box !important;
    width: 100%;
    border: 0.0625em solid #e0e0e0 !important;
    border-radius: 0.5em !important;
    padding: 0.6em 0.85em !important;
    height: auto !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Description should read as a single-line field, matching Title's height,
   not the taller default Materialize gives a <textarea>. Box-sizing above
   is forced to border-box so this height means the same thing (full
   rendered box, padding+border included) for the <input> and <textarea>. */
.api-crawl-modal #ac_title,
.api-crawl-modal #ac_description {
    height: 2.75rem !important;
    line-height: 1.5rem !important;
    resize: none;
}

/* ~4x Materialize's default 3rem min-height for a taller raw-JSON editing area. */
.api-crawl-modal #ac_body {
    min-height: 12rem !important;
}

.api-crawl-modal input[type="text"]:focus:not([readonly]),
.api-crawl-modal input[type="number"]:focus:not([readonly]),
.api-crawl-modal input[type="time"]:focus:not([readonly]),
.api-crawl-modal textarea:focus:not([readonly]),
.api-crawl-modal select.browser-default:focus {
    border-color: #673ab7 !important;
    box-shadow: 0 0 0 0.2em rgba(103, 58, 183, 0.12) !important;
}

/* ---------- Categories (select2): override the global underline theme
   (js/lib/select2/select2-materialize.css) to match this modal's rounded,
   bordered inputs instead of Materialize's default underline look. ---------- */

.api-crawl-modal .select2-container--default .select2-selection--single {
    box-sizing: border-box !important;
    height: 2.75rem !important;
    border: 0.0625em solid #e0e0e0 !important;
    border-radius: 0.5em !important;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.api-crawl-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.85em;
    padding-right: 2em;
    line-height: 2.6rem !important;
    color: #212121;
}

.api-crawl-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9e9e9e;
}

.api-crawl-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.6rem !important;
    right: 0.5em;
}

.api-crawl-modal .select2-container--default.select2-container--focus .select2-selection--single,
.api-crawl-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #673ab7 !important;
    box-shadow: 0 0 0 0.2em rgba(103, 58, 183, 0.12) !important;
}

.api-crawl-modal .select2-dropdown {
    border: 0.0625em solid #e0e0e0;
    border-radius: 0.5em;
    overflow: hidden;
}

.api-crawl-modal .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #673ab7;
}

/* ---------- Endpoint response banner (Test Connection preview) ---------- */

.api-crawl-modal .api-crawl-response-banner {
    border-radius: 0.5em;
    border: 0.0625em solid #ef9a9a;
    background: #fdecea;
    padding: 0.75em 1em;
    margin-bottom: 1.1em;
}

.api-crawl-modal .api-crawl-response-banner--success {
    border-color: #a5d6a7;
    background: #edf7ed;
}

.api-crawl-modal .api-crawl-response-banner-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.04em;
    color: #c62828;
    margin-bottom: 0.5em;
}

.api-crawl-modal .api-crawl-response-banner-title .material-icons {
    font-size: 1.1em;
}

.api-crawl-modal .api-crawl-response-banner--success .api-crawl-response-banner-title {
    color: #2e7d32;
}

.api-crawl-modal .api-crawl-response-banner-body {
    max-height: 12em;
    overflow: auto;
    margin: 0;
    padding: 0.6em 0.75em;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.4em;
    font-size: 0.8em;
    line-height: 1.4em;
    white-space: pre-wrap;
    word-break: break-word;
    color: #424242;
}

/* ---------- Method select ---------- */

.api-crawl-modal .api-crawl-method-field select {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #000000 !important;
}

/* ---------- Endpoint URL + Test Connection ---------- */

.api-crawl-modal .api-crawl-url-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.api-crawl-modal .api-crawl-url-check input {
    flex: 1;
}

.api-crawl-modal .api-crawl-test-connection-button {
    flex: 0 0 2.75em;
    width: 2.75em;
    height: 2.75em;
    min-width: 2.75em;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #f5f5f5;
    transition: background 0.15s ease;
}

.api-crawl-modal .api-crawl-test-connection-button:hover:not([disabled]) {
    background: #ede7f6;
}

/* ---------- Tag chips ---------- */

.api-crawl-modal .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.6em;
}

.api-crawl-modal .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    /* .secondary-bg (global, !important) supplies the pill's dark background -
       force white text/icon here so it stays readable against it. */
    color: #ffffff !important;
    padding: 0.3em 0.4em 0.3em 0.75em;
    border-radius: 1.5em;
    font-size: 0.8em;
    font-weight: 600;
}

.api-crawl-modal .tag a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    text-decoration: none;
    line-height: 1;
    font-size: 0.75em;
    cursor: pointer;
}

/* ---------- Headers table ---------- */

.api-crawl-modal .api-crawl-header-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.6em;
    padding: 0.5em;
    background: #fafafa;
    border-radius: 0.5em;
    border: 0.0625em solid #f0f0f0;
}

.api-crawl-modal .api-crawl-header-row input {
    background: #ffffff;
}

.api-crawl-modal .api-crawl-header-row .api-crawl-header-remove {
    flex: 0 0 1.5em;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
    transition: background 0.15s ease;
}

.api-crawl-modal .api-crawl-header-row .api-crawl-header-remove:hover {
    background: rgba(198, 40, 40, 0.1);
}

.api-crawl-modal .api-crawl-add-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: none;
    padding: 0.4em 0.75em !important;
    height: auto;
}

/* ---------- Toggle rows ---------- */

.api-crawl-modal .api-crawl-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.75em 1em 0.75em 0;
    background: #fafafa;
    border-radius: 0.5em;
    margin: 0;
}

.api-crawl-modal .api-crawl-toggle-row label {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Defensive: guarantee the native checkbox stays invisible under the
   custom lever regardless of any other stylesheet's specificity. */
.api-crawl-modal .switch input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}

.api-crawl-modal .api-crawl-toggle-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #424242;
}

/* ---------- Read-only value display (Sync Status modal) ---------- */

.api-crawl-modal .api-crawl-readonly-value {
    font-size: 0.9em;
    color: #424242;
    padding-top: 0.2em;
}

.api-crawl-modal .api-crawl-readonly-value--mono {
    display: inline-block;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 600;
    color: #212121;
    background: #fafafa;
    border: 0.0625em solid #f0f0f0;
    border-radius: 0.4em;
    padding: 0.5em 0.75em;
    word-break: break-all;
}

/* ---------- Days of week pills ---------- */

.api-crawl-modal .api-crawl-day-pill {
    display: inline-block;
    padding: 0.4em 0.9em;
    margin: 0 0.3em 0.3em 0;
    border: 0.0625em solid #e0e0e0;
    border-radius: 1.5em;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    user-select: none;
    transition: all 0.15s ease;
}