/*
 * components/alerts.css — Notification spans, dev/debug banners, Msg boxes
 */

/* ─── Notification Alerts (spans inside content) ─────────────────────────── */

div.content span.Notice,
div.content span.Warning,
div.content span.Error,
div.content span.Success,
.ui-dialog span.Notice,
.ui-dialog span.Warning,
.ui-dialog span.Error,
.ui-dialog span.Success,
span.Notice,
span.Warning,
span.Error,
span.Success {
  display: block;
  text-align: left;
  margin: 5px 0;
  padding: 5px 20px 5px 45px;
  font-size: 14px;
  background-position: 15px 50%;
  border-radius: 5px;
  background-repeat: no-repeat;
}
div.content span.Notice,
.ui-dialog span.Notice,
span.Notice  { 
  background-color: var(--color-notice-bg);  
  background-image: url(../../../../images/notice.png); 
}
div.content span.Warning,
.ui-dialog span.Warning,
span.Warning { 
  background-color: var(--color-warning-bg); 
  background-image: url(../../../../images/warning.png); 
}
div.content span.Error,
.ui-dialog span.Error,
span.Error   { 
  background-color: var(--color-error-bg);   
  background-image: url(../../../../images/error.png); 
}
div.content span.Success,
.ui-dialog span.Success,
span.Success {
  background-color: var(--color-success-bg);
  background-image: url(../../../../images/tick.png);
}

/* New-reply banner (sptTicketManagement). Hidden by default — JS .show()s it
   when a polling response reports a new reply. Floats fixed at bottom-center
   so it sits over the composer regardless of scroll. Selectors match the
   alert-list specificity (0,2,2) above so display: none wins source-order. */
div.content span.Warning.newReplyBanner,
.ui-dialog span.Warning.newReplyBanner,
span.Warning.newReplyBanner {
  display: none;
  cursor: pointer;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  font-weight: bold;
  font-size: 1.1em;
  padding: 10px 32px 10px 56px;
  border: 2px solid var(--color-warning-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  animation: newReplyBannerPulse 1.2s ease-in-out infinite;
  margin: 0;
  width: auto;
  max-width: 80%;
}
@keyframes newReplyBannerPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 22px 6px rgba(247,210,41,0.95); }
}

/* ─── Development Banner ─────────────────────────────────────────────────── */

div#DevelopmentBanner {
  display: block;
  width: 100%;
  background: var(--color-error-bg);
  border-top: 2px solid var(--color-error-border);
  border-bottom: 2px solid var(--color-error-border);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 1px 0;
}

/* ─── Debugger Banner ────────────────────────────────────────────────────── */
/* Static-positioned banner that takes its own row in the document flow,
   matching classic. Padding-left clears the 150px fixed sidebar so the
   filter checkboxes don't render under the nav. */

div#DebuggerBanner {
  display: block;
  background: var(--color-heading-bg);
  border-bottom: 2px solid var(--color-border);
  font-size: var(--font-size-xs);
  text-align: center;
  margin: 0;
  padding: 1px 0 1px var(--sidebar-width);
  width: 100%;
}
div#DebuggerBanner form {
  margin: 0;
  padding: 0;
}
div#DebuggerBanner form input.Submit {
  font-size: var(--font-size-xs);
  background-color: var(--color-heading-bg);
  color: var(--color-text);
  box-shadow: none;
  padding: 2px 8px;
}
div#DebuggerBanner form input.Checkbox { 
  margin-left: 8px; vertical-align: bottom; 
}
div#DebuggerBanner input,
div#DebuggerBanner label { 
  pointer-events: all; 
}

/* ─── Debugger Messages ──────────────────────────────────────────────────── */

.DebuggerMessage {
  clear: both;
  border-style: solid;
  border-width: 2px 0;
  font-size: var(--font-size-base);
  margin: 4px 0 0;
  padding: 10px 10px 10px 160px;
  width: 100%;
  box-sizing: border-box;
}
.DebuggerMessage span.Message {
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 0;
}
.DebuggerMessage table.Backtrace,
.DebuggerMessage table.ExecutionPlan { width: 100%; }
.DebuggerMessage table.Backtrace th,
.DebuggerMessage table.Backtrace td,
.DebuggerMessage table.ExecutionPlan th,
.DebuggerMessage table.ExecutionPlan td {
  border-top: 1px solid #999;
  font-size: var(--font-size-xs);
}
.DebuggerMessage table.Backtrace th,
.DebuggerMessage table.ExecutionPlan th { font-weight: bold; }
.DebuggerMessage table.Backtrace td,
.DebuggerMessage table.ExecutionPlan td { padding: 3px; }
.DebuggerMessage pre {
  border-top: 2px dotted black;
  font-family: "Courier New", monospace;
  padding: 5px;
  width: 100%;
  overflow: auto;
}

.DebuggerMessage.DebuggerError   { background-color: rgba(255, 191, 191, 0.1); border-color: #b30000; }
.DebuggerMessage.DebuggerWarning { background-color: rgba(255, 230, 191, 0.3); border-color: #f90; }
.DebuggerMessage.DebuggerSpecial { background-color: rgba(191, 207, 255, 0.1); border-color: #00248f; }
.DebuggerMessage.DebuggerNotice  { background-color: rgba(255, 248, 189, 0.1); border-color: #ffe600; }
.DebuggerMessage.DebuggerQuery   { background-color: rgba(255, 255, 255, 0.1); border-color: #fff; }

.DebuggerMessage.DebuggerError   tr:nth-child(even) { background: rgba(255, 150, 150, 0.1); }
.DebuggerMessage.DebuggerWarning tr:nth-child(even) { background: rgba(255, 214, 150, 0.3); }
.DebuggerMessage.DebuggerSpecial tr:nth-child(even) { background: rgba(150, 176, 255, 0.1); }
.DebuggerMessage.DebuggerNotice  tr:nth-child(even) { background: rgba(255, 245, 150, 0.1); }
.DebuggerMessage.DebuggerQuery   tr:nth-child(even) { background: rgba(235, 235, 235, 0.1); }

/* ─── Warning notice box ─────────────────────────────────────────────────── */

.warning-notice {
  background: var(--color-warning-bg) url('../../../../images/warning.png') no-repeat 15px 50%;
  padding: 5px 20px 5px 45px;
}