/* ============================================
   ALL ANNOUNCEMENTS - PURPLE PORTAL THEME
   ============================================ */

/* ===== GENERAL STYLES ===== */
body { 
    background: #f8f9fa; 
    font-family: 'Poppins', sans-serif; 
    padding: 40px 20px; 
}

.container-box { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.page-title { 
    color: #1e1b4b; 
    font-weight: 700; 
    margin-bottom: 30px; 
    font-size: 28px;
}

/* ===== BACK BUTTON ===== */
.btn-back { 
    background: #333; 
    color: #fff; 
    padding: 10px 25px; 
    border-radius: 50px; 
    text-decoration: none; 
    display: inline-block; 
    margin-bottom: 20px; 
    transition: 0.3s; 
}
.btn-back:hover { 
    background: #555; 
    color: #fff; 
    transform: translateX(-5px);
}

/* ===== CATEGORY CARDS ===== */
.category-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    height: 100%;
    border: 2px solid #e5e7eb;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

/* ===== CATEGORY HEADERS ===== */
.category-header {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 3px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.badge-count {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 14px;
    border-radius: 50px;
    background: #f0f0f0;
    color: #666;
    min-width: 28px;
    text-align: center;
}

/* ===== ANNOUNCEMENT ITEMS ===== */
.announcement-item {
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #f8f9fa;
    transition: 0.3s;
    border-left: 4px solid;
}
.announcement-item:hover {
    background: #f0f0f0;
}

.announcement-title {
    font-weight: 600;
    color: #1e1b4b;
    font-size: 16px;
}

.announcement-content {
    color: #555;
    font-size: 14px;
    margin-top: 2px;
}

.announcement-meta {
    color: #888;
    font-size: 13px;
    margin-top: 5px;
}
.announcement-meta i {
    margin-right: 5px;
}

/* ===== EMPTY STATE ===== */
.text-center.py-5 i {
    display: block;
}

/* ========================================================== */
/* PURPLE GRADIENT THEME (Dark to Light)                       */
/* ========================================================== */

/* URGENT - Darkest Purple */
.card-urgent { 
    border: 2px solid #4c1d95;
    border-top: 5px solid #4c1d95; 
}
.card-urgent .category-header { 
    color: #4c1d95; 
    border-bottom-color: #4c1d95; 
}
.card-urgent .announcement-item { 
    border-left-color: #4c1d95; 
}
.card-urgent .announcement-item .announcement-title { 
    color: #4c1d95; 
}
.card-urgent .badge-count { 
    background: #4c1d95; 
    color: #fff; 
}

/* IMPORTANT - Main Primary Purple */
.card-important { 
    border: 2px solid #6366f1;
    border-top: 5px solid #6366f1; 
}
.card-important .category-header { 
    color: #6366f1; 
    border-bottom-color: #6366f1; 
}
.card-important .announcement-item { 
    border-left-color: #6366f1; 
}
.card-important .announcement-item .announcement-title { 
    color: #6366f1; 
}
.card-important .badge-count { 
    background: #6366f1; 
    color: #fff; 
}

/* EVENT - Mid Lighter Purple */
.card-event { 
    border: 2px solid #8b5cf6;
    border-top: 5px solid #8b5cf6; 
}
.card-event .category-header { 
    color: #8b5cf6; 
    border-bottom-color: #8b5cf6; 
}
.card-event .announcement-item { 
    border-left-color: #8b5cf6; 
}
.card-event .announcement-item .announcement-title { 
    color: #8b5cf6; 
}
.card-event .badge-count { 
    background: #8b5cf6; 
    color: #fff; 
}

/* INFO - Lightest Purple */
.card-info { 
    border: 2px solid #a78bfa;
    border-top: 5px solid #a78bfa; 
}
.card-info .category-header { 
    color: #a78bfa; 
    border-bottom-color: #a78bfa; 
}
.card-info .announcement-item { 
    border-left-color: #a78bfa; 
}
.card-info .announcement-item .announcement-title { 
    color: #a78bfa; 
}
.card-info .badge-count { 
    background: #a78bfa; 
    color: #fff; 
}

/* ========================================================== */
/* END PURPLE GRADIENT                                        */
/* ========================================================== */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .container-box { padding: 0 15px; }
    .page-title { font-size: 24px; }
    .category-card { margin-bottom: 15px; }
    .category-header { font-size: 18px; }
}

@media (max-width: 768px) {
    body { padding: 20px 10px; }
    .btn-back { padding: 8px 18px; font-size: 14px; }
    .page-title { font-size: 22px; }
    .category-card { padding: 15px; }
    .announcement-item { padding: 10px 12px; }
    .announcement-title { font-size: 14px; }
    .announcement-content { font-size: 13px; }
    .announcement-meta { font-size: 12px; }
}

@media (max-width: 576px) {
    body { padding: 15px 10px; }
    .page-title { font-size: 20px; }
    .category-header { font-size: 16px; }
    .badge-count { font-size: 11px; padding: 1px 10px; min-width: 24px; }
    .announcement-item { padding: 8px 10px; }
    .announcement-title { font-size: 13px; }
    .announcement-content { font-size: 12px; }
    .announcement-meta { font-size: 11px; }
    .btn-back { padding: 6px 14px; font-size: 12px; }
}