:root{
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light:#fff;

  --mid: #f8f9fa;
  --dark: #343a40;
}



.app-bg-mid{
  background: var(--mid);
  color: var(--dark);
}

.login-card{
  width: 100%;
  max-width: 420px;
  background: var(--light);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 30px rgba(52, 58, 64, 0.12);
  border: 1px solid rgba(52, 58, 64, 0.12);
}

.app-panel{
  width: 100%;
  background: var(--light);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(52, 58, 64, 0.10);
  border: 1px solid rgba(52, 58, 64, 0.10);
}

.app-input{
  border-radius: 14px;
  background: var(--light);
  border: 1px solid rgba(52, 58, 64, 0.18);
  box-shadow: 0 2px 8px rgba(52, 58, 64, 0.08);
  padding: 10px 12px;
}

.app-input:focus{
  border-color: rgba(0, 123, 255, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.18);
}

.btn-primary{
  background-color: var(--primary);
  border-color: var(--primary);
}

.stat-card{
  background: var(--mid);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(52, 58, 64, 0.10);
  box-shadow: 0 2px 10px rgba(52, 58, 64, 0.06);
}

.stat-title{
  font-size: 0.9rem;
  color: var(--secondary);
}

.stat-value{
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark);
  margin-top: 4px;
}

.navbar-brand{
  white-space: nowrap;
}

@media (max-width: 576px){
  .login-card{ padding: 18px; border-radius: 16px; }
  .app-panel{ padding: 16px; border-radius: 16px; }
}

/* Fixed top nav support */
.app-has-fixed-nav{
  padding-top: 72px; /* accommodates fixed navbar */
}

.app-shell-container{
  max-width: 1100px;
}

/* Modal styling */
.app-modal{
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(52, 58, 64, 0.14);
  border: 1px solid rgba(52, 58, 64, 0.12);
}


/* Alert Top (shown during ajax requests) */
#alertTop {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

#alertTop.collapsing {
  transition: height 0.35s ease
}

#alertTop .alertTop__panel {
  width: min(420px, calc(100vw - 48px));
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  gap: 12px;
}

#alertTop .alertTop__text {
  padding: 12px 12px;
}


/* Portal Alert */
.portal-alert {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.portal-alert.d-none {
  display: none !important;
}

.portal-alert__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.portal-alert__panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
}

.portal-alert__header {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  color: #fff;
}

.portal-alert__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-alert__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.portal-alert__title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.portal-alert__body {
  padding: 14px 16px;
}

.portal-alert__message {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.portal-alert__footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.10);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Variants (Bootstrap-ish) */
.portal-alert__header[data-alert-variant="success"] { background: #198754; }
.portal-alert__header[data-alert-variant="danger"]  { background: #dc3545; }
.portal-alert__header[data-alert-variant="warning"] { background: #ffc107; color: #212529; }
.portal-alert__header[data-alert-variant="info"]    { background: #0dcaf0; color: #212529; }

/* SVG icons per variant (inline via mask so it inherits color) */
.portal-alert__header[data-alert-variant="success"] .portal-alert__icon {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>") no-repeat center / contain;
}

.portal-alert__header[data-alert-variant="danger"] .portal-alert__icon {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>") no-repeat center / contain;
}

.portal-alert__header[data-alert-variant="warning"] .portal-alert__icon {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>") no-repeat center / contain;
}

.portal-alert__header[data-alert-variant="info"] .portal-alert__icon {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-11.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 7.5 11V7H7a.5.5 0 0 1-.5-.5z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-11.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 7.5 11V7H7a.5.5 0 0 1-.5-.5z'/></svg>") no-repeat center / contain;
}

/* Page loading lock (shown during ajax requests) */
#pageLock {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1px);
}
#pageLock.is-active {
  display: flex;
}
#pageLock .pageLock__panel {
  width: min(420px, calc(100vw - 48px));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.10);
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#pageLock .pageLock__text {
  font-size: 14px;
  line-height: 1.3;
  color: #212529;
}



/* Element-level lock overlay */
.control-lock-wrap {
  position: relative;
}

.control-lock-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.78);
  border-radius: inherit;
  z-index: 30;
}

.control-lock-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}

.control-lock-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: rgba(0,0,0,0.65);
  animation: controlLockSpin 0.8s linear infinite;
}

@keyframes controlLockSpin {
  to { transform: rotate(360deg); }
}

.text-pre {
  white-space: pre !important;
}