/* WellsEstatesStyles.css
   Site-wide styles for the Wells Estate site
*/

:root
{
    --page-max-width: 1100px;
    --page-padding: 16px;

    --bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;

    --border: #d1d5db;
    --border-soft: #e5e7eb;

    --header-bg: #f3f4f6;
    --row-alt: #fafafa;
    --row-hover: #f7fbff;

    --accent: #2563eb;
    --danger-bg: #fff5f5;
    --danger-border: #fecaca;
    --danger-text: #991b1b;
}

/* Page basics */
html,
body
{
    height: 100%;
}

body
{
    margin: 0;
    padding: var(--page-padding);
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.35;
}

#LogoImg
{
   height: 150px;
   width: auto;
   display: block;
}

#TopDiv
{
   width: 100%;
   display: flex;
   align-items: center;
   gap: 16px;
}


/* Keep content readable on wide screens */
body > *
{
    max-width: var(--page-max-width);
}

h2
{
    margin: 10px 0 14px 0;
    font-size: 1.55rem;
}

h4
{
    margin: 0 0 8px 0;
    font-weight: 600;
}

a
{
    color: var(--accent);
    text-decoration: none;
}

a:hover,
a:focus
{
    text-decoration: underline;
}

/* Error box (used by DisplayVolunteerHours.php) */
.vh-error
{
    border: 1px solid var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 10px 12px;
    border-radius: 10px;
    margin: 10px 0 14px 0;
}

/* Volunteer hours table */
.vh-table-wrap
{
    width: 100%;
    overflow-x: auto; /* makes table usable on phones */
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vh-table
{
    width: 100%;
    border-collapse: collapse;
    min-width: 760px; /* allows scrolling on small screens */
}

.vh-table thead th
{
    position: sticky;
    top: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

.vh-table tbody td
{
    border-top: 1px solid var(--border-soft);
    padding: 10px 12px;
    vertical-align: top;
}

.vh-table tbody tr:nth-child(even)
{
    background: var(--row-alt);
}

.vh-table tbody tr:hover
{
    background: var(--row-hover);
}

/* Column-specific dummy classes (adjust widths to taste) */
.vh-col-date
{
    width: 10%;
}

.vh-col-name
{
    width: 15%;
}

.vh-col-task
{
    width: 30%;
}

.vh-col-hours
{
    width: 8%;
    text-align: right;
    white-space: nowrap;
}

.vh-col-start,
.vh-col-end
{
    width: 12%;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
}
.vh-col-comment
{
    width: 13%;
}


/* Make the Time columns align nicely */
.vh-col-start,
.vh-col-end
{
    text-align: left;
}

/* Slightly reduce padding on very small screens */
@media (max-width: 480px)
{
    body
    {
        padding: 12px;
    }

    .vh-table thead th,
    .vh-table tbody td
    {
        padding: 9px 10px;
    }
}