/**
 * common.css
 * ------------------------------------------------------------
 * Global stylesheet shared across the application.
 *
 * Contains:
 * - Theme color variables (Bootstrap-based)
 * - Typography and font declarations
 * - Global font application
 * - Responsive breadcrumb styling
 * - Custom toast notification styling
 * - Animated error page styling
 * 
 *
 * This file provides common design tokens and reusable UI styles
 * that are used throughout the project.
 * ------------------------------------------------------------
 */

:root {
    /* Bootstrap primary color palette */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* Bootstrap grayscale palette */
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;

    /* RGB values for utility classes and opacity based styling */
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;

    /* Global application colors */
    --bs-border-color: #dee2e6;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
}

/* DM Sans - Variable font (normal style) */
@font-face {
    font-family: "DM Sans";
    src: url("../../fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

/* DM Sans - Variable font (italic style) */
@font-face {
    font-family: "DM Sans";
    src: url("../../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
}

/* Apply DM Sans as the default font across form controls and page content */
body,
button,
input,
textarea {
    font-family: 'DM Sans', sans-serif;
}

/* Responsive breadcrumb styling for mobile devices */
@media (max-width: 576px) {
    .breadcrumb {
        font-size: 14px;
    }

    .breadcrumb i {
        font-size: 14px;
    }
}

/* Toast notification container fixed to bottom right of the viewport */
.toast_container_custom {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    z-index: 1080;
}

/* Mobile-specific toast layout adjustments */
@media (max-width: 576px) {
    .toast_container_custom {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 0.5rem;
        align-items: center;
    }

    /* Ensure toast notifications fit comfortably on small screens */
    .toast_container_custom .toast {
        width: 96.5%;
        max-width: 420px;
    }
}

/* Animated error illustration with gentle floating effect */
.error_image {
    width: 100%;
    max-width: 320px;
    height: auto;
    animation: float-animation 3s ease-in-out infinite;
}

/* Vertical floating animation for error illustrations */
@keyframes float-animation {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}