/* Okno „Notatka" z górnego paska.
   ---------------------------------------------------------------------------
   Okno ma własny, minimalny dokument (`notes/quick.html`), więc te kilka reguł
   zastępuje cały arkusz panelu. Wysokość okna liczy `js/notes_quick.js`
   z wysokości TEJ treści - stąd brak `height: 100%` gdziekolwiek. */

body.quick-note {
    margin: 0;
    padding: .75rem 1rem 1rem;
    background: transparent;
    /* Motyw ustawia to na `body` w `app.min.css`, ale tam wchodzi przez selektor
       z klasą układu, której w tym oknie nie ma. Bez tego okno pisze o pół stopnia
       większym pismem niż aplikacja pod spodem. */
    font-size: .875rem;
}

/* Czego notatka dotyczy - jedna linijka nad tytułem. Chip, a nie zwykły tekst:
   to jest jedyna informacja o tym, gdzie ta notatka wyląduje, więc ma się czytać
   jednym spojrzeniem. */
.quick-note-target {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    flex-wrap: wrap;
}
.quick-note-target .badge {
    background: var(--bs-tertiary-bg, #f1f1f5);
    color: var(--bs-body-color, #495057);
    font-weight: 500;
}

.quick-note-title {
    margin-bottom: .5rem;
    font-weight: 600;
}

/* Edytor bez podwójnej ramki: TinyMCE rysuje własną, a okno ma już obrys. */
.quick-note .tox-tinymce {
    border-radius: .25rem;
}

.quick-note-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

/* Ikona w górnym pasku: szara, gdy notatki nie ma; czerwona, gdy jest.
   Kolor jest JEDYNĄ informacją o istnieniu notatki, więc nie może zależeć od
   motywu ani od stanu wskaźnika myszy. */
.note-quick-icon.has-note { color: var(--bs-danger, #f46a6a) !important; }

/* Ramka okna. Wysokość ustawia skrypt (rośnie z treścią), tu zostaje szerokość
   i zdjęcie domyślnej ramki `iframe`. */
.note-quick-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 320px;
}


/* Pasek potwierdzenia kasowania - zamiast okna `confirm()` przeglądarki.
   `display` NIE z klas Bootstrapa (te mają `!important` i przebijają atrybut
   `hidden`), a reguła `[hidden]` jawnie - ta sama pułapka, która trzymała na
   ekranie pasek „ktoś pisze". */
.quick-note-confirm {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .75rem 0 0;
    padding: .5rem .75rem;
    font-size: .8125rem;
}
.quick-note-confirm[hidden] { display: none; }

/* Ikona w pasku ma być IDENTYCZNA w geometrii jak sąsiednie - font Unicons rysuje
   część glifów szerzej niż wyżej i przy odziedziczonej wysokości wiersza wygląda to
   na spłaszczenie. Wymuszamy więc kwadratowe pole i wyśrodkowanie, zamiast liczyć na
   to, co przyjdzie z kaskady. */
.noti-icon .note-quick-icon {
    display: inline-block;
    width: 22px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
}