/* FREVA uniq properties  */

/* ============================================================================
   Input & Textarea Styling for Freva Interface
   ----------------------------------------------------------------------------
   This style block targets input fields and textareas that use the class
   'freva-input', ensuring a consistent and clean design across all forms.
   This style is especially useful for token inputs, manual path entries, etc.
   ============================================================================ */
.freva-input {
    width: 100%;                       /* Take full width of parent container */
    max-width: 300px;                  /* But never grow beyond 300px for readability */
    margin-bottom: 10px;               /* Add spacing below for layout separation */
    padding: 8px;                      /* Add internal spacing for text comfort */
    border: 1px solid #ccc;            /* Subtle border for input field */
    border-radius: 6px;                /* Slight rounding for modern UI appearance */
    font-size: 16px;                   /* Readable font size for inputs */
    font-family: monospace;            /* Monospace font for consistent path/text feel */
}

/* -----------------------------------------------
   Radio Button Group Styling - Freva Interface
   ----------------------------------------------- */
.freva-radio-items {
    margin-bottom: 20px;               /* Add spacing below the radio group for layout separation */
}
.freva-radio-items .dash-radio-items label {
    display: block;                    /* Ensure each radio option appears on its own line */
    margin-bottom: 5px;                /* Add small spacing between each radio button label */
}

/* ----------------------------------------------------------
   Style for file upload box in Freva Manual Dataset Input UI

   This style defines the visual appearance of the dcc.Upload
   component used for JSON/CSV/TXT dataset path input.
   used only one time in manual_search.py
----------------------------------------------------------- */
.upload-box {
    border: 2px dashed #ccc;           /* Dashed border to indicate drag-and-drop area */
    padding: 1em;                      /* Padding for inner spacing */
    text-align: center;                /* Center-align text and file link */
    margin-bottom: 1em;                /* Space below before next element (textarea or buttons) */
    background-color: #f9f9f9;         /* Light gray background for clarity and separation */
    cursor: pointer;                   /* Pointer cursor to indicate clickability */
    border-radius: 10px;               /* Rounded corners for a modern look */
}
/* --------------------------------------------
   Style for the manual input Textarea component
   (used for pasting or loading dataset paths)
   used only one time in manual_search.py
--------------------------------------------- */
.manual-textarea {
    display: block;                     /* Allows margin auto centering */
    width: 100%;                        /* Full width within parent (like dropbox) */
    max-width: 770px;                   /* Match the max width of .upload-box */
    margin: 10px auto 20px auto;        /* Space above and below, centered horizontally */
    min-height: 75px;                   /* Minimum height for comfortable editing */
    padding: 12px;                      /* Inner spacing for text */
    background-color: #f8f9fa;          /* Light background consistent with UI */
    border: 1px solid #ced4da;          /* Soft border color */
    border-radius: 6px;                 /* Rounded corners like upload box */
    font-size: 0.95rem;                 /* Clear readable text */
    font-family: inherit;               /* Use global font */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Slight shadow for depth */
    resize: vertical;                   /* Only allow vertical resizing */
    transition: border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

/* Focus style for when user clicks into textarea */
.manual-textarea:focus {
    border-color: #66afe9;                        /* Light blue border on focus */
    outline: none;                                /* Remove default outline */
    box-shadow: 0 0 4px rgba(102, 175, 233, 0.6); /* Highlighted border glow */
}


/* --------------------------------------------
   Style block: .manual-status
   Description:
   This class styles the status message shown below the manual dataset input
   (e.g., after submitting or clearing paths). It improves spacing, emphasizes
   visibility through font weight, and sets a readable text color.
--------------------------------------------- */
.manual-status {
    margin-top: 15px;       /* Adds vertical spacing above the status message */
    font-weight: bold;      /* Makes the status text stand out */
    color: #333;            /* Sets a dark gray text color for readability */
}