*{box-sizing:border-box}

body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:#222;
	background-color:#84b3f04f;
}

.wrap{
    max-width:1200px;
    margin:auto;
}

header{
    background:#35424b;
    color:white;
}

header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
}



.site-title a{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
}

.site-title img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.site-title span{
	display:flex;
	flex-direction:column;
	line-height:1.05;
    font-size:24px;   /* sesuaikan */
    font-weight:500;
}

header h1 a{
    color:#fff;
    text-decoration:none;
}

header h1 a:hover{
    color:#ACF3FA;
    text-decoration:none;
}


h1{
    font-size:14px;
    margin:18px 0;
}

nav{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
	font-size:14px;
}

nav a,
.navbtn{
    color:white;
    text-decoration:none;
    font-weight:bold;
    background:transparent;
    border:0;
    padding:0;
    font-size:15px;
    cursor:pointer;
}

nav a:hover{
color:#ACF3FA;
}

nav button:hover{
color:#ACF3FA;
}

main{padding-top:22px}

.card{
	border:1px solid #999 !important;
    background-color: #8e8f8b33;
    border-radius:10px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 2px 8px #0001;
}

.topbar{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.btn,
button{
    display:inline-block;
    background:#0ea5e9;
    color:white;
    border:0;
    border-radius:7px;
    padding:9px 12px;
    text-decoration:none;
    cursor:pointer;
    font-weight:bold;
}

.secondary,
.btn.secondary{background:#64748b}

.btn.danger,
button.danger{background:#dc3545}

.btn.wa{
    background:#22c55e;
    color:white;
    min-width:34px;
    text-align:center;
}

.btn.small{
    padding:6px 9px;
    font-size:12px;
}

.btn.editlogsheet{
	font-size:12px;
    text-align:center;
}

input,
select,
textarea{
	border:1px solid #999 !important;
    width:100%;
    padding:10px;
    border:1px solid #cbd5e1;
    border-radius:7px;
    margin:6px 0 12px;
}


.table-wrap,
.card{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    background:white;
}

th,
td{
    border-bottom:1px solid #e2e8f0;
    padding:2px;
    text-align:left;
    vertical-align:center;
}

th{
	padding:10px;
	background:#556482;
	color:white;
	vertical-align:center;
}

.actions{
    white-space:nowrap;
}

.actions a,
.actions button{
    display:inline-block;
    margin:2px;
}

.msg{
    padding:10px;
    border-radius:7px;
    background:#e0f2fe;
    margin-bottom:12px;
}

.msg.err{background:#fee2e2}

.muted{
    color:#64748b;
    font-size:11px;
}

.tanggal{
  /*  color:#64748b; */
    font-size:12px;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.inline-form{
    display:inline-block;
    margin:0;
}

.aksi-inline{
    white-space:nowrap;
}

.modal{
    display:none;
    position:fixed;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:#0008;
    padding:35px 15px;
    overflow:auto;
}

.modal.open{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.modalbox{
    background-color: #fff;;
    width:min(520px,95vw);
    max-width:95vw;
    margin:20px auto;
    padding:20px;
    border-radius:12px;
    position:relative;
    overflow:hidden;
}

.x{
    position:absolute;
    right:12px;
    top:10px;
    background:#e2e8f0;
    color:#111;
    border-radius:50%;
    padding:4px 10px;
    width:auto;
    min-height:auto;
}

.form-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.form-actions button,
.form-actions .btn{
    flex:1 1 120px;
    margin:0;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.form-actions .secondary{
    background:#64748b;
}

footer{
    padding:25px 0;
    color:#24242b;
	text-align:center;
}

.logo-box{
    width:150px;
    height:150px;
    border-radius:10px;
    overflow:hidden;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.logsheet-head{
    align-items:center;
	background-color: #8e8f8b33;
}

.logsheet-title-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.logsheet-form{
    flex:1;
    min-width:260px;
}

.edit-head{
    display:flex;
    gap:55px;
    align-items:flex-start;
}

.table-search{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:12px;
    max-width:520px;
}

.table-search input{
    margin:0;
    flex:1;
}

.table-search button{
    white-space:nowrap;
}


.remember-row{
    margin:12px 0;
}

.remember-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:normal;
}

.remember-label input{
    margin:0;
    width:16px;
    height:16px;
}

.callbook-rows{
    border:1px solid #888 !important;
    border-radius:8px;
    overflow:hidden;
    margin-top:10px;
}

.callbook-row{
    display:grid;
    grid-template-columns:130px 12px 1fr;
    gap:6px;
    padding:9px 12px;
    border:1px solid #888 !important;
    font-weight:bold;
}

.callbook-row:last-child{
    border-bottom:0;
}

.callbook-label{
    text-transform:uppercase;
}

.callbook-sep{
    text-align:center;
}

.callbook-value{
    word-break:break-word;
}


/* === CLICKABLE LOGSHEET ROW / LIST AREA === */
.open-logsheet-cell{
    cursor:pointer;
	font-size:12px;
    transition:background .15s ease, color .15s ease;
}

.open-logsheet-cell:hover{
    background:#f1f5f9;
    color:#0f172a;
}

tr:hover .open-logsheet-cell{
    background:#f8fafc;
}

tr .open-logsheet-cell:first-child{
    border-left:3px solid transparent;
}

tr:hover .open-logsheet-cell:first-child{
    border-left-color:#0ea5e9;
}

.actions{
    cursor:default;
}

.actions .btn{
    vertical-align:middle;
}


.callsign-link{
    background:transparent;
    color:#0f172a;
    padding:0;
    border-radius:0;
    font-weight:normal;
    text-decoration:none;
    cursor:pointer;
	font-size:12px;
}

tr{
	font-size:12px;
}



.callsign-link:hover{
    color:#0ea5e9;
    text-decoration:underline;
}



.callsign-popup-head img{
    width:160px;
    height:160px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:0 auto 15px;
}


.password-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}

.password-wrap input{
    flex:1 1 auto;
    width:auto;          /* override width:100% */
    min-width:0;         /* penting agar flex bekerja */
    margin:6px 0 12px;
}

.pass-eye{
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    margin:6px 0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:7px;
    cursor:pointer;
    font-size:15px;
    line-height:1;
}

.pass-eye:hover{
    background:#f8fafc;
}
/* === END CLICKABLE LOGSHEET ROW === */

/* =========================
   MOBILE RESPONSIVE
   ========================= */

@media(max-width:768px){

    html,
    body{
        width:100%;
        overflow-x:hidden;
    }

    .wrap{
        width:100%;
    }

    header .wrap{
        display:block;
        padding:12px 10px;
    }

    header h1{
        font-size:14px;
        line-height:1.2;
        margin:0 0 10px;
        white-space:normal;
    }

    .site-title img{
        width:28px;
        height:28px;
    }



    nav a,
    .navbtn{
        display:block;
        background:#475569;
        color:white;
        text-align:center;
        border-radius:7px;
        padding:10px 8px;
        min-height:42px;
        line-height:22px;
        margin:0;
    }

    main{
        padding-top:12px;
    }

    .card{
        padding:14px;
        border-radius:10px;
        margin-bottom:14px;
        overflow-x:auto;
    }

    .topbar{
        display:block;
    }

    .topbar h2, b{
        margin-top:0;
        font-size:13px;
    }
	

	.tanggal .profile-trigger{
		font-size:13px;
	}
	
    .topbar button,
    .topbar .btn{
        width:100%;
        margin-top:8px;
    }

    table{
        min-width:720px;
        font-size:12px;
    }

    th,
    td{
        padding:8px;
    }


    .open-logsheet-cell{
        -webkit-tap-highlight-color:rgba(14,165,233,.15);
    }

    tr:hover .open-logsheet-cell{
        background:transparent;
    }

    .actions{
        display:flex;
        flex-wrap:wrap;
        gap:5px;
        white-space:normal;
    }

    .actions a,
    .actions button{
        flex:1 1 auto;
        text-align:center;
        margin:0;
    }

    input,
    select,
    textarea,
    button{

        font-size:12px;
    }

    .modal{
        padding:12px;
        align-items:flex-start;
    }

    .modalbox{
        width:100%;
        max-width:100%;
        margin:55px auto 20px;
        padding:18px 14px;
        border-radius:16px;
        overflow:visible;
    }

    .modalbox h2,
    .modalbox h3{
        font-size:16px;
        margin-top:8px;
        padding-right:45px;
    }

    .modalbox button{
        width:100%;
        margin-bottom:8px;
    }

    .modalbox .form-actions button,
    .modalbox .form-actions .btn{
        width:auto;
        margin-bottom:0;
    }

    .modalbox .x{
        width:44px;
        height:44px;
        min-height:44px;
        padding:0;
        right:12px;
        top:12px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .modalbox p{
        line-height:1.6;
    }

    .grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    .edit-head,
    .logsheet-title-wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;
        text-align:center;
    }

    .logo-box{
        width:120px;
        height:105px;
    }

    .logsheet-form{
        width:100%;
        min-width:0;
    }
	

    .table-search{
        max-width:none;
        width:100%;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:8px;
    }

    .table-search input{
        width:auto;
        min-width:0;
        flex:1;
    }

    .table-search button{
        width:auto;
        flex:0 0 112px;
    }

    .form-actions{
        width:100%;
        gap:8px;
    }

    .form-actions button,
    .form-actions .btn{
        width:auto;
        flex:1 1 0;
        min-width:0;
        margin:0;
    }

    .callbook-rows{
        font-size:13px;
    }

    footer{
        padding:18px 10px;
        font-size:12px;
		text-align:center;
    }
	
	.password-wrap{
		display:flex;
		align-items:center;
	}

	.password-wrap input{
		width:auto;
		flex:1;
	}

	.password-wrap .pass-eye{
		width:44px;
		min-width:44px;
		height:44px;
		flex:0 0 44px;
	}
}

@media(max-width:480px){

    header h1{
        font-size:12px;
    }

    nav{
        grid-template-columns:1fr 1fr;
    }

    nav a,
    .navbtn{
        font-size:12px;
        padding:9px 6px;
    }

    .card{
        padding:4px;
    }

    table{
        min-width:680px;
        font-size:12px;
    }

    th,
    td{
        padding:7px;
    }

    .btn.small{
        font-size:12px;
        padding:7px 8px;
    }

    .modalbox{
        margin-top:45px;
    }
}

/* Profile page */
.profile-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
}

.profile-avatar{
    width:95px;
    height:95px;
    border-radius:50%;
    object-fit:cover;
    background:#2b9fc0;
    flex:0 0 auto;
}

.profile-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
}

.profile-meta div{
    border:1px solid #e2e8f0;
    border-radius:8px;
    padding:12px;
    background:#f8fafc;
}

.profile-meta b{
    display:block;
    margin-bottom:6px;
}

.profile-meta span{
    display:block;
}

.profile-edit{
    display:none;
    margin-top:18px;
}

.profile-edit.open{
    display:block;
}

@media(max-width:700px){
    .profile-head{
        align-items:flex-start;
    }

    .profile-meta{
        grid-template-columns:1fr;
    }
}

/* Admin user management */
.user-mini-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    background:#2b9fc0;
    display:block;
}

.icon-situs{
	padding:10px;
    width:80px;
    height:80px;
    border-radius:5px;
    object-fit:cover;
    background:transparent;
    display:block;
	cursor:pointer;
}

.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
}

.badge.ok{
    background:#dcfce7;
    color:#166534;
}

.badge.off{
    background:#fee2e2;
    color:#991b1b;
}

.admin-user-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
}

.admin-user-modal.open{
    display:block;
}

.admin-user-modal-bg{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.55);
}

