/* ==============================
   VARIABLES
   ============================== */
:root {
  /* Font size base settings */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Common text sizes with clamp - responsive without media queries */
  --text-xs: clamp(
    0.7rem,
    0.65rem + 0.25vw,
    0.75rem
  ); /* 11.2-12px at base size */
  --text-sm: clamp(
    0.8rem,
    0.75rem + 0.25vw,
    0.875rem
  ); /* 12.8-14px at base size */
  --text-base: clamp(
    0.9rem,
    0.85rem + 0.3vw,
    1rem
  ); /* 14.4-16px at base size */
  --text-lg: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); /* 16-18px at base size */
  --text-xl: clamp(
    1.1rem,
    1.05rem + 0.4vw,
    1.25rem
  ); /* 17.6-20px at base size */
  --text-2xl: clamp(
    1.3rem,
    1.2rem + 0.5vw,
    1.5rem
  ); /* 20.8-24px at base size */
  --text-3xl: clamp(
    1.6rem,
    1.4rem + 0.75vw,
    1.875rem
  ); /* 25.6-30px at base size */
  --text-4xl: clamp(
    1.9rem,
    1.7rem + 0.9vw,
    2.25rem
  ); /* 30.4-36px at base size */

  /* 🎨 Primary (Cyan) */
  --color-primary-50: #ecfeff;
  --color-primary-50-rgb: 236, 254, 255;
  --color-primary-100: #cffafe;
  --color-primary-100-rgb: 207, 250, 254;
  --color-primary-200: #a5f3fc;
  --color-primary-200-rgb: 165, 243, 252;
  --color-primary-300: #67e8f9;
  --color-primary-300-rgb: 103, 232, 249;
  --color-primary-400: #22d3ee;
  --color-primary-400-rgb: 34, 211, 238;
  --color-primary-500: #06b6d4;
  --color-primary-500-rgb: 6, 182, 212;
  --color-primary-600: #0891b2;
  --color-primary-600-rgb: 8, 145, 178;
  --color-primary-700: #0e7490;
  --color-primary-700-rgb: 14, 116, 144;
  --color-primary-800: #155e75;
  --color-primary-800-rgb: 21, 94, 117;
  --color-primary-900: #164e63;
  --color-primary-900-rgb: 22, 78, 99;
  --color-primary-950: #083344;
  --color-primary-950-rgb: 8, 51, 68;

  /* 🎨 Secondary (sky) */
  --color-secondary-50: #f0f9ff;
  --color-secondary-50-rgb: 240, 249, 255;
  --color-secondary-100: #e0f2fe;
  --color-secondary-100-rgb: 224, 242, 254;
  --color-secondary-200: #bae6fd;
  --color-secondary-200-rgb: 186, 230, 253;
  --color-secondary-300: #7dd3fc;
  --color-secondary-300-rgb: 125, 211, 252;
  --color-secondary-400: #38bdf8;
  --color-secondary-400-rgb: 56, 189, 248;
  --color-secondary-500: #0ea5e9;
  --color-secondary-500-rgb: 14, 165, 233;
  --color-secondary-600: #0284c7;
  --color-secondary-600-rgb: 2, 132, 199;
  --color-secondary-700: #0369a1;
  --color-secondary-700-rgb: 3, 105, 161;
  --color-secondary-800: #075985;
  --color-secondary-800-rgb: 7, 89, 133;
  --color-secondary-900: #0c4a6e;
  --color-secondary-900-rgb: 12, 74, 110;
  --color-secondary-950: #082f49;
  --color-secondary-950-rgb: 8, 47, 73;

  /* 🎨 Red color variables */
  --color-red-50: #fef2f2;
  --color-red-50-rgb: 254, 242, 242;
  --color-red-100: #fee2e2;
  --color-red-100-rgb: 254, 226, 226;
  --color-red-200: #fecaca;
  --color-red-200-rgb: 254, 202, 202;
  --color-red-300: #fca5a5;
  --color-red-300-rgb: 252, 165, 165;
  --color-red-400: #f87171;
  --color-red-400-rgb: 248, 113, 113;
  --color-red-500: #ef4444;
  --color-red-500-rgb: 239, 68, 68;
  --color-red-600: #dc2626;
  --color-red-600-rgb: 220, 38, 38;
  --color-red-700: #b91c1c;
  --color-red-700-rgb: 185, 28, 28;
  --color-red-800: #991b1b;
  --color-red-800-rgb: 153, 27, 27;
  --color-red-900: #7f1d1d;
  --color-red-900-rgb: 127, 29, 29;
  --color-red-950: #450a0a;
  --color-red-950-rgb: 69, 10, 10;

  /* ⚪ Gray for background and text */
  --color-gray-0: #ffffff;
  --color-gray-0-rgb: 255, 255, 255;
  --color-gray-50: #f9fafb;
  --color-gray-50-rgb: 249, 250, 251;
  --color-gray-100: #f3f4f6;
  --color-gray-100-rgb: 243, 244, 246;
  --color-gray-200: #e5e7eb;
  --color-gray-200-rgb: 229, 231, 235;
  --color-gray-300: #d1d5db;
  --color-gray-300-rgb: 209, 213, 219;
  --color-gray-400: #9ca3af;
  --color-gray-400-rgb: 156, 163, 175;
  --color-gray-500: #6b7280;
  --color-gray-500-rgb: 107, 114, 128;
  --color-gray-600: #4b5563;
  --color-gray-600-rgb: 75, 85, 99;
  --color-gray-700: #374151;
  --color-gray-700-rgb: 55, 65, 81;
  --color-gray-800: #1f2937;
  --color-gray-800-rgb: 31, 41, 55;
  --color-gray-900: #111827;
  --color-gray-900-rgb: 17, 24, 39;
  --color-gray-950: #030712;
  --color-gray-950-rgb: 3, 7, 18;

  /* 🎨 Green colors */
  --color-green-50: #f0fdf4;
  --color-green-50-rgb: 240, 253, 244;
  --color-green-100: #dcfce7;
  --color-green-100-rgb: 220, 252, 231;
  --color-green-200: #bbf7d0;
  --color-green-200-rgb: 187, 247, 208;
  --color-green-300: #86efac;
  --color-green-300-rgb: 134, 239, 172;
  --color-green-400: #4ade80;
  --color-green-400-rgb: 74, 222, 128;
  --color-green-500: #22c55e;
  --color-green-500-rgb: 34, 197, 94;
  --color-green-600: #16a34a;
  --color-green-600-rgb: 22, 163, 74;
  --color-green-700: #15803d;
  --color-green-700-rgb: 21, 128, 61;
  --color-green-800: #166534;
  --color-green-800-rgb: 22, 101, 52;
  --color-green-900: #14532d;
  --color-green-900-rgb: 20, 83, 45;
  --color-green-950: #052e16;
  --color-green-950-rgb: 5, 46, 22;

  /* 🎨 Yellow colors */
  --color-yellow-50: #fefce8;
  --color-yellow-50-rgb: 254, 252, 232;
  --color-yellow-100: #fef9c3;
  --color-yellow-100-rgb: 254, 249, 195;
  --color-yellow-200: #fef08a;
  --color-yellow-200-rgb: 254, 240, 138;
  --color-yellow-300: #fde047;
  --color-yellow-300-rgb: 253, 224, 71;
  --color-yellow-400: #facc15;
  --color-yellow-400-rgb: 250, 204, 21;
  --color-yellow-500: #eab308;
  --color-yellow-500-rgb: 234, 179, 8;
  --color-yellow-600: #ca8a04;
  --color-yellow-600-rgb: 202, 138, 4;
  --color-yellow-700: #a16207;
  --color-yellow-700-rgb: 161, 98, 7;
  --color-yellow-800: #854d0e;
  --color-yellow-800-rgb: 133, 77, 14;
  --color-yellow-900: #713f12;
  --color-yellow-900-rgb: 113, 63, 18;
  --color-yellow-950: #422006;
  --color-yellow-950-rgb: 66, 32, 6;

  /* Common shadow color */
  --black-color-rgb: 0, 0, 0;
  /* Shadow variables */
  --shadow-small: 0 0 5px rgba(var(--black-color-rgb), 0.2);
  --shadow-medium: 0 0 15px rgba(var(--black-color-rgb), 0.2);
  --shadow-large: 0 0 20px rgba(var(--black-color-rgb), 0.2);
  --shadow-medium-hover: 0 0 30px rgba(var(--black-color-rgb), 0.2);
  --shadow-small-active: 0 0 15px rgba(var(--black-color-rgb), 0.2);

  --color-input-light: var(--color-secondary-950);
  --color-input-dark: var(--color-secondary-50);

  /* Animation and sizing variables */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --card-border-radius: 8px;

  /* Theme variables - light theme defaults */
  --page-bg: var(--color-gray-50);
  --content-bg: rgba(var(--color-gray-100-rgb), 0.9);
  --text-color: var(--color-gray-800);
  --border-color: rgba(var(--black-color-rgb), 0.1);
  --card-bg: var(--color-gray-100);
  --card-header-bg: rgba(var(--color-gray-100-rgb), 0.8);
  --input-bg: var(--color-gray-50);
  --input-focus-bg: rgba(var(--color-gray-100-rgb), 0.9);

  /* Navigation & Layout Variables */
  --nav-gradient-start: var(--color-primary-600);
  --nav-gradient-middle: var(--color-primary-500);
  --nav-gradient-end: var(--color-primary-600);
  --nav-hover-bg: rgba(var(--black-color-rgb), 0.05);
  --active-item-bg: var(--color-primary-500);
  --nav-text-color: var(--color-gray-50);

  /* Page Header Variables */
  --page-header-color: var(--color-primary-500);
  --page-header-border-color: var(--color-primary-500);
  --page-header-accent-color: var(--color-primary-600);

  /* Page Subheader Variables */
  --page-subheader-color: var(--color-gray-700);
  --page-subheader-border-color: rgba(var(--color-gray-400-rgb), 0.5);
  --page-subheader-accent-color: var(--color-gray-600);

  /* Sidebar specific */
  --sidebar-bg-start: var(--color-gray-700);
  --sidebar-bg-end: var(--color-gray-800);

  /* Alternative alert-info colors - Light theme */
  --alert-info-alt-bg: var(--color-primary-50);
  --alert-info-alt-text: var(--color-primary-800);
  --alert-info-alt-border: var(--color-primary-200);
  --alert-info-alt-icon: var(--color-primary-600);
}

