/* style.css - Styles for our D3.js circles */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #1a1a1a;
    color: #e0e0e0;
    cursor: crosshair;
}

#container {
    background: #2d2d2d;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    max-width: 900px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #5fa73b;
    margin-bottom: 30px;
}

hr {
    border: none;
    border-top: 1px solid #555;
    margin: 10px 0;
}

.nav-link {
    display: inline-block;
    margin: 10px 0;
    color: #1973bb;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    width: 100%;
}

.nav-link:hover {
    color: #1973bb;
}

a:visited {
    color: #1973bb;
}

a:visited:hover {
    color: #1973bb;
}

#chart {
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #1e1e1e;
    display: block;
    margin: 0 auto;
}

/* Time ring styles */
.time-ring {
    stroke: #555;
    opacity: 0.6;
    stroke-width: 1;
}

/* Center dot */
.center-dot {
    fill: #1e1e1e;
    stroke: none;
    opacity: 0.0;
}

/* Optional grid lines */
.radial-grid-line,
.radial-grid-circle {
   pointer-events: none; /* don't interfere with mouse events */
}

/* Pulse styles - smaller circles without borders */
.pulse-iamb {
    fill: #ff7f00;           /* Orange for iamb */
    stroke: none;            /* No border */
    opacity: 0.8;
}

.pulse-trochee {
    fill: #2196f3;           /* Blue for trochee */
    stroke: none;            /* No border */
    opacity: 0.8;
}

.pulse-amphibrach {
    fill: #e85ff8;           /* Purple for amphibrach */
    stroke: none;            /* No border */
    opacity: 0.8;
}

/* Ring labels */
.ring-label {
    fill: #ccc;
    font-size: 11px;
    font-weight: normal;
    pointer-events: none;
}

/* Keep the original orange circle styles for reference */
.orange-circle {
    fill: #ff7f00;
    stroke: #e55100;
    stroke-width: 2px;
    cursor: crosshair;
    opacity: 1;
    transition: all 0.2s ease;
}

.orange-circle:hover {
    fill: #ff9800;
    stroke: #d84315;
    stroke-width: 3px;
}

.metric-label {
    fill: #ccc;
    font-size: 12px;
    font-weight: normal;
    pointer-events: none;
}

/* UI Elements */

.hover-label {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    font-weight: lighter !important;
    fill: #00e676 !important;  /* Bright green */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    pointer-events: none;  /* Prevent mouse interference */
}

label[for="showGrid"],
label[for="showRipple"],
label[for="ring0Scale"],
label[for="ring1Scale"],
label[for="thresholdInput"],
label[for="lengthSlider"],
label[for="spacingSlider"] {
    font-weight: 800;
    color: #e85ff8;
    text-shadow: 1px 1px 2px rgba(30, 30, 30, 0.12);
    font-size: 12px;
}

#lengthValue,
#spacingValue {
    background: rgb(45, 45, 45);
    padding: 2px 6px;
    border-radius: 4px;
    color: #00fce7;
    border: 1px solid #555;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: bold;
    min-width: 30px;
    display: inline-block;
    text-align: center;
}

/* Remove default styling first */
#lengthSlider, #spacingSlider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #1e1e1e;
    outline: none;
    border-radius: 2px;
}

/* Webkit browsers (Chrome, Safari) */
#lengthSlider::-webkit-slider-thumb,
#spacingSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ff7f00 !important;
    cursor: crosshair !important;
    border: 3px solid #2196f3 !important;
    box-shadow: 0 2px 4px rgb(232, 95, 248) !important;
}

/* Firefox */
#lengthSlider::-moz-range-thumb,
#spacingSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ff7f00 !important;
    cursor: crosshair !important;
    border: 3px solid #2196f3 !important;
    box-shadow: 0 2px 4px rgb(232, 95, 248) !important;
}

/* Threshold control styling */

.threshold-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.threshold-control button {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 2px 6px;
    cursor: crosshair;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.threshold-control button:hover {
    background-color: #4a4a4a;
    border-color: #777;
}

.threshold-control button:active {
    background-color: #2a2a2a;
}

.threshold-control input[type="number"] {
    background-color: #2d2d2d;
    color: #00fce7;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 2px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.threshold-control input[type="number"]:focus {
    outline: none;
    border-color: #888;
    background-color: #3a3a3a;
}

/* Hide number input spinner arrows */
.threshold-control input[type="number"]::-webkit-inner-spin-button,
.threshold-control input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.threshold-control input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Pulse control styling */
.pulse-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pulse-control label {
    font-size: 24px;
    transition: all 0.3s ease;
    cursor: help;
    color: inherit;
}

.pulse-control label.active {
    opacity: 1.0 !important;
    text-shadow: 0 0 10px currentColor !important;
    /* transform: scale(1.2) !important; */
}

/* Special styling for pulse tooltips */
.pulse-control label[data-title]::after {
    /* Override positioning - put in top-right corner */
    position: fixed;
    top: auto;
    right: 0px;
    left: auto;
    bottom: 0px;
    transform: none;

    /* Make it bigger */
    padding: 12px 16px;
    font-size: 14px;
    max-width: 350px;
    white-space: normal;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;

    /* Force full opacity regardless of parent */
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 4px;
    opacity: 0 !important;  /* Add !important to override inheritance */
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
    margin-bottom: 0;
}

.pulse-control label[data-title]:hover::after {
    opacity: 1 !important;  /* Add !important here too */
}

/* Set dim colors for each pulse type */
#iambPulse { color: rgba(255, 127, 0, 0.4); }  /* 30% opacity */
#trocheePulse { color: rgba(33, 150, 243, 0.4); }  /* 30% opacity */
#amphibrachPulse { color: rgba(232, 95, 248, 0.4); }  /* 30% opacity */
#anapestPulse { color: rgba(255, 204, 0, 0.4); }  /* 30% opacity */
#dactylPulse { color: rgba(19, 191, 212, 0.4); }  /* 30% opacity */

/* Bright colors when active */
.pulse-control label.active#iambPulse { color: #ff7f00 !important; }
.pulse-control label.active#trocheePulse { color: #2196f3 !important; }
.pulse-control label.active#amphibrachPulse { color: #e85ff8 !important; }
.pulse-control label.active#anapestPulse { color: #ffcc00 !important; }
.pulse-control label.active#dactylPulse { color: #13bfd4 !important; }

/* Generic tooltip for any element with data-title */
[data-title] {
    position: relative;
    cursor: help;
}

[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 8px;
    z-index: 1000;
}

[data-title]:hover::after {
    opacity: 1;
}

/* Introductory Message */
.intro-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 250px;
    z-index: 1000;
    opacity: 0;  /* Start invisible */
    transition: opacity 3s ease;
}

.intro-tooltip.visible {
    opacity: 1;  /* Fade to visible */
}

.intro-tooltip.hidden {
    opacity: 0;
    pointer-events: none;
}