.admin-user-modal-box{
    position:relative;
    width:min(540px, calc(100% - 28px));
    max-height:calc(100vh - 40px);
    overflow:auto;
    margin:20px auto;
    background:#fff;
    border-radius:14px;
    padding:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.admin-user-modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.admin-user-modal-head h3{
    margin:0;
}

.modal-close{
    width:36px;
    height:36px;
    border-radius:50%;
    padding:0;
    font-size:12px;
    line-height:1;
    background:#e5e7eb;
    color:#111827;
}

.edit-user-profile-head{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    margin-bottom:14px;
}

.check-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0;
}

.check-row input{
    width:auto;
}

.modal-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:16px;
}

.btn.secondary{
    background:#64748b;
}

body.modal-open{
    overflow:hidden;
}

@media(max-width:700px){
    .admin-user-modal-box{
        margin:10px auto;
        max-height:calc(100vh - 20px);
    }

    .modal-actions{
        flex-direction:column;
    }

    .modal-actions button{
        width:100%;
    }
}


.site-title span small{font-size:12px;font-weight:400;color:#dbeafe;margin-top:3px;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clickable-avatar,.profile-trigger,.image-popup-trigger{cursor:pointer}
.user-mini-avatar.clickable-avatar:hover,.image-popup-trigger:hover{filter:brightness(.96);transform:scale(1.03)}
.profile-trigger{background:transparent;border:0;color:#0f172a;padding:0;font-weight:600;text-align:left}
.profile-trigger:hover{color:#0ea5e9;text-decoration:underline}
.activity-table td{font-size:12px;vertical-align:top}
.btn.login-as{background:#7c3aed}
.impersonating-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:10px 12px;margin-bottom:14px;font-weight:700}
.image-viewer-modal .modalbox{max-width:min(92vw,720px);background-color: #fff;text-align:center;}
.image-viewer-modal img{max-width:100%;max-height:78vh;border-radius:12px;object-fit:contain}
.generic-profile-card{text-align:center}
.generic-profile-card .profile-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block}
.generic-profile-card .profile-row{display:grid;grid-template-columns:110px 1fr;gap:8px;text-align:left;border-top:1px solid #e5e7eb;padding:8px 0}
.generic-profile-card .profile-row b{color:#475569}
@media(max-width:600px){.site-title span small{font-size:10px; max-width:230px}.profile-trigger{font-size:inherit}.generic-profile-card .profile-row{grid-template-columns:1fr}.aksi-inline .btn.small,.actions .btn.small,.actions button.small{min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px}}

.table-scroll{overflow-x:auto}

table td, table th{vertical-align:middle}
.actions,.aksi-inline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.actions .inline-form,.aksi-inline .inline-form{display:inline-flex;margin:0}
.btn.small,button.small{line-height:1.1;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:700px){
  table td,table th{vertical-align:middle}
  .actions,.aksi-inline{gap:5px;white-space:nowrap}
  .actions .btn.small,.aksi-inline .btn.small,.actions button.small,.aksi-inline button.small{min-width:auto;min-height:34px;padding:7px 9px;font-size:12px;border-radius:7px}
}

/* Settings page tabs */
.settings-tab-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.settings-tab-btn{border:0;border-radius:10px;padding:10px 14px;background:#e5e7eb;color:#111827;font-weight:700;cursor:pointer}
.settings-tab-btn.active{background:#0ea5e9;color:#fff}
.settings-tab-panel{display:none}
.settings-tab-panel.active{display:block}
@media(max-width:700px){.settings-tab-buttons{display:grid;grid-template-columns:1fr}.settings-tab-btn{text-align:left}}

/* === PATCH FINAL: password eye + modal close button === */
.modalbox .password-wrap{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 44px !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin:6px 0 12px !important;
}

.modalbox .password-wrap input[type="password"],
.modalbox .password-wrap input[type="text"]{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:8px 10px !important;
    display:block !important;
    box-sizing:border-box !important;
}

.modalbox .password-wrap .pass-eye,
.modalbox .password-wrap button.pass-eye{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    border:1px solid #cbd5e1 !important;
    border-radius:7px !important;
    background:#fff !important;
    color:#111 !important;
    line-height:1 !important;
    font-size:12px !important;
    flex:none !important;
}

.modalbox > .x,
.modalbox button.x{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:12px !important;
    background:#e2e8f0 !important;
    color:#111 !important;
}

@media(max-width:768px){
    .modalbox .password-wrap{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 44px !important;
        gap:8px !important;
    }

    .modalbox .password-wrap input[type="password"],
    .modalbox .password-wrap input[type="text"]{
        width:100% !important;
        min-height:38px !important;
        height:38px !important;
        margin:0 !important;
    }

    .modalbox .password-wrap .pass-eye,
    .modalbox .password-wrap button.pass-eye{
        width:44px !important;
        min-width:44px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
    }

    .modalbox > .x,
    .modalbox button.x{
        width:28px !important;
        min-width:28px !important;
        height:28px !important;
        min-height:28px !important;
        right:12px !important;
        top:12px !important;
    }
}
/* === END PATCH FINAL === */

/* Auto search/sort/filter controls */
.table-search.auto-filter-form{
    display:flex;
    align-items:center;
    gap:8px;
    max-width:none;
    width:100%;
}
.table-search.auto-filter-form input{
    flex:1 1 auto;
    min-width:220px;
    width:auto;
    margin:0;
}
.table-search.auto-filter-form select{
    flex:0 0 170px;
    width:auto;
    margin:0;
    min-height:40px;
}
@media(max-width:700px){
    .table-search.auto-filter-form{
        flex-wrap:wrap;
    }
    .table-search.auto-filter-form input{
        flex:1 1 100%;
        min-width:0;
    }
    .table-search.auto-filter-form select{
        flex:1 1 calc(50% - 8px);
        min-width:130px;
    }
}

/* =========================
   CENTRALIZED STYLES
   Dipindahkan dari inline CSS/PHP agar style utama terkumpul di file ini.
   ========================= */

.text-center{text-align:center}
.mt-0{margin-top:0}
.is-hidden{display:none}
.x-link{text-decoration:none}

/* Export choice page */
.export-choice-card{
    max-width:560px;
    margin:28px auto;
    text-align:center;
}
.export-choice-desc{margin-bottom:18px}
.export-choice-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

/* Header CallBook */
.callbook-action-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

/* Settings site icon upload */
.site-icon-upload-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

/* View logsheet toolbar + quick add */
.view-toolbar{display:block;margin-bottom:12px}
.view-search-line{display:flex;align-items:center;gap:10px;width:100%}
.view-search-line input{min-width:220px;margin:0;flex:1 1 auto}
.view-live-info{min-height:16px;color:#64748b;font-size:10px;margin-top:4px}
.btn-add-callsign{white-space:nowrap;flex:0 0 auto;margin:0}
.logsheet-actions{display:flex;flex-direction:column;gap:8px;min-width:210px}
.logsheet-actions-row{display:flex;gap:8px;font-size:12px}
.logsheet-actions-row .btn{flex:1;text-align:center}
.quick-call-fab{position:fixed;right:22px;bottom:28px;z-index:9000;display:flex;align-items:center;justify-content:flex-end;gap:8px;background:#222;border:1px solid #dbe3ea;border-radius:999px;padding:8px;box-shadow:0 12px 32px rgba(15,23,42,.22)}
.quick-call-form{display:none;align-items:center;gap:8px;margin:0}
.quick-call-fab.open{border-radius:15px}
.quick-call-fab.open .quick-call-form{display:flex}
.quick-call-plus{width:48px;height:48px;border-radius:50%;padding:0;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:none}
.quick-call-fab.open .quick-call-plus{display:none}
.quick-call-input{width:0;min-width:0;padding-left:0;padding-right:0;border-width:0;opacity:0;transition:width .2s ease, opacity .2s ease, padding .2s ease, border-width .2s ease}
.quick-call-fab.open .quick-call-input{width:190px;padding-left:10px;padding-right:10px;border-width:1px;opacity:1}
.quick-call-submit,.quick-call-hide{white-space:nowrap}
.quick-call-hide{background:#64748b}
tr.row-focus{animation:rowFocus 2.4s ease;border-left:4px solid #0ea5e9}
@keyframes rowFocus{0%,75%{background:#dcfce7}100%{background:transparent}}

@media (max-width:600px){
    .view-search-line{display:flex;align-items:center;gap:8px}
    .view-search-line input{width:auto;min-width:0;flex:1 1 auto}
    .btn-add-callsign{width:auto;min-width:132px;flex:0 0 auto;padding-left:10px;padding-right:10px}
    .logsheet-actions{width:100%;min-width:0}
    .logsheet-actions-row{width:100%}
    .quick-call-fab{right:14px;bottom:14px;left:auto;border-radius:999px;padding:6px;max-width:calc(100vw - 24px)}
    .quick-call-fab.open{left:12px;right:12px;bottom:10px;border-radius:18px;padding:10px;justify-content:center}
    .quick-call-fab.open .quick-call-form{display:grid;grid-template-columns:minmax(120px,1fr) 96px 76px;gap:8px;width:100%;align-items:center}
    .quick-call-fab.open .quick-call-input{width:100%;min-width:0;height:44px;padding:0 10px;border-width:1px;opacity:1;font-size:12px}
    .quick-call-submit,.quick-call-hide{height:44px;padding:0 10px;font-size:12px;text-align:center}
    .quick-call-plus{width:52px;height:52px;font-size:24px}
}
@media (max-width:380px){
    .quick-call-fab.open{left:8px;right:8px;padding:8px}
    .quick-call-fab.open .quick-call-form{grid-template-columns:minmax(92px,1fr) 82px 64px;gap:6px}
    .quick-call-submit,.quick-call-hide{font-size:12px;padding:0 6px}
}

/* Alert fade */
.alert{transition:opacity .5s ease,transform .5s ease}
.alert.fade-out{opacity:0;transform:translateY(-8px)}

/* Export modal */
.export-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none;align-items:center;justify-content:center;padding:16px}
.export-modal-backdrop.show{display:flex}
.export-modal{background:#bcc3cb;;color:#111;border-radius:14px;box-shadow:0 15px 45px rgba(0,0,0,.35);width:min(420px,100%);padding:20px;text-align:center}
.export-modal h3{margin:0 0 10px;font-size:14px}
.export-modal p{margin:0 0 18px;color:#475569}
.export-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.export-modal-actions .btn{min-width:105px;text-align:center}

/* =========================
   MOBILE TABLE ACTION FIX
   Jangan jadikan <td class="actions"> flex, karena membuat kolom AKSI
   keluar dari struktur table-cell pada mobile.
   ========================= */
td.actions,
td.aksi-inline{
    display:table-cell !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
}

td.actions > a,
td.actions > button,
td.actions > .inline-form,
td.aksi-inline > a,
td.aksi-inline > button,
td.aksi-inline > .inline-form{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    width:auto !important;
    flex:none !important;
    margin:2px !important;
}

td.actions .inline-form button,
td.aksi-inline .inline-form button{
    width:auto !important;
    margin:0 !important;
}

@media(max-width:768px){
    td.actions,
    td.aksi-inline{
        display:table-cell !important;
        vertical-align:middle !important;
        white-space:nowrap !important;
    }

    td.actions .btn.small,
    td.actions button.small,
    td.aksi-inline .btn.small,
    td.aksi-inline button.small{
        width:auto !important;
        min-width:auto;
        min-height:34px;
        padding:7px 9px;
        font-size:12px;
        border-radius:7px;
    }
}

/* === Patch: tanggal + NCS tetap satu baris di mobile === */
.tanggal{
    display:flex;
    align-items:baseline;
    justify-content:left;
    gap:4px;
    flex-wrap:nowrap;
    white-space:nowrap;
}

.tanggal .profile-trigger{
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    line-height:inherit !important;
    vertical-align:baseline;
}

@media(max-width:600px){
    .tanggal{
        font-size:12px;
		justify-content:center;
    }
}


/* Flash message mengambang: tidak mendorong halaman ke atas/bawah saat reload. */
.msg.ok,
.msg.err,
.msg.auto-hide,
.flash-floating{
    position:fixed;
    top:88px;
    right:18px;
    left:auto;
    z-index:10050;
    width:min(520px, calc(100vw - 36px));
    margin:0;
    box-shadow:0 12px 35px rgba(15,23,42,.22);
    border:1px solid rgba(15,23,42,.08);
}
.msg.ok{background:#dcfce7;color:#052e16}
.msg.err{background:#fee2e2;color:#7f1d1d}
@media (max-width:640px){
    .msg.ok,
    .msg.err,
    .msg.auto-hide,
    .flash-floating{
        top:82px;
        right:12px;
        left:12px;
        width:auto;
    }
}

/* === Sticky auto-hide header ===
   Header utama tetap mudah diakses:
   - scroll turun: header naik/sembunyi
   - scroll naik: header muncul lagi
   - di posisi paling atas: header normal muncul
*/
header.site-header-sticky{
    position:sticky;
    top:0;
    z-index:9400;
    transform:translateY(0);
    transition:transform .25s ease, box-shadow .25s ease;
    will-change:transform;
    box-shadow:0 2px 10px rgba(15,23,42,.12);
}

header.site-header-sticky.header-hidden{
    transform:translateY(-105%);
    box-shadow:none;
}

header.site-header-sticky.header-visible{
    transform:translateY(0);
}

/* Pesan floating diberi jarak aman dari header sticky. */
header.site-header-sticky ~ main .msg.ok,
header.site-header-sticky ~ main .msg.err,
.flash-floating{
    top:88px;
}

@media(max-width:640px){
    header.site-header-sticky{
        z-index:9400;
    }

    header.site-header-sticky ~ main .msg.ok,
    header.site-header-sticky ~ main .msg.err,
    .flash-floating{
        top:82px;
    }
}
/* === End sticky auto-hide header === */

/* === PATCH: modal selalu di atas sticky header ===
   Sticky header memakai z-index tinggi agar tetap terlihat saat scroll.
   Popup/modal harus lebih tinggi lagi supaya tidak tertutup header. */
header.site-header-sticky{
    z-index:7000;
}

.modal,
.admin-user-modal,
.export-modal-backdrop{
    z-index:20000 !important;
}

.modalbox,
.admin-user-modal-box,
.export-modal{
    position:relative;
    z-index:20001;
}

/* Tombol floating tetap di bawah modal/popup. */
.quick-call-fab{
    z-index:6500;
}
/* === End patch modal above sticky header === */


/* === PATCH: mobile sticky header lebih normal ===
   Di mobile header dibuat fixed agar tidak ikut keluar dari viewport.
   JS mengisi --site-header-h sesuai tinggi header agar konten tidak tertutup. */
body.has-sticky-header{
    --site-header-h:78px;
}

@media(max-width:768px){
    header.site-header-sticky{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:7000;
    }

    body.has-sticky-header main{
        padding-top:calc(var(--site-header-h, 78px) + 12px) !important;
    }

    header.site-header-sticky.header-hidden{
        transform:translateY(calc(-1 * var(--site-header-h, 78px) - 6px));
    }

    header.site-header-sticky.header-visible{
        transform:translateY(0);
    }

    header.site-header-sticky ~ main .msg.ok,
    header.site-header-sticky ~ main .msg.err,
    .flash-floating{
        top:calc(var(--site-header-h, 78px) + 10px) !important;
    }
}
/* === End patch mobile sticky header === */


/* === PATCH: foto profil kecil di header ===
   Hanya untuk foto user login yang benar-benar sudah ada.
   Aturan ini sengaja memakai selector spesifik + !important agar foto profil
   tidak ikut membesar oleh aturan gambar lain atau cache style mobile. */
nav .nav-profile-photo-link,
header.site-header-sticky nav .nav-profile-photo-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 !important;
    margin:0 2px !important;
    line-height:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:none !important;
    flex:0 0 40px !important;
}

nav img.nav-profile-photo,
header.site-header-sticky nav img.nav-profile-photo,
.nav-profile-photo{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    border:1px solid rgba(255,255,255,.75) !important;
    background:#fff !important;
    padding:0 !important;
    margin:0 !important;
    flex:none !important;
}

nav .nav-profile-photo-link:hover img.nav-profile-photo{
    filter:brightness(.98);
    transform:scale(1.03);
}

@media(max-width:768px){
    nav .nav-profile-photo-link,
    header.site-header-sticky nav .nav-profile-photo-link{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
        flex:0 0 34px !important;
        background:transparent !important;
        padding:0 !important;
    }

    nav img.nav-profile-photo,
    header.site-header-sticky nav img.nav-profile-photo,
    .nav-profile-photo{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
    }
}
/* === End patch foto profil kecil di header === */

/* === PATCH: mobile sticky header hidden full ===
   Pada beberapa browser mobile, tinggi header yang dihitung JS bisa lebih kecil
   dari tinggi visual header setelah menu membungkus. Saat hidden, gunakan
   persentase tinggi header sendiri + !important agar semua bagian header benar-benar keluar layar. */
@media(max-width:768px){
    header.site-header-sticky.header-hidden{
        transform:translate3d(0,-115%,0) !important;
        box-shadow:none !important;
        pointer-events:none;
    }

    header.site-header-sticky.header-visible,
    header.site-header-sticky:not(.header-hidden){
        transform:translate3d(0,0,0) !important;
        pointer-events:auto;
    }
}
/* === End patch mobile sticky header hidden full === */

/* === PATCH: Soft delete, Keluar/Kembali, dan aksi via nama peserta === */
.item-out-row td{
    color:#6b7280;
    background:#f8fafc;
}
.item-out-row .callsign-link,
.item-out-row .participant-name-toggle{
    color:#6b7280;
}
.item-out-row td:first-child{
    box-shadow:inset 4px 0 0 #94a3b8;
}
.item-deleted-row td{
    color:#92400e;
    background:#fff7ed;
    font-style:italic;
}
.item-deleted-row td:first-child{
    box-shadow:inset 4px 0 0 #f59e0b;
}
.trash-note{
    color:#b45309;
    font-weight:700;
}
.btn.out,
button.out{
    background:#475569;
}
.btn.back,
button.back{
    background:#16a34a;
}
.btn.restore,
button.restore{
    background:#f59e0b;
    color:#111827;
}
.participant-name-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:auto;
    max-width:100%;
    padding:0;
    margin:0;
    border:0;
    border-radius:4px;
    background:transparent;
    color:#0f172a;
    font:inherit;
    font-size:12px;
    text-align:left;
    cursor:pointer;
}
.participant-name-toggle:hover,
.participant-name-toggle[aria-expanded="true"]{
    color:#0ea5e9;
    text-decoration:underline;
    background:#e0f2fe;
}
.participant-name-toggle::after{
    content:none !important;
}
.name-action-panel{
    margin-top:7px;
    padding:7px;
    border:1px solid #dbe3ee;
    border-radius:8px;
    background:#f8fafc;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    box-shadow:0 8px 24px rgba(15,23,42,.10);
}
.name-action-panel[hidden]{display:none !important}
.name-action-panel .inline-form{
    display:inline-flex;
}
@media(max-width:768px){
    .participant-name-toggle{
        min-height:26px;
        padding:2px 4px;
    }
    .name-action-panel{
        position:relative;
        z-index:20;
        min-width:230px;
    }
    .name-action-panel .btn.small,
    .name-action-panel button.small{
        min-height:34px;
        padding:7px 9px;
        font-size:12px;
    }
}
/* === End patch soft delete / keluar kembali === */



/* === PATCH: Koreksi nomor lokal + menu aksi modern dari kolom NAMA === */
.participant-name-cell{
    position:relative;
    cursor:pointer;
    border-radius:6px;
    transition:background .15s ease;
}
.participant-name-cell:hover,
.participant-name-cell.name-actions-open{
    background:#eef6ff;
}
.participant-name-toggle{
    text-decoration:none !important;
    border-radius:6px;
    padding:2px 5px;
}
.participant-name-toggle:hover,
.participant-name-toggle[aria-expanded="true"]{
    text-decoration:none !important;
    background:transparent;
    color:#0f172a;
}
.participant-name-toggle::after{
    content:none !important;
}
.name-action-template,
.name-action-panel{
    display:none !important;
}

.name-action-popover{
    position:fixed;
    z-index:19000;
    width:max-content;
    min-width:245px;
    max-width:min(360px, calc(100vw - 20px));
    background:#fff;
    color:#0f172a;
    border:1px solid #dbe3ee;
    border-radius:14px;
    box-shadow:0 18px 50px rgba(15,23,42,.28);
    padding:10px;
}
.name-action-popover[hidden]{display:none !important}
.name-action-popover-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:2px 2px 9px;
    margin-bottom:8px;
    border-bottom:1px solid #e5e7eb;
    font-size:13px;
}
.name-action-close{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#e5e7eb !important;
    color:#111827 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
}
.name-action-popover-body{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}
.name-action-popover-body .inline-form{
    display:inline-flex;
    margin:0;
}
.name-action-popover-body .btn.small,
.name-action-popover-body button.small{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
}

@media(max-width:768px){
    .participant-name-cell{min-width:170px}
}
@media(max-width:640px){
    .name-action-popover.is-mobile-sheet{
        left:12px !important;
        right:12px !important;
        bottom:12px !important;
        top:auto !important;
        width:auto;
        max-width:none;
        border-radius:18px;
        padding:12px;
        box-shadow:0 -10px 50px rgba(15,23,42,.32);
    }
    .name-action-popover.is-mobile-sheet .name-action-popover-head{
        font-size:14px;
    }
    .name-action-popover.is-mobile-sheet .name-action-popover-body{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }
    .name-action-popover.is-mobile-sheet .name-action-popover-body > a,
    .name-action-popover.is-mobile-sheet .name-action-popover-body > form,
    .name-action-popover.is-mobile-sheet .name-action-popover-body > button{
        width:100%;
    }
    .name-action-popover.is-mobile-sheet .name-action-popover-body .btn.small,
    .name-action-popover.is-mobile-sheet .name-action-popover-body button.small{
        width:100% !important;
        min-height:42px;
        margin:0 !important;
        justify-content:center;
    }
}
/* === End patch menu aksi modern dari NAMA === */

/* === PATCH: susun tombol menu NAMA ke bawah === */
.name-action-popover{
    min-width:220px;
}

.name-action-popover-body{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
}

.name-action-popover-body > a,
.name-action-popover-body > form,
.name-action-popover-body > button{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}

.name-action-popover-body .btn.small,
.name-action-popover-body button.small{
    width:100% !important;
    min-height:40px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

@media(max-width:640px){
    .name-action-popover.is-mobile-sheet .name-action-popover-body{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
    }
}
/* === END PATCH === */

/* === PATCH: mobile header tidak memotong judul/konten halaman ===
   Header mobile memakai position:fixed. Pada beberapa halaman tinggi header
   berubah setelah menu/foto profil selesai dirender, sehingga padding main
   sebelumnya kurang dan judul halaman tertutup. Override ini memberi jarak
   aman berdasarkan tinggi header aktual dari JS. */
@media(max-width:768px){
    body.has-sticky-header{
        --site-header-h:180px;
    }

    body.has-sticky-header main{
        padding-top:calc(var(--site-header-h, 180px) + 28px) !important;
    }

    header.site-header-sticky ~ main .msg.ok,
    header.site-header-sticky ~ main .msg.err,
    .flash-floating{
        top:calc(var(--site-header-h, 180px) + 12px) !important;
    }
}
/* === End patch mobile header offset === */

/* === PATCH: kurangi jarak kosong header mobile ===
   Header mobile dikembalikan ke sticky-in-flow agar tidak perlu offset setinggi header.
   Ini menghilangkan efek konten turun 2x tinggi header, tetapi auto-hide/show tetap bekerja. */
@media(max-width:768px){
    header.site-header-sticky{
        position:sticky !important;
        top:0 !important;
        left:auto !important;
        right:auto !important;
        width:100% !important;
    }

    body.has-sticky-header main{
        padding-top:12px !important;
    }

    header.site-header-sticky.header-hidden{
        transform:translate3d(0,-115%,0) !important;
        box-shadow:none !important;
        pointer-events:none;
    }

    header.site-header-sticky.header-visible,
    header.site-header-sticky:not(.header-hidden){
        transform:translate3d(0,0,0) !important;
        pointer-events:auto;
    }

    header.site-header-sticky ~ main .msg.ok,
    header.site-header-sticky ~ main .msg.err,
    .flash-floating{
        top:88px !important;
    }
}
/* === End patch kurangi jarak kosong header mobile === */

/* =========================================================
   TABEL LOGSHEET BERWARNA — mengikuti referensi pengguna
   Berlaku untuk daftar peserta (view.php) dan daftar logsheet (index.php)
   ========================================================= */
#tbl_view_items,
#tbl_public{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    background:#fff;
    font-size:12px;
    line-height:1.2;
    table-layout:auto;
}

#tbl_view_items thead th,
#tbl_public thead th{
    background:#586b91 !important;
    color:#fff !important;
    border:1px solid #222 !important;
    padding:10px 12px !important;
    font-size:12px;
    font-weight:700;
    vertical-align:middle;
    white-space:nowrap;
	text-align:center;
}

#tbl_view_items tbody td,
#tbl_public tbody td{
    border:1px solid #222 !important;
    padding:4px 7px !important;
    height:24px;
    vertical-align:middle !important;
    color:#07142b;
}

/* view.php: NO | CALLSIGN | NAMA | PROVINSI | WAKTU | KET | AKSI */
#tbl_view_items tbody td:nth-child(1){background:#c6f8df94 !important;text-align:center}
#tbl_view_items tbody td:nth-child(2){background:#f8dceb94 !important}
#tbl_view_items tbody td:nth-child(3){background:#fff58b94 !important}
#tbl_view_items tbody td:nth-child(4){background:#cfccf594 !important}
#tbl_view_items tbody td:nth-child(5){background:#ffbec294 !important;white-space:nowrap;text-align:center}
#tbl_view_items tbody td:nth-child(6){background:#b9daf894 !important}
#tbl_view_items tbody td:nth-child(7){background:#d7e9fb94 !important}

/* index.php: TANGGAL | NCS | KEGIATAN | FREQ/SERVER | PESERTA | AKSI */
#tbl_public tbody td:nth-child(1){background:#c6f8df94 !important;white-space:nowrap;text-align:center}
#tbl_public tbody td:nth-child(2){background:#f8dceb94 !important;text-align:center}
#tbl_public tbody td:nth-child(3){background:#fff58b94 !important}
#tbl_public tbody td:nth-child(4){background:#cfccf594 !important}
#tbl_public tbody td:nth-child(5){background:#ffbec294 !important;text-align:center}
#tbl_public tbody td:nth-child(6){background:#b9daf894 !important}

/* Pertahankan warna kolom saat hover; beri penanda halus saja. */
#tbl_view_items tbody tr:hover td,
#tbl_public tbody tr:hover td{
    filter:brightness(.97);
}

#tbl_view_items .callsign-link,
#tbl_view_items .participant-name-toggle,
#tbl_public .profile-trigger{
    color:#07142b !important;
    font-size:12px;
}

#tbl_view_items .callsign-link,
#tbl_public .profile-trigger{
    font-weight:400;
}

#tbl_view_items .participant-name-toggle{
    padding:0 2px;
}

#tbl_view_items .actions,
#tbl_public .actions{
    white-space:nowrap !important;
}

/* Baris logsheet milik pengguna dibuat berbeda agar mudah dikenali. */
#tbl_public tbody tr.my-logsheet-row td{
    background: #ffecb5 !important
}
#tbl_public tbody tr.my-logsheet-row td:first-child{
    box-shadow:inset 4px 0 0 #0ea5e9;
}

/* Angka peserta ditampilkan sebagai teks biasa, tanpa badge/bulatan. */
#tbl_public tbody td:nth-child(5) .badge,
#tbl_public tbody td:nth-child(5) .badge.ok{
    display:inline;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent !important;
    color:#07142b !important;
    font-weight:400;
    box-shadow:none;
}

/* Status keluar / sampah tetap mudah dibedakan tanpa menghapus warna kolom. */
#tbl_view_items .item-out-row td{
    opacity:.72;
}
#tbl_view_items .item-deleted-row td{
    opacity:.78;
    font-style:italic;
}

/* Area tabel dibuat lebih mirip lembar data pada referensi. */
.card:has(#tbl_view_items),
.card:has(#tbl_public){
    border-radius:3px;
}

@media(max-width:768px){
    #tbl_view_items,
    #tbl_public{
        font-size:10px;
    }

    #tbl_view_items thead th,
    #tbl_public thead th{
        padding:9px 8px !important;
    }

    #tbl_view_items tbody td,
    #tbl_public tbody td{
        padding:5px 6px !important;
    }
}
/* === END TABEL LOGSHEET BERWARNA === */

