@props(['title' => 'Dashboard'])

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>{{ $title }} — SiAbsen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%234f46e5'/><stop offset='100%25' stop-color='%237c3aed'/></linearGradient></defs><rect width='64' height='64' rx='14' fill='url(%23g)'/><rect x='22' y='9' width='20' height='8' rx='2.5' fill='white'/><rect x='13' y='17' width='38' height='37' rx='4' fill='white' opacity='.92'/><line x1='20' y1='30' x2='44' y2='30' stroke='%234f46e5' stroke-width='3' stroke-linecap='round'/><line x1='20' y1='39' x2='36' y2='39' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' opacity='.5'/><polyline points='20,48 25,53 37,42' fill='none' stroke='%234f46e5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
        :root{
            --sidebar-w:260px;--sidebar-collapsed:72px;--topbar-h:60px;--bnav-h:72px;
            --primary:#4f46e5;--primary-d:#3730a3;--primary-l:#eef2ff;--primary-m:rgba(79,70,229,.12);
            --violet:#7c3aed;--success:#059669;--success-l:#ecfdf5;--danger:#dc2626;--danger-l:#fef2f2;
            --warning:#d97706;--warning-l:#fffbeb;--sky:#0284c7;--sky-l:#e0f2fe;
            --text:#0f172a;--muted:#64748b;--muted2:#94a3b8;--border:#e2e8f0;
            --bg:#f0f4ff;--bg2:#f8fafc;--white:#ffffff;--sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
        }
        html,body{height:100%;}
        body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;-webkit-font-smoothing:antialiased;}

        /* ══ PAGE LOADER ══ */
        #page-loader{position:fixed;inset:0;z-index:99999;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .35s ease,visibility .35s ease;}
        #page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
        .loader-logo{position:relative;width:72px;height:72px;}
        .loader-ring{position:absolute;inset:-10px;border-radius:50%;border:2.5px solid transparent;border-top-color:#4f46e5;border-right-color:#7c3aed;animation:ringRotate 1s cubic-bezier(.5,0,.5,1) infinite;}
        .loader-ring-2{position:absolute;inset:-18px;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(79,70,229,.25);border-left-color:rgba(124,58,237,.25);animation:ringRotate 1.6s cubic-bezier(.5,0,.5,1) infinite reverse;}
        .loader-icon{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(79,70,229,.35);animation:logoPulse 1.6s ease-in-out infinite;position:relative;z-index:1;}
        .loader-icon svg{width:38px;height:38px;}
        .loader-icon .check-path{stroke-dasharray:40;stroke-dashoffset:40;}
        #page-loader.done .loader-icon .check-path{animation:drawCheck .4s .1s ease forwards;}
        #page-loader.done .loader-ring,#page-loader.done .loader-ring-2{animation:none;border-color:transparent;opacity:0;transition:opacity .3s;}
        .loader-bar-wrap{width:120px;height:3px;background:rgba(79,70,229,.1);border-radius:100px;overflow:hidden;}
        .loader-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,#4f46e5,#7c3aed);width:0%;animation:barProgress .9s cubic-bezier(.4,0,.2,1) forwards;}
        .loader-brand{font-size:13px;font-weight:800;color:#0f172a;letter-spacing:-.2px;}
        .loader-brand span{color:#4f46e5;}
        .loader-sub{font-size:10.5px;font-weight:600;color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;margin-top:2px;text-align:center;}
        @keyframes ringRotate{to{transform:rotate(360deg)}}
        @keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
        @keyframes barProgress{0%{width:0%}60%{width:75%}100%{width:100%}}
        @keyframes drawCheck{to{stroke-dashoffset:0}}
        @keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
        #nav-overlay{position:fixed;inset:0;z-index:99998;background:#fff;opacity:0;pointer-events:none;transition:opacity .22s ease;}
        #nav-overlay.leaving{opacity:1;pointer-events:all;}

        /* ══ SIDEBAR ══ */
        .sidebar{width:var(--sidebar-w);height:100vh;position:fixed;top:0;left:0;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden;}
        .sidebar-brand{height:var(--topbar-h);padding:0 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border);flex-shrink:0;text-decoration:none;}
        .brand-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(79,70,229,.35);}
        .brand-logo svg{width:20px;height:20px;}
        .brand-wordmark{display:flex;flex-direction:column;gap:1px;overflow:hidden;white-space:nowrap;}
        .brand-name{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.4px;line-height:1;}
        .brand-name span{color:var(--primary);}
        .brand-sub{font-size:9px;font-weight:700;color:var(--muted2);letter-spacing:.1em;text-transform:uppercase;line-height:1;}
        .sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 10px;}
        .sidebar-scroll::-webkit-scrollbar{width:3px;}
        .sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
        .nav-section{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);padding:14px 10px 6px;white-space:nowrap;overflow:hidden;}
        .nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap;overflow:hidden;position:relative;margin-bottom:2px;}
        .nav-item:hover{background:var(--primary-l);color:var(--primary);}
        .nav-item.active{background:linear-gradient(135deg,var(--primary),var(--violet));color:white;box-shadow:0 4px 12px rgba(79,70,229,.25);}
        .nav-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,0,0,.04);transition:background .15s;}
        .nav-icon svg{width:16px;height:16px;stroke:currentColor;}
        .nav-item.active .nav-icon{background:rgba(255,255,255,.18);}
        .nav-item:hover:not(.active) .nav-icon{background:rgba(79,70,229,.1);}
        .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
        .nav-divider{height:1px;background:var(--border);margin:8px 4px;}
        .sidebar-footer{padding:12px 10px;border-top:1px solid var(--border);flex-shrink:0;}
        .user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--primary-l);border:1px solid rgba(79,70,229,.12);overflow:hidden;}
        .user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--violet));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:white;flex-shrink:0;}
        .user-info{flex:1;overflow:hidden;min-width:0;}
        .user-name{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .user-role{font-size:10.5px;color:var(--primary);font-weight:700;margin-top:1px;}
        .sidebar.collapsed{width:var(--sidebar-collapsed);}
        .sidebar.collapsed .brand-wordmark,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section,.sidebar.collapsed .user-info{display:none;}
        .sidebar.collapsed .user-card{padding:10px;justify-content:center;}
        .sidebar.collapsed .nav-item{justify-content:center;padding:10px;}
        .sidebar.collapsed .nav-item::after{content:attr(data-label);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);background:#1e293b;color:white;font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:300;}
        .sidebar.collapsed .nav-item::before{content:'';position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#1e293b;opacity:0;transition:opacity .15s;}
        .sidebar.collapsed .nav-item:hover::after,.sidebar.collapsed .nav-item:hover::before{opacity:1;}
        .main-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s cubic-bezier(.4,0,.2,1);}
        .main-wrap.expanded{margin-left:var(--sidebar-collapsed);}
        .topbar{height:var(--topbar-h);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.04);}
        .topbar-left{display:flex;align-items:center;gap:14px;}
        .toggle-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:9px;transition:all .15s;}
        .toggle-btn:hover{background:var(--primary-l);border-color:rgba(79,70,229,.3);}
        .toggle-btn span{display:block;height:1.5px;background:var(--muted);border-radius:2px;transition:all .2s;}
        .toggle-btn span:nth-child(1){width:16px;} .toggle-btn span:nth-child(2){width:11px;} .toggle-btn span:nth-child(3){width:14px;}
        .toggle-btn:hover span{background:var(--primary);}
        .page-breadcrumb{font-size:13px;font-weight:500;color:var(--muted);}
        .page-breadcrumb strong{color:var(--text);font-weight:700;}
        .topbar-right{display:flex;align-items:center;gap:10px;}
        .topbar-date{font-size:12px;color:var(--muted);font-weight:600;padding:5px 13px;background:var(--bg);border:1px solid var(--border);border-radius:100px;}
        .topbar-btn{height:34px;padding:0 15px;border-radius:100px;border:1.5px solid var(--border);background:white;color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;text-decoration:none;}
        .topbar-btn:hover{background:var(--primary-l);color:var(--primary);border-color:rgba(79,70,229,.3);}
        .topbar-btn.danger:hover{background:var(--danger-l);color:var(--danger);border-color:rgba(220,38,38,.25);}
        .topbar-btn svg{width:13px;height:13px;stroke:currentColor;}
        .content{flex:1;padding:28px;max-width:1200px;width:100%;margin:0 auto;}
        .card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--sh);position:relative;overflow:hidden;}
        .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--violet));}
        .page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
        .page-title{font-size:1.25rem;font-weight:900;color:var(--text);letter-spacing:-.03em;}
        .page-subtitle{font-size:13px;color:var(--muted);font-weight:500;margin-top:4px;}
        .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;border:none;transition:all .18s;white-space:nowrap;}
        .btn svg{width:14px;height:14px;stroke:currentColor;}
        .btn-primary{background:linear-gradient(135deg,var(--primary),var(--violet));color:white;box-shadow:0 4px 14px rgba(79,70,229,.28);}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(79,70,229,.38);}
        .btn-success{background:linear-gradient(135deg,var(--success),#34d399);color:white;}
        .btn-success:hover{transform:translateY(-2px);}
        .btn-danger{background:var(--danger-l);color:var(--danger);border:1.5px solid rgba(220,38,38,.2);}
        .btn-danger:hover{background:var(--danger);color:white;transform:translateY(-2px);}
        .btn-ghost{background:white;color:var(--muted);border:1.5px solid var(--border);}
        .btn-ghost:hover{background:var(--primary-l);color:var(--primary);border-color:rgba(79,70,229,.28);}
        .btn-sm{padding:6px 14px;font-size:12px;border-radius:8px;}
        .table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);}
        table{width:100%;border-collapse:collapse;font-size:13px;}
        thead tr{background:#fafbff;}
        thead th{padding:11px 16px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);border-bottom:1px solid var(--border);}
        tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
        tbody tr:last-child{border-bottom:none;}
        tbody tr:hover{background:#fafbff;}
        tbody td{padding:12px 16px;color:var(--text);font-weight:500;}
        .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;}
        .badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
        .badge-success{background:var(--success-l);color:var(--success);border:1px solid #a7f3d0;}.badge-success::before{background:var(--success);}
        .badge-danger{background:var(--danger-l);color:var(--danger);border:1px solid #fecaca;}.badge-danger::before{background:var(--danger);}
        .badge-warning{background:var(--warning-l);color:var(--warning);border:1px solid #fde68a;}.badge-warning::before{background:var(--warning);}
        .badge-info{background:var(--primary-l);color:var(--primary);border:1px solid #c7d2fe;}.badge-info::before{background:var(--primary);}
        .form-group{margin-bottom:18px;}
        label{display:block;font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
        input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="time"],input[type="number"],input[type="month"],select,textarea{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;outline:none;transition:all .15s;}
        input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-m);background:white;}
        input::placeholder,textarea::placeholder{color:var(--muted2);font-weight:500;}
        .error-message{color:var(--danger);font-size:12px;font-weight:600;margin-top:5px;display:block;}
        .divider{height:1px;background:var(--border);margin:20px 0;}
        .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px;}
        .stat-card{padding:18px 20px;border-radius:16px;border:1px solid transparent;transition:transform .18s;position:relative;overflow:hidden;}
        .stat-card:hover{transform:translateY(-2px);}
        .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}
        .stat-card.violet{background:linear-gradient(135deg,#ede9fe,#f5f3ff);border-color:#ddd6fe;}.stat-card.violet::before{background:linear-gradient(90deg,var(--primary),var(--violet));}
        .stat-card.emerald{background:linear-gradient(135deg,#d1fae5,#ecfdf5);border-color:#a7f3d0;}.stat-card.emerald::before{background:linear-gradient(90deg,var(--success),#34d399);}
        .stat-card.amber{background:linear-gradient(135deg,#fef9c3,#fffbeb);border-color:#fde68a;}.stat-card.amber::before{background:linear-gradient(90deg,var(--warning),#fbbf24);}
        .stat-card.red{background:linear-gradient(135deg,#fee2e2,#fef2f2);border-color:#fecaca;}.stat-card.red::before{background:linear-gradient(90deg,var(--danger),#f87171);}
        .stat-card.sky{background:linear-gradient(135deg,#e0f2fe,#f0f9ff);border-color:#bae6fd;}.stat-card.sky::before{background:linear-gradient(90deg,var(--sky),#38bdf8);}
        .stat-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-bottom:6px;}
        .stat-value{font-size:1.85rem;font-weight:900;line-height:1;letter-spacing:-.04em;}
        .stat-sub{font-size:11px;margin-top:3px;opacity:.55;font-weight:600;}
        .stat-card.violet .stat-value{color:var(--primary);}.stat-card.emerald .stat-value{color:var(--success);}.stat-card.amber .stat-value{color:var(--warning);}.stat-card.red .stat-value{color:var(--danger);}.stat-card.sky .stat-value{color:var(--sky);}
        .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;backdrop-filter:blur(2px);}
        .nav-group{margin-bottom:2px;}
        .nav-group-btn{width:100%;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;text-align:left;white-space:nowrap;overflow:hidden;}
        .nav-group-btn:hover{background:var(--primary-l);color:var(--primary);}
        .nav-group-btn.open{background:var(--primary-l);color:var(--primary);}
        .nav-group-btn .nav-icon{background:rgba(0,0,0,.04);transition:background .15s;}
        .nav-group-btn:hover .nav-icon,.nav-group-btn.open .nav-icon{background:rgba(79,70,229,.1);}
        .nav-group-arrow{width:14px;height:14px;stroke:currentColor;flex-shrink:0;margin-left:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);}
        .nav-group-btn.open .nav-group-arrow{transform:rotate(180deg);}
        .sidebar.collapsed .nav-group-arrow{display:none;}
        .nav-group-items{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);}
        .nav-group-items.open{max-height:400px;}
        .nav-sub-item{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 16px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:12.5px;font-weight:600;transition:all .15s;margin-bottom:1px;white-space:nowrap;overflow:hidden;border-left:2px solid transparent;margin-left:10px;}
        .nav-sub-item:hover{background:var(--primary-l);color:var(--primary);border-left-color:rgba(79,70,229,.3);}
        .nav-sub-item.active{background:rgba(79,70,229,.08);color:var(--primary);font-weight:700;border-left-color:var(--primary);}
        .nav-sub-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,0,0,.04);transition:background .15s;}
        .nav-sub-ico svg{width:13px;height:13px;stroke:currentColor;}
        .nav-sub-item:hover .nav-sub-ico,.nav-sub-item.active .nav-sub-ico{background:rgba(79,70,229,.12);}
        .sidebar.collapsed .nav-group-items{display:none;}
        .sidebar.collapsed .nav-group-btn{justify-content:center;padding:10px;}
        .sidebar.collapsed .nav-group-btn .nav-label{display:none;}
        ::-webkit-scrollbar{width:5px;height:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;}::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

        /* ══════════════════════════════
           BOTTOM NAV — base
        ══════════════════════════════ */
        .bottom-nav-wrap{display:none;}
        .bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bnav-h);z-index:160;background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid rgba(226,232,240,.8);box-shadow:0 -2px 20px rgba(15,23,42,.07);display:flex;align-items:stretch;padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0px);}

        /* regular tab */
        .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted2);cursor:pointer;position:relative;padding:8px 2px 6px;border:none;background:none;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:color .18s;outline:none;}
        .bn-item.active{color:var(--primary);}
        .bn-pill{position:absolute;top:7px;left:50%;transform:translateX(-50%) scale(.6);width:48px;height:30px;border-radius:10px;background:var(--primary-l);opacity:0;transition:opacity .22s,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
        .bn-item.active .bn-pill{opacity:1;transform:translateX(-50%) scale(1);}
        .bn-ico{width:24px;height:24px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
        .bn-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.34,1.56,.64,1),stroke-width .18s;}
        .bn-item.active .bn-ico svg{stroke-width:2.4;transform:translateY(-1px) scale(1.12);}
        .bn-lbl{font-size:10px;font-weight:700;letter-spacing:.01em;z-index:1;white-space:nowrap;line-height:1;transition:transform .18s;}
        .bn-item.active .bn-lbl{transform:translateY(1px);}
        .bn-dot{width:4px;height:4px;border-radius:50%;background:var(--primary);position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scale(0);transition:transform .2s cubic-bezier(.34,1.56,.64,1);z-index:1;}
        .bn-item.active .bn-dot{transform:translateX(-50%) scale(1);}

        /* danger tab (logout) */
        .bn-item.bn-danger{color:#f87171;}
        .bn-item.bn-danger .bn-pill{background:#fef2f2;}
        .bn-item.bn-danger .bn-dot{background:#dc2626;}

        /* FAB centre button */
        .bn-center{flex:1.1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;padding-bottom:7px;outline:none;}
        .bn-center-btn{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;position:relative;top:-14px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;}
        .bn-center-btn::before{content:'';position:absolute;inset:-4px;border-radius:22px;}
        .bn-center-btn svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1;}
        .bn-center:active .bn-center-btn{transform:scale(.91) translateY(2px);}
        .bn-center-lbl{font-size:10px;font-weight:700;position:relative;top:-11px;white-space:nowrap;}

        /* purple FAB (karyawan) */
        .bn-fab-purple .bn-center-btn{background:linear-gradient(145deg,#5b52f0,#7c3aed);box-shadow:0 6px 22px rgba(79,70,229,.45),0 2px 6px rgba(79,70,229,.25),inset 0 1px 0 rgba(255,255,255,.25);}
        .bn-fab-purple .bn-center-btn::before{background:linear-gradient(145deg,rgba(79,70,229,.15),rgba(124,58,237,.1));border:1.5px solid rgba(79,70,229,.18);}
        .bn-fab-purple:active .bn-center-btn{box-shadow:0 3px 12px rgba(79,70,229,.3);}
        .bn-fab-purple .bn-center-lbl{color:var(--primary);}

        /* green FAB (instansi monitoring) */
        .bn-fab-green .bn-center-btn{background:linear-gradient(145deg,#059669,#34d399);box-shadow:0 6px 22px rgba(5,150,105,.42),inset 0 1px 0 rgba(255,255,255,.2);}
        .bn-fab-green .bn-center-btn::before{background:linear-gradient(145deg,rgba(5,150,105,.12),rgba(52,211,153,.08));border:1.5px solid rgba(5,150,105,.18);}
        .bn-fab-green:active .bn-center-btn{box-shadow:0 3px 12px rgba(5,150,105,.3);}
        .bn-fab-green .bn-center-lbl{color:var(--success);}

        /* sky FAB (admin pengaturan) */
        .bn-fab-sky .bn-center-btn{background:linear-gradient(145deg,#0284c7,#38bdf8);box-shadow:0 6px 22px rgba(2,132,199,.42),inset 0 1px 0 rgba(255,255,255,.2);}
        .bn-fab-sky .bn-center-btn::before{background:linear-gradient(145deg,rgba(2,132,199,.12),rgba(56,189,248,.08));border:1.5px solid rgba(2,132,199,.18);}
        .bn-fab-sky:active .bn-center-btn{box-shadow:0 3px 12px rgba(2,132,199,.3);}
        .bn-fab-sky .bn-center-lbl{color:var(--sky);}

        /* ══ RESPONSIVE ══ */
        @media(max-width:768px){
            .sidebar{transform:translateX(-100%);width:var(--sidebar-w) !important;box-shadow:4px 0 24px rgba(0,0,0,.12);}
            .sidebar.mobile-open{transform:translateX(0);}
            .sidebar.collapsed .brand-wordmark,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section,.sidebar.collapsed .user-info{display:flex !important;}
            .sidebar.collapsed .nav-item{justify-content:flex-start !important;}
            .sidebar.collapsed .nav-item::after,.sidebar.collapsed .nav-item::before{display:none !important;}
            .sidebar.collapsed .user-card{padding:10px 12px !important;justify-content:flex-start !important;}
            .main-wrap{margin-left:0 !important;}
            .sidebar-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .3s;}
            .sidebar-overlay.active{opacity:1;pointer-events:all;}
            .content{padding:18px 16px;}
            .topbar{padding:0 16px;}
            .topbar-date{display:none;}
            .bottom-nav-wrap{display:block;}
            .has-bnav .content{padding-bottom:calc(var(--bnav-h) + 24px);}
        }
        @media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr;}}
    </style>
    @stack('styles')
</head>
<body>

<div id="page-loader">
    <div class="loader-logo">
        <div class="loader-ring-2"></div>
        <div class="loader-ring"></div>
        <div class="loader-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" stroke-width="2"/>
                <rect x="9" y="3" width="6" height="4" rx="1" stroke-width="2"/>
                <polyline points="9 12 11 14 15 10" stroke-width="2.5" class="check-path"/>
            </svg>
        </div>
    </div>
    <div>
        <div class="loader-brand">Si<span>Absen</span></div>
        <div class="loader-sub">Sistem Kehadiran</div>
    </div>
    <div class="loader-bar-wrap"><div class="loader-bar"></div></div>
</div>
<div id="nav-overlay"></div>

{{-- LOGOUT MODAL --}}
<div id="logout-modal" style="display:none;position:fixed;inset:0;z-index:99997;background:rgba(15,23,42,.5);backdrop-filter:blur(5px);align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:24px;padding:36px 32px 28px;width:100%;max-width:380px;margin:0 16px;box-shadow:0 24px 64px rgba(0,0,0,.18);border:1px solid #e2e8f0;animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);">
        <div style="width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#fef2f2,#fee2e2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;border:1px solid #fecaca;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
        <h3 style="font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;color:#0f172a;text-align:center;margin-bottom:10px;letter-spacing:-.4px;">Yakin ingin keluar?</h3>
        <p style="font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:#64748b;text-align:center;font-weight:500;line-height:1.7;margin-bottom:28px;">Sesi Anda akan diakhiri dan Anda perlu <strong style="color:#0f172a;font-weight:700;">login kembali</strong> untuk mengakses sistem.</p>
        <div style="display:flex;gap:10px;">
            <button onclick="hideLogoutModal()" style="flex:1;height:44px;border-radius:100px;border:1.5px solid #e2e8f0;background:white;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:#64748b;cursor:pointer;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='white'">Batal</button>
            <button onclick="doLogout()" style="flex:1;height:44px;border-radius:100px;border:none;background:linear-gradient(135deg,#dc2626,#ef4444);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:white;cursor:pointer;box-shadow:0 4px 16px rgba(220,38,38,.3);">Ya, Keluar</button>
        </div>
    </div>
</div>
@auth
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">@csrf</form>
@endauth

<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

<aside class="sidebar" id="sidebar">
    <a href="{{ route('dashboard') }}" class="sidebar-brand">
        <div class="brand-logo">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                <rect x="9" y="3" width="6" height="4" rx="1"/>
                <path d="m9 12 2 2 4-4"/>
            </svg>
        </div>
        <div class="brand-wordmark">
            <div class="brand-name">Si<span>Absen</span></div>
            <div class="brand-sub">Sistem Kehadiran</div>
        </div>
    </a>
    <div class="sidebar-scroll">
        @auth
        @php $role = auth()->user()->role; @endphp
        @if($role === 'admin')
        <div class="nav-section">Main Menu</div>
        <a href="{{ route('dashboard') }}" class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}" data-label="Dashboard">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
            <span class="nav-label">Dashboard</span>
        </a>
        <a href="{{ route('admin.instansi.index') }}" class="nav-item {{ request()->routeIs('admin.instansi.*') ? 'active' : '' }}" data-label="Instansi">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></div>
            <span class="nav-label">Instansi</span>
        </a>
        <a href="{{ route('admin.pengaturan.index') }}" class="nav-item {{ request()->routeIs('admin.pengaturan.*') ? 'active' : '' }}" data-label="Pengaturan">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
            <span class="nav-label">Pengaturan</span>
        </a>
        @endif
        @if($role === 'instansi')
        <div class="nav-section">Main Menu</div>
        <a href="{{ route('dashboard') }}" class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}" data-label="Dashboard">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
            <span class="nav-label">Dashboard</span>
        </a>
        @php $manajemenActive = request()->routeIs('instansi.karyawan.*','instansi.jabatan.*','instansi.jam-kerja.*'); @endphp
        <div class="nav-group" id="grp-manajemen">
            <button class="nav-group-btn {{ $manajemenActive ? 'open' : '' }}" onclick="toggleGroup('manajemen')">
                <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
                <span class="nav-label">Manajemen</span>
                <svg class="nav-group-arrow" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="nav-group-items {{ $manajemenActive ? 'open' : '' }}" id="grp-manajemen-items">
                <a href="{{ route('instansi.karyawan.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.karyawan.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>Karyawan
                </a>
                <a href="{{ route('instansi.jabatan.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.jabatan.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg></div>Jabatan
                </a>
                <a href="{{ route('instansi.jam-kerja.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.jam-kerja.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>Jam Kerja
                </a>
            </div>
        </div>
        @php $laporanActive = request()->routeIs('instansi.absensi.*','instansi.rekap.*','instansi.izin.*','instansi.cuti.*','instansi.lembur.*'); @endphp
        <div class="nav-group" id="grp-laporan">
            <button class="nav-group-btn {{ $laporanActive ? 'open' : '' }}" onclick="toggleGroup('laporan')">
                <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
                <span class="nav-label">Laporan & Pengajuan</span>
                <svg class="nav-group-arrow" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="nav-group-items {{ $laporanActive ? 'open' : '' }}" id="grp-laporan-items">
                <a href="{{ route('instansi.absensi.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.absensi.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>Monitoring Absensi
                </a>
                <a href="{{ route('instansi.rekap.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.rekap.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>Rekap Bulanan
                </a>
                <a href="{{ route('instansi.izin.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.izin.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>Kelola Izin
                </a>
                <a href="{{ route('instansi.cuti.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.cuti.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/></svg></div>Kelola Cuti
                </a>
                <a href="{{ route('instansi.lembur.index') }}" class="nav-sub-item {{ request()->routeIs('instansi.lembur.*') ? 'active' : '' }}">
                    <div class="nav-sub-ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><line x1="14.5" y1="18" x2="19" y2="18"/><line x1="19" y1="15" x2="19" y2="21"/></svg></div>Kelola Lembur
                </a>
            </div>
        </div>
        <div class="nav-section">Pengaturan</div>
        <a href="{{ route('instansi.pengaturan.index') }}" class="nav-item {{ request()->routeIs('instansi.pengaturan.*') ? 'active' : '' }}" data-label="Pengaturan">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
            <span class="nav-label">Pengaturan</span>
        </a>
        @endif
        @if($role === 'karyawan')
        <div class="nav-section">Menu</div>
        <a href="{{ route('dashboard') }}" class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}" data-label="Dashboard">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
            <span class="nav-label">Dashboard</span>
        </a>
        <a href="{{ route('karyawan.absensis.index') }}" class="nav-item {{ request()->routeIs('karyawan.absensis.*') ? 'active' : '' }}" data-label="Absensi">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
            <span class="nav-label">Absensi</span>
        </a>
        <div class="nav-section">Pengajuan</div>
        <a href="{{ route('karyawan.izin-sakit.index') }}" class="nav-item {{ request()->routeIs('karyawan.izin-sakit.*') ? 'active' : '' }}" data-label="Izin & Sakit">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>
            <span class="nav-label">Izin & Sakit</span>
        </a>
        <a href="{{ route('karyawan.cuti.index') }}" class="nav-item {{ request()->routeIs('karyawan.cuti.*') ? 'active' : '' }}" data-label="Cuti">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/></svg></div>
            <span class="nav-label">Cuti</span>
        </a>
        <a href="{{ route('karyawan.lembur.index') }}" class="nav-item {{ request()->routeIs('karyawan.lembur.*') ? 'active' : '' }}" data-label="Lembur">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><line x1="14.5" y1="18" x2="19" y2="18"/><line x1="19" y1="15" x2="19" y2="21"/></svg></div>
            <span class="nav-label">Lembur</span>
        </a>

           <a href="{{ route('karyawan.history.index') }}" class="nav-item {{ request()->routeIs('karyawan.history.*') ? 'active' : '' }}" data-label="Lembur">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><line x1="14.5" y1="18" x2="19" y2="18"/><line x1="19" y1="15" x2="19" y2="21"/></svg></div>
            <span class="nav-label">History</span>
        </a>
        @endif
        @endauth
        <div class="nav-divider"></div>
        <a href="{{ route('profile.edit') }}" class="nav-item {{ request()->routeIs('profile.*') ? 'active' : '' }}" data-label="Profil">
            <div class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
            <span class="nav-label">Profil</span>
        </a>
    </div>
    @auth
    <div class="sidebar-footer">
        <div class="user-card">
            <div class="user-avatar">{{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}</div>
            <div class="user-info">
                <div class="user-name">{{ auth()->user()->name }}</div>
                <div class="user-role">{{ ucfirst(auth()->user()->role) }}</div>
            </div>
        </div>
    </div>
    @endauth
</aside>

<div class="main-wrap has-bnav" id="mainWrap">
    <header class="topbar">
        <div class="topbar-left">
            <button class="toggle-btn" id="toggleBtn" onclick="toggleSidebar()" aria-label="Toggle sidebar">
                <span></span><span></span><span></span>
            </button>
            <div class="page-breadcrumb">SiAbsen &rsaquo; <strong>{{ $title }}</strong></div>
        </div>
        <div class="topbar-right">
            <div class="topbar-date" id="topbar-date">—</div>
            @auth
            <button type="button" class="topbar-btn danger" onclick="showLogoutModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                Logout
            </button>
            @endauth
        </div>
    </header>
    <main class="content">{{ $slot }}</main>
</div>

{{-- ══════════════════════════════════════
     BOTTOM NAV — per role
══════════════════════════════════════ --}}
@auth
@php $role = auth()->user()->role; @endphp

{{-- ── KARYAWAN: Home | Izin | [Absen FAB] | Lembur | Profil ── --}}
@if($role === 'karyawan')
@php $bn = request()->routeIs('dashboard')?'home':(request()->routeIs('karyawan.izin-sakit.*')?'izin':(request()->routeIs('karyawan.absensis.*')?'absen':(request()->routeIs('karyawan.lembur.*','karyawan.cuti.*')?'lembur':(request()->routeIs('profile.*')?'profil':'')))); @endphp
<div class="bottom-nav-wrap"><nav class="bottom-nav">
    <a href="{{ route('dashboard') }}" class="bn-item {{ $bn==='home'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
        <span class="bn-lbl">Home</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('karyawan.izin-sakit.index') }}" class="bn-item {{ $bn==='izin'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>
        <span class="bn-lbl">Izin</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('karyawan.absensis.index') }}" class="bn-center bn-fab-purple">
        <div class="bn-center-btn"><svg viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></div>
        <span class="bn-center-lbl">Absen</span>
    </a>
    <a href="{{ route('karyawan.lembur.index') }}" class="bn-item {{ $bn==='lembur'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><line x1="14.5" y1="18" x2="19" y2="18"/><line x1="19" y1="15" x2="19" y2="21"/></svg></div>
        <span class="bn-lbl">Lembur</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('profile.edit') }}" class="bn-item {{ $bn==='profil'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
        <span class="bn-lbl">Profil</span><span class="bn-dot"></span>
    </a>
</nav></div>
@endif

{{-- ── INSTANSI: Home | Karyawan | [Monitor FAB] | Pengajuan | Setting ── --}}
@if($role === 'instansi')
@php $bn = request()->routeIs('dashboard')?'home':(request()->routeIs('instansi.karyawan.*','instansi.jabatan.*','instansi.jam-kerja.*')?'karyawan':(request()->routeIs('instansi.absensi.*')?'monitor':(request()->routeIs('instansi.izin.*','instansi.cuti.*','instansi.lembur.*','instansi.rekap.*')?'pengajuan':(request()->routeIs('instansi.pengaturan.*','profile.*')?'setting':'')))); @endphp
<div class="bottom-nav-wrap"><nav class="bottom-nav">
    <a href="{{ route('dashboard') }}" class="bn-item {{ $bn==='home'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
        <span class="bn-lbl">Home</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('instansi.karyawan.index') }}" class="bn-item {{ $bn==='karyawan'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
        <span class="bn-lbl">Karyawan</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('instansi.absensi.index') }}" class="bn-center bn-fab-green">
        <div class="bn-center-btn"><svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
        <span class="bn-center-lbl">Monitor</span>
    </a>
    <a href="{{ route('instansi.izin.index') }}" class="bn-item {{ $bn==='pengajuan'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01M12 14h.01M16 14h.01"/></svg></div>
        <span class="bn-lbl">Pengajuan</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('instansi.pengaturan.index') }}" class="bn-item {{ $bn==='setting'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
        <span class="bn-lbl">Pengaturan</span><span class="bn-dot"></span>
    </a>
</nav></div>
@endif

{{-- ── ADMIN: Home | Instansi | [Pengaturan FAB] | Profil | Keluar ── --}}
@if($role === 'admin')
@php $bn = request()->routeIs('dashboard')?'home':(request()->routeIs('admin.instansi.*')?'instansi':(request()->routeIs('admin.pengaturan.*')?'setting':(request()->routeIs('profile.*')?'profil':''))); @endphp
<div class="bottom-nav-wrap"><nav class="bottom-nav">
    <a href="{{ route('dashboard') }}" class="bn-item {{ $bn==='home'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
        <span class="bn-lbl">Home</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('admin.instansi.index') }}" class="bn-item {{ $bn==='instansi'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
        <span class="bn-lbl">Instansi</span><span class="bn-dot"></span>
    </a>
    <a href="{{ route('admin.pengaturan.index') }}" class="bn-center bn-fab-sky">
        <div class="bn-center-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
        <span class="bn-center-lbl">Pengaturan</span>
    </a>
    <a href="{{ route('profile.edit') }}" class="bn-item {{ $bn==='profil'?'active':'' }}">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
        <span class="bn-lbl">Profil</span><span class="bn-dot"></span>
    </a>
    <button type="button" class="bn-item bn-danger" onclick="showLogoutModal()">
        <span class="bn-pill"></span><div class="bn-ico"><svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></div>
        <span class="bn-lbl">Keluar</span><span class="bn-dot"></span>
    </button>
</nav></div>
@endif

@endauth

<script>
var loader=document.getElementById('page-loader'),navOverlay=document.getElementById('nav-overlay');
function hideLoader(){loader.classList.add('done');setTimeout(function(){loader.classList.add('hidden');},500);}
if(document.readyState==='complete'){setTimeout(hideLoader,600);}else{window.addEventListener('load',function(){setTimeout(hideLoader,400);});}
document.addEventListener('click',function(e){
    var link=e.target.closest('a[href]');if(!link)return;
    var href=link.getAttribute('href');
    if(!href||href.startsWith('#')||href.startsWith('javascript')||href.startsWith('http')||link.target==='_blank')return;
    if(href===window.location.pathname||href===window.location.href)return;
    e.preventDefault();navOverlay.classList.add('leaving');
    setTimeout(function(){loader.classList.remove('hidden','done');var bar=loader.querySelector('.loader-bar');bar.style.animation='none';bar.offsetHeight;bar.style.animation='';window.location.href=href;},180);
});
document.addEventListener('submit',function(e){if(e.target.id==='logout-form')return;loader.classList.remove('hidden','done');});
var logoutModal=document.getElementById('logout-modal');
function showLogoutModal(){logoutModal.style.display='flex';document.addEventListener('keydown',escLogout);}
function hideLogoutModal(){logoutModal.style.display='none';document.removeEventListener('keydown',escLogout);}
function escLogout(e){if(e.key==='Escape')hideLogoutModal();}
function doLogout(){hideLogoutModal();loader.classList.remove('hidden','done');document.getElementById('logout-form').submit();}
if(logoutModal){logoutModal.addEventListener('click',function(e){if(e.target===logoutModal)hideLogoutModal();});}
var sidebar=document.getElementById('sidebar'),mainWrap=document.getElementById('mainWrap'),overlay=document.getElementById('sidebarOverlay');
var isMobile=function(){return window.innerWidth<=768;},collapsed=false;
function toggleGroup(id){var btn=document.querySelector('#grp-'+id+' .nav-group-btn'),items=document.getElementById('grp-'+id+'-items');if(!btn||!items)return;var o=items.classList.toggle('open');btn.classList.toggle('open',o);localStorage.setItem('navGroup_'+id,o);}
(function(){['laporan','manajemen'].forEach(function(id){if(localStorage.getItem('navGroup_'+id)!=='false'){var btn=document.querySelector('#grp-'+id+' .nav-group-btn'),items=document.getElementById('grp-'+id+'-items');if(btn&&items){btn.classList.add('open');items.classList.add('open');}}});})();
function toggleSidebar(){if(isMobile()){var o=sidebar.classList.toggle('mobile-open');overlay.classList.toggle('active',o);}else{collapsed=!collapsed;sidebar.classList.toggle('collapsed',collapsed);mainWrap.classList.toggle('expanded',collapsed);localStorage.setItem('sidebarCollapsed',collapsed);}}
function closeSidebar(){sidebar.classList.remove('mobile-open');overlay.classList.remove('active');}
(function(){if(!isMobile()&&localStorage.getItem('sidebarCollapsed')==='true'){collapsed=true;sidebar.classList.add('collapsed');mainWrap.classList.add('expanded');}})();
window.addEventListener('resize',function(){if(!isMobile()){sidebar.classList.remove('mobile-open');overlay.classList.remove('active');}});
(function(){var n=new Date(),days=['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],months=['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],el=document.getElementById('topbar-date');if(el)el.textContent=days[n.getDay()]+', '+n.getDate()+' '+months[n.getMonth()]+' '+n.getFullYear();})();
document.querySelectorAll('.bn-item,.bn-center').forEach(function(el){
    el.addEventListener('touchstart',function(){this.style.transform='scale(.94)';},{passive:true});
    el.addEventListener('touchend',function(){this.style.transform='';},{passive:true});
});
</script>
@stack('scripts')
</body>
</html>