/* Responsive font size adjustment */
@media (max-width: 640px) {
  :root {
    font-size: 14px; /* Smaller base size for mobile */
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    font-size: 15px; /* Medium base size for tablets */
  }
}

@media (min-width: 1025px) and (max-width: 1920px) {
  :root {
    font-size: 16px; /* Standard base size for desktops */
  }
}

@media (min-width: 1921px) {
  :root {
    font-size: 18px; /* Larger base size for very large screens */
  }
}

/* Dark mode theme variables */
html.dark {
  --page-bg: var(--color-gray-950);
  --content-bg: rgba(var(--color-gray-950-rgb), 0.7);
  --text-color: var(--color-gray-200);
  --border-color: rgba(var(--color-gray-50-rgb), 0.1);
  --card-bg: rgba(var(--color-gray-900-rgb), 0.8);
  --card-header-bg: rgba(var(--color-gray-800-rgb), 0.8);
  --input-bg: rgba(var(--color-gray-950-rgb), 0.8);
  --input-focus-bg: rgba(var(--color-gray-900-rgb), 0.9);

  /* Navigation & Layout in dark mode */
  --nav-gradient-start: var(--color-gray-900);
  --nav-gradient-middle: var(--color-gray-800);
  --nav-gradient-end: var(--color-gray-900);
  --nav-hover-bg: rgba(var(--color-gray-50-rgb), 0.05);
  --active-item-bg: var(--color-primary-700);
  --nav-text-color: var(--color-gray-200);

  /* Page Header Variables in dark mode */
  --page-header-color: var(--color-primary-600);
  --page-header-border-color: var(--color-primary-700);
  --page-header-accent-color: var(--color-primary-600);

  /* Page Subheader Variables in dark mode */
  --page-subheader-color: var(--color-gray-400);
  --page-subheader-border-color: rgba(var(--color-gray-700-rgb), 0.5);
  --page-subheader-accent-color: var(--color-gray-500);

  /* Sidebar in dark mode */
  --sidebar-bg-start: var(--color-gray-950);
  --sidebar-bg-end: var(--color-gray-900);

  /* Transaction card specific colors for dark mode */
  --transaction-card-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  /* Status colors adjustment for dark mode */
  --color-yellow-500: #eab308; /* Brighter yellow for dark mode */
  --color-green-500: #22c55e; /* Brighter green for dark mode */
  --color-blue-500: #3b82f6; /* Brighter blue for dark mode */

  /* Alternative alert-info colors - Dark theme */
  --alert-info-alt-bg: var(--color-primary-950);
  --alert-info-alt-text: var(--color-primary-200);
  --alert-info-alt-border: var(--color-primary-800);
  --alert-info-alt-icon: var(--color-primary-400);
}