/* =========================================================
   INDEX.PHP — DAFTAR LOGSHEET MODEL CARD
   ========================================================= */
.logsheet-card-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
}

.logsheet-list-card{
    position:relative;
    display:grid;
    grid-template-columns:180px minmax(0,1fr) 44px;
    align-items:center;
    min-height:150px;
    padding:5px 22px;
    overflow:visible;
    border:1px solid #999;
    border-radius:6px;
    cursor:pointer;
    transition:box-shadow .16s ease, transform .16s ease, background .16s ease;
}


.logsheet-list-card:active{transform:scale(.998)}

.logsheet-list-card.my-logsheet-card{
    box-shadow:inset 5px 0 0 #0ea5e9;
	background-color: white;
}
.logsheet-list-card.my-logsheet-card:hover{
    box-shadow:inset 5px 0 0 #00f;
	background-color: #adf2ef;
}

.logsheet-card-logo{
    width:120px;
    height:120px;
    border-radius:10px;
    overflow:hidden;
}

.logsheet-card-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}

.logsheet-card-content{
    align-self:center;
    min-width:0;
}

.logsheet-card-content h3{
    margin:0 0 14px;
    color:#000;
    font-size:16px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
    overflow-wrap:anywhere;
}

.logsheet-card-meta{
    font-size:12px;
}

