/**
 * @file styles.css
 * @filepath css/styles.css
 * @version 1.1.0
 * @updated 2025-09-06 01:15:00 PM CDT
 * @author Original Author
 * @company MissionWares®
 * 
 * @description Contains the base styles for the application.
 * 
 * This file includes styles for resetting default browser styles, 
 * ensuring the canvas element is displayed correctly, and other 
 * global styles used throughout the application.
 * 
 * @changeLog:
 * Date        Author          Version  Description
 * ----------  --------------  -------  --------------------------
 * 2025-09-06  Assistant       1.1.0    Changed to space-themed black background
 *                                      Added starfield effect and glow enhancements
 */

/* Reset margin and padding for body and html elements, 
   set overflow to hidden to prevent scrollbars, 
   and ensure they take up the full width and height of the viewport */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Ensure the canvas element is displayed as a block-level element */
canvas {
    display: block;
}

/* Set the font family and space-themed background for the body */
body {
    font-family: Arial, sans-serif;
    background-color: #000000;  /* Pure black for space */
    
    /* Optional: Add a subtle gradient for depth */
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
    
    /* Optional: Add stars effect using multiple backgrounds */
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 30% 80%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    
    /* Subtle animation for twinkling stars (optional) */
    animation: twinkle 200s ease-in-out infinite;
}

/* Subtle star twinkle animation */
@keyframes twinkle {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* Actor Studio specific styles - update for dark theme */
table {
    color: #ffffff;  /* White text for visibility */
    background-color: rgba(20, 20, 40, 0.8);  /* Dark blue-ish background */
}

th {
    background-color: rgba(40, 40, 80, 0.9) !important;  /* Darker header */
    color: #ffffff;
    border-color: #444;
}

td {
    border-color: #444;
    color: #ffffff;
}

.mini-stage {
    background-color: #111 !important;  /* Dark mini stages */
    border: 1px solid #333;
}

.studio-hint {
    color: #aaa !important;  /* Lighter gray for hints */
}

/* Input fields in Actor Studio */
input[type="text"], 
input[type="number"],
.calibration-input {
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
}

/* Make version and device type visible */
#version, #deviceType {
    color: #0f0;  /* Classic terminal green */
}

/* Optional: Add glow effect to important elements */
h1 {
    color: #fff;
    text-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
}

/* Debug elements visibility enhancement */
.debug-info {
    color: #0f0;  /* Terminal green for debug info */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}