[x-cloak] {
  display: none !important;
}

/* ============ Max-Width Variations ============ */
.max-w-xs {
  max-width: 20rem !important; /* 320px */
}

.max-w-sm {
  max-width: 30rem !important; /* 480px */
}

.max-w-md {
  max-width: 40rem !important; /* 640px */
}

.max-w-lg {
  max-width: 50rem !important; /* 800px */
}

.max-w-xl {
  max-width: 60rem !important; /* 960px */
}

.max-w-2xl {
  max-width: 70rem !important; /* 1120px */
}

.max-w-3xl {
  max-width: 80rem !important; /* 1280px */
}

.max-w-full {
  max-width: 100% !important;
}

.max-w-half {
  max-width: 50% !important;
}

.max-w-third {
  max-width: 33.333% !important;
}

.max-w-quarter {
  max-width: 25% !important;
}

/* Responsive max-width classes */
@media (max-width: 992px) {
  .md\:max-w-full {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .sm\:max-w-full {
    max-width: 100% !important;
  }

  .max-w-half,
  .max-w-third,
  .max-w-quarter {
    max-width: 100%;
  }
}

/* ==============================
   RESET
   ============================== */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:hover {
  color: unset;
  text-decoration: none;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* True button reset */
button {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  text-transform: inherit;
  outline: none;
}

/* True anchor reset */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

/* Form and Input Reset */
form {
  margin: 0;
  padding: 0;
  width: 100%;
}

input,
select,
textarea,
fieldset,
optgroup,
option {
  appearance: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  vertical-align: middle;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
}

/* Reset specific input types to their default appearance */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Reset placeholder text */
::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* Reset form legends and labels */
legend,
label {
  display: block;
  margin: 0;
  padding: 0;
}

/* Remove all animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==============================
   BASE STYLES
   ============================== */
body {
  background-color: var(--page-bg);
  color: var(--text-color);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  font-size: 1rem; /* Base font size */
  line-height: var(--line-height-base);
}

/* Base typography - all will scale with viewport */
h1 {
  font-size: var(--text-4xl);
  line-height: 1.2;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--text-2xl);
  line-height: 1.3;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.4;
}

h5 {
  font-size: var(--text-lg);
  line-height: 1.4;
}

h6 {
  font-size: var(--text-base);
  line-height: 1.5;
}

p {
  font-size: 1rem;
  line-height: 1.5;
}

small {
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Form elements */
input,
button,
select,
textarea {
  font-size: 1rem;
  line-height: var(--line-height-base);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-primary-900);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-700);

  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-600);
}

