/* ============================================================
 * EditDocument V2 — page-specific styles
 * ------------------------------------------------------------
 * Owns .ed-* classes (context anchor, locked-extension pill,
 * combo-host SfDropDownList skin). Shell primitives come from
 * redesign-popup-shell.css and are NOT duplicated here.
 * ============================================================ */

/* ── Loading line shown before DocumentVM resolves ────────── */
.ed-loading {
    display: flex; align-items: center; gap: 8px;
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-3);
    padding: 4px 0;
}
.ed-loading .fa-spinner { animation: ed-spin .9s linear infinite; }
@keyframes ed-spin { to { transform: rotate(360deg); } }

/* ── Context anchor (read-only document summary at top) ───── */
.ed-context {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--is-bg-surface-3);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-md);
}
.ed-context__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: var(--is-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: #fff;
}
.ed-context__icon.is-pdf  { color: #c0392b; background: #fde7e7; }
.ed-context__icon.is-doc  { color: #1e5fbf; background: #e6f0fb; }
.ed-context__icon.is-xls  { color: #1f8a4c; background: #e6f4ec; }
.ed-context__icon.is-img  { color: #6b35bd; background: #ede4fb; }
.ed-context__icon.is-txt  { color: #4a5468; background: #f1f1f1; }
.ed-context__icon.is-file { color: #4a5468; background: #f1f1f1; }
.ed-context__main { flex: 1; min-width: 0; }
.ed-context__name {
    font: 600 13.5px var(--is-font-sans);
    color: var(--is-fg-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-context__meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px;
    font: 500 11px var(--is-font-mono);
    color: var(--is-fg-3);
}
.ed-context__meta-sep { color: var(--is-border-2); }

/* ── Name input with locked-extension pill ────────────────── */
.ed-nameinput {
    display: flex; align-items: stretch;
    width: 100%;
    height: 38px;
    border: 1px solid var(--is-border-3);
    border-radius: var(--is-radius-xs);
    background: #fff;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.ed-nameinput:focus-within {
    border-color: var(--is-action-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}
.ed-nameinput.is-invalid {
    border-color: var(--is-danger);
    box-shadow: 0 0 0 3px rgba(217, 44, 44, .12);
}
.ed-nameinput input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    padding: 0 12px;
    font: 400 13.5px var(--is-font-sans);
    color: var(--is-fg-1);
}
.ed-nameinput input::placeholder { color: var(--is-fg-muted); }
.ed-nameinput__ext {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    border-left: 1px solid var(--is-border-1);
    background: var(--is-bg-surface-3);
    color: var(--is-fg-3);
    font: 600 12px var(--is-font-mono);
    text-transform: lowercase;
    user-select: none;
}
.ed-nameinput__ext i { font-size: 10px; color: var(--is-fg-4); }

/* ── SfDropDownList skin (combo-host) ─────────────────────── */
.ed-combo-host { position: relative; }

.ed-combo-host .e-ddl.e-input-group,
.ed-combo-host .ed-sf-combo.e-ddl,
.ed-combo-host .ed-sf-combo .e-input-group {
    height: 38px;
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-xs) !important;
    background: #fff !important;
    padding: 0 12px;
    box-shadow: none !important;
    transition: border-color .12s, box-shadow .12s;
}
.ed-combo-host .e-ddl.e-input-group::before,
.ed-combo-host .e-ddl.e-input-group::after { display: none; }

.ed-combo-host .e-ddl.e-input-group.e-input-focus,
.ed-combo-host .ed-sf-combo .e-input-group.e-input-focus {
    border-color: var(--is-action-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15) !important;
}

.ed-combo-host .e-ddl input.e-input,
.ed-combo-host .e-ddl .e-input,
.ed-combo-host .ed-sf-combo input.e-input {
    height: 36px !important;
    font: 400 13.5px var(--is-font-sans) !important;
    color: var(--is-fg-1) !important;
    padding: 0 !important;
}
.ed-combo-host .e-ddl .e-ddl-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 11px;
    color: var(--is-fg-3);
}

/* ── SfDropDownList popover panel ─────────────────────────── */
.e-ddl.e-popup.e-popup-open {
    border: 1px solid var(--is-border-2);
    border-radius: var(--is-radius-sm);
    box-shadow: var(--is-shadow-3);
    margin-top: 4px;
}
.e-ddl.e-popup .e-list-item {
    padding: 8px 10px;
    border-radius: 4px;
    font: 500 13px var(--is-font-sans);
    color: var(--is-fg-1);
}
.e-ddl.e-popup .e-list-item.e-hover,
.e-ddl.e-popup .e-list-item.e-active {
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
}
.e-ddl.e-popup .e-list-item.e-active { font-weight: 600; }

.e-ddl.e-popup .e-nodata {
    padding: 0 !important;
    background: var(--is-bg-surface);
}

/* ── NoRecordsTemplate empty state + inline create ────────── */
.ed-combo__empty {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 12px;
}
.ed-combo__empty-text {
    font: 500 12.5px var(--is-font-sans);
    color: var(--is-fg-3);
}
.ed-combo__create {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--is-radius-xs);
    border: 1px solid var(--is-border-3);
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    cursor: pointer;
    font: 600 12.5px var(--is-font-sans);
    transition: background .15s, border-color .15s, color .15s;
    text-align: left;
}
.ed-combo__create:hover {
    background: var(--is-brand-blue);
    border-color: var(--is-brand-blue);
    color: #fff;
}
.ed-combo__create i { font-size: 11px; }
.ed-combo__create span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}