:root {
   --app-title-color: #4f4f4f;
   --working-hours-color: #8cc654;
   --extended-working-hours-color: #e1bc29;
   --non-working-hours-color: #3a506b;
   --time-zone-label-color: #000;
   --footer-text-color: #666;
   --footer-background-color: #f8f8f8;
   --footer-separator-line-color: #ccc;
   --hover-idx: -1;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  padding: 10px 20px;
  line-height: 1.0;
}

/* Custom CSS below. */
main {
   width: 100%;
   margin: 0 auto;
   padding: 10px;
}

button {
   font-size: 16px;
}

button {
   background-color: #f8f8f8;
   border: 1px solid #ccc;
   padding: 6px 20px;
   border-radius: 6px;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease;
   margin-top: 0.75rem;
}

button:hover {
   background-color: #d5d5d5;
   border-color: #a9a9a9;
}

button:active {
   background-color: #c8c8c8;
   border-color: #999;
}

.app-title {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 0;
   padding: 0;
   color: var(--app-title-color);
}

.logo {
   display: block;
   height: auto;
   max-height: 60px;
}

.title-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.main-title {
   font-size: 2rem;
   line-height: 1.2;
}

.subtitle {
   font-size: 1.2rem;
}

.tz-dropdown-container label {
   margin-right: 0.8rem;
}

.tz-dropdown-container select {
   font-size: 1.5rem;
   margin-right: 1.25rem;
   margin-bottom: 0.75rem;
}

svg {
   width: 100%;
   max-width: 800px;
}

svg text {
   font-size: 8px;
   pointer-events: none;
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.svg-container {
   display: flex;
   flex-direction: column;
   align-items: right;
   gap: 15px;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 20px;
}

.hourSegment {
   transition: fill 0.5s, stroke 0.5s, opacity 0.5s;
   cursor: pointer;
   opacity: 1;
}

.hourSegment[data-hour="9"],
.hourSegment[data-hour="10"],
.hourSegment[data-hour="11"],
.hourSegment[data-hour="12"],
.hourSegment[data-hour="13"],
.hourSegment[data-hour="14"],
.hourSegment[data-hour="15"],
.hourSegment[data-hour="16"],
.hourSegment[data-hour="17"] {
   fill: var(--working-hours-color);
}

.hourSegment[data-hour="7"],
.hourSegment[data-hour="8"],
.hourSegment[data-hour="18"],
.hourSegment[data-hour="19"] {
   fill: var(--extended-working-hours-color);
}

.hourSegment[data-hour="0"],
.hourSegment[data-hour="1"],
.hourSegment[data-hour="2"],
.hourSegment[data-hour="3"],
.hourSegment[data-hour="4"],
.hourSegment[data-hour="5"],
.hourSegment[data-hour="6"],
.hourSegment[data-hour="20"],
.hourSegment[data-hour="21"],
.hourSegment[data-hour="22"],
.hourSegment[data-hour="23"] {
   fill: var(--non-working-hours-color);
}

.hourSegment--hover {
  opacity: 1;
  stroke: #ffffff;
  filter: 
    brightness(1.45)
    drop-shadow(0 0 6px rgba(255,255,255,0.9))
    drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  transition: 
    filter 0.18s ease-out,
    stroke-width 0.15s ease-out,
    opacity 0.15s ease-out;
}

.hourSegment--match {
  opacity: 1;
  filter: brightness(1.4);
}

.hourSegment--neighbor {
  opacity: 0.5;
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1px;
  filter: brightness(1.0);
  transition: opacity 0.15s ease-out, filter 0.15s ease-out;
}

#hoverTooltip {
   position: absolute;
   display: none;
   background: rgba(0,0,0,0.8);
   padding: 10px 14px;
   border-radius: 5px;
   color: #fff;
   pointer-events: none;
   font-size: 15px;
   white-space: nowrap;
   z-index: 9999;
   transform: translate(10px, 10px); /* offset from cursor */
}

.tooltip-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.tooltip-table .tooltip-zone {
    text-align: right;
    padding-right: 5px; 
}

.tooltip-table .tooltip-hour {
    text-align: left;
    padding-left: 5px; 
}

.tooltip-table tr td {
   padding-top: 5px;
   padding-bottom: 5px;
}

.zone-label {
   font-family: monospace;
   font-weight: bold;
   font-size: 8px;
   stroke: #f2f2f2;
   stroke-width: 1.25px;
   paint-order: stroke fill;
   fill: var(--time-zone-label-color);
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
}

.app-legend {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.legend-key {
   display: inline-flex;
   align-items: center;
   height: 100%; 
   margin-right: 10px;
}

.color-swatch {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 3px;
   margin-right: 5px;
   flex-shrink: 0;
}

.working-hours-key { background-color: var(--working-hours-color); }
.extended-working-hours-key { background-color: var(--extended-working-hours-color); }
.non-working-hours-key { background-color: var(--non-working-hours-color); }

.app-footer {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid var(--footer-separator-line-color);
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
    font-size: 0.9em;
    width: 100%;
}

.large-text-404 {
   font-size: 18px; 
   line-height: 1.6; 
}