/* The Grid Container */
.grid-center {
    display: grid;
    place-items: center;     /* Shorthand for justify-items: center and align-items: center */
    min-height: 100vh;       /* Makes the container take up the full viewport height */
}

/* Styling for the form itself */
.form {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 1rem;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    max-width: 400px; /* Constrain the form's width */
    width: 100%;      /* Make it responsive up to max-width */
}

.fade-in {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fade-in
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

a .icon-arrow-right {
    --icon-right-toggle-duration: .2s
}

a .icon-arrow-right g.head,a .icon-arrow-right path.line {
    transition-duration: var(--icon-right-toggle-duration);
    transition-property: transform;
    transition-timing-function: ease-in-out
}

a .icon-arrow-right g.head {
    transform: translate(0)
}

a .icon-arrow-right path.line {
    transform: translate(0) scaleX(0);
    transform-origin: 14px
}

a:hover .icon-arrow-right g.head {
    transform: translate(5px)
}

a:hover .icon-arrow-right path.line {
    transform: translate(5px) scaleX(1)
}

.center {
    text-align: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}

/* CSS to style and disable links */
a.disabled {
    color: #95a5a6;
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.7;
    pointer-events: none; /* Prevents all click actions */
    tabindex: -1;/* Prevents keyboard focus */
}

ul.nostyle > li{
    list-style-type: none;
}

.w-1\/2 {
    width: 50% !important;
}

.w-i3 {
    width: 3.5rem !important;
}

.w-95 {
    width: 95% !important;
}

.small {
    --pico-font-size: 0.875em !important;
}

.inline-block {
    display: inline-block ;
}

.rounded{
    border-radius: 0.5rem !important;
}
.rounded-xl{
    border-radius: 1rem !important;
}
.rounded-full {
    border-radius: 9999px;
}
.text-gray-900 {
    color: rgb(17 24 39) !important;
}
.bg-white {
     background-color: white !important;
 }
.bg-muted-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249/var(--tw-bg-opacity));
}
.text-muted-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity));
}
.lightslategray {
    color: lightslategray;
}
/*Text: #111827 (cool dark gray)*/
/*Muted: #6b7280 (cool medium gray)*/

label ,  label small{
    /*--pico-color-slate-750 */
    color: #333c4e;
    /* color: #2B2D42; Deep Slate Blue */
    /* color: var(--pico-primary); */
}
.bordered {
    border: thin solid lightgrey;
}
.dashlite {
    border: thin dashed lightslategrey;
}
/**
 * My Background Colors :
 */
