body{font-family:Arial,Helvetica,sans-serif;margin:20px}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid #ddd;padding:8px}
th{background:#f6f6f6;text-align:left}
.toolbar{margin-bottom:12px}
.form-btn{display:inline-block;padding:10px 16px;background:#007bff;color:#fff;text-decoration:none;border-radius:6px;border:none;cursor:pointer;line-height:1;font-size:100%}
.table-btn{display:inline-block;padding:4px 8px;background:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer;line-height:1;font-size:90%}
.btn-danger{background:#dc3545}

/* reset native button appearance for .form-btn and .table-btn */
button.form-btn,button.table-btn{appearance:none;-webkit-appearance:none;border:none}

/* inline-form resets so buttons align with text in tables */
.inline-form{display:inline;margin:0;padding:0;border:0}
.inline-form button{margin:0;padding:3px 8px;vertical-align:middle}

/* slightly larger table button to align with inputs */
.table .table-btn{padding:3px 8px}
.pager{margin-top:12px}

/* Forms */
form{max-width:600px;background:#fafafa;padding:16px;border:1px solid #eee;border-radius:6px}
.form-row{margin-bottom:12px}
label{display:block;margin-bottom:4px;font-weight:600}
select,input[type=file],input[type=text],textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}
button{padding:8px 12px;background:#28a745;color:#fff;border:none;border-radius:4px}
.links{margin-top:12px}

.error{color:#b22222;background:#fff0f0;border:1px solid #f5c2c7;padding:8px;border-radius:6px;margin-bottom:12px}

.muted{color:#666;font-size:90%}

/* Modal confirmation */
.modal-overlay{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.45);align-items:center;justify-content:center;z-index:9999}
.modal-box{background:#fff;padding:18px;border-radius:8px;max-width:480px;box-shadow:0 8px 24px rgba(0,0,0,0.2);width:90%}
.modal-msg{margin-bottom:12px;font-size:15px;color:#111}
.modal-actions{text-align:right}
.modal-box .form-btn{background:#007bff}

/* Top navigation */
.topnav{background:#1f2937;color:#fff;padding:8px 14px;border-radius:8px;margin-bottom:18px}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px}
.topnav li{display:inline-flex;align-items:center}
.topnav li.right{margin-left:auto}
.topnav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px}
.topnav a:hover{background:rgba(255,255,255,0.06)}

/* Dropdown */
.nav-dropdown{position:relative}
.drop-toggle{background:transparent;border:none;color:inherit;cursor:pointer;padding:6px 8px;border-radius:6px;display:flex;align-items:center;gap:8px}
.drop-toggle:focus{outline:2px solid rgba(255,255,255,0.12)}
.drop-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:#111;border:1px solid #e6e6e6;border-radius:6px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:6px 0;z-index:1000}
.drop-menu a{display:block;padding:8px 12px;color:#111;text-decoration:none}
.drop-menu a:hover{background:#f6f6f6}
.nav-dropdown.open .drop-menu{display:block}
.drop-toggle svg{fill:currentColor}

@media (max-width:600px){
	.topnav ul{flex-wrap:wrap}
	.topnav li.right{order:999;width:100%;margin-top:6px}
}