/* tm-draft.css — Gmail-like autosave UI.
   .tm-draft-paused : "Autosave paused — entry too large" badge (Task 8)
   .tm-draft-banner : non-destructive restore-conflict banner (Task 9)
   .tm-draft-saved   : "Draft auto-saved at [time]" status notice (shown on server-save confirm)
   .tm-draft-restored: "Draft restored." + Undo confirmation
   ( .tm-draft-saved and .tm-draft-restored both reuse .tm-draft-banner styling — same
     look/place — so editing .tm-draft-banner restyles all three. )
   Reuses the app's --accent-hue token so it tracks the active company colour. */

/* --- Paused badge (Task 8) --------------------------------------------------
   Fixed, low-key warning. Amber, not the accent, so "paused" reads as caution. */
.tm-draft-paused {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    max-width: 320px;
    padding: 8px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #7a4b00;
    background: #fff4e0;
    border: 1px solid #f0b429;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Restore-conflict banner (Task 9) --------------------------------------- */
.tm-draft-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
    background: #eef7ff;
    border-left: 4px solid var(--accent-hue);
    padding-left: 1rem;
    border-radius: 0;
    height: 36px;
}

.tm-draft-banner__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Restore ("Draft restored.") notice — intentionally inherits the full in-flow
   .tm-draft-banner look (above): same light-blue fill, accent left border, top-of-form
   placement. Kept as its own selector so it can be tweaked without touching the JS. */
.tm-draft-restored {
    /* no overrides by design — identical styling to .tm-draft-banner */
}

/* Save-status ("Draft auto-saved at [time]") notice = FLOATING CORNER CHIP (Option A).
   The inline .tm-draft-banner base pushes the whole form down when it appears/updates
   every ~1s; pinning it to the viewport corner with position:fixed takes it out of the
   layout flow → zero page shift. Keeps the base's light-blue fill + --accent-hue left
   border (so it still tracks the active company colour); overrides the box shape only. */
.tm-draft-saved {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9998;               /* just under the paused badge (9999) if they ever coexist */
    margin: 0;
    width: auto;
    max-width: 320px;
    height: auto;
    padding: 7px 13px;
    border-radius: 0;            /* square corners, matching the inline banner */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    font-variant-numeric: tabular-nums;   /* fixed-width digits so the ticking time can't jitter width */
}

.tm-draft-banner button {
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
}

.tm-draft-banner button.tm-draft-banner__primary {
    padding: 0;
    border: none;
    text-decoration: underline;
    letter-spacing: 0;
}

.tm-draft-banner button.tm-draft-banner__secondary {
    padding: 0;
    border: none;
    text-decoration: underline;
    letter-spacing: 0;
}