/* CelebIsland "Obsidian and Emerald" redesign -- Phase 2: app shell.
   This file retargets the ci-tile/ci-card/ci-topbar/etc. component rules
   already defined in celebisland.css onto the REAL WoWonder header/sidebar
   markup instead of rewriting those PHP templates' structure. Every
   Wondertag class, id, data-* attribute and JS hook (dropdowns, ajax nav,
   the create-post FAB, night-mode toggle) is untouched -- this is styling
   only. Loaded after celebisland.css so it can use the same --ci-* tokens
   and win the cascade over Wondertag's own style.css. */

/* ---------- Top bar ----------
   Cosmetic only -- deliberately NOT touching height/position/display of
   .tag_header or .header-brand. A first pass forced height:72px here and it
   desynced Wondertag's own pixel-exact internal layout math (the search
   dropdown position, mobile logo swap threshold, etc. all assume the
   original header height), breaking the search bar's position. Colors,
   background and borders are safe; box/layout geometry is not. */
.navbar-default { background: var(--ci-topbar-bg) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--ci-line-soft); box-shadow: none !important; }
.navbar-default .tag_toggle_sidebar { color: var(--ci-text-3) !important; }
.navbar-default .search-container .search-input,
.navbar-default input.search-input { background: var(--ci-surface) !important; border: 1px solid var(--ci-line) !important; color: var(--ci-bone) !important; border-radius: var(--ci-r-md) !important; font-family: var(--ci-font-body) !important; }
.navbar-default .search-container .search-input::placeholder { color: var(--ci-text-5) !important; }
.navbar-default .tag_toggle_search { color: var(--ci-text-4) !important; }

.tag_hdr_droptoggle,
.tag_hdr_user_droptoggle {
  color: var(--ci-text-3) !important;
  border-radius: 50% !important;
  transition: background var(--ci-dur), color var(--ci-dur);
}
.tag_hdr_droptoggle:hover { background: var(--ci-surface-2) !important; color: var(--ci-bone) !important; }
.tag_hdr_user_droptoggle img { border-radius: 50%; border: 2px solid var(--ci-green); }

/* Header dropdown panels (requests/messages/notifications/user menu) */
.dropdown-menu {
  background: var(--ci-surface) !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: var(--ci-r-lg) !important;
  box-shadow: var(--ci-shadow-card) !important;
  color: var(--ci-text-2) !important;
  padding: 8px !important;
}
.dropdown-menu .tag_page_title { color: var(--ci-bone) !important; font-family: var(--ci-font-body); }
.dropdown-menu li > a,
.tag_hdr_user_dropdown li > a { color: var(--ci-text-2) !important; border-radius: var(--ci-r-md) !important; }
.dropdown-menu li > a:hover,
.tag_hdr_user_dropdown li > a:hover { background: var(--ci-surface-2) !important; color: var(--ci-bone) !important; }
.dropdown-menu .tag_switch_noti a.active { color: var(--ci-green-text) !important; border-color: var(--ci-green) !important; }
.notif-cat-tab.active { background: var(--ci-green-soft) !important; color: var(--ci-green-text) !important; }

/* ---------- Left rail ---------- */
.tag_sidebar { background: var(--ci-panel) !important; border-right: 1px solid var(--ci-line) !important; box-shadow: none !important; }
.tag_sidebar_head { color: var(--ci-text-6) !important; font-size: var(--ci-fs-micro) !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; padding: 14px 16px 6px !important; }
/* 2 columns, not 3 -- at the sidebar's real ~300px width, 3 columns left no
   room for real label text ("Premium Content", "CelebIsland Link", "Dating &
   Matches") and it wrapped one letter per line. min-height instead of a
   forced aspect-ratio lets the row grow for 2-line labels instead of
   clipping/overflowing. */
.tag_sidebar_section { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 14px !important; }
.tag_sidebar_section > a {
  min-height: 72px;
  border-radius: 14px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-line);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ci-text-2) !important;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  padding: 10px 6px;
  transition: transform var(--ci-dur) var(--ci-ease), border-color var(--ci-dur), background var(--ci-dur);
}
.tag_sidebar_section > a:hover { transform: translateY(-2px); border-color: rgba(81,194,60,.45); background: var(--ci-surface-2); color: var(--ci-bone) !important; }
.tag_sidebar_section > a svg,
.tag_sidebar_section > a img { width: 22px !important; height: 22px !important; flex-shrink: 0; }
.tag_footer_links, .tag_sidebar .tag_footer { color: var(--ci-text-5) !important; }
.tag_footer_links a { color: var(--ci-text-5) !important; }

/* ---------- Create-post FAB ---------- */
.tag_create_dropup > a.btn-main {
  position: fixed; right: 28px; bottom: 28px; width: 58px; height: 58px; border-radius: 50% !important;
  background: var(--ci-green) !important; color: var(--ci-on-green) !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ci-shadow-cta) !important; z-index: 11;
}

/* ---------- Right rail ---------- */
.tag_main_right_side .tag_sidebar_widget {
  background: var(--ci-surface) !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: var(--ci-r-lg) !important;
  box-shadow: none !important;
}
.tag_main_right_side .tag_sidebar_widget_title,
.tag_main_right_side .wo_page_hdng { color: var(--ci-bone) !important; font-family: var(--ci-font-body); font-weight: 700; }
.tag_main_right_side .featured-users { background: linear-gradient(160deg, var(--ci-green-soft), var(--ci-surface)) !important; }
.tag_pro_users { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tag_pro_users > div a { color: var(--ci-text-2) !important; }
.tag_trending_disc_item { border-radius: var(--ci-r-md); }
.tag_trending_disc_item:hover { background: var(--ci-surface-2); }
.tag_trending_disc_name { color: var(--ci-bone) !important; font-weight: 700; }
.tag_trending_disc_snippet, .tag_trending_disc_stats { color: var(--ci-text-4) !important; }

/* Mobile bottom nav: not added. WoWonder already relocates .tag_hdr_right
   (the request/message/notification/avatar icon row) to a fixed bottom bar
   under its own existing media query (style.css ~line 4233) -- a second,
   independent bottom nav would duplicate and fight that. The icon-level
   styling above (.tag_hdr_droptoggle etc.) already reskins that existing
   mobile bottom bar since it's the same elements, just repositioned by
   Wondertag's own CSS at narrow widths. */

/* ---------- Light theme parity for the pieces above ---------- */
:root[data-theme="light"] .navbar-default,
:root[data-theme="light"] .tag_sidebar,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .tag_main_right_side .tag_sidebar_widget { color-scheme: light; }