/* ============================================================
 * InSync365 Popup Shell — design system for ALL popups
 * ------------------------------------------------------------
 * This is the canonical chrome for every new popup. Three sizes
 * (S / M / L), one header anatomy (title + close + accent strip),
 * one body grid, one footer (right-aligned actions). Page-specific
 * styles live in redesign-{popupname}.css and use .foo-* prefixes
 * — they must NOT redeclare anything in this file.
 *
 * Tokens come from insync-tokens.css.
 * ============================================================ */

/* ── Backdrop ─────────────────────────────────────────────── */
.is-pop-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 28, 50, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 1050;
    overflow-y: auto;
}

/* ── Popup shell ──────────────────────────────────────────────
   Three sizes — same chrome, different max-width.
   S = 520px (confirm dialogs, simple forms)
   M = 640px (DEFAULT — most forms)
   L = 760px (complex multi-section forms, side-by-side fields)
   ──────────────────────────────────────────────────────────── */
.is-pop {
    background: #fff;
    border-radius: var(--is-radius-lg);
    box-shadow: var(--is-shadow-3);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: is-pop-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.is-pop--s { max-width: 520px; }
.is-pop--m { max-width: 640px; }
.is-pop--l { max-width: 760px; }

@keyframes is-pop-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Header (title + close + accent strip) ────────────────── */
.is-pop__head {
    position: relative;
    display: flex; align-items: flex-start;
    gap: 12px;
    padding: 18px 22px 16px;
}
.is-pop__title {
    flex: 1;
    margin: 0;
    font: 700 18px/1.25 var(--is-font-sans);
    color: var(--is-fg-1);
    letter-spacing: -0.01em;
}
.is-pop__sub {
    margin: 4px 0 0;
    font: 400 12.5px/1.4 var(--is-font-sans);
    color: var(--is-fg-3);
}
.is-pop__close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: var(--is-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--is-fg-3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background .12s, color .12s, border-color .12s;
}
.is-pop__close:hover {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-1);
    border-color: var(--is-border-1);
}
.is-pop__close:disabled { opacity: .4; cursor: not-allowed; }

/* Accent strip — 3px brand-blue band that anchors the head visually.
   Mandatory on every popup; it is the InSync365 popup signature. */
.is-pop__accent {
    height: 3px;
    background: linear-gradient(90deg, var(--is-brand-blue) 0%, var(--is-brand-blue-300) 100%);
}

/* ── Body ─────────────────────────────────────────────────── */
.is-pop__body {
    padding: 18px 22px 4px;
    overflow-y: auto;
    flex: 1;
}

/* ── Field group ──────────────────────────────────────────── */
.is-field {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.is-field:last-child { margin-bottom: 0; }
.is-field__label {
    font: 600 11px var(--is-font-sans);
    color: var(--is-fg-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-flex; align-items: center; gap: 6px;
}
.is-field__label .is-req { color: var(--is-danger); }
.is-field__hint {
    font: 400 11.5px/1.4 var(--is-font-sans);
    color: var(--is-fg-3);
    margin-top: 2px;
}
.is-field__error {
    display: flex; align-items: center; gap: 6px;
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-danger);
    margin-top: 2px;
}
.is-field__error i { font-size: 10px; }

/* ── Inputs / select / textarea ───────────────────────────── */
.is-input,
.is-select,
.is-textarea {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--is-border-3);
    border-radius: var(--is-radius-xs);
    background: #fff;
    font: 400 13.5px var(--is-font-sans);
    color: var(--is-fg-1);
    transition: border-color .12s, box-shadow .12s;
}
.is-textarea {
    height: auto; min-height: 80px;
    padding: 9px 12px;
    line-height: 1.45;
    resize: vertical;
    font-family: var(--is-font-sans);
}
.is-input:focus,
.is-select:focus,
.is-textarea:focus {
    outline: none;
    border-color: var(--is-action-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.is-input.is-invalid,
.is-select.is-invalid,
.is-textarea.is-invalid {
    border-color: var(--is-danger);
    box-shadow: 0 0 0 3px rgba(217, 44, 44, .12);
}
.is-input::placeholder,
.is-textarea::placeholder { color: var(--is-fg-muted); }
.is-input:disabled,
.is-textarea:disabled,
.is-select:disabled { background: var(--is-bg-surface-3); color: var(--is-fg-3); cursor: not-allowed; }

.is-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%237a8395' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* ── Checkbox row ─────────────────────────────────────────── */
.is-check {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.is-check input[type="checkbox"] {
    accent-color: var(--is-brand-blue);
    width: 16px; height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.is-check__label {
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-1);
}

/* ── Footer (right-aligned actions) ───────────────────────── */
.is-pop__foot {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--is-border-1);
    background: var(--is-bg-surface);
}
.is-pop__foot-meta {
    margin-right: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3);
}
.is-pop__foot-meta b { color: var(--is-fg-1); font-weight: 700; }

/* ── Buttons ──────────────────────────────────────────────── */
.is-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--is-radius-sm);
    border: 1px solid transparent;
    font: 600 13px var(--is-font-sans);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
.is-btn i { font-size: 12px; }
.is-btn--primary {
    background: var(--is-brand-blue); color: #fff;
    border-color: var(--is-brand-blue);
}
.is-btn--primary:hover:not(:disabled) {
    background: var(--is-brand-blue-700);
    border-color: var(--is-brand-blue-700);
}
.is-btn--ghost {
    background: #fff; color: var(--is-fg-2);
    border-color: var(--is-border-3);
}
.is-btn--ghost:hover:not(:disabled) {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-1);
}
.is-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Responsive — tighten chrome on phones ────────────────── */
@media (max-width: 600px) {
    .is-pop__head { padding: 16px 18px 14px; }
    .is-pop__body { padding: 14px 18px 4px; }
    .is-pop__foot { padding: 12px 18px; }
}