.logsheet-card-meta > div{
    display:grid;
    grid-template-columns:145px 14px minmax(0,1fr);
    align-items:start;
    line-height:1.25;
}

.logsheet-card-meta dt,
.logsheet-card-meta dd{margin:0}

.logsheet-card-meta dt{
    grid-column:1 / 3;
    display:grid;
    grid-template-columns:minmax(0,1fr) 14px;
    min-width:0;
    font-weight:700;
}

.logsheet-card-meta dt::after{
    content:":";
    display:block;
    text-align:center;
}

.logsheet-card-meta dd{
    grid-column:3;
    min-width:0;
    overflow-wrap:anywhere;
}

.logsheet-card-meta .profile-trigger{
    display:inline;
    padding:0;
    border:0;
    background:transparent;
    color:#000 !important;
    font:inherit;
    font-weight:700;
    line-height:inherit;
    text-decoration:none;
    cursor:pointer;
}

.logsheet-card-meta .profile-trigger:hover{text-decoration:underline}

.logsheet-action-menu{
    position:absolute;
    z-index:20;
    top:5px;
    right:5px;
}


/* Pastikan dropdown aksi selalu berada di atas card lain. */
.logsheet-list-card.action-menu-open{
    z-index:1000;
}

.logsheet-list-card.action-menu-open .logsheet-action-menu{
    z-index:1001;
}

