/* Table */
.wriwoods-heatmap {
    border: none;
    border-spacing: 10px 2px; /* horizontal and vertical spacing */
    width: 100%;
    table-layout: fixed;
    text-align: center;
    font-family: sans-serif;
    line-height: 0; /* allow slimmer cells */
}

.wriwoods-heatmap th,
.wriwoods-heatmap td {
    padding: 2px;
    position: relative;
}

.wriwoods-heatmap thead th {
    background-color: none;
    padding: 4px 2px;
    border-radius: 4px;
    line-height: 24px;
}

/* Reduce row height */
.wriwoods-heatmap .hour-label {
    font-weight: 500;
    font-size: 0.9rem;
    width: 40px;
    padding: 0 2px;
    vertical-align: middle;
    background-color: none;
    border: none;
}

/* Heatmap cells */
.wriwoods-heatmap .heatmap-cell {
    height: 12px;
    border: none;    
    background-color: #f0f0f0;
    transition: background-color 0.3s;
    cursor: default;
    border-radius: 2px; /* slightly rounded */
}

/* Gradient colors based on data-count */
.wriwoods-heatmap .heatmap-cell[data-count="1"] { background-color: #d0f0d0; }
.wriwoods-heatmap .heatmap-cell[data-count="2"] { background-color: #a0e0a0; }
.wriwoods-heatmap .heatmap-cell[data-count="3"] { background-color: #70c070; color: white; }
.wriwoods-heatmap .heatmap-cell[data-count="4"] { background-color: #40a040; color: white; }
.wriwoods-heatmap .heatmap-cell[data-count="5"] { background-color: #208020; color: white; }

/* Tooltip */
/* Always exist but hidden */
.wriwoods-heatmap .heatmap-cell::after {
    content: attr(data-count) " available at " attr(data-hour);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    padding: 2px 6px;
    font-size: 12px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    line-height: 24px;
    opacity: 0;                       /* hidden by default */
    pointer-events: none;             /* so it doesn't block hover */
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s; /* fade + move with delay */
}

/* Show tooltip on hover */
.wriwoods-heatmap .heatmap-cell:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px); /* move slightly up */
}

/* Optional: visually separate each day column */
.wriwoods-heatmap th.day-header {
    border-radius: 4px;
    padding: 4px 2px;
    font-weight: 550;
    font-size: 1rem;
    padding-bottom: 10px;
}

/* Current time zone display above heatmap */
.wriwoods-heatmap-tz {
    font-family: sans-serif;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
    margin-bottom: 20px;
}

.wriwoods-heatmap-tz strong {
    font-weight: 600;
    color: #126b28; /* subtle blue highlight for timezone */
}

/* Info tooltip */
.wriwoods-tz-info {
    margin-left: 5px;
}

/* Timezone input */
#wriwoods-tz-select {
    margin-right: 10px;
}


/***************** AVAILABILITY FORM ******************/

.wriwoods-availability-form {
    margin-top: 40px;
}

.wriwoods-availability-grid {
    line-height: 12px;
}

.wriwoods-heatmap {
    border: none;
    border-spacing: 10px 2px; /* horizontal and vertical spacing */
    width: 100%;
    table-layout: fixed;
    text-align: center;
    font-family: sans-serif;
    line-height: 0; /* allow slimmer cells */
}

.wriwoods-availability-grid th,
.wriwoods-availability-grid td {
    width: 12.5%;
    height: 25px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
}

.wriwoods-availability-grid .availability-cell {
    background-color: #f0f0f0;
    border-radius: 2px;
    height: 12px;
    border: none;    
    background-color: #f0f0f0;
    transition: all 0.2s;
}

.wriwoods-availability-grid .availability-cell.selected {
    background-color: #40a040;
}

.wriwoods-availability-grid .availability-cell:hover {
    filter: brightness(0.9);
}

/* Make time appear inside cell on hover or when selected */

/* Make cells relative for pseudo-element */
.wriwoods-availability-grid .availability-cell {
    position: relative;
}

/* Pseudo-element for time */
.wriwoods-availability-grid .availability-cell::after {
    content: attr(data-time);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65em;          /* smaller font for longer times */
    color: #fff;
    white-space: nowrap;         /* prevent line breaks */
    text-align: center;
    padding: 0 2px;              /* small padding so it doesn't touch edges */
    border-radius: 2px;          /* optional: rounded background if added */
    background: rgba(0,0,0,0.5); /* optional: subtle background for readability */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Show on hover or when selected */
.wriwoods-availability-grid .availability-cell.selected::after,
.wriwoods-availability-grid .availability-cell:hover::after {
    opacity: 1;
}

/* Button */
.wriwoods-availability-form .button-wrap {
    text-align: center;
}
.wriwoods-availability-form button {
    margin: 0 10px;
}
.wriwoods-availability-form #save-availability {
    width: 50%;
}
.wriwoods-availability-form #clear-availability {
    background-color: #fff;
    border: solid 1px #000;
    color: #000;
}
.wriwoods-availability-form #clear-availability:hover {
    background-color: #f9f9f9;
    border: solid 1px #262626;
    color: #262626;
}


