/* =====================================================================
   JAPA Portal theme for HumHub
   Mirrors the JAPA Portal MUI palette (warm gold + warm neutrals + Inter)
   so the embedded Community iframe feels like part of the portal.

   Loaded AFTER the parent "HumHub" theme.css (see Theme::register), so these
   rules override the stock compiled styles. Buildless: pure CSS, no LESS.

   Portal palette reference (src/JAPA.Web/src/contexts/ThemeContext.tsx):
     gold        #CCAD70   gold-dark #B89A5A   gold-light #D4B888
     ink (text)  #3A3528   brown (text 2) #6B5A42
     page bg     #F5F3F0   paper #FDFCF9   divider rgba(58,53,40,.12)
     success #7A8B6B  warning #D4A574  danger #9B6B6B
   The portal top bar is solid gold with white glyphs — mirrored here on
   #topbar-first.
   ===================================================================== */

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

:root {
  --japa-gold: #CCAD70;
  --japa-gold-dark: #B89A5A;
  --japa-gold-light: #D4B888;
  --japa-gold-faint: #E0CDA5;
  --japa-ink: #3A3528;
  --japa-brown: #6B5A42;
  --japa-page: #F5F3F0;
  --japa-paper: #FDFCF9;
  --japa-border: rgba(58, 53, 40, 0.14);
  --japa-link: #8C7340;            /* gold dark enough for text contrast on white */
}

/* ---- Typography ---------------------------------------------------- */
body,
.btn,
input, select, textarea, button,
.form-control,
h1, h2, h3, h4, h5, h6,
.tt-input, .select2-container, .atwho-view {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  background-color: var(--japa-page) !important;
  color: var(--japa-ink);
}

h1, h2, h3, h4, h5, h6,
.heading,
.panel-title {
  color: var(--japa-ink) !important;
}

/* ---- Links --------------------------------------------------------- */
a:not(.btn) {
  color: var(--japa-link);
}
a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--japa-gold-dark);
}
/* parent uses #21A1B3 with !important / extra specificity in these spots */
.wall-entry-controls a,
.media .content a,
.media .media-body .module-controls a,
.panel-body a[data-toggle],
.modal-body a[data-toggle],
.login-container .panel a,
.topbar .dropdown-header .dropdown-header-link a,
a.text-info,
.text-info {
  color: var(--japa-link) !important;
}
.wall-entry-controls a:hover,
.media .content a:hover,
a.text-info:hover {
  color: var(--japa-gold-dark) !important;
}

/* ---- Top navigation bar (mirror the portal's gold AppBar) --------- */
#topbar-first,
.navbar-static-top.topbar-first {
  background-color: var(--japa-gold) !important;
  border-bottom: 1px solid var(--japa-gold-dark);
}
#topbar-first .nav > li > a,
#topbar-first .navbar-nav > li > a,
#topbar-first a,
#topbar-first .navbar-brand,
#topbar-first i {
  color: #fff;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > .open > a,
#topbar-first .nav > .open > a:hover,
#topbar-first .nav > .active > a {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.18);
}
#topbar-first .badge,
#topbar-first .label,
#topbar-first .label-info,
#topbar-first .badge-info {
  background-color: var(--japa-ink) !important;
  color: #fff !important;
}
#topbar-first .form-control,
#topbar-first input[type="text"] {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
#topbar-first .form-control::placeholder { color: rgba(255, 255, 255, 0.7); }

/* secondary top bar (page title / breadcrumb strip) */
#topbar-second {
  background-color: var(--japa-paper) !important;
  border-bottom: 1px solid var(--japa-border) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
}
#topbar-second .nav > li > a:hover,
#topbar-second .nav > li > a:active,
#topbar-second .nav > li > a:focus,
#topbar-second .nav > li.active,
#topbar-second .nav > li.active > a {
  border-bottom-color: var(--japa-gold) !important;
}
#topbar-second .nav > li > ul > li > a:hover,
#topbar-second .nav > li > ul > li > a.active {
  border-left-color: var(--japa-gold) !important;
}

/* ---- Panels / cards ----------------------------------------------- */
.panel,
.panel-default,
.well,
.layout-content-container,
.modal-content,
.list-group-item {
  background-color: var(--japa-paper) !important;
  border-color: var(--japa-border) !important;
  border-radius: 8px;
}
.panel {
  box-shadow: 0 10px 30px rgba(15, 17, 21, 0.06);
}
.panel-heading,
.panel-footer,
.modal-header,
.modal-footer {
  border-color: var(--japa-border) !important;
  background-color: transparent !important;
}

