/* ==========================================================================
   AND Agenda — stiluri proprii (editabil direct, fără compilare)

   Se încarcă DUPĂ vendor.css (Bootstrap). Orice regulă de-aici câștigă în
   fața Bootstrap dacă are aceeași specificitate, pentru că vine mai jos în
   fișier — dacă adaugi o regulă nouă care ar trebui să bată Bootstrap, pune-o
   la finalul fișierului sau folosește !important ca mai jos.

   Nu ai nevoie de npm/node/sass pentru asta — salvezi fișierul, dai refresh
   în browser (sau apeși butonul 🔄 din bara de sus) și vezi schimbarea direct.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme-aware neutrals — Bootstrap's own bg-white / bg-light / btn-light
   utilities are FIXED colors that don't adapt to [data-bs-theme=dark], which
   left several cards/buttons/badges as unreadable light boxes at night.
   These mirror the same look but track the current theme via Bootstrap's
   own CSS variables.
   -------------------------------------------------------------------------- */

.bg-surface {
    background-color: var(--bs-body-bg) !important;
}

.bg-surface-subtle {
    background-color: var(--bs-tertiary-bg) !important;
}

.btn-neutral {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-body-color);
    --bs-btn-disabled-bg: var(--bs-tertiary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

.badge-neutral {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */

html, body {
    height: 100%;
    overscroll-behavior-y: none;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-navbar {
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
    z-index: 1030;
}

/* Bootstrap's own .navbar > .container-fluid rule is
   justify-content: space-between, meant for a 2-item (brand + toggler)
   layout. We have 3 items (toggler, brand, icon cluster) — space-between
   splits the leftover width into two equal gaps, stranding the brand in
   the middle with a dead gap on each side. flex-start + the icon cluster's
   own ms-auto is enough to place everything correctly. */
.app-navbar .container-fluid {
    justify-content: flex-start;
}

.app-navbar .navbar-brand {
    margin-right: .5rem;
}

.app-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
}

/* .app-sidebar is now the SAME element as the responsive offcanvas
   (offcanvas-lg) — below 992px Bootstrap already turns it into a proper
   slide-in panel (fixed position, its own width/padding via --bs-offcanvas-*
   vars); these rules only need to apply at the desktop breakpoint, where
   Bootstrap instead just renders it as a plain, static, transparent block
   and expects the page to style it as a normal flex sidebar. */
@media (min-width: 992px) {
    .app-sidebar {
        width: 280px;
        flex: 0 0 280px;
        background: var(--bs-body-bg) !important;
        border-right: 1px solid var(--bs-border-color);
        padding: 1.25rem 1rem;
        overflow-y: auto;
    }

    /* Bootstrap's own responsive-offcanvas CSS makes .offcanvas-body
       display:flex (row, its default) at this breakpoint — every sidebar
       child (the "+ Eveniment nou" button, the search box, the colleague
       list...) became a row item instead of stacking, which is why the
       button stretched full-height and everything else got crushed
       sideways. Restore vertical stacking. */
    .app-sidebar .offcanvas-body {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Sidebar bits
   -------------------------------------------------------------------------- */

.btn-create-event {
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18), 0 2px 6px rgba(60, 64, 67, 0.08);
    font-weight: 600;
}

.people-legend .form-check {
    padding-left: 1.9rem;
}

.people-legend .color-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .4rem;
    flex: 0 0 auto;
}

.role-badge {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    padding: .2rem .5rem;
}

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */

#calendar-root {
    background: var(--bs-body-bg);
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
    padding: 1rem;
}

.fc {
    --fc-border-color: var(--bs-border-color);
    --fc-today-bg-color: rgba(63, 109, 240, 0.09);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--bs-tertiary-bg);
    --fc-list-event-hover-bg-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-family: inherit;
}

.fc .fc-button {
    text-transform: none;
    border-radius: 1.2rem;
    box-shadow: none !important;
}

.fc .fc-button-primary {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.fc .fc-button-primary:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #3f6df0;
    border-color: #3f6df0;
    color: #fff;
}

.fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.fc-daygrid-day-number, .fc-col-header-cell-cushion {
    color: var(--bs-body-color);
}

.fc-event {
    border: none;
    border-radius: .35rem;
    padding: 1px 4px;
    font-size: .78rem;
    cursor: pointer;
    /* FullCalendar's own default here is overflow: visible — a short (e.g.
       30 min) slot is shorter than a wrapped 2-line time+title, so the text
       spilled out the bottom and visually overlapped the next event below
       it. Clip to the slot's real height instead. */
    overflow: hidden;
}

.fc-daygrid-event-dot {
    display: none;
}

/* Director General monitoring marker — events he/she is personally involved in */
.fc-event-involved {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #f9ab00;
}

.fc-event-involved::before {
    content: "★ ";
}

/* Secretariat's free/busy view of colleagues outside its assignment — no details */
.fc-event-busy {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25), rgba(255,255,255,.25) 4px, transparent 4px, transparent 8px);
    cursor: default;
}

/* Event card content: event's own color is the card background; the owner
   dot is a second, independent color so a shared calendar always shows
   whose event it is regardless of what custom color that event was given. */
.fc-event-main-custom {
    overflow: hidden;
    min-width: 0;
}

.fc-event-top-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

/* month/list view: dot + time + title share one line */
.fc-event-main-custom:not(.fc-event-stacked) .fc-event-top-row {
    width: 100%;
}

