/* ============================================================
   Parish Cemetery Manager – Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --pcm-stone:       #8d9a7b;
    --pcm-earth:       #c4a882;
    --pcm-grass:       #4a6741;
    --pcm-grass-lt:    #6a8e5e;
    --pcm-grass-pale:  #dde8d8;
    --pcm-path-dark:   #5c5347;
    --pcm-path-mid:    #7d7265;
    --pcm-path-lt:     #b0a898;
    --pcm-sky:         #eef2f7;
    --pcm-ink:         #2c3e35;
    --pcm-gold:        #c9a84c;
    --pcm-gold-lt:     #e8d49a;
    --pcm-red:         #c0392b;
    --pcm-orange:      #d4681a;
    --pcm-yellow:      #c8a800;
    --pcm-green-pit:   #2e7d4f;
    --pcm-border:      rgba(0,0,0,.1);
}

.pcm-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--pcm-ink);
}

/* ══════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════ */
.pcm-stats-grid { display:flex; gap:16px; flex-wrap:wrap; margin:20px 0; }
.pcm-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 28px;
    text-align: center;
    min-width: 140px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}
.pcm-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pcm-grass), var(--pcm-grass-lt));
}
.pcm-stat-num   { display:block; font-size:2.4rem; font-weight:700; color:var(--pcm-ink); }
.pcm-stat-label { font-size:.75rem; color:#666; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; display:block; }
.pcm-stat-available .pcm-stat-num { color: var(--pcm-grass); }

.pcm-last-entry {
    background: #fff;
    border-left: 4px solid var(--pcm-gold);
    padding: 14px 18px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    max-width: 600px;
}
.pcm-last-entry h2 { margin-top:0; font-size:1rem; color: var(--pcm-grass); }
.pcm-card { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:18px 22px; box-shadow:0 1px 4px rgba(0,0,0,.06); }

/* ══════════════════════════════════════════════
   LEGEND
══════════════════════════════════════════════ */
.pcm-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    font-size: .82rem;
    background: linear-gradient(135deg, #f9f7f4, #f0ede8);
    border: 1px solid #e0d8ce;
    border-radius: 8px;
    padding: 10px 16px;
}
.pcm-legend-item { display:flex; align-items:center; gap:6px; }
.pcm-dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15);
}
.pcm-dot.red         { background: linear-gradient(145deg,#e85d52,#c0392b); }
.pcm-dot.orange      { background: linear-gradient(145deg,#f0874a,#d4681a); }
.pcm-dot.yellow      { background: linear-gradient(145deg,#f0c830,#c8a800); }
.pcm-dot.green       { background: linear-gradient(145deg,#4ca870,#2e7d4f); }
.pcm-dot.empty       { background: linear-gradient(145deg,#e8e4df,#ccc8c2); }
.pcm-dot.unavailable { background: linear-gradient(145deg,#5a5a5a,#2e2e2e); }

/* ══════════════════════════════════════════════
   MAP WRAPPER – outdoor ambiance
══════════════════════════════════════════════ */
#pcm-map-container {
    overflow-x: auto;
    padding: 28px 20px 32px;
    background:
        /* subtle grass texture using radial gradients */
        radial-gradient(ellipse at 20% 50%, rgba(74,103,65,.07) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(74,103,65,.05) 0%, transparent 50%),
        linear-gradient(175deg, #e8f0e4 0%, #dfe9da 40%, #d8e4d2 100%);
    border-radius: 14px;
    border: 2px solid #b8ccb0;
    box-shadow:
        0 4px 24px rgba(74,103,65,.18),
        inset 0 1px 0 rgba(255,255,255,.6),
        inset 0 -2px 8px rgba(0,0,0,.06);
    position: relative;
}

/* Decorative gate header */
#pcm-map-container::before {
    content: '✝  Parish Cemetery  ✝';
    display: block;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pcm-path-dark);
    letter-spacing: .18em;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(92,83,71,.2);
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* ══════════════════════════════════════════════
   CEMETERY TABLE LAYOUT
══════════════════════════════════════════════ */
.pcm-cemetery {
    display: table;
    margin: 0 auto;
    border-spacing: 0 6px;
}

.pcm-row-wrap { display: table-row; }

.pcm-row-label-cell,
.pcm-pits-left-cell,
.pcm-path-cell,
.pcm-pits-right-cell,
.pcm-rate-cell {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

/* Row label */
.pcm-row-label-cell {
    padding-right: 12px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: .75rem;
    color: var(--pcm-path-dark);
    text-align: right;
    min-width: 56px;
    letter-spacing: .06em;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* Left cell – width injected by JS */
.pcm-pits-left-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    padding-right: 0;
    overflow: visible;
}
.pcm-pits-inner-left {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    justify-content: flex-start;
    width: 100%;
}

/* Right cell – width injected by JS */
.pcm-pits-right-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding-left: 0;
    overflow: visible;
}
.pcm-pits-inner-right {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: flex-start;
    width: 100%;
}

/* ── PATH column – the continuous stone walkway ── */
.pcm-path-cell {
    width: 36px;
    min-width: 36px;
    text-align: center;
    font-size: .48rem;
    letter-spacing: .08em;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    color: rgba(255,255,255,.75);
    padding: 0;
    /* stone path texture */
    background:
        linear-gradient(180deg,
            var(--pcm-path-dark)  0%,
            var(--pcm-path-mid)   30%,
            var(--pcm-path-lt)    50%,
            var(--pcm-path-mid)   70%,
            var(--pcm-path-dark)  100%);
    box-shadow:
        inset 2px 0 4px rgba(0,0,0,.25),
        inset -2px 0 4px rgba(0,0,0,.25),
        2px 0 6px rgba(0,0,0,.12),
        -2px 0 6px rgba(0,0,0,.12);
}

/* Rate label */
.pcm-rate-cell {
    padding-left: 12px;
    font-size: .72rem;
    color: var(--pcm-path-dark);
    font-weight: 600;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* ══════════════════════════════════════════════
   PIT BUTTONS
══════════════════════════════════════════════ */
.pcm-pit {
    width: 40px; height: 40px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: .66rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #fff;
    transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    padding: 0;
    /* shared 3-D relief */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -2px 0 rgba(0,0,0,.22),
        0 2px 4px rgba(0,0,0,.22),
        0 1px 2px rgba(0,0,0,.14);
}

.pcm-pit::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 55%);
    pointer-events: none;
}

.pcm-pit:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -2px 0 rgba(0,0,0,.22),
        0 6px 16px rgba(0,0,0,.28),
        0 2px 4px rgba(0,0,0,.18);
    z-index: 10;
    filter: brightness(1.08);
}

.pcm-pit:active { transform: translateY(0) scale(1.02); }

/* Colour variants */
.pcm-pit.color-red {
    background: linear-gradient(145deg, #e85d52, #c0392b);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.pcm-pit.color-orange {
    background: linear-gradient(145deg, #f0874a, #d4681a);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pcm-pit.color-yellow {
    background: linear-gradient(145deg, #f0d040, #c8a800);
    color: #5a3d00;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.pcm-pit.color-green {
    background: linear-gradient(145deg, #4ca870, #2e7d4f);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pcm-pit.color-empty {
    background: linear-gradient(145deg, #ddd9d3, #c4bfb8);
    color: #7a7570;
    text-shadow: none;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.12),
        inset 0 -1px 0 rgba(255,255,255,.5),
        0 1px 3px rgba(0,0,0,.12);
    cursor: pointer;
}
.pcm-pit.color-unavailable {
    background: linear-gradient(145deg, #555, #2e2e2e);
    color: #888;
    text-shadow: none;
    cursor: not-allowed;
    filter: grayscale(.3);
}

/* Special-group pit: subtle purple glow ring */
.pcm-pit.is-special::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 8px;
    border: 2px solid rgba(140,80,200,.7);
    pointer-events: none;
    box-shadow: 0 0 6px rgba(140,80,200,.4);
}

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
#pcm-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(30,40,30,.65);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
#pcm-modal {
    background: #fff;
    border-radius: 14px;
    width: 92%; max-width: 640px; max-height: 90vh;
    overflow-y: auto;
    padding: 28px 28px 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
    border-top: 4px solid var(--pcm-gold);
}
.pcm-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: #f5f5f5; border: 1px solid #e0e0e0;
    border-radius: 50%; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; color: #555; line-height: 1;
    transition: background .15s;
}
.pcm-modal-close:hover { background: #e0e0e0; }

#modal-title {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--pcm-ink);
    letter-spacing: .04em;
}

/* Toast */
#pcm-modal-toast {
    display: none; margin: 0 0 14px;
    padding: 9px 14px; border-radius: 7px; font-size: .88rem; font-weight: 600;
}
#pcm-modal-toast.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
#pcm-modal-toast.error   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* Tabs */
#modal-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid #eee; margin-bottom:16px; }
.pcm-tab {
    background: none; border: none; border-bottom: 3px solid transparent;
    padding: 7px 14px; cursor: pointer; font-size: .84rem;
    color: #777; margin-bottom: -2px; border-radius: 4px 4px 0 0;
    transition: color .15s, background .15s;
}
.pcm-tab:hover { color: var(--pcm-ink); background: #f5f5f5; }
.pcm-tab.active { border-bottom-color: var(--pcm-gold); color: var(--pcm-ink); font-weight: 600; }

.pcm-tab-panel { animation: pcmFade .2s ease; }
@keyframes pcmFade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

/* Info table */
.pcm-info-table { width:100%; border-collapse:collapse; }
.pcm-info-table th,
.pcm-info-table td { padding:8px 10px; text-align:left; border-bottom:1px solid #f0f0f0; font-size:.87rem; }
.pcm-info-table th { color:#888; width:36%; font-weight:600; background:#fafafa; }
.pcm-info-table tr:last-child th,
.pcm-info-table tr:last-child td { border-bottom: none; }

/* Burial form */
.pcm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.pcm-form-grid .full { grid-column:1/-1; }
.pcm-form-group label { display:block; font-size:.78rem; color:#666; margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pcm-form-group input,
.pcm-form-group select,
.pcm-form-group textarea {
    width:100%; padding:8px 10px;
    border:1px solid #d0d0d0; border-radius:6px;
    font-size:.88rem; box-sizing:border-box;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.pcm-form-group input:focus,
.pcm-form-group select:focus,
.pcm-form-group textarea:focus {
    outline: none;
    border-color: var(--pcm-grass);
    box-shadow: 0 0 0 3px rgba(74,103,65,.15);
}
.pcm-form-group textarea { resize:vertical; min-height:64px; }

.pcm-btn {
    background: linear-gradient(145deg, #4a7a3a, var(--pcm-grass));
    color: #fff; border: none; border-radius: 6px;
    padding: 9px 22px; cursor: pointer; font-size: .88rem; font-weight: 600;
    margin-top: 12px; letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(74,103,65,.35), inset 0 1px 0 rgba(255,255,255,.2);
    transition: filter .15s, transform .1s;
}
.pcm-btn:hover   { filter: brightness(1.08); transform: translateY(-1px); }
.pcm-btn:active  { transform: translateY(0); }
.pcm-btn.secondary {
    background: #f0f0f0; color: #444;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.pcm-btn.secondary:hover { background: #e4e4e4; }
.pcm-btn.danger {
    background: linear-gradient(145deg, #e55, #c62828);
    box-shadow: 0 2px 6px rgba(198,40,40,.35);
}

/* History */
.pcm-history-item { border:1px solid #eee; border-radius:8px; padding:12px 16px; margin-bottom:10px; font-size:.85rem; }
.pcm-history-item.current { border-color: var(--pcm-gold); background: #fffdf5; }
.pcm-history-item .hi-name { font-weight:700; font-size:.95rem; margin-bottom:4px; }
.pcm-history-badge { display:inline-block; font-size:.68rem; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle; font-weight:600; }
.badge-current { background: var(--pcm-gold); color:#fff; }
.badge-past    { background:#aaa; color:#fff; }

/* Pit status toggle */
.pcm-status-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pcm-status-btn { padding:7px 16px; border-radius:6px; border:2px solid #ccc; background:#fff; cursor:pointer; font-size:.85rem; font-weight:500; transition: all .15s; }
.pcm-status-btn:hover { border-color:#aaa; }
.pcm-status-btn.active-empty       { background:#e8f0e4; border-color: var(--pcm-grass); color: var(--pcm-grass); font-weight:700; }
.pcm-status-btn.active-unavailable { background:#333; border-color:#111; color:#fff; font-weight:700; }

/* Special badge */
.pcm-special-badge { font-size:.62rem; background:#7b1fa2; color:#fff; border-radius:3px; padding:2px 6px; margin-left:5px; }

/* Admin rows table */
#pcm-rows-table { margin-top:16px; }

@media(max-width:600px){
    .pcm-form-grid { grid-template-columns:1fr; }
    .pcm-form-grid .full { grid-column:1; }
    #pcm-modal { padding:18px 14px; }
}

/* ══════════════════════════════════════════════
   MAP-ONLY PUBLIC TEMPLATE
══════════════════════════════════════════════ */

/* Static pit (span) – same look, no pointer/click feedback */
.pcm-pit-static {
    cursor: default !important;
    pointer-events: none;   /* disable hover transform flicker on touch */
}
.pcm-pit-static:hover {
    transform: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -2px 0 rgba(0,0,0,.22),
        0 2px 4px rgba(0,0,0,.22),
        0 1px 2px rgba(0,0,0,.14) !important;
    filter: none !important;
}
/* Re-enable pointer-events just for the tooltip (title attr) on desktop */
@media (hover: hover) {
    .pcm-pit-static { pointer-events: auto; cursor: default !important; }
}

.pcm-map-only-note {
    text-align: center;
    font-size: .78rem;
    color: #888;
    margin: 10px 0 0;
    font-style: italic;
}

.pcm-public-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pcm-ink);
    letter-spacing: .06em;
    margin-bottom: 14px;
}