/* ---- Buttons ------------------------------------------------------- */
.btn {
  border-radius: 4px;
  font-weight: 600;
}
.btn-primary,
.btn-info,
.btn-comment-submit,
button.btn-info,
a.btn-info,
.layout-content-container .btn-info {
  background: var(--japa-gold) !important;
  background-color: var(--japa-gold) !important;
  border: 1px solid var(--japa-gold-dark) !important;
  color: var(--japa-ink) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-comment-submit:hover, .btn-comment-submit:focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-info {
  background: var(--japa-gold-dark) !important;
  background-color: var(--japa-gold-dark) !important;
  border-color: var(--japa-gold-dark) !important;
  color: #fff !important;
}
.btn-info:active, .btn-info.active {
  outline: 0;
  border: 1px solid var(--japa-gold-dark) !important;
  color: var(--japa-ink) !important;
  background: var(--japa-gold) !important;
  box-shadow: none;
}
.btn-info[disabled], .btn-info.disabled,
.btn-primary[disabled], .btn-primary.disabled {
  background: var(--japa-gold-faint) !important;
  border-color: var(--japa-gold-faint) !important;
  color: var(--japa-ink) !important;
}
.btn-default {
  background-color: #fff !important;
  border-color: var(--japa-border) !important;
  color: var(--japa-ink) !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: #f2efe9 !important;
}
.btn-success { background: #7A8B6B !important; border-color: #5A6B4A !important; color: #fff !important; }
.btn-danger  { background: #9B6B6B !important; border-color: #7B4A4A !important; color: #fff !important; }
.btn-warning { background: #D4A574 !important; border-color: #B8935A !important; color: #fff !important; }
.btn-link    { color: var(--japa-link) !important; }

/* ---- Text / background accent helper classes ---------------------- */
.text-primary, .colorPrimary { color: var(--japa-gold-dark) !important; }
.colorInfo, .colorLink       { color: var(--japa-link) !important; }
.backgroundPrimary, .backgroundInfo, .backgroundLink { background: var(--japa-gold) !important; }
.borderPrimary, .borderInfo                          { border-color: var(--japa-gold) !important; }

/* ---- Labels / badges ---------------------------------------------- */
.label-info, .badge-info, .badge {
  background-color: var(--japa-gold) !important;
  color: var(--japa-ink) !important;
}
.label-success { background-color: #7A8B6B !important; }
.label-warning { background-color: #D4A574 !important; }
.label-danger  { background-color: #9B6B6B !important; }

/* ---- Forms --------------------------------------------------------- */
.form-control {
  border-radius: 6px;
  border-color: var(--japa-border);
  color: var(--japa-ink);
}
.form-control:focus {
  border-color: var(--japa-gold) !important;
  box-shadow: 0 0 0 2px rgba(204, 173, 112, 0.25) !important;
}
.has-error .form-control { border-color: var(--japa-brown) !important; }

/* ---- Nav tabs / pills --------------------------------------------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-bottom-color: var(--japa-gold) !important;
  color: var(--japa-ink) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--japa-gold) !important;
  color: var(--japa-ink) !important;
}

/* ---- Progress / pagination / list selection ----------------------- */
.progress-bar { background-color: var(--japa-gold) !important; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background-color: var(--japa-gold) !important;
  border-color: var(--japa-gold-dark) !important;
  color: var(--japa-ink) !important;
}
a.list-group-item.active,
.list-group-item.active {
  background-color: rgba(204, 173, 112, 0.16) !important;
  border-color: var(--japa-border) !important;
  color: var(--japa-ink) !important;
}

/* ---- Wall / stream / left side panel ------------------------------ */
.wall-stream .panel,
.layout-nav-container .panel,
#layout-sidebar-panel-account { background-color: var(--japa-paper) !important; }

/* ---- Embedded-in-portal mode -------------------------------------- *
 * The japa-portal-auth module tags <html> with `japa-embedded` when HumHub is
 * inside the portal's iframe. Hide HumHub's own top bar (it duplicates the
 * portal's) and let #topbar-second flow at the top of the content like a
 * normal page header. */
html.japa-embedded #topbar-first { display: none !important; }
html.japa-embedded #topbar-second {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom: 1px solid var(--japa-border) !important;
}
html.japa-embedded body {
  padding-top: 0 !important;
  background: var(--japa-page) !important;
}
/* Flatten: posts/content sit directly on the page background — no nested cards */
html.japa-embedded .panel,
html.japa-embedded .panel-default,
html.japa-embedded .wall-stream .panel,
html.japa-embedded .layout-nav-container .panel,
html.japa-embedded .panel-profile,
html.japa-embedded .well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.japa-embedded .panel-profile .panel-profile-header { border: none !important; }
html.japa-embedded .panel-heading,
html.japa-embedded .panel-footer { border-color: var(--japa-border) !important; }
/* keep posts visually separated with a soft divider instead of a box */
html.japa-embedded .wall-entry + .wall-entry { border-top: 1px solid var(--japa-border); }
/* the composer / comment inputs still need a surface to read against */
html.japa-embedded .ProsemirrorEditor,
html.japa-embedded .comment-container .comment-create-input-group,
html.japa-embedded textarea.form-control,
html.japa-embedded .comment_create .form-control {
  background: var(--japa-paper) !important;
  border: 1px solid var(--japa-border) !important;
}

/* ---- Dark dropdown menus (nav-pills / nav-tabs / account / wall-entry "…") ---
   stock theme paints these #435f6f with white text — make them light/paper to
   match the rest of the page. */
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu {
  background-color: var(--japa-paper) !important;
  border: 1px solid var(--japa-border) !important;
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.12) !important;
}
.nav-pills .dropdown-menu li,
.nav-tabs .dropdown-menu li,
.account .dropdown-menu li { border-left: 3px solid transparent !important; }
.nav-pills .dropdown-menu li a,
.nav-tabs .dropdown-menu li a,
.account .dropdown-menu li a { color: var(--japa-ink) !important; }
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider { background-color: var(--japa-border) !important; }
.nav-pills .dropdown-menu li:hover,
.nav-pills .dropdown-menu li.selected,
.nav-tabs .dropdown-menu li:hover,
.nav-tabs .dropdown-menu li.selected,
.account .dropdown-menu li:hover,
.account .dropdown-menu li.selected {
  border-left-color: var(--japa-gold) !important;
  color: var(--japa-ink) !important;
  background-color: rgba(204, 173, 112, 0.12) !important;
}
/* wall-entry / content "…" toggle chevron */
.nav-pills.preferences .dropdown .dropdown-toggle i { color: var(--japa-link) !important; }
.nav-pills.preferences .dropdown.open .dropdown-toggle,
.nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
  background-color: rgba(58, 53, 40, 0.08) !important;
  color: var(--japa-ink) !important;
}
.nav-pills.preferences .dropdown.open .dropdown-toggle i,
.nav-pills.preferences .dropdown.open .dropdown-toggle:hover i { color: var(--japa-ink) !important; }

/* ---- #topbar-first child elements sitting on the gold bar --------- */
/* account dropdown — blend into the gold bar, white text (no dark block) */
#topbar-first .dropdown.account > a,
#topbar-first .dropdown.account.open > a {
  background-color: transparent !important;
  color: #fff !important;
}
#topbar-first .dropdown.account > a:hover,
#topbar-first .dropdown.account.open > a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
#topbar-first .dropdown.account .account-user-title,
#topbar-first .dropdown.account strong { color: #fff !important; }
#topbar-first .dropdown.account .account-user-email,
#topbar-first .dropdown.account small { color: rgba(255, 255, 255, 0.78) !important; }
#topbar-first .dropdown.account .caret { border-top-color: #fff !important; }
/* notification / message / enter buttons — translucent white on gold (no navy boxes) */
#topbar-first .btn-group > a,
#topbar-first .btn-enter,
#topbar-first .notifications > a,
#topbar-first .messages > a {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
#topbar-first .btn-group > a:hover,
#topbar-first .btn-enter:hover,
#topbar-first .notifications > a:hover,
#topbar-first .messages > a:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > .open > a { background-color: rgba(255, 255, 255, 0.18) !important; }

/* ---- Remaining stock-teal links / accents ------------------------- */
.panel .panel-body p a,
.panel .panel-body a,
.panel h3.media-heading small a,
.panel .statistics .entry .count,
.tab-content .tab-pane a,
.popover .popover-content a,
.media .content a,
.wall-entry .content a {
  color: var(--japa-link) !important;
}
.panel .panel-body p a:hover,
.tab-content .tab-pane a:hover,
table td a:hover { color: var(--japa-gold-dark) !important; }

/* comment / inline-edit submit button (parent pins #21A1B3 with !important) */
.comment_create .comment-buttons button,
.content_edit .comment-buttons button,
.post-richtext-input-group .comment-buttons button {
  background-color: var(--japa-gold) !important;
  color: var(--japa-ink) !important;
}
.comment_create .comment-buttons button:hover,
.content_edit .comment-buttons button:hover,
.post-richtext-input-group .comment-buttons button:hover {
  background-color: var(--japa-gold-dark) !important;
  color: #fff !important;
}

.regular-checkbox:checked + .regular-checkbox-box,
.regular-radio:checked + .regular-radio-button:after {
  background-color: var(--japa-gold) !important;
  border-color: var(--japa-gold) !important;
}
div.required > label:after { color: var(--japa-brown) !important; }
.progress-bar-info { background-color: var(--japa-gold) !important; }
.media-list li.new, .media-list li.selected,
.nav-tabs .dropdown-menu li.selected,
ul.contextMenu li.selected,
.account .dropdown-menu li.selected { border-color: var(--japa-gold) !important; }