::-webkit-scrollbar-thumb:active {
  background: var(--color-primary-500);
}

::-webkit-scrollbar-corner {
  background: var(--color-primary-500);
}

/* Dark mode image adjustment */
html.dark img {
  filter: brightness(0.85) contrast(0.95);
  transition: filter 0.3s ease;
}

/* ==============================
   COMPONENTS
   ============================== */
/* Navigation */
#mainNav {
  transition: var(--transition-smooth);
}

/* Page Header - Simplified */
.page-header {
  position: relative;
  padding: 1rem 0;
  margin-bottom: 2rem;
  font-weight: 700;
  color: var(--page-header-color);
  border-bottom: 2px solid var(--page-header-border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-header i,
.page-header svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  color: var(--page-header-accent-color);
}

/* Page Subheader */
.page-subheader {
  position: relative;
  padding: 0.6rem 0;
  margin-bottom: 1.25rem;
  margin-top: -0.5rem;
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--page-subheader-color);
  border-bottom: 1px solid var(--page-subheader-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  transition: var(--transition-smooth);
}

.page-subheader i,
.page-subheader svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: var(--page-subheader-accent-color);
  transition: var(--transition-smooth);
}

.page-subheader h2,
.page-subheader h3,
.page-subheader h4 {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Media queries for page header */
@media (max-width: 768px) {
  .page-header {
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
  }

  .page-header i,
  .page-header svg {
    font-size: 1.1em;
  }

  .page-subheader {
    padding: 0.4rem 0;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
    font-size: var(--text-lg);
  }

  .page-subheader i,
  .page-subheader svg {
    font-size: 0.9em;
  }
}

@media (max-width: 576px) {
  .page-header {
    padding: 0.5rem 0;
    margin-bottom: 1.25rem;
    font-size: var(--text-3xl);
    gap: 0.5rem;
  }

  .page-header i,
  .page-header svg {
    font-size: 1em;
  }

  .page-subheader {
    padding: 0.3rem 0;
    margin-bottom: 0.75rem;
    margin-top: -0.25rem;
    font-size: var(--text-base);
    gap: 0.3rem;
    border-bottom-width: 1px;
  }

  .page-subheader i,
  .page-subheader svg {
    font-size: 0.8em;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================
   Text Muted Dark Mode Enhancement
   ============================== */

/* Improve text-muted visibility in dark mode */
.text-muted {
  color: var(--color-gray-500) !important;
  transition: var(--transition-smooth);
}

html.dark .text-muted {
  color: var(--color-gray-400) !important;
}

/* Enhanced visibility for page descriptions */
.page-subheader .text-muted,
.page-header .text-muted {
  color: var(--color-gray-600) !important;
  font-weight: 450;
}

html.dark .page-subheader .text-muted,
html.dark .page-header .text-muted {
  color: var(--color-gray-300) !important;
}

/* Special styling for API documentation descriptions */
.page-subheader p.text-muted {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-top: 0.5rem;
}

html.dark .page-subheader p.text-muted {
  color: var(--color-gray-300) !important;
}

/* Add a subtle glow effect for better readability in dark mode */
html.dark .text-muted {
  text-shadow: 0 0 1px rgba(var(--color-gray-300-rgb), 0.3);
}

/*******************
*  Notice Component
********************/

.notice-container {
  background-color: rgba(var(--color-yellow-500-rgb), 0.1);
  border: 1px solid var(--color-yellow-400);
  border-radius: var(--card-border-radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.notice-container .notice-text {
  color: var(--color-yellow-700);
  font-weight: 500;
  margin-bottom: 0;
}

html.dark .notice-container .notice-text {
  color: var(--color-yellow-500);
}

@media (max-width: 768px) {
  .notice-container {
    padding: 0.75rem;
  }
}

/* Alternative Alert Info Component */
.alert-info-alt {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--alert-info-alt-border);
  border-radius: 0.375rem;
  background-color: var(--alert-info-alt-bg);
  color: var(--alert-info-alt-text);
  position: relative;
  word-wrap: break-word;
  transition: var(--transition-smooth);
}

.alert-info-alt.text-center {
  text-align: center;
}

.alert-info-alt.mb-3 {
  margin-bottom: 1rem;
}

.alert-info-alt::before {
  content: "ℹ️";
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1rem;
  color: var(--alert-info-alt-icon);
}

.alert-info-alt.text-center::before {
  margin-right: 0.25rem;
}

.alert-info-alt:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}

/* Minimal alternative */
.notice-minimal {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  background-color: var(--alert-info-alt-bg);
  color: var(--alert-info-alt-text);
  border-inline-start: 4px solid var(--alert-info-alt-icon);
  border-radius: 0 0.25rem 0.25rem 0;
  text-align: center;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.notice-minimal:hover {
  background-color: var(--pin-key-hover-bg);
  border-inline-start-width: 6px;
}

.custom-text-muted {
  color: var(--color-gray-500);
}

/* ==============================
   Notice Variants (Status Colors)
   ============================== */
/* Base structure already defined by .notice-container */
.notice-container.notice-success {
  background-color: rgba(var(--color-green-500-rgb), 0.1);
  border-color: var(--color-green-400);
}
.notice-container.notice-success .notice-text {
  color: var(--color-green-700);
}

.notice-container.notice-info {
  background-color: rgba(var(--color-primary-500-rgb), 0.1);
  border-color: var(--color-primary-400);
}
.notice-container.notice-info .notice-text {
  color: var(--color-primary-800);
}

.notice-container.notice-warning {
  background-color: rgba(var(--color-yellow-500-rgb), 0.12);
  border-color: var(--color-yellow-400);
}
.notice-container.notice-warning .notice-text {
  color: var(--color-yellow-700);
}

.notice-container.notice-danger,
.notice-container.notice-error {
  background-color: rgba(var(--color-red-500-rgb), 0.12);
  border-color: var(--color-red-400);
}
.notice-container.notice-danger .notice-text,
.notice-container.notice-error .notice-text {
  color: var(--color-red-700);
}

/* Semantic mapping */
.notice-container.notice-pending {
  /* awaiting review */
  background-color: rgba(var(--color-yellow-500-rgb), 0.1);
  border-color: var(--color-yellow-400);
}
.notice-container.notice-pending .notice-text {
  color: var(--color-yellow-700);
}

.notice-container.notice-approved {
  /* success synonym */
  background-color: rgba(var(--color-green-500-rgb), 0.1);
  border-color: var(--color-green-400);
}
.notice-container.notice-approved .notice-text {
  color: var(--color-green-700);
}

.notice-container.notice-rejected {
  /* error synonym */
  background-color: rgba(var(--color-red-500-rgb), 0.12);
  border-color: var(--color-red-400);
}
.notice-container.notice-rejected .notice-text {
  color: var(--color-red-700);
}

/* Muted / neutral */
.notice-container.notice-neutral {
  background-color: rgba(var(--color-gray-400-rgb), 0.12);
  border-color: var(--color-gray-300);
}
.notice-container.notice-neutral .notice-text {
  color: var(--color-gray-700);
}

/* Minimal inline note (lighter padding) */
.notice-note {
  background: rgba(var(--color-gray-200-rgb), 0.6);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.notice-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dark mode adjustments */
html.dark .notice-container.notice-success {
  background-color: rgba(var(--color-green-500-rgb), 0.15);
  border-color: var(--color-green-600);
}
html.dark .notice-container.notice-success .notice-text {
  color: var(--color-green-400);
}

html.dark .notice-container.notice-info {
  background-color: rgba(var(--color-primary-600-rgb), 0.2);
  border-color: var(--color-primary-600);
}
html.dark .notice-container.notice-info .notice-text {
  color: var(--color-primary-300);
}

html.dark .notice-container.notice-warning {
  background-color: rgba(var(--color-yellow-500-rgb), 0.18);
  border-color: var(--color-yellow-500);
}
html.dark .notice-container.notice-warning .notice-text {
  color: var(--color-yellow-300);
}

html.dark .notice-container.notice-danger,
html.dark .notice-container.notice-error {
  background-color: rgba(var(--color-red-600-rgb), 0.22);
  border-color: var(--color-red-600);
}
html.dark .notice-container.notice-danger .notice-text,
html.dark .notice-container.notice-error .notice-text {
  color: var(--color-red-300);
}

html.dark .notice-container.notice-pending {
  background-color: rgba(var(--color-yellow-600-rgb), 0.22);
  border-color: var(--color-yellow-600);
}
html.dark .notice-container.notice-pending .notice-text {
  color: var(--color-yellow-300);
}

html.dark .notice-container.notice-approved {
  background-color: rgba(var(--color-green-600-rgb), 0.22);
  border-color: var(--color-green-600);
}
html.dark .notice-container.notice-approved .notice-text {
  color: var(--color-green-300);
}

html.dark .notice-container.notice-rejected {
  background-color: rgba(var(--color-red-700-rgb), 0.25);
  border-color: var(--color-red-700);
}
html.dark .notice-container.notice-rejected .notice-text {
  color: var(--color-red-300);
}

html.dark .notice-container.notice-neutral {
  background-color: rgba(var(--color-gray-700-rgb), 0.4);
  border-color: var(--color-gray-600);
}
html.dark .notice-container.notice-neutral .notice-text {
  color: var(--color-gray-300);
}

html.dark .notice-note {
  background: rgba(var(--color-gray-800-rgb), 0.6);
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

/* Utility icon slot inside notice */
.notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 0.35rem;
}
.notice-icon svg {
  width: 18px;
  height: 18px;
}

/* Subtle enter animation */
.notice-container,
.notice-note {
  animation: fadeIn 0.35s ease;
}