/* =============================================
   SocialBook — Green & White Theme
   ============================================= */

/* Base */
body { background:#f1f8f3; font-family:'Segoe UI',sans-serif; display:flex; flex-direction:column; min-height:100vh; }
.container, .container-fluid { flex:1 0 auto; }

/* Navbar */
.navbar-sb { background:#1a7a3c; }
.navbar-sb .navbar-brand, .nav-icon { color:#fff !important; text-decoration:none; }
.nav-icon:hover { opacity:.85; }
.nav-icon { position:relative; padding:4px 8px; }
.badge-dot { position:absolute; top:0; right:0; background:#e41e3f; color:#fff;
  font-size:.6rem; border-radius:10px; padding:1px 4px; min-width:16px; text-align:center; }

/* Cards */
.card { border:none; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* Avatars */
.avatar    { width:40px;  height:40px;  border-radius:50%; object-fit:cover; }
.avatar-sm { width:34px;  height:34px;  border-radius:50%; object-fit:cover; }
.avatar-lg { width:110px; height:110px; border-radius:50%; object-fit:cover; border:4px solid #fff; }

/* Cover */
.cover-photo { width:100%; height:280px; object-fit:cover; border-radius:10px 10px 0 0;
  background:linear-gradient(135deg,#1a7a3c,#42b883); }

/* Posts */
.post-card { margin-bottom:1rem; }
.reaction-btn { background:none; border:none; padding:8px 16px; border-radius:6px;
  font-size:.9rem; cursor:pointer; color:#65676b; transition:.15s; }
.reaction-btn:hover { background:#e8f5e9; color:#1a7a3c; }
.reaction-btn.active { color:#1a7a3c; font-weight:700; }

/* Emoji reaction picker */
.react-wrap { position:relative; display:inline-block; }
.react-picker {
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:50px; padding:6px 10px;
  box-shadow:0 2px 16px rgba(0,0,0,.18); display:flex; gap:4px;
  z-index:200; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  transform:translateX(-50%) translateY(4px);
}
.react-picker.show {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.react-picker button {
  font-size:1.6rem; border:none; background:none; cursor:pointer; line-height:1;
  border-radius:50%; padding:2px; transition:transform .12s;
}
.react-picker button:hover { transform:scale(1.45) translateY(-4px); }

/* Sidebar links */
.sidebar-link { display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:8px; color:#050505; text-decoration:none; font-weight:500; }
.sidebar-link:hover, .sidebar-link.active { background:#e8f5e9; color:#1a7a3c; }

/* Messages */
.msg-mine   { background:#1a7a3c; color:#fff; border-radius:18px 18px 4px 18px; }
.msg-theirs { background:#e4e6eb; color:#050505; border-radius:18px 18px 18px 4px; }
.msg-bubble { max-width:65%; padding:8px 14px; word-break:break-word; }

/* Post image */
.post-img { width:100%; max-height:500px; object-fit:cover; border-radius:8px; cursor:pointer; }

/* Multi-image grid */
.post-media-grid.multi { display:grid; grid-template-columns:1fr 1fr; gap:3px; border-radius:8px; overflow:hidden; }
.post-media-grid.multi .post-img { max-height:240px; border-radius:0; }
.post-media-grid.multi video { height:240px; object-fit:cover; }
.post-media-grid.multi:has(> :only-child) { grid-template-columns:1fr; }

/* Media tray (create post) */
.media-tray-item { position:relative; width:90px; height:74px; flex-shrink:0; }
.media-tray-item img,.media-tray-item video { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.media-tray-remove { position:absolute; top:-5px; right:-5px; background:#dc3545; color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }

/* Buttons — primary green */
.btn-primary { background:#1a7a3c; border-color:#1a7a3c; }
.btn-primary:hover, .btn-primary:focus { background:#155f2f; border-color:#155f2f; }
.btn-outline-primary { color:#1a7a3c; border-color:#1a7a3c; }
.btn-outline-primary:hover { background:#1a7a3c; border-color:#1a7a3c; color:#fff; }

/* Links */
a { color:#1a7a3c; }
a:hover { color:#155f2f; }

/* Form focus */
.form-control:focus, .form-select:focus {
  border-color:#1a7a3c; box-shadow:0 0 0 .2rem rgba(26,122,60,.2); }

/* ── Language button scrollable row ── */
.lang-scroll-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lang-scroll-row::-webkit-scrollbar { display:none; }
.lang-scroll-row #langBtns {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ── Post action bar ── */
.post-actions-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ── Mobile responsiveness ── */
@media (max-width:576px) {
  /* Reaction picker stays on screen */
  .react-picker { left:0; transform:translateY(4px); }
  .react-picker.show { transform:translateY(0); }
  .react-picker button { font-size:1.25rem; padding:1px; }

  /* Language button text smaller */
  #langBtns .btn { font-size:.72rem; padding:.2rem .35rem; }

  /* Post action buttons */
  .reaction-btn { padding:5px 7px; font-size:.8rem; }

  /* Cover shorter */
  .cover-photo { height:140px; }
  /* Avatar smaller on profile */
  .avatar-lg { width:72px; height:72px; }
  /* Navbar brand hidden */
  .navbar-brand span { display:none; }
  /* Post media */
  .post-img { max-height:240px; }
  /* Keyboards */
  .uk-key { min-width:1.8rem !important; font-size:.82rem !important; padding:2px 3px; }
  /* Gallery modal */
  .modal-xl { max-width:100% !important; margin:.3rem; }
  /* Messages */
  .msg-bubble { max-width:85%; }
  /* Cards */
  .card-body { padding:.65rem; }
  /* Visibility select compact */
  select[name="visibility"] { font-size:.78rem; padding:.2rem .4rem; max-width:110px; }
}

@media (max-width:768px) {
  .table-responsive-force { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Urdu / Arabic script posts */
.post-urdu {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  font-size: 1.25rem;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
}