/* week/day view: narrow columns — time sits on its own line above the title */
.fc-event-stacked .fc-event-top-row {
    font-size: .68rem;
    line-height: 1.2;
}

.fc-event-title-custom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    display: block;
}

.fc-event-stacked .fc-event-title-custom {
    display: block;
    /* was `normal` (wrap) — on a short slot a wrapped 2nd line had nowhere
       to go and got clipped by .fc-event's overflow anyway, silently
       swallowing part of the title. A single truncated line with "…" at
       least always shows *something* real, never a mid-word cutoff. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.fc-owner-dot {
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.fc-event-time-custom {
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* mobile: narrowest columns — drop the owner dot entirely (except where noted
   below), the event's own color already distinguishes cards, and every pixel
   of text room counts. Breakpoint matches Bootstrap's sm (< 576px). */
@media (max-width: 575.98px) {
    .app-navbar .navbar-brand-text {
        display: none; /* icon only — "AND Agenda" text wastes space next to the ☰ toggler */
    }

    .app-navbar .container-fluid > .d-flex.ms-auto {
        gap: .35rem !important;
    }

    /* .app-main's side padding + #calendar-root's card padding ate ~72px
       total (~18% of a 390px phone) before the grid even starts — that's
       the "empty space on the sides" the calendar itself was shrunk into. */
    .app-main {
        padding: .5rem .4rem;
    }

    #calendar-root {
        padding: .4rem;
        border-radius: 0.6rem;
    }

    .fc-owner-dot {
        display: none;
    }

    /* Month view: day cells are ~50px wide on a phone — "08:30 Ședință de
       deschidere" has nowhere to go and just gets clipped to 1-2 characters.
       These "dot-style" FullCalendar events have no background block of
       their own (unlike week/day events) — hiding the text leaves nothing
       visible unless the dot is brought back just here, as the one marker. */
    .fc-daygrid-event .fc-event-time-custom,
    .fc-daygrid-event .fc-event-title-custom {
        display: none;
    }

    .fc-daygrid-event .fc-owner-dot {
        display: block;
        width: .55rem;
        height: .55rem;
    }

    .fc-daygrid-event {
        min-height: .55rem;
        padding: .15rem !important;
    }

    .fc-daygrid-event .fc-event-main-custom,
    .fc-daygrid-event .fc-event-top-row {
        min-height: .55rem;
        justify-content: center;
    }

    .fc-daygrid-event-harness {
        margin-bottom: 2px !important;
    }

    /* Week view: 7 columns leave ~45px each — barely enough for 2-3 letters
       of title next to the time. The row's vertical position already shows
       the time, so drop it here and let the title use the freed line. */
    .fc-timeGridWeek-view .fc-event-time-custom {
        display: none;
    }

    /* FullCalendar's header toolbar is a single no-wrap flex row by default —
       on a phone-width screen the view-switcher buttons collide with the
       title. Stack prev/next+today, title, and view buttons on their own rows. */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        row-gap: .6rem;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .fc .fc-toolbar-chunk {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .fc .fc-toolbar-title {
        font-size: 1.05rem;
        text-align: center;
    }

    .fc .fc-button-group {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Event modal
   -------------------------------------------------------------------------- */

/* max-height on .modal-content only clamps the box AFTER flex layout —
   Chromium never re-runs the flex-shrink pass against that clamp, so a tall
   event (many participants/documents/comments) simply overflowed instead of
   scrolling inside .modal-body. An explicit max-height on the body itself
   (accounting for header + footer + modal margins) forces the real
   constraint up front so its own overflow-y: auto actually engages. */
.modal-dialog-scrollable .modal-body {
    min-height: 0;
    max-height: calc(100vh - 13rem);
}

.participant-chip, .guest-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: .25rem .6rem .25rem .4rem;
    font-size: .82rem;
}

.participant-chip .avatar-dot, .guest-chip .avatar-dot {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
}

.chip-remove {
    border: none;
    background: transparent;
    line-height: 1;
    color: #5f6368;
    cursor: pointer;
    padding: 0 .1rem;
}

.document-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    margin-bottom: .4rem;
}

.document-row .doc-icon {
    font-size: 1.1rem;
}

.document-row .doc-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.document-row .doc-name {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-row .doc-sub {
    font-size: .72rem;
    color: #5f6368;
}

/* --------------------------------------------------------------------------
   Mobile bottom nav (PWA-friendly)
   -------------------------------------------------------------------------- */

.mobile-fab {
    position: fixed;
    right: 1.1rem;
    bottom: 1.5rem;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18), 0 2px 6px rgba(60, 64, 67, 0.08);
    z-index: 1040;
}

@media (max-width: 991.98px) {
    .mobile-fab {
        display: inline-flex;
    }
}

/* --------------------------------------------------------------------------
   Print (agenda list export) — the app chrome never prints, only #print-agenda
   -------------------------------------------------------------------------- */

#print-agenda {
    display: none;
}

@media print {
    .app-navbar, .app-sidebar, .mobile-fab, #calendar-root, .offcanvas {
        display: none !important;
    }

    #print-agenda {
        display: block !important;
    }
}

/* today should be unmistakable at a glance */
.fc-day-today {
    background-color: rgba(63, 109, 240, 0.14) !important;
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: #3f6df0;
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* account for iOS safe areas when installed as standalone PWA */
@supports (padding: max(0px)) {
    .app-navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }

    .mobile-fab {
        bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
}