/* ============================================================
   Ultimate Notice — Frontend CSS
   Renders [un_notices], [un_news], [un_messages], [un_posts]
   Three themes: light (default), dark, glass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- Frame Container ---- */
.un-frame,
.un-single {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 16px;
    overflow: hidden;
    margin: 24px 0;
}

/* ========== LIGHT THEME ========== */
.un-theme-light {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.un-theme-light .un-frame-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.un-theme-light .un-item {
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}
.un-theme-light .un-item:hover { background: #f8faff; }
.un-theme-light .un-item-title { color: #0f172a; }
.un-theme-light .un-item-content { color: #374151; }
.un-theme-light .un-item-date { color: #94a3b8; }
.un-theme-light .un-empty-state { color: #94a3b8; }

/* ========== DARK THEME ========== */
.un-theme-dark {
    background: #0f172a;
    border: 1px solid #1e293b;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.un-theme-dark .un-frame-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-bottom: 1px solid #1e293b;
}
.un-theme-dark .un-frame-title { color: #e2e8f0 !important; }

.un-theme-dark .un-item {
    border-bottom: 1px solid #1e293b;
    background: transparent;
}
.un-theme-dark .un-item:hover { background: rgba(255,255,255,0.03); }
.un-theme-dark .un-item-title { color: #f1f5f9; }
.un-theme-dark .un-item-content { color: #cbd5e1; }
.un-theme-dark .un-item-date { color: #475569; }
.un-theme-dark .un-empty-state { color: #475569; }

/* ========== GLASS THEME ========== */
.un-theme-glass {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px rgba(31,38,135,0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.un-theme-glass .un-frame-header {
    background: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.un-theme-glass .un-frame-title { color: #fff !important; }

.un-theme-glass .un-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: transparent;
}
.un-theme-glass .un-item:hover { background: rgba(255,255,255,0.06); }
.un-theme-glass .un-item-title { color: #fff; }
.un-theme-glass .un-item-content { color: rgba(255,255,255,0.85); }
.un-theme-glass .un-item-date { color: rgba(255,255,255,0.45); }
.un-theme-glass .un-empty-state { color: rgba(255,255,255,0.4); }

/* ---- Frame Header ---- */
.un-frame-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.un-frame-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a;
    line-height: 1;
}

/* ---- Type Badges ---- */
.un-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.un-badge-message { background: rgba(109,40,217,0.12); color: #7c3aed; }
.un-badge-notice  { background: rgba(217,119,6,0.12);  color: #d97706; }
.un-badge-news    { background: rgba(5,150,105,0.12);  color: #059669; }
.un-badge-post    { background: rgba(219,39,119,0.12); color: #db2777; }
.un-badge-all     { background: rgba(14,165,233,0.12); color: #0ea5e9; }

/* ---- Items List ---- */
.un-items-list {
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.3) transparent;
}

.un-items-list::-webkit-scrollbar { width: 4px; }
.un-items-list::-webkit-scrollbar-track { background: transparent; }
.un-items-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 2px; }

/* ---- Individual Item ---- */
.un-item {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    transition: background 0.15s ease;
    animation: un-item-in 0.3s ease both;
}
.un-item:last-child { border-bottom: none !important; }

@keyframes un-item-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Item Image ---- */
.un-item-image-wrap {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}
.un-item-image {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.un-item:hover .un-item-image { transform: scale(1.02); }

/* ---- Item Body ---- */
.un-item-body { flex: 1; }

.un-item-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.3;
}

.un-item-content {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 10px;
}
.un-item-content p { margin: 0 0 8px; }
.un-item-content p:last-child { margin: 0; }

.un-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.un-item-date {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ---- Empty State ---- */
.un-empty-state {
    text-align: center;
    padding: 40px 20px;
}
.un-empty-icon { font-size: 36px; margin-bottom: 10px; }
.un-empty-state p { font-size: 13px; margin: 0; }

/* ---- Single Item (un_item shortcode) ---- */
.un-single {
    padding: 20px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

/* ---- Type-specific accent borders ---- */
.un-type-message .un-frame-header { border-left: 4px solid #7c3aed; }
.un-type-notice  .un-frame-header { border-left: 4px solid #d97706; }
.un-type-news    .un-frame-header { border-left: 4px solid #059669; }
.un-type-post    .un-frame-header { border-left: 4px solid #db2777; }
.un-type-all     .un-frame-header { border-left: 4px solid #0ea5e9; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .un-item { padding: 14px 16px; }
    .un-frame-header { padding: 14px 16px; }
    .un-item-title { font-size: 14px !important; }
    .un-item-content { font-size: 13px; }
}