/* Mobile responsiveness */
@media (max-width: 768px) {
    .wriwoods-heatmap {
        border-spacing: 5px 2px; /* horizontal and vertical spacing */
    }

    /* Allow horizontal scrolling for heatmap and grid */
    .wriwoods-heatmap-wrapper,
    .wriwoods-availability-form {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smooth scrolling for iOS */
        width: 100%;
    }

    /* Reduce padding and font sizes */
    .wriwoods-heatmap th,
    .wriwoods-heatmap td,
    .wriwoods-availability-grid th,
    .wriwoods-availability-grid td {
        padding: 1px;
        font-size: 0.7rem;
    }

    /* Reduce hour label width */
    .wriwoods-heatmap .hour-label {
        width: 30px;
        font-size: 0.7rem;
    }

    /* Reduce heatmap cell height */
    .wriwoods-heatmap .heatmap-cell,
    .wriwoods-availability-grid .availability-cell {
        height: 10px;
    }

    /* Tooltip adjustments */
    .wriwoods-heatmap .heatmap-cell:hover::after {
        font-size: 10px;
        line-height: 16px;
        top: -20px;
    }

    /* Reduce pseudo-element font for availability cells */
    .wriwoods-availability-grid .availability-cell::after {
        font-size: 0.55em;
    }

    /* Day headers smaller */
    .wriwoods-heatmap th.day-header {
        font-size: 0.65rem;
        padding-bottom: 6px;
    }

    /* Buttons smaller and full width */
    .wriwoods-availability-form button,
    .wriwoods-availability-form #save-availability {
        margin: 5px 0;
        width: 100%;
    }

    /* Stack buttons vertically */
    .wriwoods-availability-form .button-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;              /* space between buttons */
        align-items: stretch;   /* make them full width */
    }

    .wriwoods-availability-form .button-wrap button {
        width: 100%;            /* full width buttons */
        margin: 0;              /* remove side margins */
    }

}

/* Optional: very small screens (phones) */
@media (max-width: 480px) {
    #wriwoods-tz-select {
        padding-right: 0;
        margin-bottom: 10px;
    }
    .wriwoods-heatmap .hour-label {
        width: 25px;
        font-size: 0.55rem;
    }

    .wriwoods-heatmap .heatmap-cell,
    .wriwoods-availability-grid .availability-cell {
        height: 8px;
    }

    .wriwoods-availability-grid th,
    .wriwoods-availability-grid td {
        width: 20px; /* smaller cells to fit */
    }

    .wriwoods-heatmap .heatmap-cell:hover::after,
    .wriwoods-availability-grid .availability-cell::after {
        font-size: 9px;
    }
}

/* Wrapper div */
.wriwoods-heatmap-wrapper {
    width: 100%;
}

/* Availability form */
/* Wrapper initial (closed) state */
#availability-form-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: 
        max-height 0.4s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Open state */
#availability-form-wrapper.is-open {
    max-height: 2000px; /* large enough to fit content */
    opacity: 1;
    transform: translateY(0);
}

/* Success message */
.wriwoods-availability-success {
    opacity: 0;
    visibility: visible;
    font-weight: bold;
    color: green;
    margin: 10px;
        opacity: 0;
    transition: 
        opacity 0.3s ease,
}

.wriwoods-availability-success.is-visible {
    opacity: 1;
    visibility: visible;
}

/** Zoom page message **/

/** Writing Woods Zoom page message **/
.wriwoods-group-hours-notice {
    padding: 16px 20px;                     /* a bit more breathing room */
    background: #f0f8f5;                    /* soft, woodland-like off-white/green */
    border-left: 5px solid #6aa84f;         /* muted green instead of yellow */
    border-radius: 10px;                     /* gentle rounded corners */
    margin-bottom: 20px;
    font-family:Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* subtle depth */
}

.wriwoods-group-hours-notice p {
    color: #2e2e2e;                         /* soft dark gray for readability */
    margin:0;
    font-size:14px;
    color:#333;
}

.wriwoods-group-hours-notice .clock-icon {
    font-size: 20px;
    color: #2e2e2e; 
}

.wriwoods-group-hours-notice a {
    color: #3c8d2f;                         /* forest green for links */
    text-decoration: underline;
    font-weight: 600;                        /* slightly bolder link to stand out */
}

/* Optional: add subtle hover effect on link */
.wriwoods-group-hours-notice a:hover {
    color: #6aa84f;
    text-decoration: none;
    transition: color 0.2s ease;
}