/* =========================================================
   LWF EL OUED — Announcements module styling
   Extends styles.css's design tokens (--green-deep, --gold, etc.)
   without touching the base stylesheet. RTL-first, mobile-first.
   ========================================================= */

/* ---------- Referee: card grid ---------- */
.announce-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px;
}
.announce-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; cursor:pointer; transition:.15s box-shadow, .15s transform;
  display:flex; flex-direction:column;
}
.announce-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.announce-card-media{ position:relative; height:150px; background:var(--green-pale); overflow:hidden; }
.announce-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.announce-card-media-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:40px; color:var(--green-deep); opacity:.55;
}
.announce-card-badges{ position:absolute; top:10px; inset-inline-start:10px; display:flex; gap:6px; flex-wrap:wrap; }
.announce-badge{
  font-size:11px; font-weight:800; padding:4px 10px; border-radius:99px; display:inline-block;
  box-shadow:var(--shadow-sm);
}
.announce-badge.new{ background:var(--red-accent); color:#fff; }
.announce-badge.pinned{ background:var(--gold); color:#fff; }
.announce-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.announce-card-body h4{ margin:0; font-size:15.5px; color:var(--green-deep); }
.announce-card-summary{
  margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.announce-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; }
.announce-card-date{ font-size:11.5px; color:var(--ink-soft); font-weight:600; }

/* ---------- Referee: detail page ---------- */
.announce-detail-page{ max-width:820px; margin:0 auto; }
.announce-detail-badges{ display:flex; gap:8px; margin-bottom:10px; }
.announce-detail-title{ margin:0 0 8px; color:var(--green-deep); font-size:var(--fs-h3); }
.announce-detail-date{ font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-bottom:16px; }
.announce-detail-image{ width:100%; max-height:360px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:18px; border:1px solid var(--line); }

.rte-content{ font-size:15px; line-height:1.9; color:var(--ink); }
.rte-content p{ margin:0 0 12px; }
.rte-content ul, .rte-content ol{ margin:0 0 12px; padding-inline-start:26px; }
.rte-content a{ color:var(--green-deep); text-decoration:underline; }

.announce-attachments-list{ display:flex; flex-direction:column; gap:8px; }
.announce-attachment-row{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:#fff; font-size:13.5px; transition:.12s background;
}
a.announce-attachment-row:hover{ background:var(--green-pale); }
.announce-attachment-row .icon{ font-size:18px; }
.announce-attachment-row .name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.announce-attachment-row .size{ color:var(--ink-soft); font-size:12px; flex-shrink:0; }
.announce-attachment-row .dl{ color:var(--green-deep); font-weight:700; font-size:12.5px; flex-shrink:0; }
.announce-attachment-row.is-pending{ background:var(--amber-pale); border-color:#f3ddaa; }

/* ---------- Admin: table actions ---------- */
.announce-admin-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- Admin: rich-text editor ---------- */
.rte-toolbar{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  background:var(--green-pale); border:1.6px solid var(--line-strong); border-bottom:none;
  border-radius:var(--radius-md) var(--radius-md) 0 0; padding:8px 10px;
}
.rte-btn{
  min-width:32px; height:32px; padding:0 8px; border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--ink); font-size:14px; cursor:pointer; transition:.12s background;
}
.rte-btn:hover{ background:#fff; border-color:var(--line-strong); }
.rte-sep{ width:1px; height:20px; background:var(--line-strong); margin:0 4px; }
.rte-editor{
  min-height:220px; max-height:520px; overflow-y:auto; padding:14px 16px; background:#fff;
  border:1.6px solid var(--line-strong); border-radius:0 0 var(--radius-md) var(--radius-md);
  font-size:15px; line-height:1.8; outline:none;
}
.rte-editor:focus{ border-color:var(--green-deep); box-shadow:var(--focus-ring); }
.rte-editor ul, .rte-editor ol{ padding-inline-start:26px; margin:0 0 10px; }
.rte-editor p{ margin:0 0 10px; }

@media(max-width:640px){
  .announce-grid{ grid-template-columns:1fr; }
}

/* ---------- Dark mode ---------- */
html.dark-mode .announce-attachment-row,
html.dark-mode .rte-btn:hover,
html.dark-mode .rte-editor{ background:var(--paper); }