GraveTrak
::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px} button,input,select,textarea{font-family:var(--font)} a{color:var(--accent-light);text-decoration:none} /* ════════════════════════════════════════ SCREENS ════════════════════════════════════════ */ .screen{display:none;width:100%;height:100vh;position:fixed;inset:0;z-index:1000} .screen.active{display:flex} /* ════════════════════════════════════════ AUTH ════════════════════════════════════════ */ #screen-auth{ background:var(--bg-base); align-items:center;justify-content:center; overflow:hidden; } .auth-bg{ position:absolute;inset:0; background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(59,130,246,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 60%, rgba(139,92,246,.08) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 0%, rgba(16,185,129,.06) 0%, transparent 50%); animation:bgPulse 8s ease-in-out infinite alternate; } @keyframes bgPulse{from{opacity:.7}to{opacity:1}} .auth-grid{ position:absolute;inset:0; background-image:linear-gradient(rgba(59,130,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.04) 1px,transparent 1px); background-size:40px 40px; } .auth-card{ position:relative;z-index:1; width:440px; background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-xl); padding:44px 40px; backdrop-filter:blur(20px); box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.05); animation:authIn .5s cubic-bezier(.34,1.56,.64,1); } @keyframes authIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}} .auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:36px} .auth-brand-icon{ width:44px;height:44px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-radius:12px; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-accent); flex-shrink:0; } .auth-brand-icon svg{width:22px;height:22px;fill:white} .brand-name{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.4px} .brand-sub{font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--mono)} .auth-heading{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:4px} .auth-sub{font-size:13px;color:var(--text-secondary);margin-bottom:28px} .field{margin-bottom:16px} .field-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px;display:block} .field-input{ width:100%;padding:11px 14px; background:rgba(255,255,255,.04); border:1px solid var(--border-light); border-radius:var(--radius); color:var(--text-primary);font-size:14px; outline:none;transition:var(--transition); } .field-input:focus{border-color:var(--accent);background:rgba(59,130,246,.05);box-shadow:0 0 0 3px var(--accent-glow)} .field-input::placeholder{color:var(--text-muted)} .field-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px} .field-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary);cursor:pointer} .field-check input{accent-color:var(--accent);width:14px;height:14px} .btn-auth{ width:100%;padding:13px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border:none;border-radius:var(--radius); color:white;font-size:14px;font-weight:600; cursor:pointer;transition:var(--transition); box-shadow:var(--shadow-accent);letter-spacing:.2px; } .btn-auth:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 28px rgba(59,130,246,.4)} .btn-auth:active{transform:translateY(0)} .auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--text-secondary)} .link{color:var(--accent-light);cursor:pointer;font-weight:500} .link:hover{color:white} .demo-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)} .demo-tag{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);margin-bottom:10px} .demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .demo-role-btn{ padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary);font-size:12px;font-weight:500; cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:8px; } .demo-role-btn:hover{background:rgba(59,130,246,.1);border-color:var(--accent);color:var(--accent-light)} .demo-role-btn .role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} /* ════════════════════════════════════════ APP SHELL (non-public roles) ════════════════════════════════════════ */ #screen-app{display:none;flex-direction:column} #screen-app.active{display:flex} .app-topbar{ height:var(--topbar-h);flex-shrink:0; background:var(--bg-glass); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); display:flex;align-items:center;padding:0 20px;gap:14px; z-index:200;position:relative; } .topbar-brand{display:flex;align-items:center;gap:10px;width:var(--sidebar-w);flex-shrink:0} .topbar-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .topbar-icon svg{width:16px;height:16px;fill:white} .topbar-name{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px} .topbar-search{ flex:1;max-width:440px;position:relative; } .topbar-search input{ width:100%;padding:9px 14px 9px 40px; background:rgba(255,255,255,.04); border:1px solid var(--border);border-radius:var(--radius-pill); color:var(--text-primary);font-size:13px;outline:none;transition:var(--transition); } .topbar-search input:focus{border-color:var(--accent);background:rgba(59,130,246,.05)} .topbar-search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted)} .topbar-search-ico svg{width:15px;height:15px} .topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto} .topbar-btn{ width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.04);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text-secondary);transition:var(--transition);position:relative; } .topbar-btn:hover{background:rgba(59,130,246,.1);border-color:var(--accent);color:var(--accent-light)} .topbar-btn svg{width:16px;height:16px} .notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid var(--bg-surface)} .role-badge{padding:4px 12px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:var(--mono)} .rb-admin{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.3)} .rb-mayor{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.3)} .rb-planning{background:rgba(16,185,129,.15);color:var(--emerald);border:1px solid rgba(16,185,129,.3)} .rb-user{background:rgba(59,130,246,.15);color:var(--accent-light);border:1px solid rgba(59,130,246,.3)} .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--violet));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;border:2px solid rgba(255,255,255,.1)} .app-body{display:flex;flex:1;overflow:hidden} /* SIDEBAR */ .sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--bg-surface); border-right:1px solid var(--border); display:flex;flex-direction:column; overflow:hidden;transition:width .25s cubic-bezier(.4,0,.2,1); } .sidebar.collapsed{width:0;border-right:none} .sidebar-scroll{flex:1;overflow-y:auto;padding:12px 0} .nav-group-label{padding:14px 16px 5px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);white-space:nowrap} .nav-item{ display:flex;align-items:center;gap:11px; padding:10px 16px;cursor:pointer; transition:var(--transition);white-space:nowrap; color:var(--text-secondary);position:relative; border-left:3px solid transparent; margin:1px 8px;border-radius:var(--radius); } .nav-item:hover{background:rgba(59,130,246,.08);color:var(--text-primary)} .nav-item.active{background:rgba(59,130,246,.12);color:var(--accent-light);border-left-color:var(--accent)} .nav-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px} .nav-txt{font-size:13px;font-weight:500;overflow:hidden} .nav-badge{margin-left:auto;background:var(--red);color:white;font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill);font-family:var(--mono)} .sidebar-footer{padding:12px;border-top:1px solid var(--border)} .sidebar-user{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);cursor:pointer;transition:var(--transition);white-space:nowrap} .sidebar-user:hover{background:rgba(255,255,255,.04)} .su-info{overflow:hidden} .su-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .su-role{font-size:11px;color:var(--text-muted)} /* MAIN */ .main{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative} .panel{display:none;flex:1;flex-direction:column;overflow:hidden} .panel.active{display:flex} .scroll-panel{flex:1;overflow-y:auto;padding:24px} /* ════════════════════════════════════════ PUBLIC LANDING PAGE ════════════════════════════════════════ */ .landing-topbar{ position:absolute;top:0;left:0;right:0;z-index:1000; display:flex;align-items:center;padding:16px 24px; background: transparent; backdrop-filter:blur(20px); border-bottom:1px solid rgba(30,45,80,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.3); } .topbar-left{flex:0 0 200px;} .topbar-center{flex:1;display:flex;justify-content:center;} .topbar-right{flex:0 0 200px;display:flex;justify-content:flex-end;} .search-container{ position:relative;width:100%; background:rgba(255,255,255,0.1);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); border-radius:50px;padding:0 20px; display:flex;align-items:center;gap:12px; box-shadow:0 4px 20px rgba(0,0,0,0.15); transition:all 0.3s ease; } .search-container:hover{ background:rgba(255,255,255,0.15); box-shadow:0 8px 30px rgba(0,0,0,0.2); } .search-container svg{width:20px;height:20px;color:rgba(255,255,255,0.7);flex-shrink:0} .search-container input{ flex:1;background:none;border:none;outline:none; color:white;font-size:16px;font-family:var(--font); padding:12px 0; } .search-container input::placeholder{color:rgba(255,255,255,0.5)} /* ════════════════════════════════════════ PUBLIC LANDING PAGE ════════════════════════════════════════ */ #public-map{position:absolute;inset:0;z-index:1;width:100vw;height:100vh;} /* floating UI on public map */ .map-fab{ position:absolute;z-index:500; background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); transition:var(--transition); } .hamburger-fab{ top:16px;left:16px; width:44px;height:44px; display:flex;align-items:center;justify-content:center; cursor:pointer;border-radius:var(--radius-lg); } .hamburger-fab:hover{background:rgba(59,130,246,.15);border-color:var(--accent)} .hamburger-fab svg{width:20px;height:20px;color:var(--text-primary)} .search-fab{ top:16px;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:0; width:380px;height:44px; padding:0 14px; border-radius:var(--radius-pill); } .search-fab input{ flex:1;background:none;border:none;outline:none; color:var(--text-primary);font-size:14px;font-family:var(--font); } .search-fab input::placeholder{color:var(--text-muted)} .search-fab svg{width:16px;height:16px;color:var(--text-muted);flex-shrink:0;margin-right:10px} .zoom-fab{top:16px;right:16px;display:flex;flex-direction:column;overflow:hidden} .zoom-btn{ width:40px;height:40px; background:none;border:none;cursor:pointer; color:var(--text-primary);font-size:18px;font-weight:300; transition:var(--transition);display:flex;align-items:center;justify-content:center; } .zoom-btn:hover{background:rgba(59,130,246,.1);color:var(--accent-light)} .zoom-btn+.zoom-btn{border-top:1px solid var(--border)} .legend-fab{ bottom:24px;left:16px; padding:14px 16px; } .legend-title{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);margin-bottom:10px} .legend-row{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:12px;color:var(--text-secondary)} .legend-row:last-child{margin-bottom:0} .legend-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0} .filters-fab{ bottom:24px;right:16px; padding:14px 16px;min-width:180px; } .filter-chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 11px;border-radius:var(--radius-pill); font-size:11px;font-weight:500;cursor:pointer; border:1px solid var(--border);color:var(--text-secondary); background:rgba(255,255,255,.03);transition:var(--transition);margin:3px; } .filter-chip:hover,.filter-chip.on{background:rgba(59,130,246,.15);border-color:var(--accent);color:var(--accent-light)} .pub-sidebar{ position:absolute;top:0;left:0;bottom:0;z-index:600; width:280px; background:var(--bg-glass); backdrop-filter:blur(20px); border-right:1px solid var(--border); transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column; box-shadow:var(--shadow-lg); } .pub-sidebar.open{transform:none} .pub-sidebar-head{ padding:16px; border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; } .pub-sidebar-brand{display:flex;align-items:center;gap:10px} .close-sidebar{ width:28px;height:28px;border-radius:var(--radius-sm); background:rgba(255,255,255,.05);border:1px solid var(--border); cursor:pointer;display:flex;align-items:center;justify-content:center; color:var(--text-secondary);font-size:16px;transition:var(--transition); } .close-sidebar:hover{background:rgba(239,68,68,.1);border-color:var(--red);color:var(--red)} .pub-nav-item{ display:flex;align-items:center;gap:12px; padding:12px 16px;cursor:pointer; color:var(--text-secondary);transition:var(--transition); font-size:13px;font-weight:500; } .pub-nav-item:hover{background:rgba(59,130,246,.08);color:var(--text-primary)} .pub-nav-item.active{color:var(--accent-light)} .pub-sidebar-footer{padding:14px 16px;border-top:1px solid var(--border);margin-top:auto} /* GRAVE INFO PANEL (public) */ .grave-panel{ position:absolute;top:16px;right:72px;z-index:550; width:300px; background:var(--bg-glass); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); display:none; animation:panelIn .2s ease; } @keyframes panelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .grave-panel.show{display:block} .gp-header{padding:16px 16px 12px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;justify-content:space-between} .gp-id{font-size:10px;font-family:var(--mono);color:var(--text-muted);margin-bottom:3px} .gp-name{font-size:16px;font-weight:700;color:var(--text-primary)} .gp-close{width:26px;height:26px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:none;cursor:pointer;color:var(--text-secondary);font-size:15px;display:flex;align-items:center;justify-content:center;transition:var(--transition)} .gp-close:hover{background:rgba(239,68,68,.1);color:var(--red)} .gp-body{padding:14px 16px} .gp-row{display:flex;gap:10px;margin-bottom:10px;font-size:13px} .gp-label{color:var(--text-muted);width:72px;flex-shrink:0;font-size:12px} .gp-val{color:var(--text-secondary);font-weight:500} .gp-footer{padding:12px 16px;border-top:1px solid var(--border-subtle);display:flex;gap:8px} /* ════════════════════════════════════════ BUTTONS ════════════════════════════════════════ */ .btn{padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:var(--transition);font-family:var(--font);letter-spacing:.2px} .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:white;box-shadow:var(--shadow-accent)} .btn-primary:hover{opacity:.9;transform:translateY(-1px)} .btn-ghost{background:rgba(255,255,255,.05);color:var(--text-secondary);border:1px solid var(--border)} .btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--text-primary)} .btn-success{background:rgba(16,185,129,.15);color:var(--emerald);border:1px solid rgba(16,185,129,.3)} .btn-success:hover{background:rgba(16,185,129,.25)} .btn-danger{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3)} .btn-danger:hover{background:rgba(239,68,68,.25)} .btn-sm{padding:6px 13px;font-size:12px} .btn-xs{padding:4px 10px;font-size:11px} .btn-icon{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);transition:var(--transition)} .btn-icon:hover{background:rgba(59,130,246,.1);border-color:var(--accent);color:var(--accent-light)} .btn-icon svg{width:14px;height:14px} /* ════════════════════════════════════════ CARDS ════════════════════════════════════════ */ .card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); } .card:hover{border-color:var(--border-light)} .card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .card-title{font-size:14px;font-weight:600;color:var(--text-primary)} .card-sub{font-size:12px;color:var(--text-muted);margin-top:2px} .card-body{padding:20px} /* ════════════════════════════════════════ STATS / KPI ════════════════════════════════════════ */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px} .kpi-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; position:relative;overflow:hidden; transition:var(--transition); } .kpi-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--kpi-color,var(--accent)) 0%,transparent 60%);opacity:.06} .kpi-card:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow)} .kpi-icon{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;background:rgba(255,255,255,.05)} .kpi-val{font-size:30px;font-weight:700;color:var(--text-primary);line-height:1;letter-spacing:-1px;margin-bottom:5px} .kpi-label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-family:var(--mono)} .kpi-trend{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:12px} .trend-up{color:var(--emerald)} .trend-down{color:var(--red)} /* ════════════════════════════════════════ STATUS BADGES ════════════════════════════════════════ */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;font-family:var(--mono)} .badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0} .badge-green{background:rgba(16,185,129,.15);color:var(--emerald);border:1px solid rgba(16,185,129,.25)}.badge-green::before{background:var(--emerald)} .badge-red{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.25)}.badge-red::before{background:var(--red)} .badge-amber{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.25)}.badge-amber::before{background:var(--amber)} .badge-blue{background:rgba(59,130,246,.15);color:var(--accent-light);border:1px solid rgba(59,130,246,.25)}.badge-blue::before{background:var(--accent)} .badge-violet{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.25)}.badge-violet::before{background:var(--violet)} /* ════════════════════════════════════════ TABLE ════════════════════════════════════════ */ .data-table{width:100%;border-collapse:collapse} .data-table th{text-align:left;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;padding:10px 16px;border-bottom:1px solid var(--border);font-family:var(--mono);white-space:nowrap} .data-table td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text-secondary);vertical-align:middle} .data-table tr:last-child td{border-bottom:none} .data-table tr:hover td{background:rgba(255,255,255,.02)} .mono-id{font-family:var(--mono);font-size:11px;color:var(--text-muted)} /* ════════════════════════════════════════ MODAL ════════════════════════════════════════ */ .modal-overlay{ position:fixed;inset:0;z-index:9000; background:rgba(0,0,0,.7);backdrop-filter:blur(0px); display:none;align-items:center;justify-content:center; animation:fadeIn .15s ease; } @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal-overlay.open{display:flex} .modal{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-xl); width:480px;max-width:92vw; box-shadow:var(--shadow-lg); animation:modalIn .2s cubic-bezier(.34,1.56,.64,1); overflow:hidden; } @keyframes modalIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} .modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .modal-title{font-size:16px;font-weight:700;color:var(--text-primary)} .modal-close{background:rgba(255,255,255,.05);border:1px solid var(--border);width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--transition)} .modal-close:hover{background:rgba(239,68,68,.1);color:var(--red);border-color:var(--red)} .modal-body{padding:24px} .modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end} .detail-row{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start} .detail-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;width:110px;flex-shrink:0;padding-top:1px;font-family:var(--mono)} .detail-val{font-size:13px;color:var(--text-secondary);flex:1} /* ════════════════════════════════════════ COLUMBARIUM SYSTEM ════════════════════════════════════════ */ .col-grid{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;justify-content:center;padding:20px 0} .columbarium{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; display:flex;flex-direction:column;align-items:center; box-shadow:var(--shadow); transition:var(--transition); min-width:120px; } .columbarium:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .columbarium.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)} .col-header{ font-size:14px;font-weight:700;color:var(--text-primary); margin-bottom:12px;text-align:center; } .col-slots{display:flex;flex-direction:column;gap:8px} .col-slot{ width:60px;height:60px;border-radius:var(--radius); cursor:pointer;transition:var(--transition); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;color:white; position:relative; } .col-slot:hover{transform:scale(1.05);box-shadow:var(--shadow)} .slot-available{background:var(--emerald)} .slot-occupied{background:var(--red)} .slot-reserved{background:var(--emerald)} /* treat as available */ /* ════════════════════════════════════════ ADMIN MAP PANEL (graves) ════════════════════════════════════════ */ #admin-map{width:100%;height:100%} /* ════════════════════════════════════════ MAYOR DASHBOARD ════════════════════════════════════════ */ .mayor-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px} .timeline{list-style:none} .tl-item{display:flex;gap:14px;padding-bottom:18px;position:relative} .tl-item::before{content:'';position:absolute;left:13px;top:26px;bottom:0;width:1.5px;background:var(--border)} .tl-item:last-child::before{display:none} .tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;z-index:1} .tl-done{background:rgba(16,185,129,.2);color:var(--emerald);border:1.5px solid var(--emerald)} .tl-active{background:rgba(59,130,246,.2);color:var(--accent-light);border:1.5px solid var(--accent)} .tl-wait{background:rgba(255,255,255,.05);color:var(--text-muted);border:1.5px solid var(--border)} .tl-content{flex:1;padding-top:4px} .tl-title{font-size:13px;font-weight:600;color:var(--text-primary)} .tl-sub{font-size:11px;color:var(--text-muted);margin-top:2px} .app-card{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:10px; transition:var(--transition); cursor:pointer; } .app-card:hover{background:rgba(59,130,246,.05);border-color:var(--accent)} .app-card-top{display:flex;align-items:center;gap:10px;margin-bottom:8px} .app-card-name{font-size:14px;font-weight:600;color:var(--text-primary);flex:1} .app-card-meta{font-size:12px;color:var(--text-muted)} .app-card-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)} /* ════════════════════════════════════════ PLANNING DASHBOARD ════════════════════════════════════════ */ .planning-layout{display:flex;flex:1;overflow:hidden} .planning-map-pane{flex:1;position:relative} #planning-map{width:100%;height:100%} .planning-panel{ width:340px;flex-shrink:0; background:var(--bg-surface); border-left:1px solid var(--border); overflow-y:auto; padding:16px; } .capacity-bar-wrap{margin-bottom:14px} .cap-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:12px} .cap-name{color:var(--text-secondary);font-weight:500} .cap-pct{color:var(--text-muted);font-family:var(--mono);font-size:11px} .cap-track{height:7px;background:rgba(255,255,255,.07);border-radius:var(--radius-pill);overflow:hidden} .cap-fill{height:100%;border-radius:var(--radius-pill);transition:width .8s cubic-bezier(.4,0,.2,1)} .layer-item{ display:flex;align-items:center;justify-content:space-between; padding:10px 14px;border-radius:var(--radius); background:rgba(255,255,255,.03);border:1px solid var(--border-subtle); margin-bottom:8px;cursor:pointer;transition:var(--transition); } .layer-item:hover{background:rgba(59,130,246,.06)} .toggle{ width:36px;height:20px;border-radius:var(--radius-pill); background:var(--text-muted);border:none;cursor:pointer; position:relative;transition:var(--transition); } .toggle.on{background:var(--accent)} .toggle::after{ content:'';position:absolute; top:2px;left:2px;width:16px;height:16px; border-radius:50%;background:white; transition:var(--transition); box-shadow:0 1px 4px rgba(0,0,0,.3); } .toggle.on::after{transform:translateX(16px)} /* ════════════════════════════════════════ SETTINGS ════════════════════════════════════════ */ .settings-grid{display:grid;grid-template-columns:240px 1fr;gap:20px} .settings-nav .settings-nav-item{ display:flex;align-items:center;gap:10px; padding:10px 14px;border-radius:var(--radius); cursor:pointer;color:var(--text-secondary); font-size:13px;font-weight:500;transition:var(--transition);margin-bottom:2px; } .settings-nav .settings-nav-item:hover{background:rgba(255,255,255,.04);color:var(--text-primary)} .settings-nav .settings-nav-item.active{background:rgba(59,130,246,.1);color:var(--accent-light)} .settings-section{margin-bottom:24px} .settings-section-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)} .setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-subtle)} .setting-row:last-child{border-bottom:none} .setting-info .setting-name{font-size:13px;color:var(--text-primary);font-weight:500} .setting-info .setting-desc{font-size:12px;color:var(--text-muted);margin-top:3px} .field-input-dark{ padding:9px 13px;background:rgba(255,255,255,.04); border:1px solid var(--border);border-radius:var(--radius); color:var(--text-primary);font-size:13px;outline:none; transition:var(--transition);width:100%;margin-bottom:12px; } .field-input-dark:focus{border-color:var(--accent);background:rgba(59,130,246,.05)} .field-label-dark{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;display:block;font-family:var(--mono)} /* ════════════════════════════════════════ BAR CHART (CSS) ════════════════════════════════════════ */ .bar-chart{display:flex;align-items:flex-end;gap:8px;height:100px;padding:0 4px} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px} .bar{border-radius:3px 3px 0 0;width:100%;background:rgba(59,130,246,.4);transition:height .8s cubic-bezier(.4,0,.2,1);min-width:8px;cursor:pointer;position:relative} .bar:hover{background:var(--accent)} .bar-label{font-size:10px;color:var(--text-muted);font-family:var(--mono);white-space:nowrap} .donut-wrap{display:flex;align-items:center;gap:16px} .donut-legend{display:flex;flex-direction:column;gap:8px} .donut-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)} .donut-legend-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0} /* ════════════════════════════════════════ LEAFLET OVERRIDES ════════════════════════════════════════ */ .leaflet-container{background:#0f1629!important;font-family:var(--font)!important} .leaflet-tile{filter:brightness(.75) saturate(.6) hue-rotate(200deg)} .leaflet-control-zoom{ background:var(--bg-glass)!important; border:1px solid var(--border)!important; backdrop-filter:blur(10px); border-radius:var(--radius)!important; box-shadow:var(--shadow)!important; } .leaflet-control-zoom a{ background:transparent!important; color:var(--text-secondary)!important; border-bottom:1px solid var(--border)!important; width:30px!important;height:30px!important; line-height:30px!important;font-size:16px!important; transition:var(--transition)!important; } .leaflet-control-zoom a:last-child{border-bottom:none!important} .leaflet-control-zoom a:hover{background:rgba(59,130,246,.12)!important;color:var(--accent-light)!important} .leaflet-popup-content-wrapper{ background:var(--bg-glass)!important; border:1px solid var(--border)!important; backdrop-filter:blur(16px)!important; border-radius:var(--radius-lg)!important; box-shadow:var(--shadow-lg)!important; color:var(--text-primary)!important; padding:0!important; } .leaflet-popup-content{margin:14px 16px!important;color:var(--text-secondary)!important;font-family:var(--font)!important;font-size:13px!important} .leaflet-popup-tip{background:var(--bg-glass)!important} .leaflet-popup-close-button{color:var(--text-muted)!important;right:10px!important;top:10px!important} .leaflet-attribution-flag{display:none!important} .leaflet-control-attribution{background:rgba(0,0,0,.4)!important;color:var(--text-muted)!important;font-size:10px!important;border-radius:4px!important} /* ════════════════════════════════════════ PAGE HEADER ════════════════════════════════════════ */ .page-hdr{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px} .page-title{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.4px} .page-sub{font-size:13px;color:var(--text-muted);margin-top:3px} .page-actions{display:flex;gap:8px;align-items:center} /* Scrollbar thin for columbarium */ .col-panel-scroll::-webkit-scrollbar{width:4px} /* ════════════════════════════════════════ MISC ════════════════════════════════════════ */ .divider{height:1px;background:var(--border);margin:16px 0} .empty{text-align:center;padding:48px 24px;color:var(--text-muted)} .empty-icon{font-size:40px;opacity:.4;margin-bottom:10px} .empty-text{font-size:14px;color:var(--text-secondary);margin-bottom:4px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .gap-1{gap:4px!important} .mb-0{margin-bottom:0} .txt-mono{font-family:var(--mono)} .txt-sm{font-size:12px} .txt-xs{font-size:11px} .txt-muted{color:var(--text-muted)} .txt-secondary{color:var(--text-secondary)} .txt-primary{color:var(--text-primary)} .txt-accent{color:var(--accent-light)} .fw-600{font-weight:600} .fw-700{font-weight:700} .d-flex{display:flex} .align-center{align-items:center} .gap-8{gap:8px} .gap-12{gap:12px} .mt-auto{margin-top:auto} .w-full{width:100%} /* PWA banner */ .pwa-snack{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%); background:var(--bg-elevated);border:1px solid var(--border); border-radius:var(--radius-pill);padding:10px 20px; display:flex;align-items:center;gap:12px; box-shadow:var(--shadow-lg);z-index:9999; animation:snackIn .3s cubic-bezier(.34,1.56,.64,1); font-size:13px;color:var(--text-secondary);cursor:pointer; } @keyframes snackIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}} .pwa-snack span{color:var(--accent-light);font-weight:600}
GraveTrak
Gov. Cemetery GIS · v2.0
Sign in to your account
Access the cemetery management system
Forgot password?
New user? Create account
Create Account
Register for public access
Already have an account? Sign in
Quick Demo Access
GraveTrak
✕
�Cemetery Overview
🔎Search Results / Filters
🧭Map Layers
📊Public Statistics
ℹ️About GraveTrak
GT
GraveTrak
Public Access
A-001
Maria Santos
Status
Dates
Location
Plot TypeStandard (2 × 1 m)
GraveTrak
Admin
CA
CA
City Admin
Cemetery Admin Office
Grave Status
Available142
Occupied318
Reserved26
Columbarium Management
Manage columbarium slots and assignments
All Available Occupied
Grave Records
Manage all plot assignments and burial records
🟩
142
Available
↑ 8 this month
🟥
318
Occupied
↑ 12 this month
🟨
26
Reserved
No change
📊
486
Total Plots
8 sections
Plot Registry
Grave IDDeceasedSectionDate of BurialStatusActions
A-001Maria SantosSection A, Row 1Mar 14, 2021Occupied
A-002Jose ReyesSection A, Row 1Aug 22, 2019Occupied
A-003— Unoccupied —Section A, Row 1—Available
A-005— Pending Application —Section A, Row 2—Reserved
B-001Antonio BautistaSection B, Row 1Jun 5, 2019Occupied
D-001Nena OcampoSection D, Row 1Jan 8, 2023Occupied
Burial Approvals
Review and process submitted burial applications
BUR-2024-0118For Review
Dela Cruz Family
For: Roberto Dela Cruz (1952–2024) · Submitted Nov 30, 2024
BUR-2024-0119Compliance
Santos Family
For: Lucia Santos (1940–2024) · Submitted Dec 1, 2024
Conflict & Error Monitor
2 active
Issue TypePlotDetectedSeverity
Duplicate assignment attemptA-003Dec 1, 2024Critical
Spacing policy violationC-007Nov 29, 2024Warning
Executive Dashboard
City Mayor's Office — Cemetery Management Overview
December 2, 2024
⚰️
356
Total Burials
↑ 38 this year
🟩
142
Available Plots
29% capacity
📈
71%
Occupancy Rate
↑ 4% vs last year
⏳
4
Pending Reviews
↑ 2 this week
Monthly Burial Trend
2024
JanFebMarAprMayJunJulAugSepOctNovDec
Plot Distribution
Occupied 318
Available 142
Reserved 26
Pending Applications
4 for action
BUR-2024-0118Review
Roberto Dela Cruz
Applicant: Marta Dela Cruz · Nov 30, 2024
Application Timeline
BUR-2024-0118
  • ✓
    Submitted
    Nov 30 · 09:12 AM
  • ✓
    Completeness Check
    Nov 30 · 02:45 PM
  • →
    Compliance Review
    Dec 1 · In progress
  • 4
    Interview Scheduling
    Pending
  • 5
    Mayor's Approval
    Pending
Planning Tools
Spatial Analytics
Cemetery zone management & capacity
71%
Capacity Used
2.4y
Est. Remaining
Section Capacity
Overlay Layers
Plot occupancy
Section boundaries
Flood risk zones
Expansion areas
Drainage lines
⚠ Expansion Alert
Section A is at 92% capacity. North expansion zone approved — est. 120 new plots.
Settings
Account, system, and notification preferences
👤 Account
🔔 Notifications
🗺 Map Preferences
🔒 Security
↪ Sign Out
Account Information
Preferences
Email notifications
Receive alerts for new applications
Offline map cache
Cache map tiles for offline access
Dark mode
System default dark theme
Show map tooltips
Hover to preview grave info
Slot Detail
📲 Install GraveTrak — Add to your device