/* ==========================================================================
   Nextcloud Calendar for Elementor — Styles
   ========================================================================== */

/* ── Variables & Reset ──────────────────────────────────────────────────── */
.nce-calendar-widget {
    --nce-accent:      #0082c9;
    --nce-bg:          #ffffff;
    --nce-text:        #1a1a2e;
    --nce-meta:        #555;
    --nce-border:      #e5e9f0;
    --nce-radius:      8px;
    --nce-shadow:      0 2px 12px rgba(0,0,0,.07);
    --nce-gap:         1rem;
    font-family: inherit;
    color: var(--nce-text);
}

/* ── Titre widget ───────────────────────────────────────────────────────── */
.nce-widget-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    padding-bottom: .5rem;
    position: relative;
    display: inline-block;
}
.nce-widget-title::after {
    content: '';
    display: block;
    height: 3px;
    width: 2.5rem;
    background-color: var(--nce-accent);
    border-radius: 99px;
    margin-top: .35rem;
}

/* ── Liste ──────────────────────────────────────────────────────────────── */
.nce-events-list {
    display: flex;
    flex-direction: column;
    gap: var(--nce-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT : CARD (défaut)
   ═══════════════════════════════════════════════════════════════════════════ */
.nce-layout-card .nce-event-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--nce-bg);
    border: 1px solid var(--nce-border);
    border-radius: var(--nce-radius);
    box-shadow: var(--nce-shadow);
    padding: 1rem 1.25rem;
    transition: box-shadow .2s ease, transform .2s ease;
}
.nce-layout-card .nce-event-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

/* Badge date (card) */
.nce-layout-card .nce-event-date-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--nce-accent);
    color: #fff;
    border-radius: 6px;
    width: 52px;
    min-height: 56px;
    padding: .35rem .5rem;
    line-height: 1;
}
.nce-layout-card .nce-badge-day {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
}
.nce-layout-card .nce-badge-month {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    margin-top: .2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT : COMPACT
   ═══════════════════════════════════════════════════════════════════════════ */
.nce-layout-compact .nce-event-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--nce-border);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transition: background .15s ease;
}
.nce-layout-compact .nce-event-card:first-child {
    border-top: 1px solid var(--nce-border);
}
.nce-layout-compact .nce-event-card:hover {
    background: rgba(0,0,0,.03);
}

.nce-layout-compact .nce-event-date-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--nce-accent);
    color: #fff;
    border-radius: 5px;
    width: 40px;
    min-height: 44px;
    padding: .25rem;
}
.nce-layout-compact .nce-badge-day   { font-size: 1.15rem; font-weight: 800; }
.nce-layout-compact .nce-badge-month { font-size: .55rem;  text-transform: uppercase; opacity: .85; }

.nce-layout-compact .nce-event-title {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .1rem;
}
.nce-layout-compact .nce-event-meta  { font-size: .78rem; }
.nce-layout-compact .nce-event-description { display: none; } /* masquée en compact */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT : TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */
.nce-layout-timeline .nce-events-list {
    position: relative;
    padding-left: 2.5rem;
    gap: 0;
}
.nce-layout-timeline .nce-events-list::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--nce-accent);
    opacity: .2;
}

.nce-layout-timeline .nce-event-card {
    position: relative;
    background: var(--nce-bg);
    border: 1px solid var(--nce-border);
    border-radius: var(--nce-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--nce-shadow);
    transition: box-shadow .2s ease;
}
.nce-layout-timeline .nce-event-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
/* Dot sur la timeline */
.nce-layout-timeline .nce-event-card::before {
    content: '';
    position: absolute;
    left: -2.1rem;
    top: 1.1rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--nce-accent);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--nce-accent);
}

/* Badge date en timeline : petite étiquette horizontale */
.nce-layout-timeline .nce-event-date-badge {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    background-color: var(--nce-accent);
    color: #fff;
    border-radius: 99px;
    padding: .15rem .65rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}
.nce-layout-timeline .nce-badge-day::after { content: ' '; }

/* ── Corps de l'événement (partagé) ──────────────────────────────────────── */
.nce-event-body {
    flex: 1;
    min-width: 0;
}

.nce-event-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .35rem 0;
    line-height: 1.3;
}
.nce-event-title a {
    color: inherit;
    text-decoration: none;
}
.nce-event-title a:hover { text-decoration: underline; }

/* ── Méta ───────────────────────────────────────────────────────────────── */
.nce-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    font-size: .82rem;
    color: var(--nce-meta);
    margin-bottom: .45rem;
}
.nce-meta-time,
.nce-meta-location {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.nce-meta-time svg,
.nce-meta-location svg { flex-shrink: 0; }

/* ── Description ────────────────────────────────────────────────────────── */
.nce-event-description {
    font-size: .85rem;
    color: var(--nce-meta);
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

/* ── Catégories ─────────────────────────────────────────────────────────── */
.nce-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .5rem;
}
.nce-event-category {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .6rem;
    border: 1.5px solid var(--nce-accent);
    color: var(--nce-accent);
    border-radius: 99px;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.nce-empty,
.nce-error {
    padding: 1rem;
    border-radius: var(--nce-radius);
    font-size: .9rem;
    margin: 0;
}
.nce-empty {
    background: #f5f7fa;
    color: var(--nce-meta);
    text-align: center;
}
.nce-error {
    background: #fff0f0;
    color: #c0392b;
    border: 1px solid #f5c6c6;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nce-layout-card .nce-event-card {
        flex-direction: column;
        gap: .75rem;
    }
    .nce-layout-card .nce-event-date-badge {
        flex-direction: row;
        width: auto;
        min-height: auto;
        padding: .3rem .75rem;
        gap: .4rem;
        border-radius: 99px;
    }
    .nce-layout-card .nce-badge-day   { font-size: 1rem; }
    .nce-layout-card .nce-badge-month { font-size: .75rem; opacity: 1; margin-top: 0; }
}

/* ── Pièces jointes ─────────────────────────────────────────────────────── */
.nce-event-attachments { margin-top:.75rem; border-top:1px solid var(--nce-border); padding-top:.65rem; }
.nce-attachments-label { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--nce-meta); margin-bottom:.5rem; }
.nce-attachments-list  { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.nce-attachment-item   { display:flex; align-items:center; gap:.55rem; background:#f5f7fa; border:1px solid var(--nce-border); border-radius:6px; padding:.45rem .75rem; min-width:0; }
.nce-att-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; letter-spacing:.03em; border-radius:4px; width:32px; height:28px; color:#fff; background:#888; }
.nce-att-pdf  { background:#c0392b; }
.nce-att-doc, .nce-att-docx, .nce-att-odt { background:#2980b9; }
.nce-att-xls, .nce-att-xlsx, .nce-att-ods, .nce-att-csv { background:#27ae60; }
.nce-att-ppt, .nce-att-pptx { background:#e67e22; }
.nce-att-zip { background:#8e44ad; }
.nce-att-txt { background:#7f8c8d; }
.nce-att-generic { background:#95a5a6; }
.nce-att-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nce-text); font-size:.82rem; }
.nce-att-download { flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; color:var(--nce-accent); text-decoration:none; padding:.25rem .6rem; border:1px solid var(--nce-accent); border-radius:99px; transition:background .15s, color .15s; white-space:nowrap; }
.nce-att-download:hover { background:var(--nce-accent); color:#fff; }
@media (max-width:480px) { .nce-attachment-item { flex-wrap:wrap; } }