.pink{
    color: #f7708e;
}
.violet{
    color: #5b2d9c;
}
.clearblue {
    color: #3498db;
}
.whitesmoke {
    background-color: whitesmoke;
}
.azure-100 {
    background-color: #d1e5fb;
}
.indigo {
    background-color: #f2f0f9;
}
.azure {
    background-color: #e9f2fc;
}
.sand {
    background-color: #f2f0ec;
}
.zinc {
    background-color: #f0f1f3;
}
.ghostwhite {
    background-color: ghostwhite;
}
.activa {
    /*background-color: #eff1f4;  light gray */
    background-color: #f3eff7;
    border-radius: 0.5rem;
    padding: 0.25rem;
}
.deleted {
    background: linear-gradient(to left bottom,#FFEBEE,ghostwhite);
}
.bg-del {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/*Three background color options: light red (#FFEBEE), light gray (#F5F5F5), and light amber (#FFF8E1)*/

/**
 * Pico Modifucations.
 */
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
    content: "";
}
nav[aria-label=breadcrumb] ul li abbr {
    margin-left: calc(var(--pico-nav-link-spacing-vertical));
}

/* Override Pico's nav styles with high specificity */
body nav[aria-label="numbered"] ol {
    list-style-type: decimal !important;
}
/* Ensure list items display correctly */
body nav[aria-label="numbered"] li {
    display: list-item !important;
    margin-right: 1.25rem !important;
}

table thead.azure {
    background-color: #FFEBEE !important;
}


/* Tablet (2 columns) */
@media (min-width: 768px) { /* Adjust breakpoint as needed for tablet size */
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (3 columns) */
@media (min-width: 1024px) { /* Adjust breakpoint as needed for desktop size */
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

}

/* This is the key style for responsive SVG */
.responsive {
    width: 100%;
    height: auto;
    display: block;
}

/* The dimming overlay class */
.loading {
    position: relative;
}

.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(100, 116, 139, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    /* Adds a subtle edge for more depth */
    border: 1px solid #ffffff2e; /* A barely-there white border */
    border-radius: 16px; /* Rounded corners enhance the modern effect */
    /* Optional shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    animation: pulse-overlay 3s ease-in-out infinite;
}

@keyframes pulse-overlay {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}



/*-------------------------------------------------------*/
/**
Use a tiny version of tailwindcss for myself.
*/
/*-------------------------------------------------------*/
.p-0 {
    padding: 0px !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-5 {
    padding: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.p-7 {
    padding: 1.75rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.p-9 {
    padding: 2.25rem !important;
}

.p-10 {
    padding: 2.5rem !important;
}

.px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.px-7 {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.px-9 {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
}

.px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}


.pt-0 {
    padding-top: 0px !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 0.75rem !important;
}

.pt-4 {
    padding-top: 1rem !important;
}

.pt-5 {
    padding-top: 1.25rem !important;
}

.pt-6 {
    padding-top: 1.5rem !important;
}

.pt-7 {
    padding-top: 1.75rem !important;
}

.pt-8 {
    padding-top: 2rem !important;
}

.pt-9 {
    padding-top: 2.25rem !important;
}

.pt-10 {
    padding-top: 2.5rem !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.float-none {
    float: none !important;
}

.m-0 {
    margin: 0px !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 0.75rem !important;
}

.m-4 {
    margin: 1rem !important;
}

.m-5 {
    margin: 1.25rem !important;
}

.m-6 {
    margin: 1.5rem !important;
}

.m-7 {
    margin: 1.75rem !important;
}

.m-8 {
    margin: 2rem !important;
}

.m-9 {
    margin: 2.25rem !important;
}

.m-10 {
    margin: 2.5rem !important;
}

.mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
}

.mx-4 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-5 {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
}

.mx-6 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-7 {
    margin-left: 1.75rem !important;
    margin-right: 1.75rem !important;
}

.mx-8 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.mx-9 {
    margin-left: 2.25rem !important;
    margin-right: 2.25rem !important;
}

.mx-10 {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 0.75rem !important;
}

.ml-4 {
    margin-left: 1rem !important;
}

.ml-5 {
    margin-left: 1.25rem !important;
}

.ml-6 {
    margin-left: 1.5rem !important;
}

.ml-7 {
    margin-left: 1.75rem !important;
}

.ml-8 {
    margin-left: 2rem !important;
}

.ml-9 {
    margin-left: 2.25rem !important;
}

.ml-10 {
    margin-left: 2.5rem !important;
}

/* Toast container */
 .toast-container {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: 12px;
     max-width: 90%;
     width: 400px;
 }

/* Individual toast */
.toast {
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease-out;
    transition: opacity 0.3s, transform 0.3s;
}

/* Toast types */
.toast.success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.toast.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.toast.warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.toast.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* Close button */
.toast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 15px;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    opacity: 1;
}

/* Toast content */
.toast-content {
    flex-grow: 1;
}

.toast-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.toast-message {
    margin: 0;
    line-height: 1.4;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast.hiding {
    opacity: 0;
    transform: translateY(50px);
}

/* Demo controls */
.demo-controls {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 20px;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--pico-color);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .toast-container {
        width: 90%;
    }

    .toast {
        padding: 14px 16px;
    }
}