/* ================================================================
   HA Calendar Suite – Shared Styles
   ================================================================ */

.ha-wrap {
    max-width: 1290px;
    margin: 0 auto;
    font: 13px/22px Helvetica, Arial, sans-serif;
}
.ha-wrap h1 { font-size: 26px; margin-bottom: 12px; }
.ha-wrap h2 { font-size: 22px; }
.ha-wrap h3 { font-size: 16px; padding: 8px 0; }
.ha-center  { text-align: center; }
.ha-topalign { vertical-align: top; }
.ha-hidden  { display: none; }

.ha-db-error {
    background: #fdd; border: 1px solid #c00; padding: 12px; border-radius: 6px; color: #900;
}

/* ── Mini calendar nav ─────────────────────────────────────── */
.ha-nav-row {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.ha-mini-cal {
    border: 2px solid #999; border-radius: 10px; overflow: hidden; min-width: 185px;
}
.ha-mini-nav {
    display: flex; justify-content: space-between;
    background: #999; padding: 4px 6px;
}
.ha-nav-btn  { color: #fff; text-decoration: none; font-weight: bold; font-size: 12px; }
.ha-nav-btn:hover { text-decoration: underline; color: #fff; }
.ha-nav-blank, .ha-nav-right { visibility: hidden; }
.ha-nav-right { text-align: right; visibility: visible; }
.ha-mini-table { width: 100%; border-collapse: collapse; }
.ha-mini-table th, .ha-mini-table td { text-align: center; padding: 2px 3px; font-size: 12px; }
.ha-mini-month { background: #999; color: #fff; font-weight: bold; padding: 4px; }
.ha-mini-table thead tr:nth-child(2) th { background: #999; color: #fff; }
.ha-mini-table td a { color: #333; text-decoration: none; }
.ha-mini-table td a:hover { text-decoration: underline; }
td.ha-today { background: #ff0; font-weight: bold; }

/* ── Shared table styles ───────────────────────────────────── */
.ha-inner-table, .ha-survey-table, .ha-pto-grid, .ha-pto-sidebar-table, .ha-info-table {
    border-collapse: collapse; width: 100%;
}
.ha-inner-table th, .ha-inner-table td,
.ha-survey-table th, .ha-survey-table td {
    border: 2px solid #999; padding: 5px; vertical-align: middle;
}
.ha-inner-table thead th, .ha-survey-table thead th {
    background: #999; color: #fff; text-align: center;
}
.ha-inner-header {
    background: #f0f0f0; text-align: center; font-weight: bold; padding: 6px;
    border: 2px solid #999;
}
.ha-section { border: 2px solid #999; border-radius: 10px; padding: 10px; margin-bottom: 20px; overflow-x: auto; }
.ha-section-title { background: #f0f0f0; text-align: center; font-size: 16px; font-weight: bold; }
.ha-subheader th { background: #ccc; font-size: 11px; }

/* ── Inline editable cells ─────────────────────────────────── */
.ha-cell, .ha-cell-new {
    min-width: 70px; min-height: 16px; cursor: pointer;
    padding: 2px 4px; border-radius: 3px;
    transition: background 0.12s;
}
.ha-cell:hover, .ha-cell-new:hover { background: #fffbcc; outline: 1px dashed #bbb; }
.ha-cell input, .ha-cell-new input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #999; padding: 2px; font: inherit;
}

/* ── Weekend rows ──────────────────────────────────────────── */
.ha-weekend td, .ha-weekend     { background: tan !important; }
.ha-weekend-header              { background: #d2b48c !important; }

/* ── PTO column in survey ──────────────────────────────────── */
.ha-pto-col { font-size: 11px; color: #c00; font-weight: bold; min-width: 55px; }

/* ── Sign-In page: PTO sidebar ─────────────────────────────── */
#ha-pto-sidebar {
    float: right; width: 260px; margin-left: 16px;
    border: 2px solid #999; border-radius: 10px; padding: 10px;
    background: #fff;
}
#ha-pto-sidebar h2 { font-size: 20px; margin: 0 0 8px; }
.ha-pto-sidebar-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ha-pto-sidebar-table th,
.ha-pto-sidebar-table td { border: 1px solid #ccc; padding: 3px 6px; text-align: center; }
.ha-pto-sidebar-table th { background: #999; color: #fff; }

/* ── Sign-In: office block ─────────────────────────────────── */
.ha-office-block { margin-bottom: 20px; }
.ha-maintable { width: 100%; border: 2px solid #999; border-radius: 10px; border-collapse: collapse; }
.ha-maintable td, .ha-maintable th { padding: 6px; }
.ha-office-title { text-align: center; background: #f0f0f0; border-radius: 10px 10px 0 0; }

/* ── Info / notes box ──────────────────────────────────────── */
.ha-info-box { margin-bottom: 16px; overflow: hidden; }
.ha-info-table { width: 510px; border: 2px solid #999; border-radius: 10px; border-collapse: collapse; }
.ha-info-table td { border: 1px solid #ccc; padding: 6px; font-size: 12px; }

/* ── PTO.php: 5-week grid ──────────────────────────────────── */
#ha-pto-wrap { max-width: 1240px; }
.ha-pto-grid-wrap { overflow-x: auto; margin-bottom: 16px; }
.ha-pto-grid { border-collapse: collapse; font-size: 11px; }
.ha-pto-grid th, .ha-pto-grid td {
    border: 1px solid #ccc; padding: 3px 5px; text-align: center; white-space: nowrap;
}
.ha-pto-grid thead th { background: #999; color: #fff; }
.ha-dow { font-weight: normal; font-size: 10px; }
.ha-pto-name { text-align: left; white-space: nowrap; font-weight: bold; min-width: 130px; }
.ha-pto-day  { width: 24px; }
.ha-pto-taken   { background: red !important; }
.ha-pto-legend  { font-size: 12px; margin-top: 8px; }
.ha-legend-pto  { display: inline-block; background: red; width: 18px; height: 12px; vertical-align: middle; }
.ha-legend-wkend{ display: inline-block; background: tan; width: 18px; height: 12px; vertical-align: middle; }