/* ─────────────────────────────────────────────────────────────────
   Airtable management page (non-scoped — used by AirtableManagement)
   ───────────────────────────────────────────────────────────────── */

.atm-page {
    padding: 24px 28px 48px;
    direction: rtl;
    /* Flex column + gap gives a clean, restrained separation between the
       page-header card and the content card(s) below — the same Motiva
       rhythm the sibling Integrations page (.im-page) uses. */
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The page header is now <MPageHeaderCard> (shared .motiva-panel surface):
   MAdminBack (Href=management/integrations) in Leading, the "new config" CTA
   in Actions. The old .atm-topbar / .atm-topbar-start / .atm-back-btn /
   .atm-breadcrumb / .atm-title rules are gone — the title now uses the shared
   Management h1 step (38px) instead of this page's former 22px outlier. */

/* ── States / toasts ─────────────────────────────────────────────── */
.atm-state {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
    padding: 32px 24px;
    text-align: center;
    font-size: var(--motiva-font-size-body, 14px);
}

.atm-state-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.atm-toast {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    margin-bottom: 14px;
}

.atm-toast-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* ── Status pill ─────────────────────────────────────────────────── */
.atm-status {
    display: inline-block;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.2;
}

.atm-status-on  { color: #065f46; background: #d1fae5; }
.atm-status-off { color: #475569; background: #f1f5f9; }

/* ── List cards ──────────────────────────────────────────────────── */
.atm-list { display: grid; gap: 14px; }

.atm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.atm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.atm-card-head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.atm-card-title {
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.atm-card-year {
    font-size: var(--motiva-font-size-caption, 12px);
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px 10px;
}

.atm-card-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 22px;
    margin-bottom: 12px;
}

.atm-meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atm-meta-label { font-size: var(--motiva-font-size-caption, 11px); color: #94a3b8; }
.atm-meta-value {
    font-size: var(--motiva-font-size-sm, 13px);
    color: #334155;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.atm-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    direction: ltr;
    text-align: right;
}

.atm-card-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: #475569;
    margin-bottom: 12px;
}

.atm-card-actions {
    display: flex;
    /* RTL flex-end = physical LEFT: the whole bottom action cluster sits on
       the left of the card, each button keeping its RTL order within it. */
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.atm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.atm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* THE ACTION BUTTONS ARE THE DASHBOARD'S PILL FAMILY. In the finished scope
   (.motiva-final — this page resolves it via the Admin→Lecturer shell) the
   design system draws every button as a pill: --motiva-radius-full, per
   MButton.razor.css ("buttons are pills") and `.motiva-final .motiva-cta`.
   The filled primaries (תצורה חדשה, עריכה) already inherit that pill radius
   from `.motiva-cta`; this reuses the SAME token on the outlined secondaries
   and the destructive toggle so the whole bottom cluster shares one radius
   and reads as one family. Scoped to the cluster, so the modal buttons —
   out of scope for this pass — keep their own radius. */
.atm-card-actions .atm-btn { border-radius: var(--motiva-radius-full); }

.atm-btn-primary { background: #1e293b; color: #fff; }
.atm-btn-primary:hover:not(:disabled) { background: #0f172a; }

.atm-btn-secondary {
    background: #fff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
.atm-btn-secondary:hover:not(:disabled) { background: #f1f5f9; }

.atm-btn-danger {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.atm-btn-danger:hover:not(:disabled) { background: #fef2f2; }

.atm-icon-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    color: #475569;
    font-size: 18px;
    line-height: 1;
}
.atm-icon-btn:hover { background: #f1f5f9; }

/* ── Modal ───────────────────────────────────────────────────────── */
.atm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
}

.atm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    width: min(720px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    z-index: 1001;
}

.atm-modal-narrow { width: min(440px, 92vw); }

.atm-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.atm-modal-title {
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.atm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.atm-field { display: flex; flex-direction: column; gap: 4px; }
.atm-field-full { grid-column: 1 / -1; }

.atm-label {
    font-size: var(--motiva-font-size-caption, 12px);
    color: #475569;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.atm-req { color: #b91c1c; }

.atm-secret-set {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.atm-input {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: var(--motiva-font-size-control, 14px);
    color: #1e293b;
    background: #fff;
    font-family: inherit;
    direction: rtl;
}

.atm-input:focus {
    outline: none;
    border-color: #1e293b;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.08);
}

.atm-hint {
    font-size: var(--motiva-font-size-caption, 11px);
    color: #94a3b8;
}

.atm-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: #334155;
    cursor: pointer;
    padding-top: 18px;
}

.atm-section-title {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 700;
    color: #1e293b;
    margin: 18px 0 4px;
}

.atm-section-note {
    font-size: var(--motiva-font-size-caption, 12px);
    color: #64748b;
    margin: 0 0 10px;
}

.atm-mappings {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.atm-mapping-head,
.atm-mapping-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1.2fr) 70px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.atm-mapping-head {
    background: #f8fafc;
    font-size: var(--motiva-font-size-caption, 12px);
    color: #475569;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.atm-mapping-row + .atm-mapping-row { border-top: 1px solid #f1f5f9; }

.atm-mapping-local {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: #1e293b;
}

.atm-mapping-key {
    font-size: var(--motiva-font-size-caption, 11px);
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    direction: ltr;
    text-align: right;
}

.atm-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

/* ── Import results ──────────────────────────────────────────────── */
.atm-import-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.atm-import-stats li {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--motiva-font-size-body, 14px);
    color: #334155;
}

.atm-error-details {
    margin-top: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    color: #7f1d1d;
}

.atm-error-details summary { cursor: pointer; font-weight: 700; }
.atm-error-list {
    margin: 8px 0 0;
    padding-inline-start: 20px;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1.5;
}

/* ── IntegrationsManagement — Airtable card additions ───────────── */
.im-icon-airtable { background: #f59e0b; color: #fff; }

.im-airtable-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.im-airtable-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: #334155;
}

.im-airtable-label { font-size: var(--motiva-font-size-caption, 11px); color: #94a3b8; }

@media (max-width: 720px) {
    .atm-grid { grid-template-columns: 1fr; }
    .atm-mapping-head, .atm-mapping-row {
        grid-template-columns: 1fr;
    }
    .im-airtable-summary { grid-template-columns: 1fr; }
}