/* ==============================
   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;

    /* 🎨 Blue colors */
    --color-blue-50: #eff6ff;
    --color-blue-50-rgb: 239, 246, 255;
    --color-blue-100: #dbeafe;
    --color-blue-100-rgb: 219, 234, 254;
    --color-blue-200: #bfdbfe;
    --color-blue-200-rgb: 191, 219, 254;
    --color-blue-300: #93c5fd;
    --color-blue-300-rgb: 147, 197, 253;
    --color-blue-400: #60a5fa;
    --color-blue-400-rgb: 96, 165, 250;
    --color-blue-500: #3b82f6;
    --color-blue-500-rgb: 59, 130, 246;
    --color-blue-600: #2563eb;
    --color-blue-600-rgb: 37, 99, 235;
    --color-blue-700: #1d4ed8;
    --color-blue-700-rgb: 29, 78, 216;
    --color-blue-800: #1e40af;
    --color-blue-800-rgb: 30, 64, 175;
    --color-blue-900: #1e3a8a;
    --color-blue-900-rgb: 30, 58, 138;
    --color-blue-950: #172554;
    --color-blue-950-rgb: 23, 37, 84;

    /* 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 styles moved to separate files:
   - page-header-default.css (for Syria/SW)
   - page-header-modern.css (for Mega/Kaiali)
   Loaded conditionally based on header_style config */

@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;
}