/* SigmaVue redesign mockups — shared styles
   Linked from each mockup HTML to keep file sizes manageable. */

@property --gradient-rotation { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --gradient-rotation-secondary { syntax: '<angle>'; inherits: false; initial-value: 180deg; }

html, body {
  background: #04060b;
  color: #ffffff;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body {
  background-image:
    radial-gradient(ellipse at top, rgba(0, 64, 255, 0.05), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 255, 204, 0.04), transparent 60%),
    url('/images/media/sigmavue-dash-bg.png');
  background-size: cover, cover, cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Card-effect rotating conic-gradient border */
.card-effect { position: relative; }
.card-effect::before {
  content: ''; position: absolute; inset: 0; padding: 1px;
  border-radius: inherit; pointer-events: none;
  animation: card-effect-animation 10s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@keyframes card-effect-animation {
  0% { --gradient-rotation: 0deg; --gradient-rotation-secondary: 180deg; }
  100% { --gradient-rotation: 360deg; --gradient-rotation-secondary: 540deg; }
}

/* Card variants */
.card-default {
  background: radial-gradient(ellipse at bottom, hsla(220, 10%, 10%, 0.4) 0%, hsla(220, 10%, 8%, 0.55) 65%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-default.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(220, 10%, 30%, 0.18) 63%, hsla(220, 10%, 35%, 0.55) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(220, 10%, 30%, 0.22) 100%);
}
.card-success {
  background: radial-gradient(ellipse at bottom right, hsla(112, 60%, 18%, 0.55) 0%, hsla(112, 40%, 8%, 0.55) 50%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-success.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(112, 100%, 40%, 0.33) 63%, hsl(112, 100%, 50%) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(112, 100%, 50%, 0.33) 100%);
}
.card-warning {
  background: radial-gradient(ellipse at bottom right, hsla(40, 60%, 18%, 0.55) 0%, hsla(40, 40%, 8%, 0.55) 50%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-warning.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(40, 100%, 40%, 0.33) 63%, hsl(40, 100%, 50%) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(40, 100%, 50%, 0.33) 100%);
}
.card-destructive {
  background: radial-gradient(ellipse at bottom right, hsla(0, 60%, 18%, 0.55) 0%, hsla(0, 40%, 8%, 0.55) 50%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-destructive.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(0, 100%, 40%, 0.33) 63%, hsl(0, 100%, 50%) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(0, 100%, 50%, 0.33) 100%);
}
.card-secondary {
  background: radial-gradient(ellipse at bottom right, hsla(162, 60%, 18%, 0.55) 0%, hsla(162, 40%, 8%, 0.55) 50%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-secondary.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(162, 100%, 40%, 0.33) 63%, hsl(162, 100%, 50%) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(162, 100%, 50%, 0.33) 100%);
}
.card-primary {
  background: radial-gradient(ellipse at bottom right, hsla(217, 80%, 30%, 0.45) 0%, hsla(217, 80%, 12%, 0.55) 50%);
  backdrop-filter: blur(10px); border-radius: 32px;
}
.card-primary.card-effect::before {
  background:
    conic-gradient(from var(--gradient-rotation), hsla(217, 100%, 40%, 0.33) 63%, hsl(217, 100%, 50%) 100%),
    conic-gradient(from var(--gradient-rotation-secondary), transparent 75%, hsla(217, 100%, 50%, 0.33) 100%);
}

/* Reflective pill border */
.reflective-pill {
  border: 1px solid transparent;
  border-image-source: url('/images/ui/reflective-borders/white-pill.png');
  border-image-slice: 27;
  border-image-width: 20;
  border-image-repeat: stretch;
  border-radius: 9999px;
  background:
    radial-gradient(ellipse at top left, hsla(0, 0%, 100%, 0.04) 0%, hsla(0, 0%, 100%, 0) 50%),
    radial-gradient(ellipse at bottom right, hsla(0, 0%, 100%, 0.02) 0%, hsla(0, 0%, 100%, 0) 50%);
}

/* Depth shadows */
.depth-effect {
  box-shadow:
    0 1px 3px rgba(40, 40, 50, 0.5),
    0 4px 12px rgba(30, 30, 40, 0.45),
    0 8px 24px rgba(20, 20, 30, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.depth-effect-success {
  box-shadow:
    0 1px 3px rgba(40, 40, 50, 0.5),
    0 4px 12px rgba(30, 30, 40, 0.45),
    0 8px 24px rgba(20, 20, 30, 0.4),
    0 0 30px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.depth-effect-warning {
  box-shadow:
    0 1px 3px rgba(40, 40, 50, 0.5),
    0 4px 12px rgba(30, 30, 40, 0.45),
    0 8px 24px rgba(20, 20, 30, 0.4),
    0 0 30px rgba(245, 158, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.depth-effect-destructive {
  box-shadow:
    0 1px 3px rgba(40, 40, 50, 0.5),
    0 4px 12px rgba(30, 30, 40, 0.45),
    0 8px 24px rgba(20, 20, 30, 0.4),
    0 0 30px rgba(239, 68, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.depth-effect-primary {
  box-shadow:
    0 1px 3px rgba(40, 40, 50, 0.5),
    0 4px 12px rgba(30, 30, 40, 0.45),
    0 8px 24px rgba(20, 20, 30, 0.4),
    0 0 30px rgba(0, 64, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.subtle-surface {
  border-radius: 14px;
  border: 1px solid hsla(220, 10%, 26%, 0.14);
  background: linear-gradient(145deg, hsla(220, 10%, 10%, 0.29) 0%, hsla(220, 10%, 8%, 0.16) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 28px -22px rgba(0, 0, 0, 0.8);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(0, 255, 204, 0.45); }
  50% { box-shadow: 0 0 14px 3px rgba(0, 255, 204, 0.7); }
}
.pulse-teal { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulsePositive {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(0, 255, 21, 0.45); }
  50% { box-shadow: 0 0 14px 3px rgba(0, 255, 21, 0.7); }
}
.pulse-positive { animation: pulsePositive 2s ease-in-out infinite; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #2e323a; border-radius: 9999px; }
::-webkit-scrollbar-track { background: transparent; }
*:focus-visible { outline: 2px solid #0040ff; outline-offset: 2px; border-radius: 4px; }

.fade-in { animation: fadeInUp 0.3s ease-out; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shared modal patterns (used by 16-subpages and dashboard inline modals) */
.modal-backdrop { background: rgba(4, 6, 11, 0.65); backdrop-filter: blur(8px); }
.modal-shell {
  background: linear-gradient(145deg, hsla(220, 10%, 6%, 0.95) 0%, hsla(220, 10%, 4%, 0.92) 100%);
  backdrop-filter: blur(20px);
  border-radius: 24px;
}
.form-input {
  background: linear-gradient(145deg, hsla(220, 10%, 10%, 0.45) 0%, hsla(220, 10%, 8%, 0.32) 100%);
  border: 1px solid hsla(220, 10%, 26%, 0.28);
  border-radius: 10px; padding: 0 12px; height: 36px; color: #fff; font-size: 12px; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { outline: none; border-color: #0040ff; box-shadow: 0 0 0 3px rgba(0, 64, 255, 0.18); }
.form-input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); }
textarea.form-input { padding: 10px 12px; height: auto; resize: vertical; font-family: inherit; line-height: 1.5; }
.seg-toggle { display: inline-flex; padding: 2px; gap: 2px; }
.seg-toggle button { padding: 6px 12px; border-radius: 9999px; font-size: 11px; font-weight: 600; color: #a6abb3; transition: all 0.2s; cursor: pointer; }
.seg-toggle button.active { background: rgba(255,255,255,0.08); color: #fff; }
input[type="range"] { -webkit-appearance: none; height: 4px; border-radius: 9999px; background: rgba(255,255,255,0.08); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #00ffcc; cursor: pointer; box-shadow: 0 0 8px rgba(0, 255, 204, 0.4); }
.toggle-pill { width: 36px; height: 20px; border-radius: 9999px; position: relative; cursor: pointer; transition: background 0.2s; background: rgba(255, 255, 255, 0.08); display: inline-block; flex-shrink: 0; }
.toggle-pill.on { background: rgba(0, 255, 21, 0.18); }
.toggle-pill::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: all 0.2s; }
.toggle-pill.on::after { transform: translateX(16px); background: #00ff15; box-shadow: 0 0 8px rgba(0, 255, 21, 0.5); }