.logsheet-action-menu[open] .logsheet-action-dropdown{
    z-index:1002;
    pointer-events:auto;
}

/* Titik tiga milik card lain tidak boleh menimpa dropdown yang terbuka. */
.logsheet-card-list:has(.action-menu-open) .logsheet-list-card:not(.action-menu-open) .logsheet-action-menu{
    z-index:1;
}

.logsheet-action-menu summary{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#000;
    font-size:20px;
    font-weight:1000;
    line-height:1;
    list-style:none;
    cursor:pointer;
    user-select:none;
}

.logsheet-action-menu summary::-webkit-details-marker{display:none}
.logsheet-action-menu summary:hover,
.logsheet-action-menu[open] summary{background:rgba(0,0,0,.09)}

.logsheet-action-dropdown{
    position:absolute;
    top:38px;
    right:0;
    width:155px;
    padding:6px;
    border:1px solid #b8c3ba;
    border-radius:8px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}

.logsheet-action-dropdown a{
    display:block;
    padding:10px 12px;
    border-radius:5px;
    color:#16211a;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}

.logsheet-action-dropdown a:hover{background:#edf5ef}
.logsheet-action-dropdown a.danger{color:#c31818}
.logsheet-action-dropdown a.danger:hover{background:#fff0f0}

.logsheet-card-empty{
    padding:30px 18px;
    border:1px dashed #adb8af;
    border-radius:7px;
    background:#fafafa;
    text-align:center;
}

@media(max-width:700px){
    .logsheet-list-card{
        grid-template-columns:105px minmax(0,1fr) 34px;
        min-height:132px;
        padding:8px 5px;
    }

    .logsheet-card-logo{
        width:100px;
        height:100px;
        border-width:1px;
        border-radius:12px;
    }

    .logsheet-card-content{padding:4px 12px}
    .logsheet-card-content h3{
        margin-bottom:9px;
        padding-right:2px;
        font-size:14px;
    }

    .logsheet-card-meta{
        gap:4px;
        font-size:11px;
    }

    .logsheet-card-meta > div{
        grid-template-columns:92px 8px minmax(0,1fr);
    }

    .logsheet-card-meta dt{
        grid-template-columns:minmax(0,1fr) 8px;
    }

    .logsheet-action-menu{top:2px;right:2px}
    .logsheet-action-menu summary{width:30px;height:30px;font-size:18px}
    .logsheet-action-dropdown{top:34px;right:0}
}

@media(max-width:430px){
    .logsheet-list-card{
        grid-template-columns:100px minmax(0,1fr) 28px;
        min-height:116px;
    }

    .logsheet-card-logo{
		width: 100px;
		height: 100px;
		border-width: 1px;
		border-radius: 8px;
    }

    .logsheet-card-content{padding:3px 8px}
    .logsheet-card-content h3{font-size:12px}
    .logsheet-card-meta{font-size:10px}
    .logsheet-card-meta > div{grid-template-columns:76px 6px minmax(0,1fr)}
    .logsheet-card-meta dt{grid-template-columns:minmax(0,1fr) 6px}
}
/* === END INDEX CARD === */


/* === INDEX MODE SELECT: identik dengan Sort By dan Filter === */
/* Mode dipasang dari <head> sebelum CSS dirender agar tampilan yang salah
   tidak sempat terlihat saat refresh / hard refresh. */
html[data-logsheet-view="card"] #logsheetTableView,
html[data-logsheet-view="table"] #logsheetCardView{
    display:none !important;
}

.logsheet-view-panel[hidden]{display:none !important}

.table-search.auto-filter-form #logsheetViewSelect{
    flex:0 0 170px;
    width:auto;
    margin:0;
    min-height:40px;
}

@media(max-width:700px){
    .table-search.auto-filter-form #logsheetViewSelect{
        flex:1 1 calc(50% - 8px);
        min-width:130px;
    }
}
/* === END INDEX MODE SELECT === */

/* === PATCH INDEX TABLE SESUAI SCREENSHOT === */
#tbl_public{
    table-layout:fixed;
}

