/* ============================================================================
   SITE HELPDESK THEME — customer portal
   Loaded AFTER theme.css on the customer area, so every token from that file's
   §0 block is already in scope. This file only carries what differs.

   The portal is the one surface a customer ever sees, so it does the most
   white-labelling work. Keep it conservative: Perfex's customer area uses
   plainer Bootstrap 3 markup than the admin, and the selectors below are the
   stable ones. Verify against each new Perfex release.
   ============================================================================ */

/* -- Canvas + type ---------------------------------------------------------- */
body.customers-area,
body[class*="clients"] {
  background: var(--app-bg);
  color: var(--gray-900);
  font-family: var(--font-sans);
}

/* -- Portal navbar ---------------------------------------------------------- */
.navbar-default {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  border-radius: 0;
}
.navbar-default .navbar-nav > li > a { color: var(--gray-600); font-weight: 500; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--gray-900); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background: var(--brand-50); color: var(--brand-700); border-radius: var(--radius-lg);
}
.navbar-default .navbar-brand { font-weight: 700; color: var(--gray-900); }

/* -- Customer-facing footer -------------------------------------------------
   Perfex prints an attribution line in the portal footer. Neutralise the
   styling here; the STRING itself is removed in the base config, not by CSS.  */
.customer-area-footer, footer.footer {
  color: var(--gray-400); font-size: 12px; border-top: 1px solid var(--gray-100);
}

/* -- Ticket list + single ticket -------------------------------------------- */
.customer-ticket-list .panel_s,
#ticket .panel_s { border-radius: var(--radius-xl); }

/* Mirror the admin-side three-way message language, minus internal notes —
   customers must never see those, so only two states exist here. */
.panel-body.client-reply {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--info-solid);
  border-radius: var(--radius-xl);
}

/* Belt-and-braces: internal notes have no business rendering in the portal.
   Perfex already excludes them server-side — this is a visual backstop only,
   NOT a security control. */
.ticketstaffnotes { display: none !important; }

/* -- Knowledge base --------------------------------------------------------- */
.kb-article, .knowledge-base-article {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.kb-group-heading { font-size: 16px; font-weight: 600; color: var(--gray-900); }

/* -- Customer login / registration ------------------------------------------ */
.login-panel, .register-panel {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-xl);
}