#tbl_public thead th{
    text-align:center !important;
    text-transform:uppercase;
    padding:10px 8px !important;
}

#tbl_public thead th:nth-child(1){width:8.5%}
#tbl_public thead th:nth-child(2){width:6.5%}
#tbl_public thead th:nth-child(3){width:22%}
#tbl_public thead th:nth-child(4){width:28%}
#tbl_public thead th:nth-child(5){width:8%}
#tbl_public thead th:nth-child(6){width:27%}

#tbl_public tbody td{
    padding:5px 7px !important;
    height:38px;
    overflow-wrap:anywhere;
}

#tbl_public tbody td:nth-child(1),
#tbl_public tbody td:nth-child(2),
#tbl_public tbody td:nth-child(5){
    text-align:center;
}

#tbl_public tbody td:nth-child(1) a,
#tbl_public tbody td:nth-child(3) a{
    color:#07142b;
    text-decoration:none;
}

#tbl_public tbody td:nth-child(1) a:hover,
#tbl_public tbody td:nth-child(3) a:hover{
    text-decoration:underline;
}

#tbl_public td.actions{
    padding:5px 9px !important;
    text-align:left;
    white-space:nowrap !important;
}

#tbl_public td.actions .btn.small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:27px;
    margin:0 3px 0 0;
    padding:5px 9px !important;
    border:0;
    border-radius:8px;
    color:#fff !important;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    box-shadow:none;
}

#tbl_public .table-export-btn{background:#64748b !important}
#tbl_public .table-wa-btn{background:#22c55e !important}
#tbl_public .table-edit-btn{background:#20aeea !important}
#tbl_public .table-delete-btn{background:#e91550 !important}

#tbl_public .table-export-btn:hover,
#tbl_public .table-wa-btn:hover,
#tbl_public .table-edit-btn:hover,
#tbl_public .table-delete-btn:hover{
    filter:brightness(.93);
}

@media(max-width:768px){
    #tbl_public{min-width:1000px}
}
/* === END PATCH INDEX TABLE SESUAI SCREENSHOT === */

/* === FIX ALIGNMENT INDEX TABLE: TANGGAL & HEADER AKSI === */
/* Class .tanggal sebelumnya memakai display:flex untuk komponen lain.
   Pada tabel index harus tetap menjadi table-cell agar border menyatu. */
#tbl_public tbody td.tanggal{
    display:table-cell !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
    text-align:center !important;
}

#tbl_public tbody td.tanggal > a{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
}

/* Cegah aturan global .actions mengubah TH menjadi flex. */
#tbl_public thead th.actions,
#tbl_public thead th:nth-child(6){
    display:table-cell !important;
    width:27% !important;
    text-align:center !important;
    vertical-align:middle !important;
}
/* === END FIX ALIGNMENT INDEX TABLE === */

/* === PATCH MOBILE: mode, urutan, dan filter satu baris === */
@media(max-width:700px){
    .table-search.auto-filter-form{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .table-search.auto-filter-form input{
        grid-column:1 / -1;
        width:100%;
        min-width:0;
    }

    .table-search.auto-filter-form select,
    .table-search.auto-filter-form #logsheetViewSelect{
        width:100%;
        min-width:0;
        max-width:none;
        min-height:40px;
        padding-left:9px;
        padding-right:24px;
        font-size:12px;
    }
}
/* === END PATCH MOBILE INLINE FILTER === */

/* === PATCH FINAL: sticky header mobile muncul kembali saat scroll ke atas ===
   Header harus fixed di mobile. Saat memakai position:sticky sambil digeser
   keluar viewport, sebagian browser mobile tidak mengembalikannya ketika arah
   scroll berubah. Tinggi konten mengikuti --site-header-h yang dihitung JS. */
@media (max-width:768px){
    header.site-header-sticky{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        z-index:7000 !important;
        transform:translate3d(0,0,0);
    }

    body.has-sticky-header main{
        padding-top:calc(var(--site-header-h, 78px) + 12px) !important;
    }

    header.site-header-sticky.header-hidden{
        transform:translate3d(0,calc(-100% - 6px),0) !important;
        box-shadow:none !important;
        pointer-events:none !important;
    }

    header.site-header-sticky.header-visible,
    header.site-header-sticky:not(.header-hidden){
        transform:translate3d(0,0,0) !important;
        pointer-events:auto !important;
    }

    header.site-header-sticky ~ main .msg.ok,
    header.site-header-sticky ~ main .msg.err,
    .flash-floating{
        top:calc(var(--site-header-h, 78px) + 10px) !important;
    }
}
/* === End patch final sticky header mobile === */

/* === FIX: hilangkan jarak berlebih di bawah header mobile ===
   Nilai lama 180px pada body menimpa tinggi header aktual dari JavaScript.
   Gunakan kembali nilai --site-header-h dari :root agar konten tepat di bawah header. */
@media (max-width:768px){
    body.has-sticky-header{
        --site-header-h:inherit !important;
    }

    body.has-sticky-header main{
        padding-top:calc(var(--site-header-h, 78px) + 8px) !important;
    }
}
/* === End fix jarak header mobile === */

/* =========================================================
   PENYEMPURNAAN CARD LOGSHEET — INDEX & HEADER VIEW
   ========================================================= */
.logsheet-list-card{
    grid-template-columns:160px minmax(0,1fr) 44px;
    min-height:150px;
    padding:14px 18px 14px 22px;
    border-color:#9aa7b8;
    border-radius:7px;
	background: linear-gradient(0deg, rgba(179, 255, 255, 1) 0%, rgba(237, 250, 255, 1) 50%);
}

.logsheet-list-card:hover,
.logsheet-list-card:focus-visible{
	background: linear-gradient(0deg, rgba(200, 255, 255, 1) 5%, rgba(250, 253, 255, 1) 50%);
    box-shadow:3px 12px rgba(0,0,0,);
	border-color:blue;
    outline:none;
}


.logsheet-card-logo{
    width:120px;
    height:120px;
}

.logsheet-card-content h3{
    margin:0 0 6px;
    font-size:16px;
}

.logsheet-card-meta > div{
    grid-template-columns:145px 14px minmax(0,1fr);
    line-height:1.35;
}

.logsheet-card-meta .profile-trigger{
    text-align:left;
}

/* Header view.php mengikuti bentuk card di index.php. */
.logsheet-head.logsheet-head-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:150px;
    padding:14px 18px 14px 22px;
    border:1px solid #9aa7b8;
    border-radius:7px;
    background: linear-gradient(0deg, rgba(179, 255, 255, 1) 0%, rgba(237, 250, 255, 1) 50%);
}

.logsheet-head-main{
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    align-items:center;
    flex:1 1 auto;
    min-width:0;
}

.logsheet-head-logo{
    flex:none;
}

.logsheet-head-content{
    min-width:0;
    padding:6px 0;
}

.logsheet-head-content h2{
    margin:0 0 14px;
    color:#000;
    font-size:16px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
    overflow-wrap:anywhere;
}

.logsheet-head-card .logsheet-actions{
    flex:0 0 auto;
}

@media(max-width:700px){
    .logsheet-list-card{
        grid-template-columns:105px minmax(0,1fr) 34px;
        min-height:132px;
        padding:8px 5px;
    }

    .logsheet-head.logsheet-head-card{
        align-items:flex-start;
        gap:10px;
        min-height:132px;
        padding:8px 5px;
    }

    .logsheet-head-main{
        grid-template-columns:105px minmax(0,1fr);
    }

    .logsheet-head-content{
        padding:4px 12px;
    }

    .logsheet-head-content h2{
        margin-bottom:9px;
        font-size:14px;
    }
}

@media(max-width:520px){
    .logsheet-head.logsheet-head-card{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
    }

    .logsheet-head-main{
        grid-template-columns:100px minmax(0,1fr);
    }

    .logsheet-head-card .logsheet-actions{
        align-self:start;
    }
}

@media(max-width:430px){
    .logsheet-list-card{
        grid-template-columns:100px minmax(0,1fr) 28px;
        min-height:116px;
    }

    .logsheet-head.logsheet-head-card{
        grid-template-columns:1fr;
    }

    .logsheet-head-main{
        grid-template-columns:100px minmax(0,1fr);
		padding-left: 5px;
    }

    .logsheet-head-content{
        padding:3px 8px;
    }

    .logsheet-head-content h2{
        font-size:12px;
    }

    .logsheet-head-card .logsheet-actions{
        width:100%;
        padding:0 4px 4px;
    }
}

/* =========================================================
   CARD LOGSHEET MOBILE COMPACT + META SEJAJAR
   Override final untuk index.php dan header view.php.
   ========================================================= */
.logsheet-card-meta{
    margin:0;
    padding:0;
}

.logsheet-card-meta > div{
    display:grid;
    grid-template-columns:145px 14px minmax(0,1fr);
    align-items:start;
    column-gap:0;
    margin:0;
    padding:0;
    line-height:1.28;
}

.logsheet-card-meta dt,
.logsheet-card-meta dd{
    min-width:0;
    margin:0;
    padding:0;
}

.logsheet-card-meta dt{
    grid-column:1;
    display:block;
    position:relative;
    font-weight:700;
    white-space:nowrap;
}

.logsheet-card-meta dt::after{
    content:":";
    position:absolute;
    top:0;
    left:100%;
    width:14px;
    text-align:center;
    font-weight:700;
}

.logsheet-card-meta dd{
    grid-column:3;
    overflow-wrap:anywhere;
    word-break:normal;
}

.logsheet-card-meta .profile-trigger{
    display:block;

    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#000 !important;
    font:inherit;
    font-weight:700;
    line-height:inherit;
    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}

@media (max-width:600px){
    .logsheet-list-card{
        display:grid;
        grid-template-columns:94px minmax(0,1fr) 22px;
        align-items:start;
        gap:0 7px;
        min-height:0;
        padding:6px;
        border-radius:7px;
    }
	
	.logsheet-card-logo {
	  width: 100px;
	  height: 100px;
	}

    .logsheet-list-card .logsheet-card-logo{
        grid-column:1;
        grid-row:1;
        width:90px;
        height:90px;
        margin:0;
        align-self:start;
    }

    .logsheet-list-card .logsheet-card-content{
        grid-column:2;
        grid-row:1;
        min-width:0;
        padding:0;
    }

    .logsheet-list-card .logsheet-card-content h3{
        position:static;
        margin:0 0 3px;
        padding:0;
        font-size:12px;
        line-height:1.15;
        text-align:left;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .logsheet-card-meta{
        width:100%;
        font-size:10px;
        line-height:1.18;
    }

    .logsheet-card-meta > div{
        grid-template-columns:78px 10px minmax(0,1fr);
        line-height:1.18;
    }

    .logsheet-card-meta dt::after{
        width:10px;
    }

    .logsheet-list-card .logsheet-action-menu{
        grid-column:3;
        grid-row:1;
        position:static;
        justify-self:end;
        align-self:start;
        margin-top:-2px;
    }

    .logsheet-list-card .logsheet-action-menu summary{
        width:22px;
        height:24px;
        padding:0;
        font-size:18px;
        line-height:1;
    }

    .logsheet-head.logsheet-head-card .logsheet-card-meta > div{
        grid-template-columns:78px 10px minmax(0,1fr);
    }

    .logsheet-head.logsheet-head-card .logsheet-card-meta dt::after{
        width:10px;
    }
}

@media (max-width:360px){
    .logsheet-list-card{
        grid-template-columns:84px minmax(0,1fr) 20px;
        gap:0 6px;
        padding:5px;
    }

    .logsheet-list-card .logsheet-card-logo{
        width:84px;
        height:84px;
    }

    .logsheet-list-card .logsheet-card-content h3{
        font-size:12.5px;
    }

    .logsheet-card-meta{
        font-size:9.5px;
    }

    .logsheet-card-meta > div,
    .logsheet-head.logsheet-head-card .logsheet-card-meta > div{
        grid-template-columns:72px 9px minmax(0,1fr);
    }

    .logsheet-card-meta dt::after,
    .logsheet-head.logsheet-head-card .logsheet-card-meta dt::after{
        width:9px;
    }
}

/* === Crop gambar 1:1 === */
.image-crop-modal{z-index:30000}
.image-crop-box{width:min(94vw,560px);max-width:560px;text-align:left}
.image-crop-box h3{margin:0 42px 6px 0}
.image-crop-viewport{position:relative;width:min(76vw,360px);max-width:100%;aspect-ratio:1/1;margin:16px auto;overflow:hidden;background:#111;border-radius:14px;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.image-crop-viewport.is-dragging{cursor:grabbing}
.image-crop-viewport img{position:absolute;left:50%;top:50%;max-width:none!important;max-height:none!important;user-select:none;-webkit-user-drag:none;pointer-events:none;will-change:transform,width,height}
.image-crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,rgba(255,255,255,.6) 33.3%,rgba(255,255,255,.6) 33.7%,transparent 33.9%,transparent 66.1%,rgba(255,255,255,.6) 66.3%,rgba(255,255,255,.6) 66.7%,transparent 66.9%),linear-gradient(to bottom,transparent 33.1%,rgba(255,255,255,.6) 33.3%,rgba(255,255,255,.6) 33.7%,transparent 33.9%,transparent 66.1%,rgba(255,255,255,.6) 66.3%,rgba(255,255,255,.6) 66.7%,transparent 66.9%);box-shadow:inset 0 0 0 999px rgba(0,0,0,.08)}
.image-crop-zoom-label{display:block;font-weight:700;margin-top:4px}
.image-crop-zoom{width:100%;margin:8px 0 16px;accent-color:var(--primary,#0ea5e9)}
.image-crop-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.image-crop-actions .btn{min-height:42px}
@media(max-width:600px){
 .image-crop-modal{padding:10px}
 .image-crop-box{width:100%;max-height:calc(100dvh - 20px);overflow:auto;padding:18px 14px 14px}
 .image-crop-viewport{width:min(82vw,340px);margin:12px auto}
 .image-crop-actions{display:grid;grid-template-columns:1fr 1fr}
 .image-crop-actions .btn{width:100%;padding-left:8px;padding-right:8px}
}

/* === Logo transparan dan penanda card milik pengguna === */
.site-title img,
.icon-situs,
.logo-box,
.logo-box img,
.logsheet-card-logo,
.logsheet-card-logo img,
footer img{
    background:transparent !important;
}

/* Diletakkan di bagian akhir agar tidak tertimpa style card umum. */
.logsheet-list-card.my-logsheet-card{
    background:linear-gradient(0deg, #fff1b8 0%, #fffbea 55%) !important;
    border-color:#d6a928;
    box-shadow:inset 5px 0 0 #e6a700;
}

.logsheet-list-card.my-logsheet-card:hover,
.logsheet-list-card.my-logsheet-card:focus-visible{
    background:linear-gradient(0deg, #ffe58a 0%, #fff7cf 55%) !important;
    border-color:#b98500;
    box-shadow:inset 5px 0 0 #c98d00;
}
/* === End logo transparan dan card milik pengguna === */



/* CA tidak aktif / belum terdaftar: tetap ditampilkan dengan penanda merah kecoklatan. */
#tbl_view_items tr.candidate-warning-row > td,
#tbl_view_items tr.candidate-warning-row .callsign-link,
#tbl_view_items tr.candidate-warning-row .participant-name-toggle {
    color: #9b3f2f !important;
    font-weight: 600;
}
#tbl_view_items tr.candidate-warning-row {
    background: rgba(155, 63, 47, 0.06);
}

/* Tombol berbentuk tautan di menu aksi card */
.logsheet-action-dropdown .logsheet-action-link{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:10px 12px !important;
    border:0 !important;
    border-radius:5px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#16211a !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:normal !important;
    text-align:left !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    cursor:pointer;
}
.logsheet-action-dropdown .logsheet-action-link:hover,
.logsheet-action-dropdown .logsheet-action-link:focus-visible{
    background:#edf5ef !important;
    color:#16211a !important;
}


/* Penyempurnaan aksesibilitas dan konsistensi antarmuka */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(16, 145, 201, .35);
  outline-offset: 2px;
}
button, .btn, .logsheet-action-link { touch-action: manipulation; }
.logsheet-action-dropdown .logsheet-action-link {
  width: 100%; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; text-align: left;
  font: inherit; box-shadow: none;
}
.logsheet-action-dropdown .logsheet-action-link:hover,
.logsheet-action-dropdown .logsheet-action-link:focus-visible { background: rgba(21,155,211,.10); }
.logsheet-action-dropdown a.danger, .logsheet-action-dropdown button.danger { color: #b42318; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}